24 lines
931 B
HTML
24 lines
931 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Control LED light</h1>
|
||
|
|
<p><input type="checkbox" id="light"></p>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> <!-- include socket.io client side script -->
|
||
|
|
<script>
|
||
|
|
var socket = io(); //load socket.io-client and connect to the host that serves the page
|
||
|
|
window.addEventListener("load", function(){ //when page loads
|
||
|
|
var lightbox = document.getElementById("light");
|
||
|
|
lightbox.addEventListener("change", function() { //add event listener for when checkbox changes
|
||
|
|
socket.emit("light", Number(this.checked)); //send button status to server (as 1 or 0)
|
||
|
|
});
|
||
|
|
});
|
||
|
|
socket.on('light', function (data) { //get button status from client
|
||
|
|
document.getElementById("light").checked = data; //change checkbox according to push button on Raspberry Pi
|
||
|
|
socket.emit("light", data); //send push button status to back to server
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|