1<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css"> 2<style> 3body { 4 background: #000; 5} 6 7div#cnt { 8 background: #FF00FF; 9 width: 990px; 10 margin: 0 auto; 11 text-align: center; 12} 13 14a, a:visited { text-decoration: none; color: #336699; } 15a:hover { text-decoration: none; color: #003366; } 16 17#frame { 18 float: left; 19 margin: 0px; 20 padding: 0px 2px 0px 2px; 21} 22 23#label_lg { 24 font-family: arial; 25 font-weight: normal; 26 color: #999; 27 font-size: 17px; 28 margin-top: -20px; 29 height: 25px; 30 line-height: 10px; 31} 32 33#itemp { 34 font-family: Orbitron, serif; 35 font-weight: bold; 36 width: 570px; 37 padding: 5px; 38 border: 1px solid #666; 39 height: 217px; 40 line-height: 210px; 41 font-size: 180px; 42 color: darkorange; 43 margin: 0px ; 44} 45 46#ihi, #ilow, #ohi, #ihum, #astat, #astatw, #otemp, #crte, 47#ohi, #rain, #ohum, #ocld, #otxt, #ctime, #cycb, #ctemp, #cyce, 48#tmpb, #tmpe, #tmpc, #crte, #ctme, #wind, #state, 49#ctmep, #sgas, #mode, #estate { 50 font-family: Orbitron, serif; 51 font-weight: bold; 52 width: 162px; 53 padding: 10px; 54 border: 1px solid #666; 55 height: 90px; 56 line-height: 75px; 57 font-size: 90px; 58 color: #999; 59} 60 61#ctime, #cycb, #cyce, #tmpb, #tmpe, #tmpc, #crte, #ctme, #ohi, 62#rain, #ohum, #ocld, #otxt, #otemp, #wind, #astat, #awatt, 63#astatw, #state, #estate, #ctmep, #sgas, #mode { 64 height: 65px; 65 line-height: 55px; 66 color: #999; 67} 68 69#state, #estate, #crte, #wind { 70 width: 184px; 71} 72 73#otxt { 74 width: 560px; 75 font-size: 40px; 76 line-height: 55px; 77 color: darkorange; 78} 79 80#al { 81 margin-left: -35px; 82 margin-top: 55px; 83 width: 1050px;height: 570px; 84} 85</style> 86 87<div id="cnt"> 88 <div style="margin-bottom:5px;"> 89 <div> 90 <div> 91 <div id="frame"> 92 <div id="ihum" style="color:lightblue;font-size:50px;">--</div> 93 <div id="label_lg">Humidity (%)</div> 94 <div id="ilow" style="font-size:35px;">--</div> 95 <div id="label_lg">Lamp State</div> 96 </div> 97 <div id="frame"> 98 <div id="itemp">--</div> 99 <div id="label_lg" style="font-size:25px;margin-top:-30px;">Livingroom Temp (º<span class="degsign">C</span>)</div> 100 </div> 101 <div id="frame"> 102 <div id="ihi" style="color:teal;font-size:50px;">--</div> 103 <div id="label_lg">Temp Set (º<span class="degsign">C</span>)</div> 104 <div id="ctemp" style="color:#6666FF;font-size:50px;">--</div> 105 <div id="label_lg">Temp Cellar (º<span class="degsign">C</span>)</div> 106 </div> 107 </div> 108 109 <div> 110 <div id="frame"> 111 <div id="cycb" style="font-size:40px;">--</div> 112 <div id="label_lg">Temp Floorheat In</div> 113 </div> 114 <div id="frame"> 115 <div id="cyce" style="font-size:40px;">--</div> 116 <div id="label_lg">Temp Floorheat Out</div> 117 </div> 118 <div id="frame"> 119 <div id="state" style="font-size:40px;">--</div> 120 <div id="label_lg">Hvac State</div> 121 </div> 122 <div id="frame"> 123 <div id="tmpb" style="font-size:40px;">--</div> 124 <div id="label_lg">Temp Hot Water</div> 125 </div> 126 <div id="frame"> 127 <div id="tmpe" style="font-size:40px;">--</div> 128 <div id="label_lg">Pump Floorheating</div> 129 </div> 130 </div> 131 132 <div> 133 <div id="frame"> 134 <div id="mode" style="font-size:40px;;color:#3333cc;">--</div> 135 <div id="label_lg">Water Today (ltr)</div> 136 </div> 137 <div id="frame"> 138 <div id="sgas" style="font-size:40px;color:#009933;">--</div> 139 <div id="label_lg">Gas Today (m³)</div> 140 </div> 141 <div id="frame"> 142 <div id="estate" style="font-size:40px;color:#ff3333;">--</div> 143 <div id="label_lg">Energy Today (kW)</div> 144 </div> 145 <div id="frame"> 146 <div id="ctmep" style="font-size:40px;color:#ff3333;">--</div> 147 <div id="label_lg">Current Energy (watt)</div> 148 </div> 149 <div id="frame"> 150 <div id="ctme" style="font-size:40px;color:#ff3333;">--</div> 151 <div id="label_lg">Highest Consumer</div> 152 </div> 153 </div> 154 155 <div> 156 <div id="frame"> 157 <div id="rain" style="font-size:40px;">--</div> 158 <div id="label_lg">Daily Rain (MM)</div> 159 </div> 160 <div id="frame"> 161 <div id="ohi" style="font-size:40px;color:#C34A2C;">--</div> 162 <div id="label_lg">UV Sensor</div> 163 </div> 164 <div id="frame"> 165 <div id="wind" style="font-size:40px;">--</div> 166 <div id="label_lg">Wind Velocity (<span class="windsign">km/h</span>)</div> 167 </div> 168 <div id="frame"> 169 <div id="otemp" style="font-size:40px;color:darkorange;">--</div> 170 <div id="label_lg">Outdoor Temp (º<span class="degsign">C</span>)</div> 171 </div> 172 <div id="frame"> 173 <div id="ohum" style="font-size:40px;color:teal;">--</div> 174 <div id="label_lg">Outdoor Humidity (%)</div> 175 </div> 176 </div> 177 178 <div> 179 <div id="frame"> 180 <div id="astat" style="font-size:40px;">--</div> 181 <div id="label_lg">Hvac Watt</div> 182 </div> 183 <div id="frame"> 184 <div id="otxt">--</div> 185 <div id="label_lg">Weather Forecast at Hilversum Netherlands</div> 186 </div> 187 <div id="frame"> 188 <div id="astatw" style="font-size:40px;">--</div> 189 <div id="label_lg">Baro</div> 190 </div> 191 </div> 192 </div> 193 </div> 194</div> 195 196<script type="text/javascript" charset="utf-8"> 197function RefreshData() 198{ 199 clearInterval($.refreshTimer); 200 var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&lastupdate="+$.LastUpdateTime+"&jsoncallback=?"; 201 $.getJSON(jurl, 202 { 203 format: "json" 204 }, 205 function(data) { 206 if (typeof data.ActTime != 'undefined') { 207 $.LastUpdateTime=parseInt(data.ActTime); 208 } 209 if (typeof data.result != 'undefined') { 210 if (typeof data.WindSign != 'undefined') { 211 $('.windsign').html(data.WindSign); 212 } 213 if (typeof data.TempSign != 'undefined') { 214 $('.degsign').html(data.TempSign); 215 } 216 $.each(data.result, function(i,item){ 217 for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) { 218 if( $.PageArray[ii][0] === item.idx ) { 219 var vtype=$.PageArray[ii][1]; 220 var vlabel=$.PageArray[ii][2]; 221 var vdata=item[vtype]; 222 if (typeof vdata == 'undefined') { 223 vdata="??"; 224 } 225 else { 226 vdata=new String(vdata).split(" ",1)[0]; 227 } 228 $('#'+vlabel).html(vdata); 229 } 230 } 231 }); 232 } 233 }); 234 $.refreshTimer = setInterval(RefreshData, 10000); 235} 236 237$(document).ready(function() { 238 $.LastUpdateTime=parseInt(0); 239 $.roomplan=21; 240 $.domoticzurl="";//"http://192.168.0.41:8080"; 241 //format: idx, value, label, comment 242 $.PageArray = [ 243 ['1770','Temp','itemp','woonkamer'], 244 ['630','Humidity','ihum','woonkamer'], 245 ['630','Barometer','astatw','woonkamer'], 246 ['630','ForecastStr','otxt','woonkamer'], 247 ['503','Temp','otemp','buiten'], 248 ['503','Humidity','ohum','buiten'], 249 ['627','SetPoint','ihi','room setpoint'], 250 ['584','Usage','ctmep','elektra'], 251 ['584','CounterToday','estate','elektra'], 252 ['3','Rain','rain','rain'], 253 ['585','CounterToday','sgas','gas'], 254 ['411','UVI','ohi','uv'], 255 ['613','Speed','wind','wind'], 256 ['401','Status','ilow','lamp'], 257 ]; 258 259 RefreshData(); 260}); 261</script> 262