forked from commadelimited/jQuery-Mobile-Boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·122 lines (100 loc) · 4.98 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
<!doctype html>
<html>
<head>
<title> Teague Garage </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Home screen icon Mathias Bynens mathiasbynens.be/notes/touch-icons -->
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- For nokia devices and desktop browsers : -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
<meta http-equiv="cleartype" content="on">
<!-- jQuery Mobile CSS bits -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.min.css" />
<!-- Custom css -->
<!-- <link rel="stylesheet" href="css/custom.css" /> -->
<!-- Javascript includes -->
<script type="text/javascript" src="/webiopi.js"></script>
<!-- Startup Images for iDevices -->
<script>(function(){var a;if(navigator.platform==="iPad"){a=window.orientation!==90||window.orientation===-90?"images/startup-tablet-landscape.png":"images/startup-tablet-portrait.png"}else{a=window.devicePixelRatio===2?"images/startup-retina.png":"images/startup.png"}document.write('<link rel="apple-touch-startup-image" href="'+a+'"/>')})()</script>
<!-- The script prevents links from opening in mobile safari. https://gist.github.com/1042026 -->
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
<script type="text/javascript">
webiopi().ready(function() {
var content, content2, button;
content = $("#content");
content2 = $("#openCloseButton");
checkStatus(true);
webiopi().setFunction(7,"in");
webiopi().setFunction(18,"in");
// create an "OPEN" labeled button for GPIO 18
label = webiopi().createGPIOLabel(18, "");
content2.append(label); // append button to content div
// create button that calls the mousedown function below
button = webiopi().createButton("button", "GARAGE DOOR", showConfirm );
content.append(button); // append button to content div
// constantly refresh status to see if door is open or closed
webiopi().refreshGPIO(true)
});
function checkStatus(to) {
if ($('#gpio18').hasClass('LOW')) {
$("#gpio18").html('CLOSED');
} else {
$("#gpio18").html('OPEN');
}
if (typeof to != "undefined")
{
setTimeout(checkStatus,1000)
}
}
// show confirmation div after pressing garage door button
function showConfirm() {
confirmDialog("Do you really want to open the Garage?", function() {
// user has confirmed, do stuff
webiopi().setFunction(7,"out");
setTimeout(function() {
webiopi().setFunction(7,"in")
}, 500);
setTimeout(function() {
webiopi().callMacro("snapLastAction");
}, 13000);
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Teague Garage</h1>
</div>
<div data-role="content">
<h3 class="ui-bar ui-bar-a ui-corner-all">Door Status</h3>
<div id="openCloseButton"></div>
<div id="content"></div>
<center>
<a href="#latestPhoto" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Latest Photo</a>
<a href="#lastOpenClose" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Latest Open/Close</a>
</center>
<div data-role="popup" id="latestPhoto" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<!-- <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="./webcam/latest.jpg" alt="Latest"> -->
</div>
<div data-role="popup" id="lastOpenClose" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<!-- <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="./webcam/latest.jpg" alt="Latest"> -->
</div>
</div>
<div data-role="footer" data-position="fixed">
<p> © 2015 - Teague Garage</p>
</div>
</div>
</body>
</html>