API tools faq
paste
Guest User

frontpage.html

a guest
Jan 6th, 2015
561
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.04 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. <link href='http://fonts.googleapis.com/css?family=Orbitron:700' rel='stylesheet' type='text/css'>
  7. <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
  8. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  9. <script src="skycons.js"></script>
  10. <link rel="stylesheet" href="frontpage.css">
  11.  
  12. </head>
  13. <body bgcolor="#000">
  14.  
  15. <div id="cnt">
  16.  
  17. <div>
  18. <div id="frame">
  19. <div id="cell1">--</div><div id="desc_cell1">cell1</div>
  20. <div id="cell2">--</div><div id="desc_cell2">cell2</div>
  21. </div>
  22. <div id="frame">
  23. <div id="cell3">--</div><div id="desc_cell3">cell3</div>
  24. </div>
  25.  
  26. <div id="frame">
  27. <div id="cell4">--</div><div id="desc_cell4">cell4</div>
  28. <div id="cell5">--</div><div id="desc_cell5">cell5</div>
  29. </div>
  30. </div>
  31.  
  32.  
  33. <div>
  34. <div id="frame">
  35. <div id="cell6">--</div><div id="desc_cell6">cell6</div>
  36. </div>
  37. <div id="frame">
  38. <div id="cell7">--</div><div id="desc_cell7">cell7</div>
  39. </div>
  40. <div id="frame">
  41. <div id="cell8">--</div><div id="desc_cell8">cell8</div>
  42. </div>
  43. <div id="frame">
  44. <div id="cell9">--</div><div id="desc_cell9">cell9</div>
  45. </div>
  46. <div id="frame">
  47. <div id="cell10">--</div><div id="desc_cell10">cell10</div>
  48. </div>
  49. </div>
  50.  
  51.  
  52.  
  53.  
  54. <div>
  55. <div id="frame">
  56. <div id="cell11">--</div><div id="desc_cell11">cell11</div>
  57. </div>
  58.  
  59. <div id="frame">
  60. <div id="cell12">--</div><div id="desc_cell12">cell12</div>
  61. </div>
  62.  
  63. <div id="frame">
  64. <div id="cell13">--</div><div id="desc_cell13">cell12</div>
  65. </div>
  66.  
  67. <div id="frame">
  68. <div id="cell14">--</div><div id="desc_cell14">cell14</div>
  69. </div>
  70. <div id="frame">
  71. <div id="cell15">--</div><div id="desc_cell15">cell15</div>
  72. </div>
  73. </div>
  74.  
  75. <div>
  76. <div id="frame">
  77. <div id="cell16">--</div><div id="desc_cell16">cell16</div>
  78. </div>
  79. <div id="frame">
  80. <div id="cell17">--</div><div id="desc_cell17">cell17</div>
  81. </div>
  82. <div id="frame">
  83. <div id="cell18">--</div><div id="desc_cell18">cell18</div>
  84. </div>
  85. <div id="frame">
  86. <div id="cell19">--</div><div id="desc_cell19">cell19</div>
  87. </div>
  88. <div id="frame">
  89. <div id="cell20">--</div><div id="desc_cell20">cell20</div>
  90. </div>
  91. </div>
  92.  
  93. </div>
  94.  
  95.  
  96. <script type="text/javascript" charset="utf-8">
  97. function RefreshData()
  98. {
  99. clearInterval($.refreshTimer);
  100. var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
  101. $.getJSON(jurl,
  102. {
  103. format: "json"
  104. },
  105. function(data) {
  106. if (typeof data.result != 'undefined') {
  107.  
  108. $.each(data.result, function(i,item){
  109. for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
  110. if( $.PageArray[ii][0] === item.idx ) { // Domoticz idx number
  111. var vtype= $.PageArray[ii][1]; // Domotitcz type (like Temp, Humidity)
  112. var vlabel= $.PageArray[ii][2]; // cell number from HTML layout
  113. var vdesc= $.PageArray[ii][3]; // description
  114. var vattr= $.PageArray[ii][4]; // extra css attributes
  115. var valarm= $.PageArray[ii][5]; // alarm value to turn text to red
  116. var vdata= item[vtype]; // current value
  117. if (typeof vdata == 'undefined') {
  118. vdata="??";
  119. } else {
  120. // remove too much text
  121. vdata=new String(vdata).split("Watt",1)[0];
  122. vdata=new String(vdata).split("kWh",1)[0];
  123. vdata=new String(vdata).split("m3",1)[0];
  124. vdata=new String(vdata).split(" Level:",1)[0];
  125. vdata=new String(vdata).replace("Set","On");
  126. }
  127.  
  128. if (vdata == 'Sunny' ) {
  129. vdata=new String(vdata).replace( "Sunny","Zon");
  130. }
  131. if (vdata == 'Partly Cloudy' ) {
  132. vdata=new String(vdata).replace( "Partly Cloudy","Deels bewolkt");
  133. }
  134. if (vdata == 'Cloudy' ) {
  135. vdata=new String(vdata).replace( "Cloudy","$<canvas id=cloudy height=224 width=224></canvas>");
  136.  
  137. }
  138. if (vdata == 'Clear' ) {
  139. vdata=new String(vdata).replace( "Clear","Helder");
  140. }
  141. if (vdata == 'Rain' ) {
  142. vdata=new String(vdata).replace( "Rain","Regen");
  143. }
  144. if (vdata == 'Snow' ) {
  145. vdata=new String(vdata).replace( "Snow","Sneeuw");
  146. }
  147. if (vdata == 'Fog' ) {
  148. vdata=new String(vdata).replace( "Fog","Nevel");
  149. }
  150. if (vdata == 'Hail' ) {
  151. vdata=new String(vdata).replace( "Hail","Hagel");
  152. }
  153. if (vdata == 'Thunderstom' ) {
  154. vdata=new String(vdata).replace( "Thunderstorm","Onweer");
  155. }
  156. if (vdata == 'Sleet' ) {
  157. vdata=new String(vdata).replace( "Sleet","Ijzel");
  158. }
  159.  
  160.  
  161.  
  162.  
  163.  
  164. if(item.idx == '1' || item.idx == '5'){
  165. vdata=new String(vdata).split("%",1)[0];
  166. vdata=Math.round(vdata);
  167. }
  168.  
  169. if(item.idx == '107'){
  170. vdata=Math.round(vdata * 10) / 10;
  171. }
  172.  
  173.  
  174. if(item.idx == '30' || item.idx == '38'){
  175. vdata= vdata + ' ';
  176. }
  177.  
  178. // create switchable value when item is switch
  179. switchclick='';
  180. if (vdata == 'Off' ) {
  181. switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');"';
  182. }
  183. if (vdata == 'On' ) {
  184. switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');"';
  185. }
  186.  
  187.  
  188. // if alarm threshold is defined, make value red
  189. //alarmcss='';
  190. //if (typeof valarm != 'undefined') {
  191. // if ( eval(vdata + valarm)) { // note orig: vdata > alarm
  192. // alarmcss=';color:red;';
  193. // }
  194. //}
  195.  
  196. // if switch is on, make green, if off, make red
  197. alarmcss='';
  198. if (vdata == 'On' || vdata == 'On ') { // note orig: vdata > alarm
  199. alarmcss=';color:#1B9772;';
  200. vdata = 'Aan';
  201. }
  202.  
  203. if (vdata == 'Off' || vdata == 'Off ') { // note orig: vdata > alarm
  204. alarmcss=';color:#E24E2A;';
  205. vdata = 'Uit';
  206. }
  207.  
  208.  
  209. if(item.idx == '107' && vdata > 40){
  210. vdata='Aan';
  211. alarmcss=';color:#1B9772;';
  212. }
  213. if(item.idx == '107' && vdata < 40 && vdata > 0.9){
  214. vdata='Uit';
  215. alarmcss=';color:#1B9772;';
  216. }
  217.  
  218.  
  219. if (vdata > 0 && vdata <25) { // note orig: vdata > alarm
  220. alarmcss=';color:#008000;';
  221.  
  222. }
  223.  
  224. if (vdata > 25 && vdata <50) { // note orig: vdata > alarm
  225. alarmcss=';color:#FFA500;';
  226.  
  227. }
  228. if (vdata > 50 && vdata <75) { // note orig: vdata > alarm
  229. alarmcss=';color:#FF0000;';
  230.  
  231. }
  232.  
  233. if (vdata > 75 && vdata <100) { // note orig: vdata > alarm
  234. alarmcss=';color:#FF00FF;';
  235.  
  236. }
  237.  
  238.  
  239.  
  240.  
  241. // if extra css attributes
  242. if (typeof vattr == 'undefined') {
  243. $('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
  244. } else {
  245. $('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
  246. }
  247.  
  248. $('#desc_'+vlabel).html(vdesc);
  249. }
  250. }
  251. });
  252. }
  253. });
  254. $.refreshTimer = setInterval(RefreshData, 8000);
  255. }
  256.  
  257. // ############################################################################################################
  258. // #### vvvvv USER VALUES below vvvvv #######
  259. // ############################################################################################################
  260.  
  261. $(document).ready(function() {
  262. $.roomplan=2; // define roomplan in Domoticz and create items below.
  263. $.domoticzurl="http://192.168.0.100:8080";
  264. //format: idx, value, label, description, [override css], [alarm value]
  265. $.PageArray = [
  266. ['1', 'Data', 'cell1', 'Memory RPi (%)'],
  267. ['5', 'Data', 'cell2', 'CPU RPi (%)'],
  268. ['31', 'ForecastStr', 'cell3', 'Forecast'],
  269. ['107', 'CounterToday', 'cell4', 'Pomp verbr. (kWh)',],
  270. ['107', 'Usage', 'cell5', 'Pomp',],
  271.  
  272. ['11', 'Status', 'cell6', 'Lamp voor',],
  273. ['14', 'Status', 'cell7', 'Lamp lage kast',],
  274. ['10', 'Status', 'cell8', 'Lamp achter'],
  275. ['13', 'Status', 'cell9', 'Lamp subwoofer'],
  276. ['12', 'Status', 'cell10', 'Lamp hoge kast'],
  277.  
  278. ['30', 'Status', 'cell11', 'iPhone Marco'],
  279. ['74', 'Level', 'cell12', 'Spots uitbouw %'],
  280. ['74', 'Status', 'cell13', 'Spots uitbouw'],
  281. ['40', 'Status', 'cell14', 'Spots voortuin'],
  282. ['103', 'Status', 'cell15', 'Spots achtertuin'],
  283.  
  284. ['38', 'Status', 'cell16', 'iPhone Karin'],
  285. ['31', 'Temp', 'cell17', 'Buiten (&deg;C)'],
  286. ['31', 'Humidity', 'cell18', 'Humidity (%)'],
  287. ['8', 'Status', 'cell19', 'Slaapkamer'],
  288. ['16', 'Status', 'cell20', 'Badkamer'],
  289. ];
  290.  
  291. // ############################################################################################################
  292. // #### ^^^^^ USER VALUES above ^^^^^ #######
  293. // ############################################################################################################
  294.  
  295.  
  296. RefreshData();
  297. });
  298.  
  299.  
  300. function SwitchToggle(idx, switchcmd)
  301. {
  302. console.log('function called');
  303. $.ajax({
  304. url: "json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
  305. async: false,
  306. dataType: 'json',
  307. success: function(){
  308. console.log('SUCCES');
  309. },
  310. error: function(){
  311. console.log('ERROR');
  312. }
  313. });
  314. RefreshData();
  315. }
  316.  
  317.  
  318.  
  319.  
  320. var icons = new Skycons(),
  321. list = [
  322. "clear-day", "clear-night", "partly-cloudy-day",
  323. "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
  324. "fog"
  325. ],
  326. i;
  327.  
  328. for(i = list.length; i--; )
  329. icons.set(list[i], list[i]);
  330.  
  331. icons.play();
  332.  
  333.  
  334. </script>
  335.  
  336.  
  337.  
  338.  
  339.  
  340. <canvas id="cloudy" width="224" height="224">
  341. </canvas>
  342.  
  343.  
  344. </body>
  345. </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!