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:
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:
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>
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 ?
te klikken
Post made via mobile device ]
