/
index.html
127 lines (102 loc) · 2.67 KB
/
index.html
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
<title>Security PI</title>
<script>
function deleteGallery()
{
var conf = confirm("Are you sure you want to delete all captured images?");
if(conf == false){
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
showGallery();
}
}
xmlhttp.open("DELETE","images.php",true);
xmlhttp.send();
}
function jsonToTable(json){
var result = "";
var images = eval("(" + json + ")");
var result = "<html>";
result+= "<table cellspacing=\"0\" cellpadding=\"2\" width=\"600\">";
result+= "<tr>";
var count = 0;
for(var i=0;i<images.length;i++){
result+= "<td valign=\"middle\" align=\"center\"><a href=\""+images[i].image+"\">";
result+= "<img src=\""+images[i].thumbnail+"\" border=\"0\" />";
result+= "</a></td>";
if ( ++count % 5 == 0 ) { result+= "</tr><tr>"; }
}
result+= "</tr>";
result+= "</table>";
document.getElementById("gallery").innerHTML = result;
}
function showGallery()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
jsonToTable(xmlhttp.responseText);
}
}
xmlhttp.open("GET","images.php",true);
xmlhttp.send();
}
function handleCapturing(enabled)
{
if (enabled.length==0)
{
enabled=false;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("status").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(enabled ? "PUT" : "DELETE","capturer.php",true);
xmlhttp.send();
}
function handleCapturingCBClick(cb) {
handleCapturing(cb.checked);
}
window.onload = function()
{
showGallery();
};
</script>
</head>
<body>
<div style="width:100%">
<div style="background-color:#CC99FF;">
<b style="font-size:150%">Security PI</b>
</div>
<div style="background-color:#FFCCFF;
height:200px;width:150px;float:left;">
<b>Menu</b><br>
<button type="button" id="refresh" onclick="showGallery()">Refresh</button><br>
<button type="button" id="delete" onclick="deleteGallery()">Delete</button><br>
<input type="checkbox" name="imgcapture" value="on" onclick='handleCapturingCBClick(this);'>Capturing Enabled<br>
<p>Capturing status: </p><label id="status"></label>
</div>
<div style="background-color:#eeeeee;float:left;">
<h2>Image Gallery </h2>
<div id="gallery"></div>
</div>
<div style="background-color:#CC99FF;clear:both">
<center>
Raspberry PI Security System
</center>
</div>
</div>
</body>
</html>