source: trunk/FACT++/www/smartfact/index.js@ 16854

Last change on this file since 16854 was 15165, checked in by tbretz, 12 years ago
Updated the response to script submission; added the missing type to the audio source element - this makes sound work on mobile chrome and firefox.
File size: 45.3 KB
Line 
1"use strict";
2
3var debug = false;
4
5var codedMap = "966676:6:A;68656364626Y?\\?;A=A<AGADAN4K4i5g5h5o506W?Z?]?_?>A@A?AJAIAFACAM4J4H4f5d5e5l5m5n516X?[?^?N?P?AA1ABAVAUAKAHAEAO4L4I4G4E4c5a5b5M6j5k5V6Y6\\6_6G?J?O?Q?S?2A4A3AYAXAWAbA_AnAkAhA3404F4D4B4`5^5_5J6K6L6S6T6W6Z6]6E?H?K?M?R?T?V?5A7A6A\\A[AZAeAdAaA^AmAjAgA24o3m3C4A4?4]5[5\\5G6H6I6P6Q6R6U6X6[6^6F?I?L?<?>?U?;@=@8Ah@9AMALA]ABCACfAcA`AoAlAiA4414n3l3<4@4>425Z5X5Y5D6E6F698N6O608E8H8K8H>K>N>?>B>=???A?<@>@@@i@k@j@PAOANAECDCCC<C9CZCWCTC=3:3734313=4;4943515o4W5U5V5A6B6C6687888m7n7C8F8I8F>I>L>=>@>C>E>@?B?D??@A@C@l@n@m@SARAQAHCGCFC?C>C;C8CYCVCSC<393633303n2:4846405n4l4T5R5S5>6?6@6384858j7k7l7o7D8G8J8G>J>M>>>A>D>4>6>C?3?5?B@2@4@o@_@0ALBKBTA0CoBIC8D7D@C=C:C[CXCUC>3;3835323o2m2k27454j3m4k4i4Q5O5P5C7<6=6g71828o8h7i7S9<8?8B8Q>T>W>@=C=F=e<h<5>7>9>4?6?8?3@5@7@`@b@a@OBNBMB3C2C1C;D:D9D_D\\DQCNCKCF3C3@3>2;282Z1W1l2j2h2k3i3g3j4h4f4N5L5M5@7A7B7d7e7f7l8m8n8P9Q9:8=8@8O>R>U>>=A=D=c<f<i<k<8>:><>7?9?;?6@8@:@c@e@d@RBQBPB6C5C4C>D=D<DbDaD^D[DPCMCJCE3B3?3=2:272Y1V1T1i2g2e2h3f3d3g4e4c4K5I5J5=7>7?7a7b7c7i8j8k8M9N9O9R9;8>8A8P>S>V>?=B=E=d<g<j<Z<\\<;>k=m=:?j>l>9@i?k?f@V@g@CBBBSBgBfB7CoCnC?DSDRDcD`D]DRCOCLCG3D3A3?2<292[1X1U1S1Q1f2d2b2e3c3a3d4b4`4H5F5G5:7;7<7^7_7`7f8g8h8J9K9L97:::=:@:C:F:I:I=L=O=7=:===n<1=[<]<_<l=n=0>k>m>o>j?l?n?W@Y@X@FBEBDBjBiBhB2D1D0DVDUDTDCE@EOELEIEXEUERE5222o1l1i1f1c1`1R1P1N1c2a2_2b3`3^3a4_4]4<5:5;5778797[7\\7]7c8d8e8G9H9I94:5:8:;:>:A:D:G:G=J=M=5=8=;=l<o<2=4=^<`<b<o=1>3>n>0?2?m?o?1@Z@\\@[@IBHBGBmBlBkB5D4D3DYDXDWDFEEEBE?ENEKEHEWETEQE4212n1k1h1e1b1_1]1O1M1K1`2^2\\2_3]3[3^4\\4Z4957585475767X7Y7Z7`8a8b8D9E9F91:2:3:6:9:<:?:B:E:H:H=K=N=6=9=<=m<0=3=d;f;a<H<J<2>b=d=1?a>c>0@`?b?]@D@^@:B9BJB^B]BnBfCeC6DJDIDZDnDmDGEDEAEPEMEJEYEVESE623202m1j1g1d1a1^1\\1[0L1J1?1]2[2Y2\\3Z3X3[4Y4W4654555172737U7V7W7]8^8_8A9B9C9e9o90:n9g:j:m:L:O:R:U:X:[:];`;c;T;W;Z;7<9<e;g;i;I<K<M<c=e=g=b>d>f>a?c?e?E@G@F@=B<B;BaB`B_BiChCgCMDLDKD1E0EoD9E7E<F9F6FaE^E[EjEgEdER0O0L0I0F0C0n0l0\\0Z0X0@1>1<1Z2X2V2Y3W3U3X4V4T4E5C5D5n6o607R7S7T7Z8[8\\8>9?9@9b9c9d9l9m9e:h:k:J:M:P:S:V:Y:[;^;a;R;U;X;6<8<:<;<h;j;l;L<N<P<f=h=j=e>g>i>d?f?h?N@Q@H@@B?B>BdBcBbBlCkCjCPDODND4E3E2E;E:E8E6E;F8F5F`E]EZEiEfEcEQ0N0K0H0E0B0m0k0j0Y0W0U0=1;191W2U2S2V3T3R3U4S4Q4B5@5A5k6l6m6O7P7Q7W8X8Y8;9<9=9_9`9a9j9k9\\:_:f:i:l:K:N:Q:T:W:Z:\\;_;b;S;V;Y;C<E<G<<<m;k;1<2<O<Q<S<i=[=P=h>X>Z>g?M@O@R@U@S@J@I@AB1B0BeBTB\\CmCAD@DQDiDhD5EdD<E4F2F0F=F:F7FbE_E\\EkEhEeES0P0M0J0G0D011o0h0g0e0V0T0`0:181Q2T2R2H2S3Q3P3R4P4K3?5=5>5c6i6j6h6M7N7L7U8V8T899:9W9]9^9\\9g9h9i9]:`:c:5;2;o:>;;;8;P;M;J;G;D;A;?<A<D<F<=<><n;o;3<5<R<T<Y=Z=Q=R=Y>[>\\>^>P@T@L@K@5B4B3B2BVBUB^C]CCDBDkDjDfDeD>E=E3F1FnElE@FCFFFIFLFOF;0>0A0205080513101i0f0d0c0b0_0I1H1D1P2O2G2F2D2O3N3M3J3H3a6b6e6f6g6I7J7K7R8S8397989V9Y9Z9[9f9^:a:d:4;1;n:=;:;7;O;L;I;F;C;@;@<B<0<4<U<V<X<`=]=\\=S=U=W=]>_>`>8B7B6BZBXBWB_CaC`CFDEDDDlDgDoEmE>FAFDFGFJFMF90<0?0003060714121a0^0]0G1C1B1N2L2E2C2B2@2L3I3`6d6E7F7G7H7O8Q8192969T9U9X96;3;0;?;<;9;Q;N;K;H;E;B;W<Y<^=_=a=T=V=X=\\B[BYBdCcCbCHDGD?FBFEFHFKFNF:0=0@0104070F1E1A1M2K2J2I2A2D7L8M8N8P809495961b:";
6var map = new Array(1440);
7
8function $(id) { return document.getElementById(id); }
9function $new(name) { return document.createElement(name); }
10function $txt(txt) { return document.createTextNode(txt); }
11function trim(str) { return str.replace(/^\s\s*/, "").replace(/\s*\s$/, ""); }
12function valid(str) { if (!str) return false; if (str.length==0) return false; return true;}
13function isSliding() { var z = $("body").visiblePage/*getAttribute("data-visible")*/; return $("table"+z) ? $("table"+z).offsetLeft!=0 : false; }
14function htmlDecode(input) { var e = $new('div'); e.innerHTML = input; return e.firstChild ? e.firstChild.nodeValue : input; }
15function setUTC(el, time) { var str = time.toUTCString(); var utc = str.substr(str.length-12, 8); el.innerHTML = "&#8226;&nbsp;"+utc+"&nbsp;UTC&nbsp;&#8226;"; }
16
17function cycleCol(el)
18{
19 var col = el.dotColor;//el.getAttribute("data-color");
20 col++;
21 col %= 31;
22 el.dotColor = col; //setAttribute("data-color", col);
23 if (col>16)
24 col = 31-col;
25 var hex = col.toString(16);
26 el.style.color = "#"+hex+"0"+hex+"0"+hex+"f";
27}
28
29function onload()
30{
31 try
32 {
33 var xmlLoad = new XMLHttpRequest();
34 xmlLoad.open('POST', "index.php?load", true);
35 xmlLoad.setRequestHeader("Cache-Control", "no-cache");
36 xmlLoad.setRequestHeader("If-Match", "*");
37 xmlLoad.onload = function()
38 {
39 if (xmlLoad.status==401)
40 login("");
41
42 if (xmlLoad.status!=200)
43 {
44 //alert("ERROR[0] - HTTP request '"+xmlLoad.statusText+" ["+xmlLoad.status+"]");
45 //return;
46 }
47
48 if (xmlLoad.status==200)
49 login(xmlLoad.responseText);
50 };
51 xmlLoad.send(null);
52 }
53 catch(e)
54 {
55 // FIXME: Add a message to the body.
56 alert("Your browser doesn't support dynamic reload.");
57 return;
58 }
59
60 var name = location.hash.length==0 ? "fact" : location.hash.substr(1);
61
62 var args = location.search.substr(1).split('&');
63
64 for (var i=0; i<args.length; i++)
65 {
66 switch (args[i])
67 {
68 //case "max": $("body").setAttribute("data-max", "yes"); continue;
69 //case "noslide": $("body").setAttribute("data-noslide", "yes"); continue;
70 case "max": $("body").displayMax = true; continue;
71 case "noslide": $("body").displayNoslide = true; continue;
72 case "sound": $("body").sound = true; continue;
73 }
74
75 var entry = args[i].split('=');
76 if (entry.length!=2)
77 continue;
78
79 switch (entry[0])
80 {
81 case "w": $("body").displayFixedWidth = entry[1]; break; //setAttribute("data-width", entry[1]); break;
82 case "h": $("body").displayFixedHeight = entry[1]; break; //setAttribute("data-height", entry[1]); break;
83 }
84 }
85
86 /*
87 alert("0 -- "+navigator.appCodeName+"\n"+
88 "1 -- "+navigator.appName+"\n"+
89 "2 -- "+navigator.appVersion+"\n"+
90 "3 -- "+navigator.platform+"\n"+
91 "4 -- "+navigator.userAgent);
92 */
93 loadPage(name, 0, 0);
94}
95
96function login(user)
97{
98 var z = $("body").visiblePage;
99 var l = $("login"+z);
100
101 $("body").user = user;
102
103 if (l)
104 {
105 l.setAttribute("style", "background-position:-"+(user?"720":"755")+"px 50%;");
106 l.alt = user;
107 }
108}
109
110function onresize()
111{
112 var z = $("body").visiblePage/*getAttribute("data-visible")*/;
113
114 //$("table"+z).style.width="100%";
115 $("image"+z).style.width="1px";
116 $("canvas"+z).width=1;
117
118 doresize(z);
119
120}
121
122function loadPage(name, z, dz)
123{
124 if (isSliding())
125 return;
126
127 var xmlPage = new XMLHttpRequest();
128 xmlPage.open('GET', "struct/"+name+'.page', true);
129 xmlPage.setRequestHeader("Cache-Control", "no-cache");
130 xmlPage.setRequestHeader("If-Match", "*");
131 xmlPage.onload = function ()
132 {
133 if (xmlPage.status!=200)
134 {
135 alert("ERROR[0] - HTTP request '"+name+".page': "+xmlPage.statusText+" ["+xmlPage.status+"]");
136 //setTimeout("loadPage('+name+')", 5000);
137 /****** invalidate ******/
138 return;
139 }
140
141 if (!isSliding())
142 {
143 buildPage(name, xmlPage.responseText, z, dz);
144 changePage(z, z+dz);
145 }
146
147 //changePage(name, xmlHttp.resposeText);
148 //slideOut(name, xmlHttp.responseText);
149 //displayPage(name, xmlHttp.responseText);
150 //onresize(true);
151 };
152
153 xmlPage.send(null);
154
155 location.hash = name;
156}
157
158function sendCommand(command)
159{
160 if (command=="stop")
161 {
162 if (!confirm("Do you really want to stop a running script?"))
163 return;
164 }
165
166 var debug = false;
167
168 var uri = "index.php?";
169 if (debug==true)
170 uri += "debug&";
171 uri += command;
172
173 var xmlCmd = new XMLHttpRequest();
174 xmlCmd.open('POST', uri, true);
175 xmlCmd.setRequestHeader("Cache-Control", "no-cache");
176 xmlCmd.setRequestHeader("If-Match", "*");
177 xmlCmd.onload = function ()
178 {
179 if (xmlCmd.status==401)
180 login("");
181
182 if (xmlCmd.status!=200)
183 {
184 alert("ERROR[1] - HTTP request: "+xmlCmd.statusText+" ["+xmlCmd.status+"]");
185 return;
186 }
187
188 if (xmlCmd.responseText.length==0)
189 {
190 alert("No proper acknowledgment of command execution received.");
191 return;
192 }
193
194 var txt = xmlCmd.responseText.split('\n');
195 login(txt[0]);
196 if (txt.length>1)
197 alert(xmlCmd.responseText);
198 else
199 alert("Command submitted.");
200 };
201 xmlCmd.send(null);
202}
203
204
205function submit(script)
206{
207 var inputs = document.getElementsByTagName("input");
208
209 var args = "start="+script+".js";
210 for (var i=0; i<inputs.length; i++)
211 args += "&"+inputs[i].name+"="+inputs[i].value;
212
213 var selects = document.getElementsByTagName("select");
214 for (var i=0; i<selects.length; i++)
215 args += "&"+selects[i].name+"="+selects[i].value;
216
217 sendCommand(args);
218}
219
220function buildPage(name, text, oldz, dz)
221{
222 var fname = dz==0 ? "fact" : $("table"+oldz).pageName;//getAttribute("data-file");
223
224 var z = oldz + dz;
225
226 var lines = text.split('\n');
227
228 if (lines.length==0)
229 {
230 alert("buildPage - received data empty.");
231 return;
232 }
233
234 if (lines[0].length==0)
235 {
236 alert("buildPage - title missing");
237 return;
238 }
239
240 $("audio").date = new Date();
241
242 var title = lines[0];
243 var is_cmd = title[0]=='*';
244 var script = title.split('|');
245 if (is_cmd)
246 {
247 title = script.length>=1 ? script[0].substr(1) : title.substr(1);
248 script = script.length>=1 ? script[1] : name;
249 }
250
251 // ==================================================================
252
253 var th = $new("thead");
254 th.colSpan = 3;
255 th.width = "100%";
256
257 var htr = $new("tr");
258 th.appendChild(htr);
259
260 var htd = $new("td");
261 htd.setAttribute("class", "thead");
262 htd.colSpan = 3;
263 htd.width = "100%";
264 htr.appendChild(htd);
265
266 // -------------
267
268 var htab = $new("table");
269 htab.width = "100%";
270 htd.appendChild(htab);
271
272 var hhtr = $new("tr");
273 htab.appendChild(hhtr);
274
275 var htd0 = $new("td");
276 var htd1 = $new("td");
277 var htd2 = $new("td");
278 var htd3 = $new("td");
279 var htd4 = $new("td");
280 var htd5 = $new("td");
281 var htd6 = $new("td");
282 htd0.setAttribute("class", "tcell1");
283 htd1.setAttribute("class", "tcell2");
284 htd2.setAttribute("class", "tcell1");
285 htd2.setAttribute("width", "1px");
286 htd3.setAttribute("class", "tcell1");
287 htd3.setAttribute("width", "1px");
288 htd4.setAttribute("width", "1px");
289 htd5.setAttribute("width", "1px");
290 htd6.setAttribute("width", "1px");
291 hhtr.appendChild(htd6);
292 hhtr.appendChild(htd4);
293 hhtr.appendChild(htd3);
294 hhtr.appendChild(htd0);
295 hhtr.appendChild(htd1);
296 hhtr.appendChild(htd2);
297 hhtr.appendChild(htd5);
298
299 var div0 = $new("div");
300 var div1 = $new("div");
301 var div2 = $new("div");
302 var div3 = $new("div");
303 var div4 = $new("div");
304 var div5 = $new("div");
305 div0.id = "login"+z;
306 div0.alt = $("body").user;
307 div4.id = "warn"+z;
308 div5.id = "speaker"+z;
309 div0.setAttribute("class", "icon_login");
310 div2.setAttribute("class", "icon_white");
311 div4.setAttribute("class", "icon_color");
312 div5.setAttribute("class", "icon_color");
313 div0.setAttribute("style", "background-position:-"+($("body").user?"720":"755")+"px 50%;");
314 div2.setAttribute("style", "background-position:-396px 50%;");
315 div4.setAttribute("style", "background-position:-12px -13px;display:none;");
316 div5.setAttribute("style", "background-position:-189px -57px;");
317 div0.onclick = function () { sendCommand("logout"); };
318 div2.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage(fname, z, -dz); };
319 div4.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('error', z, +1); };
320
321 if (name=="fact")
322 {
323 div3.setAttribute("class", "icon_color");
324 div3.setAttribute("style", "background-position:-58px -146px;");
325 }
326 else
327 {
328 div3.setAttribute("class", "icon_white");
329 div3.setAttribute("style", "background-position:-575px 50%;");
330 div3.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('fact', z, -1); };
331 }
332
333 var sp0 = $new("span");
334 var sp1 = $new("span");
335 var sp2 = $new("span");
336 sp0.id = "ldot" +z;
337 sp1.id = "title"+z;
338 sp2.id = "rdot" +z;
339 sp1.setAttribute("style", "font-size:large;");
340 //sp0.setAttribute("data-color", "3");
341 //sp2.setAttribute("data-color", "3");
342 sp0.dotColor = 3;
343 sp2.dotColor = 3;
344 sp0.appendChild($txt(" \u2022 "));
345 sp1.appendChild($txt(title));
346 sp2.appendChild($txt(" \u2022 "));
347 if (is_cmd)
348 {
349 sp1.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; submit(script); this.style.backgroundColor=''; };
350 }
351 else
352 {
353 if (name!='control')
354 sp1.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.15)'; loadPage('control', z, +1); };
355 }
356
357 div1.setAttribute("style", "font-size:small;");
358 div1.id = "reporttime"+z;
359 div1.appendChild($txt("---"));
360
361 div1.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; sendCommand('stop'); this.style.backgroundColor=''; };
362
363 htd0.appendChild(sp0);
364 htd0.appendChild(sp1);
365 htd0.appendChild(sp2);
366
367 htd6.appendChild(div0); // Login
368 htd1.appendChild(div1);
369 if (dz!=0/* && z+dz!=0*/)
370 htd2.appendChild(div2); // back
371 htd3.appendChild(div3); // home
372 htd4.appendChild(div4); // Warning
373 htd5.appendChild(div5); // Speaker
374
375 // ==================================================================
376
377 var tf = $new("tfoot");
378
379 var ftr = $new("tr");
380 tf.appendChild(ftr);
381
382 var ftd = $new("td");
383 ftd.setAttribute("class", "tfoot");
384 ftd.width = "100%";
385 ftd.colSpan = 3;
386 ftr.appendChild(ftd);
387
388 var ftab = $new("table");
389 ftab.width = "100%";
390 ftd.appendChild(ftab);
391
392 var ftdH = $new("td");
393 var ftd0 = $new("td");
394 var ftd1 = $new("td");
395 var ftd2 = $new("td");
396 var ftd3 = $new("td");
397 var ftd4 = $new("td");
398 ftdH.setAttribute("width", "1px");
399 ftd2.setAttribute("width", "1px");
400 ftd3.setAttribute("width", "1px");
401 ftd4.setAttribute("width", "1px");
402
403 ftdH.setAttribute("class", "tcell1");
404 ftd0.setAttribute("class", "tcell1");
405 ftd1.setAttribute("class", "tcell2");
406 ftd2.setAttribute("class", "tcell2");
407 ftd3.setAttribute("class", "tcell2");
408 ftd4.setAttribute("class", "tcell2");
409
410 ftab.appendChild(ftdH);
411 ftab.appendChild(ftd0);
412 ftab.appendChild(ftd1);
413 ftab.appendChild(ftd2);
414 ftab.appendChild(ftd3);
415 ftab.appendChild(ftd4);
416
417 var fdivH = $new("div");
418 var fdiv0 = $new("span");
419 var fdiv1 = $new("span");
420 var fdiv2 = $new("div");
421 var fdiv3 = $new("div");
422 var fdiv4 = $new("div");
423 ftd0.style.paddingLeft = "5px";
424 fdiv4.id="cmd"+z;
425
426 fdiv2.setAttribute("class", "icon_white");
427 fdiv3.setAttribute("class", "icon_white");
428 fdiv4.setAttribute("class", "icon_white");
429 fdiv2.setAttribute("style", "background-position:-72px 50%;");
430 fdiv4.setAttribute("style", "background-position:-432px 50%;");
431 fdiv2.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; sendCommand('stop'); this.style.backgroundColor=''; };
432 if (is_cmd)
433 {
434 fdiv3.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; submit(script); this.style.backgroundColor=''; };
435 fdiv3.setAttribute("style", "background-position:-109px 50%;");
436 }
437 else
438 {
439 fdiv3.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('control', z, +1); };
440 fdiv3.setAttribute("style", "background-position:-289px 50%;");
441 }
442
443 if (name.substr(0, 5)=="help-")
444 {
445 fdivH.setAttribute("class", "icon_color");
446 fdivH.setAttribute("style", "background-position:-408px -57px;");
447 //fdivH.setAttribute("style", "background-position:-13px -57px;");
448 }
449 else
450 {
451 fdivH.setAttribute("class", "icon_white");
452 fdivH.setAttribute("style", "background-position:-611px 50%;");
453 fdivH.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('help-'+name, z, +1); };
454 }
455 fdiv4.onclick = function () { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('scriptlog', z, +1); };
456
457
458 fdiv0.setAttribute("style", "font-size:large;");
459 fdiv1.setAttribute("style", "font-size:small;");
460 fdiv1.id = "localtime"+z;
461
462 fdiv0.onclick = function () { window.location='https://www.fact-project.org/logbook/misc.php?action=mobile'; }
463 fdiv0.appendChild($txt("logbook"));
464 fdiv1.appendChild($txt("loading..."));
465
466 ftdH.appendChild(fdivH);
467 ftd0.appendChild(fdiv0);
468 ftd1.appendChild(fdiv1);
469 ftd2.appendChild(fdiv2);
470 if (is_cmd || name!='control')
471 ftd3.appendChild(fdiv3);
472 if (name!='scriptlog')
473 ftd4.appendChild(fdiv4);
474
475 // ==================================================================
476
477 var tbody = $new("tbody");
478
479 for (var i=0; i<lines.length; i++)
480 {
481 lines[i] = trim(lines[i]);
482
483 if (lines[i][0] == '#')
484 lines.splice(i--, 1);
485 }
486
487 // Concatenate consecutive lines until they have at least two colons
488 for (var i=2; i<lines.length; i++)
489 {
490 if (lines[i].length==0)
491 continue;
492
493 while (i<lines.length)
494 {
495 var cols = lines[i-1].split('|');
496 if (cols.length>=3)
497 break;
498
499 lines[i-1] += lines[i].length==0 ? '<p/>' : " "+lines[i];
500 lines.splice(i,1);
501 }
502 }
503
504 var counter = 1;
505 for (var i=1; i<lines.length; i++)
506 {
507 lines[i] = trim(lines[i]);
508
509 if (lines[i].length==0)
510 continue;
511
512 var cols = lines[i].split('|');
513 if (cols.length != 3 && cols.length !=4)
514 {
515 alert("Wrong number of columns in line #"+i+" in '"+name+"': '"+lines[i]+"' N(cols)="+cols.length);
516 continue;
517 }
518
519 var check = cols[1].split("=");
520
521 if (check.length>1 && (check[0]=="camera" || check[0]=="hist"))
522 {
523 var data = cols[1].substring(check[0].length+1).split("/");
524
525 var tr = $new("tr");
526 tr.setAttribute("class", "row");
527 //tr.setAttribute("style", "margin:0;padding:0;");
528
529 var td = $new("td");
530 td.setAttribute("class", "container");
531 td.id = "container";
532 td.colSpan = 3;
533 tr.appendChild(td);
534
535 var canv = $new("canvas");
536 canv.id = "canvas"+z;
537 canv.width = "1";
538 canv.height = "1";
539 //canv.onclick = function () { save(); }
540 //canv.setAttribute("data-type", check[0]);
541 //canv.setAttribute("data-file", data[0]);
542 //canv.setAttribute("data-data", cols[1].substring(check[0].length+data[0].length+2));
543 canv.dataType = check[0];
544 canv.fileName = data[0];
545 canv.dataUnit = htmlDecode(cols[1].substring(check[0].length+data[0].length+2));
546// canv.setAttribute("style", "display:none;");
547 td.appendChild(canv);
548
549 var img = $new("img");
550 img.src = "img/dummy.png";//needed in firefox
551 img.id = "image"+z;
552 img.setAttribute("style", "width:1px;height:15px;display:none;");
553 td.appendChild(img);
554
555 tbody.appendChild(tr);
556 continue;
557 }
558
559 var tr = $new("tr");
560 tr.setAttribute("class", "row");
561
562 if (valid(cols[0]))
563 {
564 tr.linkName = cols[0];
565 tr.onclick = function () { this.style.background='#ccb'; loadPage(this.linkName, z, -1); };
566 }
567
568 if (valid(cols[3]))
569 {
570 tr.linkName = cols[3];
571 tr.onclick = function () { this.style.background='#cbb'; loadPage(this.linkName, z, +1); };
572 }
573
574 var td0 = $new("td");
575 td0.setAttribute("class", "tcol0");
576 tr.appendChild(td0);
577
578 if (check.length>0 && check[0]=="image")
579 {
580 var img = $new("img");
581 img.style.width="100%";
582 img.style.display="block";
583 img.src = "img/"+check[1];
584 td0.style.paddingLeft=0;
585 td0.style.border=0;
586 td0.colSpan=3;
587 td0.appendChild(img);
588
589 tbody.appendChild(tr);
590 continue;
591 }
592
593 if (valid(cols[0]))
594 {
595 var sp = $new("div");
596 sp.setAttribute("class", "icon_black");
597 sp.setAttribute("style", "background-position: -144px 50%;");
598 td0.appendChild(sp);
599 }
600
601 var td1 = $new("td");
602 td1.setAttribute("class", "tcol1");
603 td1.width = "100%";
604 tr.appendChild(td1);
605
606 var td2 = $new("td");
607 td2.setAttribute("class", "tcol2");
608 td2.width = "18px";
609
610 if (valid(cols[3]))
611 {
612 var sp = $new("div");
613 sp.setAttribute("class", "icon_black");
614 sp.setAttribute("style", "background-position: -108px 50%;");
615 td2.appendChild(sp);
616 }
617 tr.appendChild(td2);
618
619 var tab = $new("table");
620 tab.width = "100%";
621 td1.appendChild(tab);
622
623 var innertr = $new("tr");
624 tab.appendChild(innertr);
625
626 var cell1 = $new("td");
627 cell1.setAttribute("class", "tcell1");
628
629 var cell2 = $new("td");
630 cell2.setAttribute("class", valid(cols[1]) ? "tcell2" : "tcell2l");
631
632 if (check.length>0 && check[0]=="select")
633 {
634 var args = check[1].split('/');
635
636 if (args.length<2)
637 alert("Argument name missing for'"+check[1]+"'");
638 else
639 {
640 var div = $new("div");
641 div.innerHTML = args[0];
642 cell1.appendChild(div);
643
644 var input = $new("SELECT");
645 input.name = args[1];
646 for (var j=2; j<args.length; j++)
647 input.options.add(new Option(args[j]));
648 cell2.appendChild(input);
649 }
650
651 }
652 if (check.length>0 && check[0]=="input")
653 {
654 var opt = check[1].split('/');
655
656 if (opt.length<2)
657 alert("Argument name missing for'"+check[1]+"'");
658 else
659 {
660 var div = $new("div");
661 div.innerHTML = opt[0];
662 cell1.appendChild(div);
663
664 var input = $new("input");
665 input.name = opt[1];
666 input.type = "text";
667 input.maxlength = 80;
668 input.style.textAlign = "right";
669 input.style.width = "100%";
670 if (opt.length>2)
671 input.value=opt[2];
672
673 cell2.appendChild(input);
674 }
675 }
676 if (check.length>0 && check[0]=="checkbox")
677 {
678 var opt = check[1].split('/');
679
680 var div = $new("div");
681 div.innerHTML = opt[0];
682 cell1.appendChild(div);
683
684 var input = $new("input");
685 input.type = "checkbox";
686 input.name = opt[1];
687 input.onclick = function() { this.value=this.checked; };
688 var c = opt.length>2 && opt[2]=="1";
689 input.checked = c;
690 input.value = c;
691
692 cell2.appendChild(input);
693 }
694 if (check.length==0 || (check[0]!="input" && check[0]!="select" && check[0]!="checkbox"))
695 {
696 var div = $new("div");
697 div.innerHTML = cols[1];
698 cell1.appendChild(div);
699
700 if (cols.length>2 && cols[2].length>0)
701 {
702 cell2.id = "data"+z+"-"+counter;
703 cell2.dataFormat = cols[2];
704 cell2.appendChild($txt("---"));
705 counter++;
706 }
707 else
708 cell1.setAttribute("class", "description");
709 }
710
711 innertr.appendChild(cell1);
712 innertr.appendChild(cell2);
713
714 tbody.appendChild(tr);
715 }
716
717 // ==================================================================
718
719 if (debug == true)
720 {
721 tr = $new("tr");
722 tr.setAttribute("class", "row");
723
724 td = $new("td");
725 td.id = "debug"+z;
726 td.colSpan = 3;
727 tr.appendChild(td);
728
729 tbody.appendChild(tr);
730 }
731
732 // ==================================================================
733
734 var table = $("table"+z);
735 if (table)
736 $("body").removeChild(table);
737
738 table = $new("table");
739 table.id = "table"+z;
740 table.border = 0;
741 table.cellSpacing = 0;
742 table.cellPadding = "0px";
743 //table.setAttribute("style", "overflow:hidden;position:fixed;top:0px;left:"+window.innerWidth+"px;")
744 table.setAttribute("style",
745 "position:fixed;width:100%;top:0px;"+
746 "left:"+window.innerWidth+"px;");
747
748 table.appendChild(th);
749 table.appendChild(tbody);
750 table.appendChild(tf);
751
752 $("body").appendChild(table);
753
754 // ==================================================================
755
756 /*
757 // Scrollbar for just the body
758 table.style.position = "fixed";
759 th.style.position = "aboslute";
760 tf.style.position = "aboslute";
761 tbody.style.overflowY = "auto";
762 tbody.style.display = "block";
763 tbody.style.height = (window.innerHeight-th.clientHeight-tf.clientHeight)+"px";
764 tbody.id = "tbody"+z;
765 th.id = "thead"+z;
766 tf.id = "tfoot"+z;
767 */
768
769 // ==================================================================
770
771 table.pageName = name;//setAttribute("data-file", name);
772 table.counter = counter;
773
774 // This is needed so that the page is extended in height
775 // _before_ the sliding (in case it contains graphics
776 doresize(z);
777}
778
779function doresize(z)
780{
781 var img = $("image"+z);
782 var canv = $("canvas"+z);
783 if (!img || !canv)
784 return;
785
786 var h = $("table"+z).offsetHeight;
787 if (h == 0)
788 return;
789
790 // ===========================================
791 /*
792 var tb = $("tbody"+z);
793 var hw = $("thead"+z).clientHeight;
794 var fw = $("tfoot"+z).clientHeight;
795
796 tb.style.height = (window.innerHeight-hw-fw)+"px";
797 */
798 // ===========================================
799
800 var fixedw = $("body").displayFixedWidth;//getAttribute("data-width");
801 var fixedh = $("body").displayFixedHeight;//getAttribute("data-height");
802
803 var W = fixedw>0 ? fixedw : window.innerWidth;
804 var H = fixedh>0 ? fixedh : window.innerHeight;
805
806 //var max = $("body").getAttribute("data-max")=="yes";
807 var max = $("body").displayMax;
808
809 var ih = max ? W : H - h + parseInt(img.style.height, 10);
810
811 // This might create the scroll bar
812
813 if (img.style.height!=ih+"px")
814 img.style.height = ih+"px";
815 if (canv.height!=ih)
816 canv.height = ih;
817
818 // now we can evaluate the correct view-port
819 // (-2 is the border size of the parent element 'container')
820 //var sW = (fixedw ? fixedw : $("table"+z).scrollWidth)-2;
821 var sW = fixedw ? fixedw : canv.parentNode.clientWidth;
822
823 if (img.style.width!=sW+"px")
824 img.style.width = sW+"px";
825 if (canv.width!=sW)
826 canv.width = sW;
827
828 // ------ debug -----
829 if (debug == true)
830 {
831 $('debug'+z).innerHTML = "";
832 $('debug'+z).innerHTML += "|W="+W +"/"+H;
833 $('debug'+z).innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight+"/"+img.offsetHeight;
834 $('debug'+z).innerHTML += "|I="+img.style.height+"+"+H+"-"+h;
835 }
836}
837
838var intervalSlide = null;
839
840function changePage(oldz, newz)
841{
842 // No page displayed yet
843 if (oldz==newz)
844 {
845 var tab = $("table"+newz);
846
847 tab.style.left="0px";
848 tab.style.position="absolute";
849
850 $("body").visiblePage = newz; //.setAttribute("data-visible", newz);
851
852 doresize(newz);
853
854 //setInterval(refresh_text, 1000);
855 //setInterval(refresh_graphics, 5000);
856
857 refresh_text();
858
859 // first: decode the pixel mapping!
860 var sum = 1036080;
861 for (var i=0; i<1440; i++)
862 {
863 var d0 = codedMap.charCodeAt(i*2) -48;
864 var d1 = codedMap.charCodeAt(i*2+1)-48;
865
866 map[i] = d0 | (d1<<6);
867 sum -= map[i];
868 }
869 if (sum!=0)
870 alert("Pixel mapping table corrupted!");
871
872 refresh_graphics();
873 return;
874 }
875
876 var W = window.innerWidth;
877 if (W==0 || $("body").displayNoslide)//$("body").getAttribute("data-noslide")=="yes")
878 {
879 $("body").visiblePage = newz;//setAttribute("data-visible", newz);
880 $("body").removeChild($("table"+oldz));
881 $("table"+newz).style.left="0px";
882 return;
883 }
884
885 if (newz>oldz)
886 $("table"+newz).style.left = W+"px";
887 else
888 $("table"+newz).style.left = (-W-1)+"px";
889
890 $("body").visiblePage = newz;//setAttribute("data-visible", newz);
891
892 // This is needed on my mobile to ensure that te browser
893 // doesn't try to zoom during shifting
894 $("table"+newz).style.position="fixed";
895 $("table"+oldz).style.position="fixed";
896
897 intervalSlide = setInterval(function (){doShift(oldz,newz);}, 75);
898}
899
900function doShift(oldz, newz)
901{
902 var t0 = $("table"+oldz);
903 var t1 = $("table"+newz);
904
905 if (t0.style.display=="none")
906 {
907 clearInterval(intervalSlide);
908 $("body").removeChild(t0);
909
910 t1.style.position="absolute";
911
912 // Now the scroll bar might have to appear or disappear
913 doresize(newz);
914 return;
915 }
916
917 var x0 = t0.offsetLeft;
918 var x1 = t1.offsetLeft;
919
920 var W = window.innerWidth;
921
922 if (newz<oldz)
923 {
924 x0 += W/5;
925 x1 += W/5;
926 }
927
928 if (newz>oldz)
929 {
930 x0 -= W/5;
931 x1 -= W/5;
932 }
933
934 if ((newz<oldz && x1>=0) || (newz>oldz && x1<=0))
935 {
936 t0.style.display="none";
937 x1 = 0;
938 }
939
940 t0.style.left = x0+"px";
941 t1.style.left = x1+"px";
942}
943
944var timeoutText = null;
945var timeoutGraphics = null;
946
947var test_counter = 0;
948
949function refresh_text()
950{
951 var z=$("body").visiblePage;//getAttribute("data-visible");
952
953 var fname = $("table"+z).pageName;//getAttribute("data-file");
954 var counter = $("table"+z).counter;//getAttribute("data-file");
955
956 var is_help = fname.substr(0,5)=="help-";
957
958 // Is sliding, no file defined or just help text?
959 if (isSliding() || !valid(fname) || is_help)
960 {
961 if (is_help)
962 {
963 setUTC($("localtime"+z), new Date());
964 $("reporttime"+z).innerHTML="";
965 }
966
967 // invalidate?
968 timeoutText = setTimeout(refresh_text, 1000);
969 return;
970 }
971
972 var xmlText = new XMLHttpRequest();
973 xmlText.open('GET', "data/"+fname+'.data', true);
974 xmlText.setRequestHeader("Cache-Control", "no-cache");
975 xmlText.setRequestHeader("If-Match", "*");
976 xmlText.onload = function ()
977 {
978// if (xmlText.status==412)
979// {
980// timeoutText = setTimeout(refresh_text, 3000);
981// return;
982// }
983
984 if (counter>1 && xmlText.status!=200 && xmlText.status!=412)
985 {
986 alert("ERROR[2] - HTTP request '"+fname+".data': "+xmlText.statusText+" ["+xmlText.status+"]");
987 timeoutText = setTimeout(refresh_text, 10000);
988 return;
989 }
990
991 if (!isSliding())
992 {
993 cycleCol($("ldot"+z));
994 update_text(fname, counter>1 ? xmlText.responseText : undefined);
995 doresize(z);
996 }
997 timeoutText = setTimeout(refresh_text, 3000);
998 };
999 xmlText.send(null);
1000}
1001
1002var date0 = null;
1003
1004var test = 0;
1005function update_text(fname, result)
1006{
1007 var z=$("body").visiblePage;//getAttribute("data-visible");
1008 var table = $("table"+z);
1009
1010 if (table.pageName/*getAttribute("data-file")*/ != fname)
1011 return;
1012
1013 // ----------------------------------------------------
1014 var now = new Date();
1015
1016 var ltime = $("localtime"+z);
1017 setUTC(ltime, now);
1018
1019 if (!result)
1020 return;
1021
1022 var rtime = $("reporttime"+z);
1023 var tokens = result.split('\n');
1024 var header = tokens[0].split('\t');
1025
1026 // File corrupted / should we remove the date?)
1027 if ((header.length>5 || header.length==2 || header.length==0) && header[0].length!=13)
1028 {
1029 // we ignore corrupted files for one minute
1030 if (date0==null || date0.getTime()+60000<now.getTime())
1031 rtime.style.color = "darkred";
1032
1033 return;
1034 }
1035
1036 // File OK
1037 date0 = now;
1038
1039 var stamp = new Date();
1040 stamp.setTime(header[0]);
1041
1042 // File older than 1min
1043 if (stamp.getTime()+60000<now.getTime())
1044 rtime.style.color = "darkred";
1045 else
1046 rtime.style.color = "";
1047
1048 setUTC(rtime, stamp);
1049
1050 $("warn"+z).style.display = header.length>=4 && header[3]=='1' ? "" : "none";
1051
1052 if (header.length>=5)
1053 $("cmd"+z).style.backgroundColor = header[4]=='1' ? "darkgreen" : "darkred";
1054
1055 // ----------------------------------------------------
1056
1057 if (header.length>=3 && $("body").sound)
1058 {
1059 $("speaker"+z).style.display = "none";
1060
1061 var audio = $("audio");
1062
1063 var audio_date = new Date();
1064 audio_date.setTime(header[1]);
1065
1066 // Time stamp of audio file must be newer than page load
1067 // or last audio play respecitvely
1068 if (audio_date>audio.date && header[2].length>0)
1069 {
1070 var name = "audio/"+header[2];
1071
1072 var mp3 = $new("SOURCE");
1073 var ogg = $new("SOURCE");
1074 mp3.src = name+".mp3";
1075 ogg.src = name+".ogg";
1076 mp3.type = "audio/mp3";
1077 ogg.type = "audio/ogg";
1078
1079 audio.replaceChild(mp3, audio.firstChild);
1080 audio.replaceChild(ogg, audio.lastChild);
1081
1082 audio.load();
1083 audio.play();
1084
1085 audio.date = audio_date;
1086 }
1087 }
1088
1089 // ----------------------------------------------------
1090
1091 //var p = table.tBodies.length==3 ? 1 : 0;
1092 //var tbody = table.tBodies[p];
1093
1094 for (var line=1; line<tokens.length; line++)
1095 {
1096 if (tokens[line].length==0)
1097 continue;
1098
1099 var e = $("data"+z+"-"+line);
1100 if (!e)
1101 continue;
1102
1103 var form = e.dataFormat;//getAttribute("data-form");
1104 if (!form)
1105 continue;
1106
1107 var cols = tokens[line].split('\t');
1108 for (var col=1; col<cols.length; col++)
1109 form = form.replace("\$"+(col-1), cols[col].length==0 ? "&mdash;" : cols[col]);
1110
1111 if (cols.length<=1)
1112 form = "&mdash;";
1113
1114 form = form.replace(/<B#(.*?)>/g, "<b style='background:#$1'>");
1115 form = form.replace(/<#(.*?)>/g, "<font color='$1'>");
1116 form = form.replace(/<([\+-])>/g, "<font size='$11'>");
1117 form = form.replace(/<\/([#\+-])>/g, "</font>");
1118 form = form.replace(/([0-9][0-9]):([0-9][0-9]):([0-9][0-9])/g,
1119 "<pre>$1</pre>:<pre>$2</pre>:<pre>$3</pre>");
1120 form = form.replace(/--:--:--/g, "<pre> </pre> <pre> </pre> <pre> </pre>");
1121
1122 var newe = $new("div");
1123 newe.innerHTML = form;
1124 e.replaceChild(newe, e.lastChild);
1125
1126 e.parentNode.parentNode.parentNode.parentNode.style.background=cols[0];
1127 }
1128}
1129
1130// http://billmill.org/static/canvastutorial/index.html
1131// http://www.netmagazine.com/tutorials/learning-basics-html5-canvas
1132// http://www.alistapart.com/articles/responsive-web-design/
1133
1134function refresh_graphics()
1135{
1136 var z = $("body").visiblePage;//getAttribute("data-visible");
1137
1138 var canvas = $("canvas"+z);
1139
1140 // Is sliding or no data file defined?
1141 var fname = canvas==null ? "" : canvas.fileName;//getAttribute("data-file");
1142 if (isSliding() || !valid(fname))
1143 {
1144 // invalidate?
1145 timeoutGraphics = setTimeout(refresh_graphics, 3000);
1146 return;
1147 }
1148
1149 var xmlGfx = new XMLHttpRequest();
1150 xmlGfx.open('GET', "data/"+fname, true);
1151 xmlGfx.setRequestHeader("Cache-Control", "no-cache");
1152 xmlGfx.setRequestHeader("If-Match", "*");
1153 xmlGfx.onload = function ()
1154 {
1155// if (xmlGfx.status==412)
1156// {
1157// timeoutGraphics = setTimeout(refresh_graphics, 5000);
1158// return;
1159// }
1160
1161 if (xmlGfx.status!=200 && xmlGfx.status!=412)
1162 {
1163 alert("ERROR[3] - Request '"+fname+"': "+xmlGfx.statusText+" ["+xmlGfx.status+"]");
1164 timeoutGraphics = setTimeout(refresh_graphics, 10000);
1165 //****** invalidate ******
1166 return;
1167 }
1168
1169 if (!isSliding())
1170 {
1171 cycleCol($("rdot"+z));
1172 process_eventdata(xmlGfx.responseText);
1173 }
1174 timeoutGraphics = setTimeout(refresh_graphics, 5000)
1175 };
1176 xmlGfx.send(null);
1177}
1178
1179
1180function hueToRGB(hue)
1181{
1182 hue /= 3;
1183 hue %= 6;
1184
1185 if (hue<1) return parseInt(255*hue, 10);
1186 if (hue<3) return parseInt(255, 10);
1187 if (hue<4) return parseInt(255*(4-hue), 10);
1188
1189 return 0.
1190}
1191
1192function hueToHex(flt)
1193{
1194 var s = hueToRGB(flt).toString(16);
1195 return s.length==2 ? s : "0"+s;
1196}
1197
1198function HLStoRGB(hue)
1199{
1200 hue *= 14;
1201
1202 var sr = hueToHex(20-hue);
1203 var sg = hueToHex(14-hue);
1204 var sb = hueToHex(26-hue);
1205
1206 return sr+sg+sb;
1207}
1208
1209function color(col)
1210{
1211 if (col==65533)
1212 return HLStoRGB(0);
1213
1214 var hue = col/126;
1215 return HLStoRGB(hue);
1216}
1217
1218function toHex(str, idx)
1219{
1220 var ch = str[idx].toString(16);
1221 return ch.length==2 ? ch : "0"+ch;
1222}
1223
1224function drawHex(ctx, x, y, col)
1225{
1226 ctx.fillStyle = "#"+color(col);
1227
1228 ctx.save();
1229
1230 ctx.translate(x, y);
1231 ctx.scale(1/2, 1/3);
1232
1233 ctx.beginPath();
1234 ctx.moveTo( 1, 1);
1235 ctx.lineTo( 0, 2);
1236 ctx.lineTo(-1, 1);
1237 ctx.lineTo(-1, -1);
1238 ctx.lineTo( 0, -2);
1239 ctx.lineTo( 1, -1);
1240 ctx.fill();
1241
1242 ctx.restore();
1243}
1244
1245function drawDisc(ctx, x, y, r, col)
1246{
1247 ctx.fillStyle = "#"+color(col);
1248
1249 ctx.save();
1250
1251 ctx.translate(x, y);
1252
1253 ctx.beginPath();
1254 ctx.arc(0, 0, r, 0, Math.PI*2, true);
1255 ctx.fill();
1256
1257 ctx.restore();
1258}
1259
1260function beginDrawCam(scale)
1261{
1262 var z = $("body").visiblePage;//getAttribute("data-visible");
1263 var canv = $("canvas"+z);
1264
1265 var w = Math.min(canv.width/scale, canv.height/scale);
1266
1267 var ctx = canv.getContext("2d");
1268
1269 ctx.save();
1270 ctx.translate(canv.width/2, canv.height/2);
1271 ctx.scale(w*2, w*2);
1272
1273 return ctx;
1274}
1275
1276/**
1277 * @constructor
1278 */
1279function Position(s, ring, i)
1280{
1281 switch (s)
1282 {
1283 case 1: this.x = ring - i*0.5; this.y = + i; break;
1284 case 2: this.x = ring*0.5 - i; this.y = ring ; break;
1285 case 3: this.x = -ring*0.5 - i*0.5; this.y = ring - i; break;
1286 case 4: this.x = -ring + i*0.5; this.y = - i; break;
1287 case 5: this.x = -ring*0.5 + i; this.y = -ring ; break;
1288 case 0: this.x = ring*0.5 + i*0.5; this.y = -ring + i; break;
1289 }
1290 this.d = (function () { return this.x*this.x + this.y*this.y*3/4; });
1291}
1292
1293function drawFullCam(data)
1294{
1295 if (data.length!=40 && data.length!=160 && data.length!=320 && data.length!=1440)
1296 {
1297 alert("Camera - Received data has invalid size ("+data.length+"b)");
1298 return;
1299 }
1300
1301 var div = map.length/data.length;
1302 var off = data.length==320 ? 0.2 : 0;
1303
1304 var ctx = beginDrawCam(83);
1305 // ctx.rotate(Math.PI/3);
1306
1307 ctx.scale(1, Math.sqrt(3)/2);
1308 ctx.translate(-0.5, 0);
1309
1310 drawHex(ctx, 0, 0, data.charCodeAt(parseInt(map[0]/div+off, 10)));
1311
1312 var cnt = 1;
1313 for (var ring=1; ring<24; ring++)
1314 {
1315 for (var s=0; s<6; s++)
1316 {
1317 for (var i=1; i<=ring; i++)
1318 {
1319 var pos = new Position(s, ring, i);
1320 if (pos.d() - pos.x > 395.75)
1321 continue;
1322
1323 var p = parseInt(map[cnt]/div+off, 10);
1324
1325 drawHex(ctx, pos.x, pos.y, data.charCodeAt(p));
1326 cnt++;
1327 }
1328 }
1329 }
1330
1331 drawHex(ctx, 7, -22, data.charCodeAt(parseInt(map[1438]/div+off, 10)));
1332 drawHex(ctx, 7, 22, data.charCodeAt(parseInt(map[1439]/div+off, 10)));
1333
1334 ctx.restore();
1335}
1336
1337function drawCam(data)
1338{
1339 var ctx = beginDrawCam(27);
1340 ctx.rotate(Math.PI/6);
1341 ctx.scale(1, Math.sqrt(3)/2);
1342
1343 drawHex(ctx, 0, 0, data.charCodeAt(0));
1344
1345 var cnt = 1;
1346 for (var ring=1; ring<=7; ring++)
1347 {
1348 for (var s=0; s<6; s++)
1349 {
1350 for (var i=1; i<=ring; i++)
1351 {
1352 var pos = new Position(s, ring, i);
1353 if (pos.d() > 44)
1354 continue;
1355
1356 if (ring==7)
1357 {
1358 if (i==6 && (s==0 || s==3))
1359 continue;
1360 if (i==1 && (s==1 || s==4))
1361 continue;
1362 }
1363
1364 drawHex(ctx, pos.x, pos.y, data.charCodeAt(cnt++));
1365 }
1366 }
1367 }
1368
1369 ctx.restore();
1370}
1371
1372function drawCamLegend(canv, data)
1373{
1374 var unit = canv.dataUnit;//htmlDecode(canv.getAttribute("data-data"));
1375
1376 var umin = data[1];
1377 var umax = data[2];
1378
1379 var min = data[3]+unit
1380 var med = data[4]+unit;
1381 var max = data[5]+unit;
1382
1383 var v0 = parseFloat(umin);
1384 var v1 = parseFloat(umax);
1385
1386 var diff = v1-v0;
1387
1388 var cw = canv.width;
1389 //var ch = canv.height;
1390
1391 var ctx = canv.getContext("2d");
1392
1393 ctx.font = "8pt Arial";
1394 ctx.textAlign = "right";
1395 ctx.textBaseline = "top";
1396
1397 for (var i=0; i<11; i++)
1398 {
1399 ctx.strokeStyle = "#"+color(126*i/10);
1400 ctx.strokeText((v0+diff*i/10).toPrecision(3)+unit, cw-5, 125-i*12);
1401 }
1402
1403 var mw = Math.max(ctx.measureText(min).width,
1404 ctx.measureText(med).width,
1405 ctx.measureText(max).width);
1406
1407 ctx.textBaseline = "top";
1408 ctx.strokeStyle = "#000";
1409
1410 ctx.strokeText(min, 5+mw, 5+24);
1411 ctx.strokeText(med, 5+mw, 5+12);
1412 ctx.strokeText(max, 5+mw, 5);
1413}
1414
1415function drawGraph(canv, vals, data)
1416{
1417 var unit = canv.dataUnit;//htmlDecode(canv.getAttribute("data-data"));//.split("/");
1418
1419 var umin = vals[1]+unit;
1420 var umax = vals[2]+unit;
1421
1422 var stat = vals.length==4 ? vals[3] :
1423 vals[3]+unit+" / "+vals[4]+unit+" / "+vals[5]+unit;
1424
1425 var cw = canv.width;
1426 var ch = canv.height;
1427
1428 var ctx = canv.getContext("2d");
1429
1430 var dw = 3; // tick width
1431 var fs = 8; // font size
1432
1433 ctx.font = fs+"pt Arial";
1434 ctx.textAlign = "right";
1435
1436 var dim0 = ctx.measureText(umin);
1437 var dim1 = ctx.measureText(umax);
1438
1439 var tw = Math.max(dim0.width, dim1.width)+dw+2;
1440
1441 var ml = 5+tw; // margin left
1442 var mr = 10; // margin right
1443
1444 var mt = 5+2*fs+4; // margin top
1445 var mb = fs/2+4; // margin bottom
1446
1447 var nx = 20;
1448 var ny = 10;
1449
1450 var w = cw-ml-mr;
1451 var h = ch-mt-mb;
1452
1453 ctx.strokeStyle = "#666";
1454 ctx.fillStyle = "#"+color(100);
1455
1456 // --- data ---
1457 var cnt = 0;
1458 for (var j=1; j<data.length; j++)
1459 {
1460 if (data[j].length<5)
1461 continue;
1462
1463 ctx.strokeStyle = "#"+data[j].substr(0, 3);
1464 data[j] = data[j].substr(3);
1465
1466 ctx.beginPath();
1467 ctx.moveTo(ml, ch-mb-data[j].charCodeAt(0)/126*h);
1468 for (var i=1; i<data[j].length; i++)
1469 ctx.lineTo(ml+w/(data[j].length-1)*i, ch-mb-data[j].charCodeAt(i)/126*h);
1470
1471 // --- finalize data ---
1472 ctx.lineTo(cw-mr, ch-mb);
1473 ctx.lineTo(ml, ch-mb);
1474 ctx.stroke();
1475
1476 cnt++;
1477 }
1478 if (cnt==1)
1479 ctx.fill();
1480
1481 ctx.beginPath();
1482
1483 // --- grid ---
1484
1485 ctx.strokeStyle = "#eee";
1486
1487 for (var i=1; i<=nx; i++)
1488 {
1489 ctx.moveTo(ml+w*i/nx, ch-mb);
1490 ctx.lineTo(ml+w*i/nx, mt);
1491 }
1492 for (var i=0; i<ny; i++)
1493 {
1494 ctx.moveTo(ml, mt+h*i/ny);
1495 ctx.lineTo(ml+w, mt+h*i/ny);
1496 }
1497 ctx.stroke();
1498 ctx.closePath();
1499 ctx.beginPath();
1500
1501 ctx.strokeStyle = "#000";
1502
1503 // --- axes ---
1504 ctx.moveTo(ml, mt);
1505 ctx.lineTo(ml, ch-mb);
1506 ctx.lineTo(cw-mr, ch-mb);
1507
1508 for (var i=1; i<=nx; i++)
1509 {
1510 ctx.moveTo(ml+w*i/nx, ch-mb-dw);
1511 ctx.lineTo(ml+w*i/nx, ch-mb+dw);
1512 }
1513 for (var i=0; i<ny; i++)
1514 {
1515 ctx.moveTo(ml-dw, mt+h*i/ny);
1516 ctx.lineTo(ml+dw, mt+h*i/ny);
1517 }
1518 ctx.stroke();
1519 ctx.closePath();
1520
1521 ctx.textBaseline = "bottom";
1522 ctx.strokeText(umin, ml-dw-2, ch-1);
1523
1524 ctx.textBaseline = mt>fs/2 ? "middle" : "top";
1525 ctx.strokeText(umax, ml-dw-2, mt);
1526
1527 ctx.textBaseline = "top";
1528 ctx.textAlign = "center";
1529 ctx.strokeText(stat, ml+w/2, 5);
1530}
1531
1532function invalidateCanvas(canv)
1533{
1534 var ctx = canv.getContext("2d");
1535
1536 ctx.fillStyle = "rgba(255, 255, 255, 0.75)";
1537 ctx.fillRect(0, 0, canv.width, canv.height);
1538}
1539
1540function processGraphicsData(canv, result)
1541{
1542 if (result.length==0)
1543 return false;
1544
1545 var ctx = canv.getContext("2d");
1546 ctx.clearRect(0, 0, canv.width, canv.height);
1547
1548 var data = result.split('\x7f');
1549 if (data.length<2)
1550 return false;
1551
1552 var header = data[0].split('\n');
1553 if (header.length<4)
1554 return false;
1555
1556 switch (canv.dataType)
1557 {
1558 //case "camera": drawCam(result); break;
1559 case "hist":
1560 drawGraph(canv, header, data);
1561 break;
1562 case "camera":
1563 drawFullCam(data[1]);
1564 drawCamLegend(canv, header);
1565 break;
1566 }
1567
1568 var now = new Date();
1569 var tm = new Date();
1570 tm.setTime(header[0]);
1571
1572 if (tm.getTime()+60000<now.getTime())
1573 return false;
1574
1575 //$("image"+z).src = canv.toDataURL("image/png");
1576
1577 return true;
1578}
1579
1580function process_eventdata(result)
1581{
1582 var z = $("body").visiblePage;//getAttribute("data-visible");
1583 var canv = $("canvas"+z);
1584 if (!canv)
1585 return;
1586
1587 if (!processGraphicsData(canv, result))
1588 invalidateCanvas(canv);
1589}
1590
1591function save()
1592{
1593 var z = $("body").visiblePage;//getAttribute("data-visible");
1594
1595 var canvas = $("canvas"+z);
1596 var img = canvas.toDataURL("image/png");
1597
1598 img = img.replace("image/png", "image/octet-stream");
1599
1600 document.location.href = img;
1601}
1602
1603window['onload'] = onload;
Note: See TracBrowser for help on using the repository browser.