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