domoticzScript/camera.html at master · ayasystems/domoticzScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<!---
Este template creará una nueva página en custom que visualizará en una sola página todas las cámaras
dadas de alta en domoticz

Mas info en https://domotuto.com/?p=4597

Para cargar directamente este template en domoticz podemos ejecutar el siguiente comando

curl https://raw.githubusercontent.com/ayasystems/domoticzScript/master/camera.html --output /home/pi/domoticz/www/templates/camera.html
-->
<html>
    <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta charset="UTF-8"/>
        <meta http-equiv="expires" content="0"/>


        <title>Visor cámaras @ea4gkq</title>
	    <script>

 function updateCamera(camera){
	setTimeout(function() { update(camera); }, 2000);
 //    var element = "cam" + camera;
 // var image = document.getElementById(element);
 // image.src = image.src.split("?")[0] + "?idx="+camera+"&t=" + new Date().getTime();
  //setInterval(updateCamera(camera), 3000);
 }


  function update(camera){

     var element = "cam" + camera;
  var image = document.getElementById(element);
  image.src = image.src.split("?")[0] + "?idx="+camera+"&t=" + new Date().getTime();
  //setInterval(updateCamera(camera), 3000);
 }

	</script>
    </head>
    <body>

   <div id="mycontainer">
   </div>


 <script>
 $.getJSON( "/json.htm?type=cameras", function( data ) {
 var $text = "<div class=\"row\" id=\"camarasContainer\">";
 var i = 0;
  $.each( data.result, function( index ) {
	i = i +1;
	var idx = data.result[index].idx;
	var name = data.result[index].Name;
	var bodyWidth = $(window).width();
	var maxWidth = 520;
	if(bodyWidth<640){
		maxWidth=bodyWidth-20;
	}

	$text = $text + "<img id=\"cam"+idx+"\" name=\"cam_"+name+"\" alt=\"cam_"+name+"\" onerror=\"updateCamera('"+idx+"')\" onload=\"updateCamera('"+idx+"')\" style=\"max-width:"+maxWidth+"px\" src=\"/camsnapshot.jpg?idx="+idx+"&t=" + new Date().getTime() +"\" >";
	if(i>2){
		$text = $text +"</div><div class=\"row\" id=\"camarasContainer\">";
		i = 0;
	}
  });
  $text = $text +"</div>";
 $("#mycontainer").html($text);
});
 </script>
    </body>
</html>