API tools faq
paste
Advertisement
Guest User

Domoticz tablet interface

a guest
Jan 3rd, 2015
5,314
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.16 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 Monitor</title>
  6. <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
  7. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  8. <style>
  9. div#cnt {
  10.     width: 990px;
  11.     margin: 0 auto;
  12.     text-align: center;
  13. }
  14.  
  15. a, a:visited { text-decoration: none; color: #336699; }
  16. a:hover { text-decoration: none; color: #003366; }
  17.  
  18. #frame {
  19.     float: left;
  20.     margin: 0px;
  21.     padding: 0px 2px 0px 2px;
  22. }
  23.  
  24. #desc_cell1, #desc_cell2, #desc_cell3, #desc_cell4,
  25. #desc_cell5, #desc_cell6, #desc_cell7, #desc_cell8, #desc_cell9,
  26. #desc_cell10, #desc_cell11, #desc_cell12, #desc_cell13, #desc_cell14,
  27. #desc_cell15, #desc_cell16, #desc_cell17, #desc_cell18, #desc_cell19,
  28. #desc_cell20, #desc_cell21, #desc_cell22, #desc_cell23, #desc_cell24
  29.  {
  30.     font-family: Arimo;
  31.     font-weight: normal;
  32.     color: #ABACB0; //kleur van item beschrijving
  33.     font-size: 17px;
  34.     margin-top: -20px;
  35.     height: 25px;
  36.     line-height: 10px;
  37. }
  38.  
  39. #cell3 {
  40.     font-family: Arimo, serif;
  41.     font-weight: bold;
  42.     width: 570px;
  43.     padding: 5px;
  44.     border: 1px solid #666;
  45.     height: 217px; 
  46.     line-height: 210px;
  47.     font-size: 180px;  
  48.     color: #2980B9;
  49.     margin: 0px ;
  50. }
  51.  
  52. #cell1, #cell2, #cell4, #cell5,
  53. #cell6, #cell7, #cell8, #cell9, #cell10,
  54. #cell11, #cell12, #cell13, #cell14, #cell15,
  55. #cell16, #cell17, #cell18, #cell19
  56.      {
  57.     font-family: Arimo, serif;
  58.     font-weight: bold;
  59.     width: 162px;
  60.     padding: 10px;
  61.     border: 1px solid #666;
  62.     height: 90px;
  63.     line-height: 75px;     
  64.     font-size: 50px;
  65.     color: white; //Kleur waardes van cellen
  66.     font-size:40px;
  67. }
  68.  
  69. #cell20
  70.      {
  71.     font-family: Arimo, serif;
  72.     font-weight: bold;
  73.     width: 162px;
  74.     padding: 10px;
  75.     border: 1px solid #666;
  76.     height: 90px;
  77.     line-height: 75px;     
  78.     font-size: 50px;
  79.     color: white; //Kleur waardes van cellen
  80.     font-size:30px;
  81. }
  82.  
  83. #cell6,  #cell7, #cell8, #cell9, #cell10,  
  84. #cell11, #cell12, #cell13, #cell14, #cell15,
  85. #cell16, #cell17, #cell18, #cell19, #cell20,
  86. #cell21, #cell22, #cell23 {
  87.     height: 65px;
  88.     line-height: 55px;
  89.     color: white;
  90. }
  91.  
  92. #cell8, #cell13, #cell18 {
  93.     width: 184px;
  94. }
  95.  
  96. #cell22 {
  97.     width: 560px;
  98.     font-size: 40px;
  99.     line-height: 55px;
  100. }
  101.  
  102. #all {
  103.     margin-left: -35px;
  104.     margin-top: 5px;
  105.     width: 1050px;height: 570px;   
  106. }
  107.  
  108. </style>
  109. </head>
  110. <body bgcolor="#000">
  111. <div id="cnt">
  112.  
  113. <div>
  114. <div id="frame">
  115.     <div id="cell1">--</div><div id="desc_cell1">cell1</div>
  116.     <div id="cell2">--</div><div id="desc_cell2">cell2</div>
  117. </div>
  118. <div id="frame">
  119.     <div id="cell3">--</div><div id="desc_cell3"">cell3</div>
  120. </div>
  121. <div id="frame">
  122.     <div id="cell4">--</div><div id="desc_cell4">cell4</div>
  123.     <div id="cell5">--</div><div id="desc_cell5">cell5</div>
  124. </div>
  125. </div>
  126.  
  127. <div>
  128. <div id="frame">
  129.     <div id="cell6">--</div><div id="desc_cell6">cell6</div>
  130. </div>
  131. <div id="frame">
  132.     <div id="cell7">--</div><div id="desc_cell7">cell7</div>
  133. </div>
  134. <div id="frame">
  135.     <div id="cell8">--</div><div id="desc_cell8">cell8</div>
  136. </div>
  137. <div id="frame">
  138.     <div id="cell9">--</div><div id="desc_cell9">cell9</div>
  139. </div>
  140. <div id="frame">
  141.     <div id="cell10">--</div><div id="desc_cell10">cell10</div>
  142. </div>
  143. </div>
  144.  
  145. <div>
  146. <div id="frame">
  147.     <div id="cell11">--</div><div id="desc_cell11">cell11</div>
  148. </div>
  149. <div id="frame">
  150.     <div id="cell12">--</div><div id="desc_cell12">cell12</div>
  151. </div>
  152. <div id="frame">
  153.     <div id="cell13">--</div><div id="desc_cell13">cell13</div>
  154. </div>
  155. <div id="frame">
  156.     <div id="cell14">--</div><div id="desc_cell14">cell14</div>
  157. </div>
  158. <div id="frame">
  159.     <div id="cell15">--</div><div id="desc_cell15">cell15</div>
  160. </div>
  161. </div>
  162.  
  163. <div>
  164. <div id="frame">
  165.     <div id="cell16">--</div><div id="desc_cell16">cell16</div>
  166. </div>
  167. <div id="frame">
  168.     <div id="cell17">--</div><div id="desc_cell17">cell17</div>
  169. </div>
  170. <div id="frame">
  171.     <div id="cell18">--</div><div id="desc_cell18">cell18</div>
  172. </div>
  173. <div id="frame">
  174.     <div id="cell19">--</div><div id="desc_cell19">cell19</div>
  175. </div>
  176. <div id="frame">
  177.     <div id="cell20">--</div><div id="desc_cell20">cell20</div>
  178. </div>
  179. </div>
  180.  
  181. </div>
  182.  
  183. <script type="text/javascript" charset="utf-8">
  184. function RefreshData()
  185. {
  186.     clearInterval($.refreshTimer);
  187.     var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
  188.     $.getJSON(jurl,
  189.     {
  190.         format: "json"
  191.     },
  192.     function(data) {
  193.         if (typeof data.result != 'undefined') {
  194.            
  195.             $.each(data.result, function(i,item){
  196.                 for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
  197.                     if( $.PageArray[ii][0] === item.idx ) {     // Domoticz idx number
  198.                         var vtype=  $.PageArray[ii][1];         // Domotitcz type (like Temp, Humidity)
  199.                         var vlabel= $.PageArray[ii][2];         // cell number from HTML layout
  200.                         var vdesc=  $.PageArray[ii][3];         // description
  201.                         var vattr=  $.PageArray[ii][4];         // extra css attributes
  202.                         var valarm= $.PageArray[ii][5];         // alarm value to turn text to red
  203.                         var vdata=  item[vtype];                // current value
  204.                         if (typeof vdata == 'undefined') {
  205.                             vdata="??";
  206.                         } else {
  207.                             // remove too much text
  208.                             vdata=new String(vdata).split("Watt",1)[0];
  209.                             vdata=new String(vdata).split("kWh",1)[0];
  210.                             vdata=new String(vdata).split("m3",1)[0];
  211.                             vdata=new String(vdata).split(" Level:",1)[0];
  212.                             vdata=new String(vdata).replace("Set","On");
  213.                            
  214.                             //If IDX matches '1' (RAM usage) or '5' (CPU usage), then strip off the '%' and round the numbers
  215.                             if(item.idx == '1' || item.idx == '5'){
  216.                             vdata=new String(vdata).split("%",1)[0];
  217.                             vdata=Math.round(vdata);
  218.                             }  
  219.                        
  220.                         }
  221.                        
  222.                         // create switchable value when item is switch
  223.                         switchclick='';
  224.                         if (vdata == 'Off' ) {
  225.                             switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');"';
  226.                         }
  227.                         if (vdata == 'On' ) {
  228.                             switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');"';
  229.                         }
  230.                        
  231.                        
  232.                         // if alarm threshold is defined, make value red
  233.                         //alarmcss='';
  234.                         //if (typeof valarm != 'undefined') {
  235.                         //  if ( eval(vdata + valarm)) {  // note orig:  vdata > alarm
  236.                         //      alarmcss=';color:red;';
  237.                         //  }
  238.                         //}
  239.  
  240.                         // if switch is on, make green, if off, make red
  241.                         alarmcss='';
  242.                                 if (vdata == 'On') {  // note orig:  vdata > alarm
  243.                                 alarmcss=';color:#1B9772;';
  244.                                 vdata = 'Aan';
  245.                             }
  246.                            
  247.                                 if (vdata == 'Off') {  // note orig:  vdata > alarm
  248.                                 alarmcss=';color:#E24E2A;';
  249.                                 vdata = 'Uit';
  250.                             }
  251.  
  252.  
  253.                         // if extra css attributes
  254.                         if (typeof vattr == 'undefined') {
  255.                             $('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
  256.                         } else {
  257.                             $('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
  258.                         }
  259.                        
  260.                         $('#desc_'+vlabel).html(vdesc);
  261.                     }
  262.                 }
  263.             });
  264.         }
  265.     });
  266.     $.refreshTimer = setInterval(RefreshData, 8000);
  267. }
  268.  
  269. // ############################################################################################################
  270. // #### vvvvv   USER VALUES below vvvvv   #######
  271. // ############################################################################################################
  272.  
  273. $(document).ready(function() {
  274.     $.roomplan=5;       // define roomplan in Domoticz and create items below.
  275.     $.domoticzurl="http://192.168.4.15:8080";
  276.     //format: idx, value, label, description, [override css], [alarm value]
  277.     $.PageArray = [
  278.         ['82',  'Temp',         'cell1',    'Aanvoer CV (&deg;C)'],
  279.         ['83',  'Temp',         'cell2',    'Retour CV (&deg;C)'],
  280.         ['84',  'Temp',         'cell3',    'Woonkamer (&deg;C)'],
  281.         ['33',  'CounterToday',     'cell4',    'Electra vandaag (kWh)',],
  282.         ['34',  'CounterToday',     'cell5',    'Gas vandaag (m<sup>3</sup>)',],   
  283.  
  284.         ['68',  'Status',       'cell6',    'CV-ketel',],
  285.         ['6',   'Status',       'cell7',    'Keuken',],
  286.         ['7',   'Status',       'cell8',    'Booglamp'],
  287.         ['8',   'Status',       'cell9',    'LED-strip TV + Kast'],
  288.         ['33',  'Usage',        'cell10',   'Huidig verbruik (W)',],
  289.  
  290.  
  291.         ['87',  'Temp',         'cell11',   'Buitentemperatuur (&deg;C)'],
  292.         ['888', 'Data',         'cell12',   'RAM gebruik Pi (%)'],
  293.         ['25',  'Status',       'cell13',   'Lampje Expedit'],
  294.         ['63',  'Status',       'cell14',   'Lampje TV-meubel'],
  295.         ['5',   'Data',         'cell15',   'CPU Gebruik Pi (%)'],
  296.  
  297.         ['87',  'Humidity',     'cell16',   'Luchtv. buiten (%)'],
  298.         ['85',  'Status',       'cell17',   'Schemer'],
  299.         ['87',  'ForecastStr',      'cell18',   'Voorspelling'],
  300.         ['64',  'Status',       'cell19',   'Eettafel'],   
  301.         ['1',   'Data',         'cell20',   'RAM gebruik Pi (%)'],
  302.     ];
  303.  
  304. // ############################################################################################################
  305. // #### ^^^^^   USER VALUES above ^^^^^   #######
  306. // ############################################################################################################
  307.  
  308.  
  309.     RefreshData();
  310. });  
  311.  
  312.  
  313. function SwitchToggle(idx, switchcmd)
  314. {
  315.      console.log('function called');
  316.      $.ajax({
  317.      url: "json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
  318.     async: false,
  319.     dataType: 'json',
  320.     success: function(){
  321.         console.log('SUCCES');
  322.      },
  323.      error: function(){
  324.         console.log('ERROR');
  325.      }
  326.     });
  327.     RefreshData();
  328. }
  329.  
  330.  
  331. </script>
  332.  
  333. </body>
  334. </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!