php - Updating An Image on All instances of a website -
so have raspberry pi controlling garage door. pi running apache webserver. have camera connected raspberry pi , want able update images camera. have following code:
garage.html:
<html> <head> <meta charset="utf-8"> <title>the house garage controls</title> </head> <body> <form action="garage.php" method="get"> <input type="submit" value="open/close garage" style="width:1000px; height:150px;font-size:80px;border-radius: 25px; background-color: 2da3a7;" > </form> <div id="doorimage"> <img src="doorstatus.jpg" alt="garage door picture camera" height="1000" width="1000"> </div> <script src="jquery-1.10.2.js"></script> <script> $(document).ready(function(){ var $container = $("doorimage"); $container.imagefill('doorstatus.jpg') var refreshid = setinterval(function() { $container.load('doorstatus.jpg'); }, 5000); }); </script> <form action="takeimage.php" method="get"> <input type="submit" value="update picture" style="width:1000px; height:150px;font-size:80px;border-radius: 25px; background-color: 2da3a7;" > </form> </body></html> and takeimage.php takes image:
<?php $output = shell_exec('raspistill -n -o /var/www/doorstatus.jpg'); echo "output = ".$output; header("location: garage.html"); ?> when view garage.html on computer running chrome updates image when click update picture button. on android phone when on garage.html doesn't update picture unless re-open page. wondering how make devices viewing garage.html see same recent image. have been told ajax way haven't found code snippets similar.
this cache issue.
you can fix (prevent caching) example adding unique query string url.
something like:
var curdate = new date(); $container.load('doorstatus.jpg?time=' + curdate.gettime()); you configure server not cache these images.
Comments
Post a Comment