So I have a Raspberry Pi controlling my Garage door. The Pi is running an apache webserver. I also have a camera connected to the raspberry pi and I want to be able to update the images from the camera. Currently I have the 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 From 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 an image:
<?php
$output = shell_exec('raspistill -n -o /var/www/doorStatus.jpg');
echo "Output = ".$output;
header("Location: garage.html");
?>
When I view garage.html on my computer running chrome it updates the image when I click the update picture button. However on my android phone when I am on garage.html it doesn't update the picture unless I re-open the page. I am wondering how I would make it so that all devices viewing garage.html would see the same most recent image. I have been told that AJAX is the way to do this but I haven't found any code snippets that do something similar.
This is probably a cache issue.
You can fix that (prevent caching) for example by adding a unique query string to the url.
Something like:
You could also configure your server to not cache these images.