API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 23rd, 2015
246
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.55 KB | None | 0 0
raw download clone embed print report
  1. !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="viewport" content = "height = device-height, width = device-width, user-scalable = no" />
  6. <title>Garage Door Opener</title>
  7. <script type="text/javascript" src="/webiopi.js"></script>
  8. <script type="text/javascript">
  9. webiopi().ready(function() {
  10. var content, content2, buttonLeft, buttonRight;
  11. content = $("#content");
  12. content2 = $("#openCloseButton");
  13. webiopi().setFunction(7,"in");
  14. webiopi().setFunction(8,"in");
  15. webiopi().setFunction(18,"in");
  16. webiopi().setFunction(17,"in");
  17.  
  18. // create an "OPEN" labeled button for GPIO 18
  19. button = webiopi().createGPIOButton(18, "");
  20. content2.append(button); // append button to content div
  21.  
  22. // create an "OPEN" labeled button for GPIO 17
  23. button = webiopi().createGPIOButton(17, "");
  24. content2.append(button); // append button to content div
  25.  
  26. // create button that calls the mousedown function below
  27. buttonLeft = webiopi().createButton("buttonLeft", "LEFT", showConfirmLeft );
  28. content.append(buttonLeft); // append button to content div
  29.  
  30. // create button that calls the mousedown function below
  31. buttonRight = webiopi().createButton("buttonRight", "RIGHT", showConfirmRight );
  32. content.append(buttonRight); // append button to content div
  33.  
  34. // this function gets called by the mousedown function below - it sets gpio7 back to 'IN'
  35. function mouseupLeft() {
  36. webiopi().setFunction(7,"in");
  37. }
  38. function mouseupRight() {
  39. webiopi().setFunction(8,"in");
  40. }
  41. // this function sets gpio7 to 'OUT' which will trip the relay. After .5 second it calls mouseup above.
  42. // hides the confirmation div and makes doge face change
  43. function mousedownLeft() {
  44. webiopi().setFunction(7,"out");
  45. document.getElementById('confirmBoxLeft').style.display = "none";
  46. document.getElementById('confirmTextLeft').style.display = "none";
  47. setTimeout(mouseupLeft, 500);
  48. }
  49. function mousedownRight() {
  50. webiopi().setFunction(8,"out");
  51. document.getElementById('confirmBoxRight').style.display = "none";
  52. document.getElementById('confirmTextRight').style.display = "none";
  53. setTimeout(mouseupRight, 500);
  54. }
  55.  
  56. // after pressing no hide the confirmation div
  57. function hideConfirmLeft() {
  58. document.getElementById('confirmBoxLeft').style.display = "none";
  59. document.getElementById('confirmTextLeft').style.display = "none";
  60. }
  61. function hideConfirmRight() {
  62. document.getElementById('confirmBoxRight').style.display = "none";
  63. document.getElementById('confirmTextRight').style.display = "none";
  64. }
  65.  
  66. // show confirmation div after pressing garage door button
  67. function showConfirmLeft() {
  68. document.getElementById('yesLeft').onclick = mousedownLeft;
  69. document.getElementById('noLeft').onclick = hideConfirmLeft;
  70. document.getElementById('confirmBoxLeft').style.display = "block";
  71. document.getElementById('confirmTextLeft').style.display = "block";
  72. document.getElementById('confirmBoxRight').style.display = "none";
  73. document.getElementById('confirmTextRight').style.display = "none";
  74. }
  75. function showConfirmRight() {
  76. document.getElementById('yesRight').onclick = mousedownRight;
  77. document.getElementById('noRight').onclick = hideConfirmRight;
  78. document.getElementById('confirmBoxRight').style.display = "block";
  79. document.getElementById('confirmTextRight').style.display = "block";
  80. document.getElementById('confirmBoxLeft').style.display = "none";
  81. document.getElementById('confirmTextLeft').style.display = "none";
  82. }
  83. // constantly refresh status to see if door is open or closed
  84. webiopi().refreshGPIO(true)
  85. });
  86.  
  87. </script>
  88.  
  89. <style type="text/css">
  90. body {
  91. font-family: Arial, Helvetica, Sans-Serif;
  92. padding: 0px;
  93. margin: 0px;
  94. background: #CCCCCC;
  95. }
  96. button {
  97. display: block;
  98. margin: 10px 10px;
  99. margin-left: auto;
  100. margin-right: auto;
  101. padding: 0px;
  102. width: 300px;
  103. height: 50px;
  104. font-size: 24pt;
  105. font-weight: bold;
  106. color: black;
  107. border-radius: 10px !important;
  108. }
  109. button#button {
  110. height: 250px !important;
  111. border-radius: 10px !important;
  112. cursor: pointer !important;
  113. }
  114.  
  115. input[type="range"] {
  116. display: block;
  117. width: 160px;
  118. height: 45px;
  119. }
  120. #gpio17.LOW {
  121. background: red url('closed.png') no-repeat center !important;
  122. float: left;
  123. width: 145px;
  124. }
  125.  
  126. #gpio17.HIGH {
  127. background: black url('open.png') no-repeat center !important;
  128. float: left;
  129. width: 145px;
  130. }
  131. #gpio18.LOW{
  132. background: red url('closed.png') no-repeat center !important;
  133. float: right;
  134. width: 145px;
  135. }
  136. #gpio18.HIGH{
  137. background: black url('open.png') no-repeat center !important;
  138. float: right;
  139. width: 145px;
  140. }
  141. #header {
  142. margin-left: auto;
  143. margin-right: auto;
  144. margin-top: 0px !important;
  145. padding-top: 0px !important;
  146. }
  147. #confirmTextLeft {
  148. margin-left: auto;
  149. margin-right: auto;
  150. padding: 0px;
  151. margin-top: 0px;
  152. display: none;
  153. }
  154. #confirmTextRight {
  155. margin-left: auto;
  156. margin-right: auto;
  157. padding: 0px;
  158. margin-top: 0px;
  159. display: none;
  160. }
  161. h2 {
  162. text-align: center;
  163. margin-top: 0px !important;
  164. margin-bottom: 10px !important;
  165. }
  166. #confirmBoxLeft {
  167. height: 60px;
  168. width: 300px;
  169. margin-left: auto;
  170. margin-right: auto;
  171. position:relative;
  172. display: none;
  173. }
  174. #confirmBoxRight {
  175. height: 60px;
  176. width: 300px;
  177. margin-left: auto;
  178. margin-right: auto;
  179. position:relative;
  180. display: none;
  181. }
  182. #yesLeft {
  183. background-color: green;
  184. float: left;
  185. }
  186. #noLeft {
  187. background-color: red;
  188. float: right;
  189. }
  190. #yesRight {
  191. background-color: green;
  192. float: left;
  193. }
  194. #noRight {
  195. background-color: red;
  196. float: right;
  197. }
  198. .confirmButton {
  199. border: 3px solid #000000;
  200. border-radius: 10px;
  201. cursor: pointer;
  202. height: 50px;
  203. width: 125px;
  204. font-size: 24pt;
  205. font-weight: bold;
  206. text-align: center;
  207. line-height: 50px;
  208. }
  209. #openCloseButton {
  210. width: 300px !important;
  211. height: 60px;
  212. position: relative;
  213. margin-left: auto;
  214. margin-right: auto;
  215. }
  216. #buttonLeft {
  217. float: left !important;
  218. width: 145px !important;
  219. height: 250px !important;
  220. }
  221. #buttonRight {
  222. float: right !important;
  223. width: 145px !important;
  224. height: 250px !important;
  225. }
  226. </style>
  227. </head>
  228. <body>
  229. <div id="header"><h2>Door Status</h2></div>
  230. <div id="openCloseButton" style="margin-left: auto; margin-right: auto; position:relative"></div>
  231. <div id="content" style="margin-left: auto; margin-right: auto; position:relative; width: 300px; height: 250px;"></div>
  232. <div id="confirmTextLeft"><h2>Left Door - Confirm</h2></div>
  233. <div id="confirmTextRight"><h2>Right Door - Confirm</h2></div>
  234. <div id="confirmBoxLeft"><div id="yesLeft" class="confirmButton">YES</div><div id="noLeft" class="confirmButton">NO</div></div>
  235. <div id="confirmBoxRight"><div id="yesRight" class="confirmButton">YES</div><div id="noRight" class="confirmButton">NO</div></div>
  236. </body>
  237. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!