API tools faq
paste
Guest User

Domoticz Frontpage Bizzie

a guest
Jan 12th, 2015
1,729
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.09 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Domoticz Monitor</title>
  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.                 <link rel="apple-touch-icon" href="images/touch-icon-iphone.png">
  14. <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
  15. <link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
  16. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  17. <style>
  18. body,html{
  19.     height: 100%;
  20.     margin: 0;
  21.     padding: 0;
  22.     background-color: black;
  23. }
  24.  
  25. div#cnt {
  26.     width: 990px;
  27.     height: 100%;
  28.     margin: 0 auto;
  29.     text-align: center;
  30. }
  31.  
  32. .v-wrap{
  33.     height: 100%;
  34.     white-space: nowrap;
  35.     text-align: center;
  36. }
  37. .v-wrap:before {
  38.     content: "";
  39.     display: inline-block;
  40.     vertical-align: middle;
  41.     width: 0;
  42.     margin-right: -.25em;
  43.     height: 100%;
  44. }
  45.  
  46. .v-box{
  47.     display: inline-block;
  48.     vertical-align: middle;
  49.     white-space: normal;
  50. }
  51.  
  52. img{
  53.     border:1px solid #;
  54.     -webkit-border-radius: 10px;
  55.     -moz-border-radius: 10px;
  56.     border-radius: 10px;
  57. }
  58.  
  59. a, a:visited { text-decoration: none; color: #336699; }
  60. a:hover { text-decoration: none; color: #003366; }
  61.  
  62. #frame {
  63.     float: left;
  64.     margin: 0px;
  65.     padding: 0px 4px 4px 4px;
  66. }
  67.  
  68. #desc_cell1, #desc_cell2, #desc_cell3, #desc_cell4,
  69. #desc_cell5, #desc_cell6, #desc_cell7, #desc_cell9,
  70. #desc_cell10, #desc_cell11, #desc_cell12, #desc_cell13, #desc_cell14,
  71. #desc_cell15, #desc_cell16, #desc_cell17, #desc_cell18 {
  72.     font-family: Arimo;
  73.     font-weight: normal;
  74.     color: #ABACB0; //kleur van item beschrijving
  75.     font-size: 17px;
  76.     margin-top: -19px;
  77.     height: 25px;
  78.     line-height: 10px;
  79. }
  80.  
  81. #cell1, #cell2, #cell3, #cell4, #cell5,
  82. #cell6, #cell7, #cell9, #cell10, #cell11, #cell12,
  83. #cell13, #cell14, #cell15, #cell16, #cell17, #cell18 {
  84.     font-family: 'Open Sans', sans-serif;
  85.     font-weight: bold;
  86.     width: 162px;
  87.     padding: 10px;
  88.     border: 1px solid #333;
  89.     -webkit-border-radius: 5px;
  90.     -moz-border-radius: 5px;
  91.     border-radius: 5px;
  92.     background-color: #070707;
  93.     height: 84px;
  94.     line-height: 75px;     
  95.     font-size: 50px;
  96.     color: white; //Kleur waardes van cellen
  97. }
  98.  
  99. #cell6,  #cell7, #cell2, #cell9, #cell10, #cell11,
  100. #cell12, #cell13, #cell14, #cell15, #cell16,
  101. #cell17, #cell18 {
  102.     height: 84px;
  103.     line-height: 70px;
  104.     color: white;
  105. }
  106.  
  107. #cell2 {
  108.     width: 569px;
  109.     line-height: 62px;
  110.     font-size: 90px;   
  111.     color: #2980B9;
  112. }
  113.  
  114. #cell8 {
  115.     width: 589px;
  116.     border: 1px solid black;
  117.     height: 216px;
  118.     -webkit-border-radius: 10px;
  119.     -moz-border-radius: 10px;
  120.     border-radius: 10px;   
  121. }
  122.  
  123. #cell11, #cell16 {
  124.     width: 185px;
  125. }
  126.  
  127. #all {
  128.     margin-left: -35px;
  129.     margin-top: 5px;
  130.     width: 1050px;height: 570px;   
  131. }
  132. #fade{
  133.     display: none;
  134.     position: fixed;
  135.     top: 0%;
  136.     left: 0%;
  137.     width: 100%;
  138.     height: 100%;
  139.     background-color: #000;
  140.     z-index:1001;
  141.     -moz-opacity: 0.7;
  142.     opacity:.70;
  143.     filter: alpha(opacity=70);
  144. }
  145. #light{
  146.     display: none;
  147.     position: absolute;
  148.     top: 50%;
  149.     left: 50%;
  150.     width: 300px;
  151.     height: 75px;
  152.     margin-left: -150px;
  153.     margin-top: -100px;                
  154.     padding: 10px;
  155.     border: 2px solid red;
  156.     background: #333;
  157.     z-index:1002;
  158.     overflow:visible;
  159.     font-family: 'Open Sans', sans-serif;
  160.     font-weight: bold;
  161.     font-size: 25px;
  162.     color: white;
  163.     line-height: 75px;
  164.     text-align: center;
  165.     -webkit-border-radius: 15px 15px 15px 15px;
  166.     border-radius: 15px 15px 15px 15px;
  167. }
  168.  
  169. .camera {
  170.   background: url(offline.jpg) no-repeat;
  171.   -moz-opacity: 0.7;
  172.   opacity:.70;
  173.   filter: alpha(opacity=70);
  174.   background-size: 292px 216px;
  175.   width: 292px;
  176.   height: 216px;
  177. }
  178.  
  179. </style>
  180. </head>
  181. <body>
  182. <div id="cnt"  class="v-wrap">
  183. <div class="v-box">
  184. <div>
  185. <div id="frame">
  186.     <div id="cell1">--</div><div id="desc_cell1">cell1</div>
  187.  
  188. </div>
  189. <div id="frame">
  190.     <div id="cell2">--</div><div id="desc_cell2">cell2</div>
  191. </div>
  192.  
  193. <div id="frame">
  194.     <div id="cell3">--</div><div id="desc_cell3">cell3</div>
  195.    
  196. </div>
  197. </div>
  198.  
  199. <div>
  200. <div id="frame">
  201.     <div id="cell4">--</div><div id="desc_cell4">cell4</div>
  202.     <div id="cell6">--</div><div id="desc_cell6">cell6</div>
  203. </div>
  204.  
  205. <div id="frame">
  206.     <div id="cell8">
  207.         <img src="http://10.0.0.60/camsnapshot.jpg?idx=1&t="  height="216px" width="292px" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 100)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' class='camera' />
  208.         <img src="http://www3.buienradar.nl/images.aspx?jaar=-3&soort=sb&t="  height="216px" width="292px" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 15000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' class='camera' />
  209.     </div>
  210. </div>
  211.  
  212. <div id="frame">
  213.     <div id="cell5">--</div><div id="desc_cell5">cell5</div>
  214.     <div id="cell7">--</div><div id="desc_cell7">cell7</div>
  215.    
  216. </div>
  217. </div>
  218.  
  219. <div>
  220. <div id="frame">
  221.     <div id="cell9">--</div><div id="desc_cell9">cell9</div>
  222. </div>
  223. <div id="frame">
  224.     <div id="cell10">--</div><div id="desc_cell10">cell10</div>
  225. </div>
  226. <div id="frame">
  227.     <div id="cell11">--</div><div id="desc_cell11">cell11</div>
  228. </div>
  229. <div id="frame">
  230.     <div id="cell12">--</div><div id="desc_cell12">cell12</div>
  231. </div>
  232. <div id="frame">
  233.     <div id="cell13">--</div><div id="desc_cell13">cell13</div>
  234. </div>
  235. </div>
  236.  
  237. <div>
  238. <div id="frame">
  239.     <div id="cell14">--</div><div id="desc_cell14">cell14</div>
  240. </div>
  241. <div id="frame">
  242.     <div id="cell15">--</div><div id="desc_cell15">cell15</div>
  243. </div>
  244. <div id="frame">
  245.     <div id="cell16">--</div><div id="desc_cell16">cell16</div>
  246. </div>
  247. <div id="frame">
  248.     <div id="cell17">--</div><div id="desc_cell17">cell17</div>
  249. </div>
  250. <div id="frame">
  251.     <div id="cell18">--</div><div id="desc_cell18">cell18</div>
  252. </div>
  253. </div>
  254.  
  255. </div>
  256. </div>
  257.  
  258. <div id="light">Schakelaar is beveiligd</div>
  259. <div id="fade" onClick="lightbox_close();"></div>
  260.  
  261. <script type="text/javascript" charset="utf-8">
  262. function lightbox_open(){
  263.     window.scrollTo(0,0);
  264.     $('#light').fadeIn('fast');
  265.     $('#fade').fadeIn('fast');
  266.     return setTimeout(function() {
  267.             // run close function on completion of timeout0-9p
  268.             lightbox_close();
  269.         }, 2000);
  270. }
  271.  
  272. function lightbox_close(){
  273.     $('#light').fadeOut('fast');
  274.     $('#fade').fadeOut('fast');
  275. }
  276.  
  277. function RefreshData()
  278. {
  279.     clearInterval($.refreshTimer);
  280.     var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
  281.     $.getJSON(jurl,
  282.     {
  283.         format: "json"
  284.     },
  285.     function(data) {
  286.         if (typeof data.result != 'undefined') {
  287.            
  288.             $.each(data.result, function(i,item){
  289.                 for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
  290.                     if( $.PageArray[ii][0] === item.idx ) {     // Domoticz idx number
  291.                         var vtype=  $.PageArray[ii][1];         // Domotitcz type (like Temp, Humidity)
  292.                         var vlabel= $.PageArray[ii][2];         // cell number from HTML layout
  293.                         var vdesc=  $.PageArray[ii][3];         // description
  294.                         var vattr=  $.PageArray[ii][4];         // extra css attributes
  295.                         var valarm= $.PageArray[ii][5];         // alarm value to turn text to red
  296.                         var vdata=  item[vtype];                // current value
  297.                         if (typeof vdata == 'undefined') {
  298.                             vdata="??";
  299.                         } else {
  300.                             // remove too much text
  301.                             vdata=new String(vdata).split("Watt",1)[0];
  302.                             vdata=new String(vdata).split("kWh",1)[0];
  303.                             vdata=new String(vdata).split("m3",1)[0];
  304.                             vdata=new String(vdata).split(" Level:",1)[0];
  305.                             vdata=new String(vdata).replace("Set","On");
  306.                             vdata=new String(vdata).replace("true","protected");
  307.                            
  308.                             //If IDX matches '1' (RAM usage) or '5' (CPU usage), then strip off the '%' and round the numbers
  309.                             if(item.idx == '1' || item.idx == '5'){
  310.                             vdata=new String(vdata).split("%",1)[0];
  311.                             vdata=Math.round(vdata);
  312.                             }  
  313.                        
  314.                         }
  315.                        
  316.                         //If IDX matches '48' (Electricity today) or '49' (Gas today), then round the numbers with 1 decimal
  317.                         if(item.idx == '48' || item.idx == '49'){
  318.                             vdata=new String(vdata).split("kWh",1)[0];
  319.                             vdata=new String(vdata).split("m3",1)[0];
  320.                             vdata=Math.round(vdata * 10) / 10;
  321.                         }
  322.                        
  323.                         //If IDX matches '380' (Water) covert m3 to liters
  324.                         if(item.idx == '380'){
  325.                             vdata=new String(vdata).split("m3",1)[0];
  326.                             vdata=Math.round(vdata * 1000);
  327.                         }
  328.                        
  329.                         // create switchable value when item is switch
  330.                         switchclick='';
  331.                         if (vdata == 'Off' ) {
  332.                             switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');"';
  333.                         }
  334.                         if (vdata == 'On' ) {
  335.                             switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');"';
  336.                         }
  337.                                                
  338.                         // if alarm threshold is defined, make value red
  339.                         //alarmcss='';
  340.                         //if (typeof valarm != 'undefined') {
  341.                         //  if ( eval(vdata + valarm)) {  // note orig:  vdata > alarm
  342.                         //      alarmcss=';color:red;';
  343.                         //  }
  344.                         //}
  345.  
  346.                         // if switch is on, make green, if off, make red. Apply background when switch is not protected.
  347.                         alarmcss='';
  348.                                 if (item.Protected == true) {
  349.                                     if (vdata == 'On') {
  350.                                         alarmcss=';color:#1B9772;';
  351.                                         vdata = 'Aan';
  352.                                     }
  353.                                     if (vdata == 'Off') {
  354.                                         alarmcss=';color:#E24E2A;';
  355.                                         vdata = 'Uit';
  356.                                     }
  357.                                 } else {
  358.                                 if (vdata == 'On') {
  359.                                     alarmcss=';color:#1B9772;background-color:#171717;';
  360.                                     vdata = 'Aan';
  361.                                     }
  362.                                 if (vdata == 'Off') {
  363.                                     alarmcss=';color:#E24E2A;;background-color:#171717;';
  364.                                     vdata = 'Uit';
  365.                                     }
  366.                             }
  367.                            
  368.                         // if extra css attributes. Make switch not switchable when it is protected.
  369.                         if (typeof vattr == 'undefined') {
  370.                             if (item.Protected == true) {
  371.                                     $('#'+vlabel).html('<div onClick="lightbox_open();" style='+alarmcss+'>'+vdata+'</div>');
  372.                             } else {
  373.                                     $('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
  374.                             }
  375.                         }
  376.                         if (item.Protected == true) {
  377.                             $('#'+vlabel).html( '<div onClick="lightbox_open();" style='+vattr+alarmcss+'>'+vdata+'</div>');
  378.                         } else {
  379.                             $('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
  380.                         }
  381.                        
  382.                         $('#desc_'+vlabel).html(vdesc);
  383.                     }
  384.                 }
  385.             });
  386.         }
  387.     });
  388.     $.refreshTimer = setInterval(RefreshData, 4000);
  389. }
  390.  
  391. // ############################################################################################################
  392. // #### vvvvv   USER VALUES below vvvvv   #######
  393. // ############################################################################################################
  394.  
  395. $(document).ready(function() {
  396.     $.roomplan=9;       // define roomplan in Domoticz and create items below.
  397.     $.domoticzurl="http://10.0.0.60";
  398.     //format: idx, value, label, description, [override css], [alarm value]
  399.     $.PageArray = [
  400.         ['49',  'CounterToday',     'cell1',    'Gas Vandaag (m3)',],
  401.         ['60',  'Temp',             'cell2',    'Woonkamer (&deg;C)'],
  402.         ['48',  'CounterToday',     'cell3',    'Electra Vandaag (kWh)',],
  403.  
  404.         ['380', 'CounterToday',     'cell4',    'Water Vandaag (l)',],
  405.         ['48',  'Usage',            'cell5',    'Huidig Verbruik (W)',],
  406.         ['249', 'Status',           'cell6',    'Alarm Systeem',],
  407.         ['629', 'Status',           'cell7',    'Iemand Aanwezig ?'],      
  408.        
  409.         ['503', 'Temp',             'cell9',    'Garage (&deg;C)'],
  410.         ['30',  'Status',           'cell10',   'Woonkamer Verlichting',],
  411.         ['621', 'Status',           'cell11',   'Woonkamer Sfeer',],
  412.         ['624', 'Status',           'cell12',   'Verlichting Eethoek Wit',],
  413.         ['387', 'Temp',             'cell13',   'Badkamer (&deg;C)'],
  414.    
  415.         ['207', 'Temp',             'cell14',   'Buiten (&deg;C)'],
  416.         ['622', 'Data',             'cell15',   'Woonkamer Normaal',],
  417.         ['628', 'Data',             'cell16',   'Woonkamer Fel',],
  418.         ['7',   'Status',           'cell17',   'Verlichting Overkapping',],
  419.         ['504', 'Temp',             'cell18',   'Slaapkamer (&deg;C)'],
  420.     ];
  421.  
  422. // ###########################################################################################################
  423. // #### ^^^^^   USER VALUES above ^^^^^   #######
  424. // ############################################################################################################
  425.  
  426.  
  427.     RefreshData();
  428. });  
  429.  
  430.  
  431.  function SwitchToggle(idx, switchcmd)
  432.     {
  433.              console.log('function called');
  434.              $.ajax({
  435.          url: "json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
  436.        async: false,
  437.        dataType: 'json',
  438.        success: function(){
  439.            console.log('SUCCES');
  440.          },
  441.          error: function(){
  442.             console.log('ERROR');
  443.          }
  444.             });
  445.             RefreshData();
  446.     }
  447.  
  448. </script>
  449.  
  450. </body>
  451. </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!