Console

From f1c5d0c337cbb8cd072594f85ebd3419653a34ae Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 11 Dec 2011 01:14:24 +0100 Subject: refactor svg ui --- ebus/webapp/static/console.html | 107 ---- ebus/webapp/static/control.html | 52 ++ ebus/webapp/static/draw.svg | 1052 +++++++++++++++++++++++----------- ebus/webapp/static/src/d3.control.js | 80 +++ 4 files changed, 858 insertions(+), 433 deletions(-) delete mode 100644 ebus/webapp/static/console.html create mode 100644 ebus/webapp/static/control.html create mode 100644 ebus/webapp/static/src/d3.control.js (limited to 'ebus/webapp') diff --git a/ebus/webapp/static/console.html b/ebus/webapp/static/console.html deleted file mode 100644 index e905c28..0000000 --- a/ebus/webapp/static/console.html +++ /dev/null @@ -1,107 +0,0 @@ - - - Console - - - - - - -

- - - diff --git a/ebus/webapp/static/control.html b/ebus/webapp/static/control.html new file mode 100644 index 0000000..db9e7b8 --- /dev/null +++ b/ebus/webapp/static/control.html @@ -0,0 +1,52 @@ + + + Control Panel + + + + + + + +

+ + + diff --git a/ebus/webapp/static/draw.svg b/ebus/webapp/static/draw.svg index 6a9055c..e3c46b5 100644 --- a/ebus/webapp/static/draw.svg +++ b/ebus/webapp/static/draw.svg @@ -178,66 +178,6 @@ id="linearGradient4518" xlink:href="#linearGradient26051" inkscape:collect="always" /> - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + Heizkessel - Kollektor: XXX °C - - - XXX °C + style="font-size:18.44056702px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Linux Biolinum Slanted O;-inkscape-font-specification:Linux Biolinum Slanted O Bold Italic" + xml:space="preserve">Heizkessel + XXX °C + - + + + Ofen/Boiler - - Holz + + XX °C - + style="font-size:18.9864254px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Linux Biolinum Slanted O;-inkscape-font-specification:Linux Biolinum Slanted O Bold Italic" + xml:space="preserve">XX °C + + + + + + + + + + + + + + + + + + + + + id="g3084" + transform="translate(389.28571,-8.5714286)"> + Kollektor: XXX °C + - - - - - - - - - - + transform="translate(338.59482,84.506185)" + id="g3254"> + sodipodi:nodetypes="ssssscssccsssssssssssscsssssccssssssscsscsssssssssscccccsssc" + inkscape:connector-curvature="0" + id="path3262" + d="m -141.64871,731.31997 c -22.71912,-19.44593 -41.57543,-35.35622 -41.90292,-35.35622 -0.32748,0 -1.38939,-0.93725 -2.35979,-2.08277 -0.9704,-1.14552 -7.90154,-7.32971 -15.40255,-13.74263 -7.501,-6.41292 -13.63819,-11.94371 -13.63819,-12.29064 0,-0.88187 32.94299,-40.77529 33.63762,-40.7346 0.31135,0.0182 2.09744,1.36979 3.96908,3.00344 3.28207,2.86475 3.35476,3.04536 2.04582,5.08275 -1.35586,2.11043 -1.3229,2.14175 34.24589,32.54236 17.1942,14.70863 2.10006,2.23702 49.76002,42.17705 3.337624,3.54064 12.833354,11.65568 13.638778,11.65568 0.374084,0 1.368139,-0.635 2.209022,-1.41111 1.415168,-1.30616 1.790534,-1.19664 5.047204,1.4725 1.935081,1.58598 3.518332,3.2382 3.518332,3.6716 0,0.60316 -27.142705,34.25352 -32.452888,40.2337 -0.798338,0.89908 -9.597358,-6.21682 -42.315428,-34.22111 z m 55.643272,1.80366 c 3.369577,-4.09088 6.031292,-7.52437 5.914922,-7.62997 -0.116371,-0.1056 -3.134056,-2.6544 -6.705963,-5.66399 -3.571906,-3.00959 -7.468532,-6.32401 -8.659167,-7.36537 -18.785954,-16.43073 -83.388544,-71.25434 -83.964104,-71.25434 -0.428,0 -3.79888,3.63115 -7.49085,8.06923 l -6.71267,8.06923 2.99805,2.74906 c 6.28446,5.76252 25.34774,22.23643 27.19665,23.50251 1.06397,0.72858 7.73348,6.34831 14.82114,12.48828 45.0405,39.01819 54.37458,46.69552 55.42343,45.58612 0.578623,-0.61204 3.808977,-4.45988 7.178562,-8.55076 z m -6.845773,-7.63839 -5.621765,-4.84248 -1.594264,2.23206 c -2.83332,3.96681 -9.24307,2.0621 -9.24307,-2.74664 0,-1.96694 1.60967,-4.36691 3.25883,-4.85882 0.60173,-0.17948 -3.00265,-3.81087 -8.00973,-8.06975 -5.00708,-4.25888 -9.10377,-7.19989 -9.10377,-6.53558 0,3.85753 -6.76833,5.48036 -9.04303,2.16822 -1.84953,-2.69305 -1.69925,-3.94115 0.77882,-6.46847 l 2.1268,-2.16906 -8.81055,-7.52721 c -8.35729,-7.13998 -8.84757,-7.42514 -9.53022,-5.54308 -0.8623,2.37734 -2.17164,3.32697 -4.61231,3.34516 -4.31354,0.0322 -6.32588,-6.65891 -2.76722,-9.20103 1.16504,-0.83225 1.58826,-1.65868 1.0824,-2.11364 -0.45686,-0.41089 -3.72549,-3.24889 -7.26362,-6.30667 -6.03575,-5.21631 -6.4753,-5.4429 -7.11851,-3.66958 -0.37705,1.03952 -1.65513,2.34058 -2.84017,2.89126 -4.9528,2.30149 -9.04335,-5.04194 -4.84885,-8.70476 1.6688,-1.45726 1.60964,-1.57837 -2.69206,-5.51089 -4.33567,-3.96356 -4.37391,-4.0434 -2.68305,-5.60092 1.67653,-1.54433 2.77013,-0.6785 48.36917,38.2949 25.65962,21.93122 47.175072,40.37583 47.812101,40.98803 0.963913,0.92633 0.96529,1.42821 0.0078,2.99122 -0.632534,1.03298 -1.348578,1.86061 -1.591208,1.83918 -0.24263,-0.0215 -2.970934,-2.21808 -6.062915,-4.88145 z m -36.808149,23.46605 c -0.29434,-0.48572 -0.12251,-0.88313 0.38185,-0.88313 0.50437,0 0.91703,0.39741 0.91703,0.88313 0,0.48572 -0.17183,0.88312 -0.38185,0.88312 -0.21002,0 -0.62268,-0.3974 -0.91703,-0.88312 z" + style="fill:#cacaca" /> + sodipodi:nodetypes="ccscscscssscccssscsccssscsscccccscssssssscsssscccsssssssscssscsssss" + inkscape:connector-curvature="0" + id="path3260" + d="m -141.70294,730.79802 c -19.70363,-14.08884 -39.13144,-33.87071 -55.75597,-47.91474 -6.52563,-5.49424 -13.14755,-11.1008 -14.71536,-12.45902 l -2.85057,-2.46949 16.61467,-20.21663 c 9.13806,-11.11914 16.69487,-20.32309 16.79289,-20.45321 0.098,-0.13012 1.7884,1.2608 3.7564,3.09094 l 3.57817,3.32752 -9.94372,11.87508 c -5.46905,6.53129 -9.94372,11.95688 -9.94372,12.05686 0,0.1 5.57145,4.93405 12.381,10.74237 6.80956,5.80833 13.49072,11.60947 14.84703,12.89144 26.78141,21.10707 22.69793,19.28577 46.45645,39.59158 l 26.492029,22.6407 9.697878,-11.84664 c 5.333839,-6.51565 10.005573,-11.84664 10.381649,-11.84664 0.376067,0 2.105823,1.29157 3.843891,2.87016 l 3.160128,2.87016 -16.400307,19.85766 c -9.020177,10.92171 -16.709328,19.94057 -17.087018,20.04191 -0.37767,0.10135 -18.96517,-15.49116 -41.30552,-34.65001 z m 56.268003,14.46643 c 8.061849,-9.79926 14.937938,-18.28594 15.280192,-18.85928 0.352246,-0.59009 -0.262676,-1.89033 -1.417082,-2.99639 l -2.039355,-1.95396 -9.745494,11.7612 c -5.360025,6.46867 -10.222295,11.71497 -10.805048,11.65847 -0.582753,-0.0565 -16.544136,-13.36963 -35.469746,-29.58471 -18.94546,-13.73014 -37.5743,-32.11549 -53.48048,-45.78046 l -13.62042,-11.67063 9.94399,-12.04378 9.944,-12.04379 -2.19523,-2.23168 c -1.43393,-1.45773 -2.41119,-1.89629 -2.81795,-1.26459 -0.3425,0.53189 -7.40344,9.19475 -15.69099,19.25079 -8.28755,10.05604 -14.71698,18.59076 -14.28763,18.96604 0.42936,0.37529 5.65143,4.84671 11.60461,9.9365 5.95318,5.08979 18.03271,15.42525 26.84342,22.96768 56.51704,48.38165 72.22034,61.70544 72.72547,61.70544 0.3134,0 7.165885,-8.01758 15.227743,-17.81685 z m -7.855917,-20.58612 c -2.857526,-2.64073 -5.445508,-4.81682 -5.751064,-4.83576 -0.305565,-0.0189 -0.798575,0.95304 -1.095582,2.15994 -0.61291,2.49054 -4.28466,3.8934 -6.49261,2.48061 -0.75973,-0.48613 -1.76306,-1.97694 -2.22962,-3.31291 -0.73489,-2.1043 -0.53626,-2.70279 1.48574,-4.4766 l 2.33403,-2.04754 -8.8211,-7.57633 -8.8211,-7.57634 -1.12922,2.19802 c -2.56146,4.98588 -9.24388,3.01172 -8.70422,-2.57147 0.16368,-1.69349 0.94934,-3.02345 2.1421,-3.62616 1.7596,-0.88914 1.26079,-1.48573 -7.57677,-9.06202 -7.2849,-6.24522 -9.46038,-7.71108 -9.46038,-6.37449 0,2.27319 -3.71861,4.74263 -6.01994,3.9977 -3.90318,-1.26344 -4.44878,-7.77734 -0.76774,-9.1661 1.62055,-0.6114 0.97197,-1.42003 -5.92672,-7.38933 l -7.74641,-6.7028 -0.95129,2.57037 c -0.80454,2.17381 -1.42577,2.57036 -4.02676,2.57036 -4.95501,0 -6.78966,-5.7403 -2.70668,-8.46874 l 2.16155,-1.44445 -4.32634,-3.58926 c -4.4612,-3.70114 -5.1153,-5.04226 -3.23534,-6.63349 0.99717,-0.84403 17.71344,13.13391 94.466073,78.99136 2.027856,1.74 2.280608,2.35424 1.409323,3.42494 -1.653165,2.03152 -2.643601,1.60452 -8.20993,-3.53951 z" + style="fill:#084af1" /> + sodipodi:nodetypes="ccscscscssscccssscsccssscsscccccscssssssscsssscccsssssssscssscsssssssssssssssssssssss" + inkscape:connector-curvature="0" + id="path3258" + d="m -141.70294,730.79802 c -19.70363,-14.08884 -39.13144,-33.87071 -55.75597,-47.91474 -6.52563,-5.49424 -13.14755,-11.1008 -14.71536,-12.45902 l -2.85057,-2.46949 16.61467,-20.21663 c 9.13806,-11.11914 16.69487,-20.32309 16.79289,-20.45321 0.098,-0.13012 1.7884,1.2608 3.7564,3.09094 l 3.57817,3.32752 -9.94372,11.87508 c -5.46905,6.53129 -9.94372,11.95688 -9.94372,12.05686 0,0.1 5.57145,4.93405 12.381,10.74237 6.80956,5.80833 13.49072,11.60947 14.84703,12.89144 26.78141,21.10707 22.69793,19.28577 46.45645,39.59158 l 26.492029,22.6407 9.697878,-11.84664 c 5.333839,-6.51565 10.005573,-11.84664 10.381649,-11.84664 0.376067,0 2.105823,1.29157 3.843891,2.87016 l 3.160128,2.87016 -16.400307,19.85766 c -9.020177,10.92171 -16.709328,19.94057 -17.087018,20.04191 -0.37767,0.10135 -18.96517,-15.49116 -41.30552,-34.65001 z m 56.268003,14.46643 c 8.061849,-9.79926 14.937938,-18.28594 15.280192,-18.85928 0.352246,-0.59009 -0.262676,-1.89033 -1.417082,-2.99639 l -2.039355,-1.95396 -9.745494,11.7612 c -5.360025,6.46867 -10.222295,11.71497 -10.805048,11.65847 -0.582753,-0.0565 -16.544136,-13.36963 -35.469746,-29.58471 -18.94546,-13.73014 -37.5743,-32.11549 -53.48048,-45.78046 l -13.62042,-11.67063 9.94399,-12.04378 9.944,-12.04379 -2.19523,-2.23168 c -1.43393,-1.45773 -2.41119,-1.89629 -2.81795,-1.26459 -0.3425,0.53189 -7.40344,9.19475 -15.69099,19.25079 -8.28755,10.05604 -14.71698,18.59076 -14.28763,18.96604 0.42936,0.37529 5.65143,4.84671 11.60461,9.9365 5.95318,5.08979 18.03271,15.42525 26.84342,22.96768 56.51704,48.38165 72.22034,61.70544 72.72547,61.70544 0.3134,0 7.165885,-8.01758 15.227743,-17.81685 z m -7.855917,-20.58612 c -2.857526,-2.64073 -5.445508,-4.81682 -5.751064,-4.83576 -0.305565,-0.0189 -0.798575,0.95304 -1.095582,2.15994 -0.61291,2.49054 -4.28466,3.8934 -6.49261,2.48061 -0.75973,-0.48613 -1.76306,-1.97694 -2.22962,-3.31291 -0.73489,-2.1043 -0.53626,-2.70279 1.48574,-4.4766 l 2.33403,-2.04754 -8.8211,-7.57633 -8.8211,-7.57634 -1.12922,2.19802 c -2.56146,4.98588 -9.24388,3.01172 -8.70422,-2.57147 0.16368,-1.69349 0.94934,-3.02345 2.1421,-3.62616 1.7596,-0.88914 1.26079,-1.48573 -7.57677,-9.06202 -7.2849,-6.24522 -9.46038,-7.71108 -9.46038,-6.37449 0,2.27319 -3.71861,4.74263 -6.01994,3.9977 -3.90318,-1.26344 -4.44878,-7.77734 -0.76774,-9.1661 1.62055,-0.6114 0.97197,-1.42003 -5.92672,-7.38933 l -7.74641,-6.7028 -0.95129,2.57037 c -0.80454,2.17381 -1.42577,2.57036 -4.02676,2.57036 -4.95501,0 -6.78966,-5.7403 -2.70668,-8.46874 l 2.16155,-1.44445 -4.32634,-3.58926 c -4.4612,-3.70114 -5.1153,-5.04226 -3.23534,-6.63349 0.99717,-0.84403 17.71344,13.13391 94.466073,78.99136 2.027856,1.74 2.280608,2.35424 1.409323,3.42494 -1.653165,2.03152 -2.643601,1.60452 -8.20993,-3.53951 z m -9.126616,-2.61999 c 1.39088,-1.70921 0.31669,-4.89958 -1.64967,-4.89958 -2.4706,0 -3.81387,2.18896 -2.67505,4.35918 1.11901,2.13243 2.85289,2.34909 4.32472,0.5404 z m -23.84179,-20.4156 c 1.86378,-1.90082 0.27164,-5.01365 -2.36745,-4.62868 -2.17675,0.31754 -2.94808,2.86824 -1.43108,4.73243 1.33185,1.63667 2.11294,1.61534 3.79853,-0.10375 z m -23.31618,-22.45838 c 0,-1.72542 -0.49612,-2.26649 -2.27066,-2.47637 -2.43692,-0.28822 -3.69168,1.44456 -2.78705,3.84883 0.32712,0.8694 1.34869,1.27403 2.78705,1.10391 1.77454,-0.20988 2.27066,-0.75094 2.27066,-2.47637 z m -20.78446,-16.77148 c 0.7387,-2.3737 -0.11655,-3.54041 -2.59529,-3.54041 -2.47874,0 -3.334,1.16671 -2.5953,3.54041 0.3432,1.1028 1.31077,1.75835 2.5953,1.75835 1.28452,0 2.25209,-0.65555 2.59529,-1.75835 z" + style="fill:#686868" /> - + inkscape:connector-curvature="0" + id="path3256" + d="m -93.290854,724.21682 c -5.650575,-4.88726 -6.093301,-5.11007 -6.531783,-3.28723 -0.258703,1.07545 -1.424043,2.44028 -2.589643,3.03294 -2.87198,1.46029 -5.50687,-0.32662 -5.86645,-3.97847 -0.21233,-2.15635 0.18365,-2.95556 1.92559,-3.88638 2.1918,-1.17123 2.1882,-1.17583 -7.2792,-9.29207 l -9.47209,-8.12026 -1.11907,2.39248 c -0.7513,1.60623 -1.91675,2.48601 -3.54631,2.67708 -4.93352,0.57846 -6.72744,-4.44693 -2.7317,-7.65245 l 2.18856,-1.75573 -9.30755,-8.03849 c -8.79076,-7.59217 -9.34738,-7.92868 -10.02494,-6.06065 -1.42821,3.93754 -5.85089,4.60031 -8.033,1.20381 -1.61808,-2.51858 -0.57089,-5.46204 2.333,-6.55761 1.51187,-0.57039 0.67241,-1.56294 -6.27773,-7.42256 l -8.02298,-6.76412 -1.5594,2.61518 c -1.97838,3.31784 -5.29108,3.52331 -7.26516,0.45061 -1.6479,-2.56499 -0.99967,-5.4643 1.39502,-6.23945 2.48539,-0.80452 2.14176,-1.52638 -2.71475,-5.70283 -3.85706,-3.31696 -4.2459,-3.94533 -3.13961,-5.07361 1.1063,-1.12828 6.98696,3.60455 47.48165,38.21383 25.42043,21.72589 46.789541,40.04177 47.486916,40.70196 1.113318,1.05396 1.113318,1.35805 0,2.49349 -1.113326,1.13543 -2.00716,0.65379 -7.32937,-3.94947 z m -9.126616,-2.15848 c 1.39088,-1.70921 0.31669,-4.89958 -1.64967,-4.89958 -2.4706,0 -3.81387,2.18896 -2.67505,4.35918 1.11901,2.13243 2.85289,2.34909 4.32472,0.5404 z m -23.84179,-20.4156 c 1.86378,-1.90082 0.27164,-5.01365 -2.36745,-4.62868 -2.17675,0.31754 -2.94808,2.86824 -1.43108,4.73243 1.33185,1.63667 2.11294,1.61534 3.79853,-0.10375 z m -23.31618,-22.45838 c 0,-1.72542 -0.49612,-2.26649 -2.27066,-2.47637 -2.43692,-0.28822 -3.69168,1.44456 -2.78705,3.84883 0.32712,0.8694 1.34869,1.27403 2.78705,1.10391 1.77454,-0.20988 2.27066,-0.75094 2.27066,-2.47637 z m -20.78446,-16.77148 c 0.7387,-2.3737 -0.11655,-3.54041 -2.59529,-3.54041 -2.47874,0 -3.334,1.16671 -2.5953,3.54041 0.3432,1.1028 1.31077,1.75835 2.5953,1.75835 1.28452,0 2.25209,-0.65555 2.59529,-1.75835 z" + style="fill:#050606" /> - + id="g3950"> + id="path3058-1" + d="m 577.72122,796.48048 -25.7281,0 0,219.97352 -144.00005,0" + style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + d="m 538.17131,877.50741 14.36578,-14.36577 14.27031,14.27032 m -0.0571,-0.78216 c 0,7.90271 -6.40642,14.30913 -14.30914,14.30913 -7.90272,0 -14.30914,-6.40642 -14.30914,-14.30913 0,-7.90272 6.40642,-14.30914 14.30914,-14.30914 7.90272,0 14.30914,6.40642 14.30914,14.30914 z" + style="fill:#ffffff;stroke:#000000;stroke-width:1.88988566;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + id="path3947" + sodipodi:nodetypes="cccsssss" /> + + + + Öl + transform="matrix(1.0481376,0,0,0.60942325,296.73303,720.89972)" + d="m 97.984795,362.11163 c 0,26.77881 -13.341691,48.48733 -29.7995,48.48733 -16.457809,0 -29.799499,-21.70852 -29.799499,-48.48733 0,-26.77881 13.34169,-48.48732 29.799499,-48.48732 16.457809,0 29.7995,21.70851 29.7995,48.48732 z" + sodipodi:ry="48.487324" + sodipodi:rx="29.7995" + sodipodi:cy="362.11163" + sodipodi:cx="68.185295" + id="path3046-8-5" + style="opacity:0.98000004;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.58299994;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:3.166, 1.583;stroke-dashoffset:0" + sodipodi:type="arc" /> + XX °C + + + + + + + + + + + + + + + + + + + + diff --git a/ebus/webapp/static/src/d3.control.js b/ebus/webapp/static/src/d3.control.js new file mode 100644 index 0000000..def7c65 --- /dev/null +++ b/ebus/webapp/static/src/d3.control.js @@ -0,0 +1,80 @@ +var d3_control = function(element, svgurl, mapping) { + this.mapping = mapping; + this.element = element; + var control = this; + d3.xml(svgurl, "image/svg+xml", function(xml) { + element[0][0].appendChild(xml.documentElement); + // Setup mapping + for (var element_id in this.mapping) { + control.initElement(element_id); + } + d3.json("../all_values", function(response) { + control.process(response.data); + control.reload(response.time_stop); + }); + }); +}; + +d3_control.prototype = { + initElement:function(element_id) { + var options = this.mapping[element_id]; + d3.select(document.getElementById(element_id)) + .on("click", function() { + var elem = d3.select(this); + var popup = d3.select("body") + .append("div") + .classed("popup", true) + .style("top", d3.event.clientY-5) + .style("left", d3.event.clientX-5) + .on("click", function() { + d3.select(this).remove(); + }); + popup.append("div") + .text(sensor_name); + + var startdate = (new Date().getTime()/1000) - 7*60*60*24; + var enddate = (new Date().getTime()/1000); + var plot = d3.plot(popup); + d3.json("../sensor/"+sensor_name+"/" + startdate + "/" + enddate, + function(resp) { + var data = resp.data.map(function(d) { + return [new Date(d[0]), d[1]]; + }); + plot.draw(data); + }); + }); + }, + process:function(data) { + for (var i in data) { + var row = data[i]; + + if (typeof(console) != "undefined") { + console.log("[" + d3.format("02d")(row.timestamp) + "] " + + row.name + " Value: " + row.value_real + " - " + + row.value_string); + } + + for (var element_id in this.mapping) { + var options = this.mapping[element_id]; + if (row.name == options.sensor){ + d3.select(document.getElementById(element_id)) + .text(""+row.value_real); + } + } + } + }, + reload:function(time_stop) { + var url = "../stream"; + if (time_stop != null) + url += "/" + time_stop; + var control = this; + d3.json(url, function(response) { + control.process(response.data); + control.reload(response.time_stop); + }); + } +}; + +d3.control = function(element, svgurl, mapping) { + return new d3_control(element,svgurl,mapping); +}; \ No newline at end of file -- cgit v1.2.1