Итак, у меня есть малина, контролирующая мою дверь гаража. На Pi работает веб-сервер apache. У меня также есть камера, подключенная к малине pi, и я хочу иметь возможность обновлять изображения с камеры. В настоящее время у меня есть следующий код:Обновление изображения во всех экземплярах веб-сайта
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>
И takeImage.php принимает изображение:
<?php
$output = shell_exec('raspistill -n -o /var/www/doorStatus.jpg');
echo "Output = ".$output;
header("Location: garage.html");
?>
Когда я осматриваю garage.html на мой компьютер, работающий под хром обновляет изображение, когда я нажимаю кнопку обновления изображения. Однако на моем телефоне Android, когда я нахожусь на гараже.html, он не обновляет картинку, если я не открою страницу. Мне интересно, как бы я сделал это так, чтобы все устройства, просматривающие гараж.html, увидели то же самое последнее изображение. Мне сказали, что AJAX - это способ сделать это, но я не нашел фрагментов кода, которые делают что-то подобное.
Это работает на обоих устройствах! Благодаря! Однако мне все еще нужно обновить страницу, чтобы она вступила в силу. например, если я делаю снимок на своем компьютере, мне нужно обновить свой телефон, чтобы он появился. Возможно ли это сделать обновление? Я предполагаю, что здесь мне нужно будет начать читать AJAX, если это не быстрое решение. –
@ sTr8_Struggin '.load()' на самом деле является вызовом ajax. Но у вас есть некоторые несоответствия здесь, вы начинаете с тега изображения, и после вашего первого вызова ajax вы заменили это html-изображение реальным изображением. Вместо этого вы должны заменить атрибут 'src' вашего тега изображения, а не полное содержимое контейнера. – jeroen
@ sTr8_Struggin Обратите внимание, что если вы хотите изменить атрибут 'src', вы должны позволить' .load() 'идти и использовать более полный метод ajax, например' $ .get() 'или' $ .ajax() '. – jeroen