API tools faq
paste
Guest User

frontpage.html

a guest
Jan 13th, 2015
1,093
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Domoticz Tablet</title>
  6.  
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12. <link rel="shortcut icon" href="/favicon.ico">
  13.  
  14. <link rel="apple-touch-icon" href="icons/touch-icon-iphone.png">
  15. <link rel="apple-touch-icon" sizes="76x76" href="icons/touch-icon-ipad.png">
  16. <link rel="apple-touch-icon" sizes="120x120" href="icons/touch-icon-iphone-retina.png">
  17. <link rel="apple-touch-icon" sizes="152x152" href="icons/touch-icon-ipad-retina.png">
  18. <link rel="apple-touch-icon" sizes="180x180" href="icons/touch-icon-iphone-6-plus.png">
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Orbitron:700' rel='stylesheet' type='text/css'>
  21. <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
  22. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  23. <link rel="stylesheet" href="frontpage.css">
  24. </head>
  25.  
  26. <body bgcolor="#000">
  27.  
  28.  
  29.  
  30.  
  31. <div id="cnt">
  32. <div>
  33. <div id="frame">
  34. <div id="cell1">--</div><div id="desc_cell1">cell1</div>
  35. <div id="cell2">--</div><div id="desc_cell2">cell2</div>
  36. </div>
  37. <div id="frame">
  38. <div id="cell3">--</div><div id="desc_cell3">cell3</div>
  39. </div>
  40. <div id="frame">
  41. <div id="cell3a">--</div><div id="desc_cell3a">cell3a</div>
  42. </div>
  43. <div id="frame">
  44. <div id="cell4">--</div><div id="desc_cell4">cell4</div>
  45. <div id="cell5">--</div><div id="desc_cell5">cell5</div>
  46. </div>
  47. </div>
  48.  
  49.  
  50. <div>
  51. <div id="frame">
  52. <div id="cell6">--</div><div id="desc_cell6">cell6</div>
  53. </div>
  54. <div id="frame">
  55. <div id="cell7">--</div><div id="desc_cell7">cell7</div>
  56. </div>
  57. <div id="frame">
  58. <div id="cell8">--</div><div id="desc_cell8">cell8</div>
  59. </div>
  60. <div id="frame">
  61. <div id="cell9">--</div><div id="desc_cell9">cell9</div>
  62. </div>
  63. <div id="frame">
  64. <div id="cell10">--</div><div id="desc_cell10">cell10</div>
  65. </div>
  66. </div>
  67.  
  68.  
  69. <div>
  70. <div id="frame">
  71. <div id="cell11">--</div><div id="desc_cell11">cell11</div>
  72. </div>
  73. <div id="frame">
  74. <div id="cell12">--</div><div id="desc_cell12">cell12</div>
  75. </div>
  76. <div id="frame">
  77. <div id="cell13">--</div><div id="desc_cell13">cell12</div>
  78. </div>
  79. <div id="frame">
  80. <div id="cell14">--</div><div id="desc_cell14">cell14</div>
  81. </div>
  82. <div id="frame">
  83. <div id="cell15">--</div><div id="desc_cell15">cell15</div>
  84. </div>
  85. </div>
  86.  
  87.  
  88. <div>
  89. <div id="frame">
  90. <div id="cell16">--</div><div id="desc_cell16">cell16</div>
  91. </div>
  92. <div id="frame">
  93. <div id="cell17">--</div><div id="desc_cell17">cell17</div>
  94. </div>
  95. <div id="frame">
  96. <div id="cell18">--</div><div id="desc_cell18">cell18</div>
  97. </div>
  98. <div id="frame">
  99. <div id="cell19">--</div><div id="desc_cell19">cell19</div>
  100. </div>
  101. <div id="frame">
  102. <div id="cell20">--</div><div id="desc_cell20">cell20</div>
  103. </div>
  104. </div>
  105. </div>
  106.  
  107. </div>
  108.  
  109.  
  110. <script type="text/javascript" charset="utf-8">
  111. function RefreshData()
  112. {
  113. clearInterval($.refreshTimer);
  114. var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
  115. $.getJSON(jurl,
  116. {
  117. format: "json"
  118. },
  119. function(data) {
  120. if (typeof data.result != 'undefined') {
  121.  
  122. $.each(data.result, function(i,item){
  123. for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
  124. if( $.PageArray[ii][0] === item.idx ) { // Domoticz idx number
  125. var vtype= $.PageArray[ii][1]; // Domotitcz type (like Temp, Humidity)
  126. var vlabel= $.PageArray[ii][2]; // cell number from HTML layout
  127. var vdesc= $.PageArray[ii][3]; // description
  128. var vattr= $.PageArray[ii][4]; // extra css attributes
  129. var valarm= $.PageArray[ii][5]; // alarm value to turn text to red
  130. var vdata= item[vtype]; // current value
  131. if (typeof vdata == 'undefined') {
  132. vdata="??";
  133. } else {
  134. // remove too much text
  135. vdata=new String(vdata).split("Watt",1)[0];
  136. vdata=new String(vdata).split("kWh",1)[0];
  137. vdata=new String(vdata).split("m3",1)[0];
  138. vdata=new String(vdata).split(" Level:",1)[0];
  139. vdata=new String(vdata).replace("Set","On");
  140. vdata=new String(vdata).replace("true","protected");
  141. }
  142.  
  143.  
  144.  
  145. // replace forecast (text) with an image
  146. if (vdata == 'Sunny' ) {
  147. vdata=new String(vdata).replace( "Sunny","<img src=icons/10day-sun.png width=204 height=204>");
  148. }
  149. if (vdata == 'Partly Cloudy' ) {
  150. vdata=new String(vdata).replace( "Partly Cloudy","<img src=icons/04day-partlycloudy.png width=204 height=204>");
  151. }
  152. if (vdata == 'Cloudy' ) {
  153. vdata=new String(vdata).replace( "Cloudy","<img src=icons/01day-cloudy.png width=204 height=204>");
  154. }
  155. if (vdata == 'Clear' ) {
  156. vdata=new String(vdata).replace( "Clear","<img src=icons/10day-sun.png width=204 height=204>");
  157. }
  158. if (vdata == 'Rain' ) {
  159. vdata=new String(vdata).replace( "Rain","<img src=icons/05day-rain.png width=204 height=204>");
  160. }
  161. if (vdata == 'Snow' ) {
  162. vdata=new String(vdata).replace( "Snow","<img src=icons/07day-snow.png width=204 height=204>");
  163. }
  164. if (vdata == 'Fog' ) {
  165. vdata=new String(vdata).replace( "Fog","<img src=icons/02day-fog.png width=204 height=204>");
  166. }
  167. if (vdata == 'Hail' ) {
  168. vdata=new String(vdata).replace( "Hail","<img src=icons/03day-hail.png width=204 height=204>");
  169. }
  170. if (vdata == 'Thunderstom' ) {
  171. vdata=new String(vdata).replace( "Thunderstorm","<img src=icons/08day-thunderstorm.png width=204 height=204>");
  172. }
  173. if (vdata == 'Sleet' ) {
  174. vdata=new String(vdata).replace( "Sleet","<img src=icons/06day-sleet.png width=204 height=204>");
  175. }
  176.  
  177. // rounding the numers into 2 digits after the comma
  178. if(item.idx == '1' || item.idx == '5'){
  179. vdata=new String(vdata).split("%",1)[0];
  180. vdata=Math.round(vdata);
  181. }
  182. if(item.idx == '107'){
  183. vdata=Math.round(vdata * 100) / 100;
  184. alarmcss=';background-image: url(\'../icons/apple.png\');background-repeat: repeat-x;';
  185.  
  186.  
  187. }
  188.  
  189.  
  190.  
  191.  
  192. // create switchable value when item is switch
  193. switchclick='';
  194. if (vdata == 'Off' ) {
  195. switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');"';
  196. }
  197. if (vdata == 'On' ) {
  198. switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');"';
  199. }
  200.  
  201. // change background color, depending on sunset and sunrise using idx 37: virtual switch named IsDonker
  202. if(item.idx == '37' && vdata == 'On'){
  203. document.body.style.backgroundColor="#404040" // night
  204. }
  205. if(item.idx == '37' && vdata == 'Off'){
  206. document.body.style.backgroundColor="#000000" // day
  207. }
  208.  
  209.  
  210.  
  211.  
  212. // if alarm threshold is defined, make value red
  213. //alarmcss='';
  214. //if (typeof valarm != 'undefined') {
  215. // if ( eval(vdata + valarm)) { // note orig: vdata > alarm
  216. // alarmcss=';color:red;';
  217. // }
  218. //}
  219.  
  220. // if switch is on, make green, if off, make red
  221. alarmcss='';
  222. if (vdata == 'On') { // note orig: vdata > alarm
  223. alarmcss=';color:green;';
  224. vdata = 'Aan';
  225. }
  226.  
  227. // set the colors for the OFF switch to RED
  228. if (vdata == 'Off') { // note orig: vdata > alarm
  229. alarmcss=';color:red;';
  230. vdata = 'Uit';
  231. }
  232. // set the text to ON instead of displaying the value for idx 107: the Fibaro Wall Plug
  233. if(item.idx == '107' && vdata > 40){
  234. vdata='Aan';
  235. alarmcss=';color:green;';
  236. }
  237. if(item.idx == '107' && vdata < 40 && vdata > 0.9){
  238. vdata='Uit';
  239. alarmcss=';color:red;';
  240. }
  241.  
  242.  
  243.  
  244. // set the background color of the DIV when a certain limit has been reached
  245. if(item.idx == '1' && vdata > 50){
  246. alarmcss=';background-color:#FF0000;';
  247. }
  248. if(item.idx == '5' && vdata > 50){
  249. alarmcss=';background-color:#FF0000;';
  250. }
  251. if(item.idx == '31' && vdata < 0){
  252. alarmcss=';background-color:#0000FF;';
  253. }
  254.  
  255.  
  256.  
  257. // scene alle verlichting uit: http://192.168.0.100:8080/json.htm?type=command&param=switchscene&idx=2&switchcmd=ON
  258.  
  259. // if extra css attributes. Make switch not switchable when it is protected.
  260. if (typeof vattr == 'undefined') {
  261. if (item.Protected == true) {
  262. $('#'+vlabel).html('<div onClick="lightbox_open();" style='+alarmcss+'>'+vdata+'</div>');
  263. } else {
  264. $('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
  265. }
  266. }
  267. if (item.Protected == true) {
  268. $('#'+vlabel).html( '<div onClick="lightbox_open();" style='+vattr+alarmcss+'>'+vdata+'</div>');
  269. } else {
  270. $('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
  271. }
  272.  
  273.  
  274. $('#desc_'+vlabel).html(vdesc);
  275. }
  276. }
  277. });
  278. }
  279. });
  280. $.refreshTimer = setInterval(RefreshData, 8000);
  281. }
  282.  
  283. // ############################################################################################################
  284. // #### vvvvv USER VALUES below vvvvv #######
  285. // ############################################################################################################
  286.  
  287. $(document).ready(function() {
  288. $.roomplan=4; // define roomplan in Domoticz and create items below.
  289. $.domoticzurl="http://192.168.0.100:8080";
  290. //format: idx, value, label, description, [override css], [alarm value]
  291. $.PageArray = [
  292. ['1', 'Data', 'cell1', 'Geheugen RPi (%)'],
  293. ['5', 'Data', 'cell2', 'CPU RPi (%)'],
  294. ['31', 'ForecastStr', 'cell3', 'Weersvoorspelling'],
  295. ['31', 'Temp', 'cell3a', 'Buitentemperatuur'],
  296. ['107', 'CounterToday', 'cell4', 'Pomp vandaag (kWh)',],
  297. ['107', 'Usage', 'cell5', 'Pomp',],
  298.  
  299. ['11', 'Status', 'cell6', 'Lamp voor',],
  300. ['14', 'Status', 'cell7', 'Lamp lage kast',],
  301. ['10', 'Status', 'cell8', 'Lamp achter'],
  302. ['13', 'Status', 'cell9', 'Lamp subwoofer'],
  303. ['12', 'Status', 'cell10', 'Lamp hoge kast'],
  304.  
  305. ['30', 'Status', 'cell11', 'iPhone Marco'],
  306. ['74', 'Level', 'cell12', 'Spots uitbouw %'],
  307. ['74', 'Status', 'cell13', 'Spots uitbouw'],
  308. ['40', 'Status', 'cell14', 'Spots voortuin'],
  309. ['103', 'Status', 'cell15', 'Spots achtertuin'],
  310.  
  311. ['38', 'Status', 'cell16', 'iPhone Karin'],
  312. ['31', 'Temp', 'cell17', 'Buitentemperatuur (&deg;C)'],
  313. ['31', 'Humidity', 'cell18', 'Luchtvochtigheid (%)'],
  314. ['8', 'Status', 'cell19', 'Slaapkamer'],
  315. ['16', 'Status', 'cell20', 'Badkamer'],
  316. ['37', 'Status', 'cell00', 'IsDonker'],
  317. ];
  318. // added the last line to be able to use this to know when the sun sets or the sun rises
  319.  
  320. // ############################################################################################################
  321. // #### ^^^^^ USER VALUES above ^^^^^ #######
  322. // ############################################################################################################
  323.  
  324. RefreshData();
  325.  
  326.  
  327. });
  328.  
  329.  
  330. function SwitchToggle(idx, switchcmd)
  331. {
  332. console.log('function called');
  333. $.ajax({
  334. url: "json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=Level",
  335. async: false,
  336. dataType: 'json',
  337. success: function(){
  338. console.log('SUCCES');
  339. },
  340. error: function(){
  341. console.log('ERROR');
  342. }
  343. });
  344. RefreshData();
  345. }
  346. </script>
  347.  
  348. </body>
  349. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!