Userbase

Ik ben, nu ik wat meer vrije tijd heb, terug bezig met mijn Raspberry Pi.
Wat ik dus aan het maken ben is dat we hier het kippenhok kunnen open en dicht laten gaan en ook het licht erin kunnen aandoen/uitdoen.
Dit doe ik met behulp van WebioPi en het werkt ook nog.

Voor WebioPi heb ik nu een webpagina (index.html) gemaakt zodat er 2 simpele knoppen opstaan zoals hieronder te zien is:

Afbeelding

Dit werkt al (ik kan de 2 relais bedienen), maar wat ik nu zou willen is dat de beelden die de cameramodule van de raspberry Pi maakt ook op die webpagina komen, bijvoorbeeld onder de 2 knoppen.

De beelden zie ik ook al via de camera op een andere webpagina met behulp van MJPG-streamer,
dus als ik naar 192.168.1.6:8080 ga dan zie ik deze pagina:

Afbeelding

Dus volgens mij moet ik de index pagina van WebioPi aanpassen zodat daar de beelden van MJPG-streamer opkomen.
De vraag is hoe kan ik dit het beste doen ?

WebioPi index.html:

Code: Selecteer alles

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> 
        <title>WebIOPi | Kippenhok</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {

		webiopi().setFunction(0,"out");
		webiopi().setFunction(1,"out");

                var content, button;
                content = $("#content");
                        
		button = webiopi().createGPIOButton(0,"Deur");
                content.append(button); // append button to content div
		
		button = webiopi().createGPIOButton(1,"Licht");
                content.append(button); // append button to content div                       

		webiopi().refreshGPIO(true);	

	
        });
                 </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }
                
                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }
                
                .LOW {
                        background-color: White;
                }
                
                .HIGH {
                        background-color: Green;
                }
        </style>
</head>
<body>
        <div id="content" align="center"></div>
</body>
</html>

En op de pagina van Mjpg-streamer staan bij static, stream, etc. source snippets:

Static: <img src="/?action=snapshot" />
Stream: <img src="/?action=stream" />
Java: <applet code="com.charliemouse.cambozola.Viewer" archive="/cambozola.jar" width="512" height="384">
<param name="url" value="/?action=stream"/>
</applet>

Javascript: http://192.168.1.6:8080/javascript_simple.html
Videolan: http://192.168.1.6:8080/?action=stream

Dus ik was al aan het denken dat je die source snippets kan integreren op de index.html pagina van webiopi.

Dus de vraag is hoe ? Of wat is de beste manier, want het moet zichtbaar zijn op een smartphone ?

Je hebt toch alles wat je moet hebben... je moet alléén twee stukjes HTML samenvoegen.

De applet tag plaats je dus gewoon bij in de body van je index.html

Ik weet dat het niet veel is, maar toch geraak ik er niet uit,
als ik wat aanpas dan krijg ik een kader op mijn pagina met een foutmelding.

EDIT: Gelukt, ik heb de stream op de pagina staan, nu alleen nog in het midden krijgen

EDIT2: Het is streaming venster staat ook in het midden, maar het volgende probleem heb ik nu.
Als ik het adres intyp in m'n browser op mijn smartphone dan zie ik geen camera beeld, ik zie wel de 2 knoppen, maar de browser blijft laden :s

Zo ziet het eruit in firefox:

Afbeelding

En dit is nu de code:

Code: Selecteer alles

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> 
        <title>WebIOPi | Kippenhok</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {

		webiopi().setFunction(0,"out");
		webiopi().setFunction(1,"out");

                var content, button;
                content = $("#content");
                        
		button = webiopi().createGPIOButton(0,"Deur");
                content.append(button); // append button to content div
		
		button = webiopi().createGPIOButton(1,"Licht");
                content.append(button); // append button to content div                       

		webiopi().refreshGPIO(true);	

	
        });
                 </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }
                
                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }
                
                .LOW {
                        background-color: White;
                }
                
                .HIGH {
                        background-color: Green;
                }
        </style>

<center><img src=http://192.168.1.6:8080/?action=stream width=752></center>



</head>
<body>
        <div id="content" align="center"></div>
</body>
</html>

Het is wel een Java applet die voor de viewer zorgt... ben je wel zeker dat je smartphone dat kan (ik betwijfel het).

Ik heb net een test gedaan, als ik naar de pagina ga van MJPG-streamer (dus 192.168.1.6:8080) dan kan ik selecteren wat ik wil zoals java, javascript, stream, static, etc.
Stream werkt niet op de smartphone, maar javascript en static gaan wel, alhoewel static gewoon een snapshot is.
Dus in principe zou ik javascript wel moeten kunnen laten werken op een smartphone.

Edit: het enigste probleem is dat ik niet weet hoe ik dat javascript moet integreren op de webiopi pagina want als ik dan ga kijken bij dat javascript dan staat alleen dit er: http://192.168.1.6:8080/javascript_simple.html
Als ik dit adres in de browser ingeef dan zie ik de beelden dus in 1080P zoals het ingesteld is bij mjpg-streamer.

Misschien onnozel maar een iframe?

Onnozel of niet ik zie toch al iets op mijn smartphone, het enige nadeel is dat het camerabeeld te groot is voor het scherm want ik kan scrollen in het camerabeeld.

Net ook eens geprobeerd met:

scrolling="no"></iframe> ipv scrolling="auto"></iframe>

maar dan staat er maar de helft op het scherm, het zal wel zijn omdat de video uitgang op 1080P staat, dan moet ik deze eens verlagen.

EDIT:

Heb nog wat aanpassingen gedaan, hierbij het iframe code gedeelte:

Code: Selecteer alles

<center style="margin-left: 10px; margin-right: 10px; margin-top: 20px;">
<iframe
 src="http://192.168.1.6:8080/javascript_simple.html"
 align="top"
 frameborder="0"
 height="600"
 width="800"
 marginheight="0"
 marginwidth="0"
 scrolling="no"></iframe>
</center>

En ik heb de resolutie ook verlaagd van de camera zelf, naar 800*600.
Het beeld is nog altijd iets te groot voor het smartphone scherm, maar het is al beter.

Het beeld zou zich zelf moeten kunnen aanpassen aan het scherm,
als je op een pc kijkt zou het groot moeten zijn,
op een smartphone zou het aangepast moeten worden aan het scherm van de smartphone.

Een soort full screenmodus zoals in youtube dus. Ik vrees dat het iframe dit moeilijk zal maken.

[ Afbeelding

Post made via mobile device ]

Fullscreen ook niet, maar zoals het nu is op de pc, zo zou het ook op de smartphone moeten zijn.

Kijk maar eens naar het pc voorbeeld.

Edit: En zo is het nu op m'n smartphone, zoals je kan zien zijn de knoppen ook wat verschoven want ze staan links van het scherm.

Ik heb ooit eens een scriptje aangepast wat alarm slaat van zodra gedurende x tijd een bepaald aantal decibels overschreden wordt. Zou je kunnen gebruiken als leg detector. Mijn hennen maken serieus wat herrie .....

En ja ik heb al eens een raspberry in het nabij gelegen tuinhuis gezet met twee el cheapo Microsoft cams en mjpgstreamer .... die duwde ik dan naar mijn zoneminder doos.
Nu hangt daar een deftige CCTV cam boven de deur van het tuinhuis.

Userbase

Streaming video of snapshots op webpagina

Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina

Re: Streaming video of snapshots op webpagina