1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
| <%
$TableId='appliances'
Request.Session['TableId']=$TableId
Request.Session['Switchable']=true
/*
These scripts show an example on how to use the Source graph generator from a web page.
Like the web server it self, it is experimental.
We encourage anyone to experiment with it, but we do not give any support.
Bug reports and sugestions however are very welcome and can be sent to helpdesk@plugwise.com.
Be aware that if you keep the 'www' folder in its original location, files will be overwritten during updates.
*/
include "_graphview_settings.pte";
%><!doctype html><html>
<head>
<title>Plugwise Source Webserver Graph Example</title>
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Pragma-directive" content="no-cache" >
<meta http-equiv="Cache-Directive" content="no-cache" >
<meta http-equiv="Expires" content="1 Jan 2008 00:00:00 CET" >
<link rel="stylesheet" href="css/graphview.css" type="text/css">
<script type="text/javascript">
var _bodymargin=0;
var _tableId="<%=$TableId%>";
function init() {
// Calculate the difference between the body with and the maximum image width
if (document.body.clientWidth!=undefined)
_bodymargin=document.body.clientWidth-$("graphframe").offsetWidth;
// If supported, grow/shrink graph according browser window
var wg=300;
var wframe=$('graphframe').offsetWidth;
if (wframe!=undefined)
wg=wframe-($('tableblock').offsetWidth+_bodymargin+20);
$('graphblock').style.width=wg;
/* Refresh the item list every 10 seconds, so the items will reflect a reasonable accurate power state
*/
setInterval('showTab()',10000)
/* Refresh the graph every second, so it will reflect changes in the parameters.
Graphs are cached internally for a maximum of 1 minute if the parameters do not change.
*/
setInterval('showGraph()',1000)
/* Refresh the table every 2 seconds, so it will reflect changes in the parameters.
Table data are cached according to the $CachedDataExpiration parameter in the settings file.
*/
setInterval('_showTable(_tableId)',2000)
setTimeout('showTab("appliances")',100);
}
var _busy_showGraph=false;
/* Render the graph.
*/
function showGraph() {
if (_busy_showGraph)
return;
try {
_busy_sshowGraph=true;
var frm=$("graphfrm");
// If supported, grow/shrink graph according browser window
var wg=300;
var wframe=$('graphframe').offsetWidth;
if (wframe!=undefined) {
wg=wframe-($('tableblock').offsetWidth+_bodymargin+20);
}
$('graphblock').style.width=wg;
var img=$("graphimg");
// img.width=wg
var imgurl="/pwgraph/?width="+wg+"&height=450&"+ajax.serialize(frm);
img.src=imgurl+"&r="+(new Date()).getTime();
// $('tableblock').style.float="left";
// $('tableblock').style.width=100;
var frm2=$("selectionfrm");
$("currentpowerusage").innerHTML=$("currentpower").value;
$("dailytotalpowerusage").innerHTML=$("dailytotalpower").value;
}
catch (ex) {}
_busy_showGraph=false;
}
var _currenttab;
var _currentselection="";
var _busy_showTab=false;
/* Render the item list.
*/
function showTab(id) {
if (_busy_showTab)
return;
_busy_showTab=true;
try {
if (id==undefined)
id=_currenttab;
else
_currentselection='';
var frm=$("graphfrm");
$("appliances_button").style.borderStyle="outset";
$("rooms_button").style.borderStyle="outset";
$("groups_button").style.borderStyle="outset";
frm.elements['colorscheme'].value=$("graphfrm").elements["colorscheme"].value;
if (frm.elements['ids']!=undefined)
frm.elements['ids'].value=$("idfield").value;
var url="_graphview.pte?cmd="+id+"&ids="+_currentselection;
url+=ajax.serialize(frm)+"&r="+(new Date()).getTime();
// save scroll position
var listview=$("listview");
var ypos=listview!=undefined?listview.scrollTop:0;
ajax.updates(url,"tabframe")
listview=$("listview");
if (listview!=undefined)
listview.scrollTop=ypos;
_currenttab=id;
$(_currenttab+"_button").style.borderStyle="inset";
showGraph();
}
catch (ex) {}
_busy_showTab=false;
}
/* Respond to a click on a list item.
*/
function selectItem(div,clss,id) {
var frm=$("selectionfrm");
var ck=frm.elements["ck_"+id];
ck.checked=!ck.checked;
div.className=ck.checked?"selecteditem":"selectableitem";
var ids="";
for (var i=0;i<frm.length;++i) {
if (frm.elements[i].type=="checkbox" && frm.elements[i].checked)
ids+=","+frm.elements[i].value;
}
_currentselection=ids;
var fld=$("idfield");
fld.value="";
switch (clss) {
case "Appliance":
fld.name="appids";
break;
case "Group":
fld.name="grpids";
break;
case "Room":
fld.name="rmids"
break;
}
fld.value=ids;
showTab();
}
/* Switch selected items on or off.
*/
function switchSelection(stat) {
ajax.updates("_graphview.pte?cmd=switch"+_currenttab+"&stat="+stat+"&ids="+_currentselection+"&r="+(new Date()).getTime(),"debug");
setTimeout("showTab()",2000);
}
function sortTable(id,hdr) {
var frm;
var newcol=hdr.id;
frm=$("graphfrm");
var curcol=frm['sortcol'].value.split('-');
var rev=curcol.length>1;
curcol=curcol[0];
if (curcol==newcol)
newcol=newcol+(!rev?'-':'');
frm['sortcol'].value=newcol;
var tbl=$(id+'div');
if (tbl!=undefined)
tbl.style.color='#808080'
setTimeout('_showTable("'+id+'")',200);
}
function pageTable(id,firstrow) {
var frm;
frm=$("graphfrm");
frm['firstrow'].value=firstrow;
var tbl=$(id+'div');
if (tbl!=undefined)
tbl.style.color='#808080'
setTimeout('_showTable("'+id+'")',200);
}
var _busy_showTable=false;
/* Render the table.
*/
function _showTable(id) {
if (_busy_showTable)
return;
try {
_busy_showTable=true;
var frm=$('graphfrm');
var w=$('tableblock').offsetWidth;
var url="lib/"+id+"table.pte?width="+w+"&"+ajax.serialize(frm)+"r="+(new Date()).getTime();
ajax.updates(url,'tableblock')
}
catch (ex) {}
_busy_showTable=false;
}
// **********************************
// mini Ajax lib, from tim morgan's post: http://snippets.dzone.com/posts/show/2025
function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};
ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
ajax.updates=function(url,elm){ if (elm==undefined) { ajax.gets(url) } else { var e=$(elm);e.innerHTML=ajax.gets(url)}};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};
ajax.submitf=function(url,func,frm){ajax.post(url,func,ajax.serialize(frm))};
// **********************************
</script>
</head>
<body onload="init()">
<fieldset style="clear:both" class="debugframe">
<legend>Debug</legend>
<div id="debug">
</div>
</fieldset>
<fieldset>
<legend>Selection</legend>
<div id="selectionblk">
<form id="selectionfrm">
<input type="hidden" name="cmd" value="<%=Request.Get['cmd'] || ''%>">
<input type="hidden" name="ids" value="<%=Request.Get['ids'] || ''%>">
<input type="hidden" name="viewtype" value="<%=Request.Get['viewtype'] || ''%>">
<input type="hidden" name="colorscheme" value="<%=Request.Get['colorscheme'] || ''%>">
<div class="tabbar">
<div class="tabbutton"><input type="button" class="tabbutton" value="Appliances" id="appliances_button" onclick="showTab('appliances')"></div>
<div class="tabbutton"><input type="button" class="tabbutton" value="Rooms" id="rooms_button" onclick="showTab('rooms')"></div>
<div class="tabbutton"><input type="button" class="tabbutton" value="Groups" id="groups_button" onclick="showTab('groups')"></div>
<div class="tabbutton" ></div>
</div>
<div class="tabframe" id="tabframe"></div>
<% if $Switchable %>
<input type="button" value="On" onclick="switchSelection('on')">
<input type="button" value="Off" onclick="switchSelection('off')">
Click the items which you want to switch and/or show the graph for. If none is selected, all appliances are used for the graph.
<% else %>
Click the items for which you want to show the graph. If none is selected, all appliances are used.
<% /if %>
</form>
</div>
</fieldset>
<fieldset>
<legend>Parameters</legend>
<div id="paramblk">
<form id="graphfrm">
<input id="idfield" type="hidden" name="ids" value="<%=Request.Get['ids'] || ''%>">
<input id="sortcol" type="hidden" name="sortcol" value="<%=Request.Get['sortcol'] || ''%>">
<input id="firstrow" type="hidden" name="firstrow" value="<%=Request.Get['firstrow'] || 0%>">
<table>
<tr><td>Title</td>
<td colspan="2"">
<input class="title" name="title" value="<%=Request.Get['title'] || 'Plugwise example'%>">
Colors
<select name="colorscheme" onchange="showTab()">
<%
$sel=Request.Get['colorscheme'] || 'default';
foreach ($ColorSchemes)
echo '<option value="',$_key,'"',(($_key==$sel)?' selected':''),'>',$_key,'</option>',"\r\n";
/foreach
%>
</select>
</td><td> </td>
<td>Show</td><td>
<select name="view">
<%
$opts={'u'=>'Usage','e'=>'Emmision','c'=>'Costs'}
$sel=Request.Get['view'] || 'u';
foreach ($opts)
echo '<option value="',$_key,'"',(($_key==$sel)?' selected':''),'>',$_value,'</option>',"\r\n";
/foreach
%>
</select>
</td>
<td>Per</td><td>
<select name="interval">
<%
$opts={'h'=>'Hour','d'=>'Day','w'=>'Week','m'=>'Month','y'=>'Year'}
$sel=Request.Get['interval'] || 'h';
foreach ($opts)
echo '<option value="',$_key,'"',(($_key==$sel)?' selected':''),'>',$_value,'</option>',"\r\n";
/foreach
%>
</select>
</td>
</tr>
<tr>
<td>Scale</td>
<td>
<%
$opts={'1'=>'100%','.75'=>'75%','.5'=>'50%'}
$sel=Request.Get['zoom'] || '1';
foreach ($opts)
echo '<input type="radio" name="zoom" value="',$_key,'"',(($_key==$sel)?' checked':''),'>',$_value,' ',"\r\n";
/foreach
%>
</td>
<td>
<input type="checkbox" name="legend" <%=((Request.Get['interval'] || '1')=='1')?' checked':''%>" value="1">Show legend
</td><td></td>
<td>From</td><td>
<input class="date" type="text" name="from" value="<%=Request.Get['from'] || DateTime().Format("yyyy-MM-dd")%>"> <td>To</td><td>
<input class="date" type="text" name="to" value="<%=Request.Get['to'] || DateTime().Format("yyyy-MM-dd")%>"></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="8">
<input type="button" value="Update" onclick="showGraph()">
<div class="righttext">Current power usage: <label id="currentpowerusage">0</label> W, Total power usage today: <label id="dailytotalpowerusage">0</label> kWh</div>
</td>
</tr>
</table>
</form>
</div>
</fieldset>
<fieldset id="graphframe">
<legend>Graph</legend>
<div class= "screenblock" id="graphblock" style=""><img id="graphimg" src="/pwimg/48/logo.png"></div>
</fieldset>
<fieldset id="extensive scripting">
<div class= "screenblock" id="tableblock" style="width:0px">Please wait...</div>
</fieldset>
<br>
<img align="top" border="0" src="/img/pdf_20.png"> <a href="/doc/Plugwise_Source_Template_Engine.pdf" target="_blank">Plugwise Source webserver documentation</a>
</body>
</html> |
:strip_exif()/u/112988/knipper.gif?f=community)
:strip_icc():strip_exif()/u/201712/crop5f651efa26417.jpeg?f=community)
:strip_icc():strip_exif()/u/302895/crop5f44135addabc.jpeg?f=community)
.. geintje...
, maar ik ging uit van hun standaard beleid::strip_icc():strip_exif()/u/119144/crop5da3d1fdca8b6_cropped.jpeg?f=community)
/u/38607/crop563536a9aac26_cropped.png?f=community)
/u/350064/SDE-vrij-icon.png?f=community){kind=icon}
:strip_icc():strip_exif()/u/192223/Altech_Eclips.jpg?f=community)
:strip_icc():strip_exif()/u/175007/ebb01cd654e42fda1a4d1b3fa158592e.jpg?f=community)
/u/142929/avatar.png?f=community){kind=avatar}
:strip_icc():strip_exif()/u/63649/IMG_8734.jpg?f=community)
:strip_icc():strip_exif()/u/180831/DSCF4454_small.jpg?f=community)
:strip_icc():strip_exif()/u/147640/van_hitomi_small_1_noborder.jpg?f=community)
stroomrekening.
uiteraard gaat je rekening wel omlaag, maar je blijft toch je 
:strip_exif()/u/288901/lachend%2520zonnetje.gif?f=community)
:strip_icc():strip_exif()/u/20822/sander205.jpg?f=community)
Dit topic is gesloten.
