-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathITpings_dashboard.html
1035 lines (908 loc) · 53.9 KB
/
ITpings_dashboard.html
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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!--
No
Bootstrap
React
Angular
Vue
JQuery
Lodash
Redux
-->
<!--suppress HtmlUnknownAnchorTarget, HtmlUnknownAttribute -->
<html lang="en">
<head>
<title>ITpings Dashboard</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- † -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- All the dependencies -->
<script src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyCrN2pjqTXqqo1eU9mFXW0bqCRuOI4z4Zo"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<!-- resource colors: https://flatuicolors.com/palette/nl -->
<style>
:root {
--global--BackgroundColor: #444;
--global--Color: whitesmoke;
--global--article--BackgroundColor: lightgrey;
--global--itpings--BackgroundColor: whitesmoke;
--global--Background-fadeOut--Color: lightgreen;
--global--Background-fadeOut--HistoricColor: lightcoral;
--global--Background-Title--Color: var(--global--BackgroundColor);
--global--header-background--Color: grey;
--global--header-text--Color: floralwhite;
--global--header--Height: 35px;
--global--footer--Height: var(--global--header--Height);
--global--header-sidebar-footer--Gridgap: 1px;
--global--sidebar--Width: 70px;
--global--article--Gridgap: 3px;
/* 3 rows is 2 gridgaps */
--global--article-3row--Gridgap: calc(var(--global--article--Gridgap) * 2);
/* height of all BUT article element */
--global--non-article-UI--Height: calc(var(--global--header--Height) + var(--global--footer--Height) + var(--global--header-sidebar-footer--Gridgap) * 2);
/* so how much height is left for the article.. */
--global--article--Height: calc(100vh - (var(--global--article-3row--Gridgap) + var(--global--non-article-UI--Height)));
/* one row height (with 3 rows total) */
/* This is the height of the itpings-table / itpings-graph */
--global--article--Rowheight: calc(var(--global--article--Height) / 3 - (var(--global--article--Gridgap)));
--global--device-color-square-Height: 10px;
--global--device-color-square-Width: 13px;
}
BODY {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 12px;
margin: var(--global--header-sidebar-footer--Gridgap);
}
*, *:before, *:after {
box-sizing: border-box;
}
H1, P {
margin: 0 0 1em 0;
}
.ITpings_motto {
position: relative;
float: right;
top: 1em;
right: 1em;
}
.ITpings_motto A {
color: orange;
}
#heartbeat_ping A {
text-decoration: inherit;
color: inherit;
}
#heartbeat_ping A[href*='DeletePing'] {
display: none;
}
</style>
<!-- Learn CSS Grid: https://learncssgrid.com/ -->
<style id="CSS Grid">
.grid_container {
max-height: 100vh;
margin: 0 auto;
display: grid;
grid-template-columns: var(--global--sidebar--Width) 4fr;
grid-gap: var(--global--header-sidebar-footer--Gridgap);
}
.grid_container > * {
background-color: var(--global--BackgroundColor);
color: var(--global--Color);
border-radius: 3px;
width: auto;
margin: 0;
}
.header, .footer {
/* from first to last column */
grid-column: 1 / -1;
/* needed for the floated layout */
clear: both;
}
.header {
height: var(--global--header--Height);
}
.footer {
height: var(--global--footer--Height);
}
article {
height: var(--global--article--Height);
background-color: var(--global--article--BackgroundColor);
}
#placeholder_article_dashboard,
#placeholder_article_gateway,
#placeholder_article_devices,
#placeholder_article_hardware,
#placeholder_article_globe,
#placeholder_article_database,
#placeholder_article_controlpanel,
#placeholder_article_info {
height: 100%;
display: grid;
/* 3 rows , equal (fraction) height */
grid-template-rows: repeat(3, 1fr);
/* 4 columns , equal (fraction) width */
grid-template-columns: repeat(4, 1fr);
grid-gap: var(--global--article--Gridgap) var(--global--article--Gridgap);
grid-template-areas: "row1 row1 row1 row1" "row2 row2 row2 row2" "row3 row3 row3 row3";
}
.top_left {
grid-area: 1/1/3/1;
}
.top_center {
grid-area: 1/2/1/4;
}
.top_right {
grid-area: 1/4;
}
.top_right:hover {
/*spread 1 column over 3 columns on hover */
/*grid-area: 1/2/3/5;*/
}
.middle_left {
grid-area: 2/1;
}
.middle_center {
grid-area: 2/2/2/4;
}
.middle_right {
grid-area: 2/4;
}
.bottom_left {
grid-area: 3/1/3/3;
}
.bottom_center_left {
grid-area: 3/2;
}
.bottom_center_right {
grid-area: 3/3;
}
.bottom_right {
grid-area: 3/4;
}
.columns2-left {
grid-area: 1/1/4/3;
}
.columns2-right {
grid-area: 1/-3/-1/-1;
}
.columns1-left {
grid-area: 1/1/-1/1;
}
</style>
<style>
.applicationTitle {
font-size: 18px;
width: 100%;
color: orange;
padding: 7px;
}
.itpings-div-title {
background: var(--global--Background-Title--Color);
color: var(--global--header-text--Color);
font-weight: bold;
}
#header_info {
float: right;
}
#header_info > div {
display: inline;
margin-left: 1em;
}
.heartbeating {
color: #FFD500;
/*slight off-orange to simulate heartbeat*/
}
</style>
<style id="itpings-table_global_definitions">
TABLE {
table-layout: fixed;
width: 100%;
border-spacing: 0;
}
.table-wrapper {
max-height: calc(var(--global--article--Rowheight) + 1px);
overflow-y: scroll;
position: relative;
border: 1px solid var(--global--Background-Title--Color);
/* translate3d enhances scrolling in Chrome Browser */
transform: translate3d(0, 0, 0);
}
/* display THEAD fixed to top of Table (actually a second Table with THEAD only) */
.sticky-header {
position: sticky;
top: 0;
width: 100%;
}
/* ITpings Table Header */
THEAD > TR > TD {
background-color: var(--global--header-background--Color);
color: var(--global--header-text--Color);
font-weight: bold;
}
TD {
text-align: center;
color: darkolivegreen;
overflow: hidden;
vertical-align: top;
}
TH, TD {
min-width: 60px;
padding: 0;
}
/* alternating TR colors, but multiple TBODYs in a Table still f* up the color */
TBODY TR:nth-child(even) {
background-color: var(--global--header-text--Color);
}
itpings-table {
background-color: var(--global--itpings--BackgroundColor);
display: block;
}
/* overrule max-height setting and show full table for tables with 'fullheight' attribute */
itpings-table[fullheight] .table-wrapper {
max-height: initial;
overflow-x: initial;
overflow-y: initial;
}
[data-column='dev_id'] {
width: 26ch;
text-align: left;
}
[data-column='time'] {
width: 18ch;
}
[data-column='frequency'] {
width: 6em;
}
/* hide table columns */
[data-column='description'],
[data-column='timestamp'],
[data-column='payload_raw'],
[data-column='downlink_url'],
[data-column$='location_source'],
[data-column$='src'],
[data-column='rfchain'],
[data-column$='serial'] {
display: none;
}
[data-column='gtw_id'] {
width: 11em;
}
/* collapse columns on smaller screen width */
@media (max-width: 1280px) {
[data-column$='appid'],
[data-column$='appdevid'],
[data-column$='gtwid'],
[data-column$='trusted'] {
width: 1px;
background: darkgrey;
}
[data-column='app_id'] {
width: 10em;
zoom: .8;
}
}
@media (min-width: 1280px) {
[data-column$='appid'],
[data-column$='devid'],
[data-column$='appdevid'],
[data-column$='sensorid'],
[data-column='channel'],
[data-column='rssi'],
[data-column='snr'],
[data-column$='gtwid'],
[data-column$='trusted'] {
width: 7ch;
}
}
.itpings-table-error {
background: lightcoral;
color: yellow;
}
</style>
<style id="columnstyle_field_pingid">
[data-column='_pingid'] {
width: 9ch;
}
TBODY [data-cached='true'] [data-column='_pingid'],
TBODY [data-cached='true'] [data-column='time'] {
font-style: italic;
}
[data-column='_pingid'] a:link {
text-decoration: none;
}
[data-column='_pingid'] a:visited {
text-decoration: none;
}
[data-column='_pingid'] a:hover {
text-decoration: underline;
}
[data-column='_pingid'] a:active {
text-decoration: underline;
}
</style>
<style id="itpings-table_conditional_columns">
:root {
/*
never show Modulation, Data_rate, Coding_rate columns, unless JS code marks them as required
CSS can be used for the Cells, but the THEAD columnheader requires JS setProperty
PER Table definition can be achieved with WC.TABLE.setProperty()
*/
--global--CSS--display--modulation: none;
--global--CSS--display--data_rate: none;
--global--CSS--display--coding_rate: none;
}
[data-column='modulation'] {
width: 6em;
display: var(--global--CSS--display--modulation);
}
[data-column='coding_rate'] {
width: 6em;
display: var(--global--CSS--display--coding_rate);
}
[data-column='data_rate'] {
width: 6em;
display: var(--global--CSS--display--data_rate);
}
/* Mark non-default TD cell values, JS code setProperty will show the column header */
TBODY [data-column='modulation']:not([data-modulation='LORA']),
TBODY [data-column='coding_rate']:not([data-coding_rate='4/5']),
TBODY [data-column='data_rate']:not([data-data_rate='SF7BW125']) {
display: table-cell;
background: lightsalmon;
}
</style>
<style id="itpings-table_DBInfo">
:root {
--DBInfo-RowLength: block;
--DBInfo-IndexLength: block;
}
itpings-table[query='DBInfo'] [data-column='Table'] {
text-align: left;
width: 10em;
}
itpings-table[query='DBInfo'] [data-column='RowLength'] {
display: var(--DBInfo-RowLength);
}
itpings-table[query='DBInfo'] [data-column='IndexLength'] {
display: var(--DBInfo-RowLength);
}
itpings-table[query='DBInfo'] [data-column='RowLength'],
itpings-table[query='DBInfo'] [data-column='Rows'],
itpings-table[query='DBInfo'] [data-column='DataLength'],
itpings-table[query='DBInfo'] [data-column='IndexLength'] {
text-align: right;
}
itpings-table[query='DBInfo'] [data-column='Free'] {
display: none;
}
/* collapse columns on smaller screen width */
@media (max-width: 1280px) {
:root {
--DBInfo-RowLength: none;
--DBInfo-IndexLength: none;
}
}
</style>
<style id="itpings-table_Events">
[data-column='eventtype'],
[data-column='app_id'] {
width: 12em;
}
[data-column='eventlabel'] {
width: 15em;
}
[data-column='eventvalue'] {
max-width: 15em;
overflow: hidden;
}
TBODY TR[data-eventtype='Error'] {
background-color: pink;
}
</style>
<style id="itpings-table_Devices">
itpings-table[query='Devices'] [data-column$='appdevid'] {
display: none;
}
</style>
<style id="itpings-table_SensorValues">
/* Hide Columns */
itpings-table[query='SensorValues'] [data-column$='sensorid'],
itpings-table[query='SensorValues'] [data-column$='appdevid'],
itpings-table[query='SensorValues'] [data-column='app_id'],
itpings-table[query='SensorValues'] [data-column='hardware_serial'] {
display: none;
}
/* Hide TR rows*/
itpings-table[query='SensorValues'] [data-sensor^='digital_in_2'],
itpings-table[query='SensorValues'] [data-sensor^='digital_in_3'],
itpings-table[query='SensorValues'] [data-sensor^='accelerometer'] {
display: none;
}
</style>
<style id="itpings-table_PingedDevices">
/* Hide Columns Pinged Devices */
itpings-table[query='PingedDevices'] [data-column='created'],
itpings-table[query='PingedDevices'] [data-column='alt'],
itpings-table[query='PingedDevices'] [data-column='lat'],
itpings-table[query='PingedDevices'] [data-column='lon'] {
display: none;
}
/* collapse columns on smaller screen width */
@media (max-width: 1280px) {
itpings-table[query='PingedDevices'] [data-column='coding_rate'] {
display: none;
}
}
</style>
<style id="itpings-table_PingedGateways">
/* Hide Columns Pinged Gateways */
itpings-table[query='PingedGateways'] [data-column='created'],
itpings-table[query='PingedGateways'] [data-column='alt'],
itpings-table[query='PingedGateways'] [data-column='lat'],
itpings-table[query='PingedGateways'] [data-column='lon'],
itpings-table[query='PingedGateways'] [data-column='_gtwid'] {
display: none;
}
/* collapse columns on smaller screen width */
@media (max-width: 1280px) {
itpings-table[query='PingedGateways'] [data-column='trusted'],
itpings-table[query='PingedGateways'] [data-column='coding_rate'] {
display: none;
}
}
</style>
<!--<style id="Color new Pings">-->
<!--TBODY.newPing_noFade .NewCell {-->
<!--background-color: var(--global--Background-fadeOut--Color);-->
<!--color: black;-->
<!--}-->
<!--TBODY.newPing .NewCell {-->
<!--animation: fadeOut_NewPing 60s linear 0s;-->
<!--}-->
<!--TBODY.newPing .HistoricCell {-->
<!--animation: fadeOut_HistoricPing 60s linear 0s;-->
<!--}-->
<!--@keyframes fadeOut_NewPing {-->
<!--0% {-->
<!--background-color: var(--global--Background-fadeOut--Color);-->
<!--color: black;-->
<!--}-->
<!--100% {-->
<!--background-color: transparent;-->
<!--color: darkgrey;-->
<!--}-->
<!--}-->
<!--@keyframes fadeOut_HistoricPing {-->
<!--0% {-->
<!--background-color: var(--global--Background-fadeOut--HistoricColor);-->
<!--color: black;-->
<!--}-->
<!--100% {-->
<!--background-color: transparent;-->
<!--color: darkgrey;-->
<!--}-->
<!--}-->
<!--.unseen_warning {-->
<!--background: orange;-->
<!--}-->
<!--</style>-->
<style id="Loading_dots">
/* Custom Element -table is created AFTER loading, so needs more markup in the .loading DIV title */
itpings-table .loading {
text-align: left;
background: var(--global--Background-Title--Color);
color: var(--global--header-text--Color);
font-weight: bold;
}
/* a Chart already has a title div, no need for extra markup */
itpings-chart .loading {
}
/* 3 pulsating ellipses after Loading text */
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(4, end) 1100ms infinite;
animation: ellipsis steps(4, end) 1100ms infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1.25em;
}
}
.nodata {
color: black;
background: lightgray;
height: 100%;
}
</style>
<style id="Chart">
itpings-chart {
height: var(--global--article--Rowheight);
max-height: var(--global--article--Rowheight);;
position: relative;
overflow: hidden;
background-color: var(--global--itpings--BackgroundColor);
}
itpings-chart .itpings-div-title {
text-align: left;
padding-left: 2px;
}
.chart-wrapper {
border: 1px solid var(--global--Background-Title--Color);
position: relative;
height: inherit;
overflow: hidden;
}
itpings-chart CANVAS {
/*height: calc(var(--global--article--Rowheight) - 3em);*/
}
</style>
<style id="ChartInterval">
.chart_interval {
position: absolute;
top: 1px;
right: 0;
}
.chart_interval > div {
border: 1px solid grey;
width: 2.1em;
margin-right: 1px;
text-align: center;
position: relative;
float: left;
font-size: 9px;
background: var(--global--Background-Title--Color);
}
.chart_interval > div:hover {
cursor: pointer;
background-color: var(--global--Background-Title--Color);
color: orange;
font-weight: 900;
}
.chart_interval > div.selectedInterval {
background-color: var(--global--header-text--Color);
color: black;
font-weight: 900;
}
</style>
<style>
/*!*Temperature Image*!*/
/*tbody > tr[data-sensor="temperature_5"] > td[data-column="sensorvalue"]::before {*/
/*!*content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiMwMzAxMDQ7IiBkPSJNMjAsMjEuNTI3VjQuMDA2QzIwLDEuNzkzLDE4LjIwNSwwLDE2LDBjLTIuMjA5LDAtNCwxLjc4Ny00LDQuMDA2djE3LjUyMWMtMS4yMjgsMS4wOTktMiwyLjY5Ni0yLDQuNDczYzAsMy4zMTIsMi42ODcsNiw2LDZjMy4zMTIsMCw2LTIuNjg4LDYtNkMyMiwyNC4yMjMsMjEuMjI5LDIyLjYyNiwyMCwyMS41Mjd6IE0xNiwzMGMtMi4yMDksMC00LTEuNzkxLTQtNGMwLTEuNDgsMC44MDUtMi43NzMsMi0zLjQ2NVY0LjAwNUMxNCwyLjg5NywxNC44OTYsMiwxNiwyYzEuMTExLDAsMiwwLjg5NywyLDIuMDA1djE4LjUzYzEuMTk1LDAuNjkxLDIsMS45ODQsMiwzLjQ2NUMyMCwyOC4yMDksMTguMjA5LDMwLDE2LDMweiIvPjxwYXRoIHN0eWxlPSJmaWxsOiMwMzAxMDQ7IiBkPSJNMTYuOTg0LDIzLjE2NkMxNi45OTUsMjMuMTExLDE3LDIzLjA1NSwxNywyMi45OTd2LTkuOTk0QzE3LDEyLjQ0OSwxNi41NTcsMTIsMTYsMTJjLTAuNTUzLDAtMSwwLjQ1Ni0xLDEuMDAzdjkuOTk0YzAsMC4wNTgsMC4wMDUsMC4xMTQsMC4wMTQsMC4xNjlDMTMuODQyLDIzLjU3MywxMywyNC42ODgsMTMsMjZjMCwxLjY1NywxLjM0MywzLDMsM3MzLTEuMzQzLDMtM0MxOSwyNC42ODgsMTguMTU4LDIzLjU3MywxNi45ODQsMjMuMTY2eiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+);*!*/
/*}*/
/*!*RSSI Signal Strength Image*!*/
/*tbody > tr > td[data-column="rssi"]::before {*/
/*!*content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDM5Mi42MzQgMzkyLjYzNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzkyLjYzNCAzOTIuNjM0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM3Mi4yMDIsMGgtNTUuNzk3Yy01LjMzNywwLTkuNjYsNC4zMTktOS42Niw5LjY1NXY4Ny40NTZjMC01LjMzNS00LjMyMi05LjY1OC05LjY2NC05LjY1OGgtNTUuNzk3ICAgYy01LjMzNiwwLTkuNjY5LDQuMzIzLTkuNjY5LDkuNjU4djUzLjk2Yy0xLjc2Mi0yLjEzNS00LjQwNS0zLjUyNS03LjM5My0zLjUyNWgtNTUuODAzYy01LjMzLDAtOS42NTYsNC4zMjYtOS42NTYsOS42NjF2NjguNjc3ICAgYzAtNS4zMy00LjMyNi05LjY1My05LjY2Ny05LjY1M0g5My4zYy01LjMzMywwLTkuNjU4LDQuMzE3LTkuNjU4LDkuNjUzdjUzLjk2NGMtMS43NzEtMi4xMzQtNC40MS0zLjUyMy03LjQwNS0zLjUyM0gyMC40NCAgIGMtNS4zMzMsMC05LjY2NSw0LjMxNy05LjY2NSw5LjY1OHY5Ni45OTFjMCw1LjMzMSw0LjMyNiw5LjY2LDkuNjY1LDkuNjZsMzUxLjc2MS0wLjIwNWM1LjMyOCwwLDkuNjU3LTQuMzIzLDkuNjU3LTkuNjY0VjkuNjU1ICAgQzM4MS44NTMsNC4zMjYsMzc3LjUzLDAsMzcyLjIwMiwweiBNNzIuOTIxLDM3Ni4xMkgyNi43Nzl2LTgwLjQ3OWg0Ni4xNDNWMzc2LjEyeiBNMTQ1LjE4OCwzNzYuMTJIOTkuMDVWMjM2LjA4M2g0Ni4xMzhWMzc2LjEyeiAgICBNMjIwLjQzMSwzNzYuMTJoLTQ2LjE0VjE2MS41aDQ2LjE0VjM3Ni4xMnogTTI5NC4xNjIsMzc2LjEyaC00Ni4xNDFWMTAzLjAxOWg0Ni4xNDFWMzc2LjEyeiBNMzY2LjE5OCwzNzYuMTJoLTQ2LjEzMlYxNi42MzggICBoNDYuMTMyVjM3Ni4xMnoiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)*!*/
/*}*/
</style>
<style id="leftColorSquareDeviceID">
/* display TTN device id */
span[data-column='dev_id'] {
text-align: left;
display: block;
width: 14em;
}
/* display square left of device id, color will be set bij itpings-chart */
span[data-column='dev_id']:before {
content: "";
display: inline-block;
width: var(--global--device-color-square-Width);
height: var(--global--device-color-square-Height);
margin-top: 0;
margin-right: 1px;
border: 1px solid darkgreen;
}
</style>
<!-- style definitions controlled by JS script -->
<style id="DynamicDeviceColors">
/* This style definition will be filled by JavaScript */
</style>
<style id="sidebar_icons">
.sidebar_icon {
--icon_selected_color: orange;
width: 90%;
margin: 5%;
padding: 10%;
}
.sidebar_icon svg {
fill: grey;
}
.sidebar_icon svg:hover {
fill: beige;
}
.sidebar_icon svg {
transition: 200ms;
transition-timing-function: ease-in-out;
-webkit-transition: 200ms;
-webkit-transition-timing-function: ease-in-out;
}
.sidebar_icon_selected svg {
fill: var(--icon_selected_color);
}
.sidebar_icon_selected:hover svg {
fill: var(--icon_selected_color);
cursor: initial;
}
</style>
<style id="syncedTR">
TBODY TR[data-_pingid="187587"] {
color: pink;
font-weight: bold;
color: green;
}
.ITpings_page H1::after {
content: ' - Under Construction';
}
.ITpings_page {
padding: 1em;
}
</style>
<!-- run script after CSS declarations, because script references above/existing styles -->
<script language="JavaScript" src="ITpings_dashboard.js"></script>
</head>
<body>
<!--TEMPLATES injected in ARTICLE -->
<!--
Templates are built with itpings-table and itpings-chart custom HTML elements (W3C standard Custom Elements)
-->
<TEMPLATE id="article_dashboard">
<!--row 1-->
<itpings-chart class="top_left" sensor="snr" title="SNR" interval="6H"></itpings-chart>
<itpings-chart class="middle_left" sensor="channel" title="Channel" interval="6H"></itpings-chart>
<!--<itpings-table query="Devices" title="All Devices" nocache></itpings-table>-->
<!-- query="SensorValues" todo: PHP server timed out on this query.. -->
<itpings-table class="top_center" query="PingedDevices" title="Pinged Devices"></itpings-table>
<itpings-chart class="top_right" sensor="Temperature" title="Temperatures" interval="6H"></itpings-chart>
<!--row 2-->
<itpings-table class="middle_center" query="PingedGateways" title="Pinged Gateways"></itpings-table>
<itpings-chart class="middle_right" sensor="Luminosity" title="Light" interval="6H"></itpings-chart>
<!--row 3-->
<itpings-table class="bottom_left" query="Events" title="ITpings Events" nocache limit="200"></itpings-table>
<itpings-chart class="bottom_center_right" sensor="Battery" title="Battery"
interval="6H"></itpings-chart>
<itpings-chart class="bottom_right" sensor="rssi" title="RSSI" interval="6H"></itpings-chart>
<style id="JSONviewer">
itpings-json {
/* FFU - For future use */
display: none;
grid-area: 1/3/4/5;
grid-area: 1/4/4/5;
z-index: 1;
position: relative;
}
#JSONview {
transition: width 2s;
width: 10%;
background: lightblue;
position: absolute;
right: 0;
height: 100%
}
#JSONview:hover {
width: 100%;
}
</style>
<!--<itpings-json>-->
<!--<div id="JSONview">JSON</div>-->
<!--</itpings-json>-->
</TEMPLATE>
<TEMPLATE id="article_gateway">
<div class="ITpings_page">
<h1>Gateway</h1>
<ul>
<li>List of nearest gateways</li>
<li>set location</li>
<li>location+zoom in localstorage</li>
</ul>
<!--<itpings-table class="middle_center" query="PingedGateways" title="Pinged Gateways"></itpings-table>-->
<itpings-chart class="top_right" sensor="Temperature" title="Temperatures" interval="6H"></itpings-chart>
<!--<itpings-table query="Gateways" fullheight title="" Gatways></itpings-table>-->
<!--<itpings-table query="locations" title="Locations"></itpings-table>-->
</div>
</TEMPLATE>
<TEMPLATE id="article_devices">
<div class="ITpings_page">
<h1>devices</h1>
<ul>
<li>devices info, last seen, counters, rssi graph</li>
</ul>
<!--<itpings-chart class="top_right" sensor="Temperature" title="Temperatures" interval="6H"></itpings-chart>-->
</div>
</TEMPLATE>
<TEMPLATE id="article_hardware">
<div class="ITpings_page">
<h1>Hardware</h1>
</div>
</TEMPLATE>
<TEMPLATE id="article_globe">
<!--<div class="ITpings_page">-->
<!--<h1>Globe</h1>-->
<!--</div>-->
<!--<itpings-map class="columns2-right"></itpings-map>-->
<!--<itpings-table class="columns2-left" query="Events" title="ITpings Events" nocache limit="200"></itpings-table>-->
<itpings-table class="bottom_left" query="events" limit="200"></itpings-table>
</TEMPLATE>
<TEMPLATE id="itpings-table">
<DIV class="table-wrapper">
<TABLE class="sticky-header">
<CAPTION class="itpings-div-title"></CAPTION>
<THEAD></THEAD>
</TABLE>
<TABLE class="data-table">
<TBODY>
</TBODY>
</TABLE>
</DIV>
</TEMPLATE>
<TEMPLATE id="article_database">
<div class="ITpings_page">
<h1>Database</h1>
<!--<itpings-table query="DBInfo" title="ITpings Database Info" fullheight></itpings-table>-->
<!--<button id="dropDatabase">Drop Database</button>-->
<!--<button id="createDatabase">Create Database</button>-->
<script>
console.log('executed INline article_database script');
let key = 'YOUR_PRIVATE_KEY';// but you better not use this on a public website!
let __addClick = (selector, action) => {
let element = document.querySelector(selector);
if (element) {
element.addEventListener('click', () => {
if (confirm('Really??')) document.location = './ITpings_connector.php?action=' + action + '&key=' + key;
});
}
};
__addClick('#dropDatabase', 'drop');
__addClick('#createDatabase', 'create');
</script>
https://365csi.nl/itpings.nl/ITpings_connector.php?query=CleanDataTables
</div>
</TEMPLATE>
<TEMPLATE id="article_controlpanel">
<div class="ITpings_page">
<h1>Controlpanel</h1>
</div>
</TEMPLATE>
<TEMPLATE id="article_info">
<itpings-chart class="bottom_center_right" sensor="Battery" title="Battery" interval="6H"></itpings-chart>
</TEMPLATE>
<div class="grid_container">
<header class="header">
<div class="applicationTitle">ITpings Dashboard <span id="itpings_article_title"></span>
<div id="header_info">
<div>
<span id="heartbeat_time"></span>
</div>
<div>
<span id="heartbeat_heart">♡</span> <span id="heartbeat"></span>
</div>
<div>
<span>⚡</span> <span id="heartbeat_ping"></span>
</div>
</div>
</div>
</header>
<aside class="sidebar">
<!-- SVG editor: https://petercollingridge.appspot.com/svg-editor -->
<div class="sidebar_icon">
<a href="#">
<svg viewBox="0 0 981 823">
<g transform="translate(0,823) scale(0.1,-0.1)">
<path d="M269 8220c-109-19-183-74-228-170l-26-55 0-3025c0-2387 3-3034 12-3066 16-50 59-115 96-144 15-12 53-31 85-43l57-22 1863-3c1024-1 1862-6 1862-11 0-78-64-801-74-841-34-129-108-248-202-325-31-24-161-108-291-186-248-149-273-171-273-237 0-22 8-41 25-58l24-24 1710 2 1709 3 26 24c40 38 30 98-26 147-29 26-206 137-318 199-181 101-285 199-350 331-49 99-68 194-80 396-6 101-17 270-26 377-8 107-12 197-8 200 3 3 834 6 1847 6 1505 0 1850 2 1887 13 92 28 176 95 219 177l21 40 0 3041 0 3042-40 59c-44 66-90 103-171 136l-54 22-4615 1c-2538 1-4636-2-4661-6zm9071-3235l0-2575-4430 0-4430 0 0 2575 0 2575 4430 0 4430 0 0-2575zM3745 6639c-56-14-85-44-85-90 0-21 5-49 11-62 22-48 40-52 267-55 116-2 212-6 212-8 0-3-199-231-442-507-242-276-444-505-448-510-3-4-181 133-396 304-214 172-415 331-448 355-66 50-102 55-146 24-16-11-282-259-592-551l-563-530-8-52c-11-62 1-99 38-123 57-37 64-31 646 516 350 329 546 507 553 501 6-4 191-152 411-328 220-175 418-331 440-346 54-37 95-35 141 6 28 23 651 722 936 1048 9 10 19 19 22 19 3 0 6-85 6-190 0-205 5-232 51-256 44-22 85-17 121 15l33 29 3 344c2 229 0 355-8 381-21 71-24 72-390 74-182 1-342-3-365-8zM7178 6634c-10-9-11-1544-1-1544 5 0 1161 861 1197 891 20 18-113 175-227 267-211 172-474 306-709 362-92 22-249 37-260 24zM6832 6509c-314-37-625-192-867-434-234-235-388-535-440-860-21-130-19-358 4-497 38-221 133-449 264-635 76-107 236-272 338-346 409-299 933-385 1403-229 109 36 261 113 260 132-1 8-156 256-345 550-445 690-459 712-475 757-11 31-13 187-14 806l0 767-27-1c-16-1-61-5-101-10zM7872 5344c-381-285-619-471-615-478 3-6 184-286 401-623l395-612 44 31c24 18 80 66 124 106 519 482 667 1308 346 1925-28 53-56 102-62 107-8 7-199-131-633-456zM3935 5351c-11-5-29-19-40-31-20-22-20-38-22-914-2-700 0-896 10-916 26-53 61-60 305-60 173 0 230 3 258 15 67 28 65-14 62 970l-3 885-28 27-27 28-248 2c-136 1-256-2-267-6zM2080 5027c-24-8-41-23-52-47-17-32-18-89-18-743 0-790-2-765 66-793 30-13 78-15 273-12 252 3 268 6 290 55 17 37 15 1460-2 1493-26 53-61 60-302 59-143 0-232-4-255-12zM3038 4710c-103-18-98 12-98-642 0-530 1-554 20-585 13-21 31-35 57-42 60-17 456-14 498 3 69 29 66 2 66 631 0 614 1 596-53 627-27 15-417 21-490 8zM1131 4374c-49-35-51-56-50-461 0-422 2-437 59-465 30-16 66-18 265-18 263 0 290 6 312 70 15 45 18 758 3 812-6 20-22 46-37 58-24 19-39 20-277 20-216 0-255-2-275-16z"></path>
</g>
</svg>
</a>
</div>
<div class="sidebar_icon" selected>
<a href="#gateway">
<svg viewBox="0 0 289 289">
<path d="M191 129c-3-23-23-42-47-42 -24 0-44 18-47 42l17 11c0-2-1-4-1-6 0-17 13-30 30-30 17 0 30 13 30 30 0 2 0 4-1 6C179 137 185 133 191 129zM144 58c-34 0-64 23-73 54l15 10c6-27 30-47 58-47 29 0 53 20 59 47 5-3 10-7 15-10C207 81 178 58 144 58zM144 26c-45 0-85 28-101 68l15 10c13-35 47-60 86-60 39 0 73 25 86 60 5-3 10-7 14-10C228 54 190 26 144 26z"></path>
<rect x="219" y="202" width="17" height="21"></rect>
<rect x="249" y="202" width="17" height="21"></rect>
<path d="M280 172h-263c0 0 0 0 0 0V119c0-5-4-8-8-8S0 114 0 119v100c0 5 4 9 9 9 0 0 0 0 0 0v18c0 5 4 9 9 9h1v9h6 11 6v-9h214v9h6 11 6v-9h2c5 0 9-4 9-8v-64C289 176 285 172 280 172zM26 189h246v47h-246C26 236 26 189 26 189z"></path>
</svg>
</a>
</div>
<div class="sidebar_icon">
<a href="#devices">
<svg viewBox="0 0 200 200">
<g transform="translate(0,200) scale(0.1,-0.1)">
<path d="M918 1899c-133-14-290-92-382-188l-40-41 29-30c16-16 32-30 35-30 3 0 28 20 55 45 60 56 142 106 215 131 42 15 83 19 175 19 106-1 128-4 189-28 73-29 182-101 214-142 25-32 32-31 67 5l29 30-40 41c-60 62-162 127-244 156-82 28-209 42-302 32zM920 1730c-104-19-194-67-265-140l-39-40 36-37 37-37 51 48c28 26 76 59 108 74 49 23 70 27 152 27 82 0 103-4 152-27 32-15 80-48 108-74l51-48 37 37 36 37-39 40c-106 109-283 167-425 140zM927 1560c-58-15-108-44-151-89l-40-41 34-35c19-19 38-35 43-35 4 0 20 14 35 31 76 91 229 90 305-1l28-33 37 34c20 19 39 35 41 37 13 7-89 94-132 113-58 24-144 33-200 19zM965 1383c-81-22-119-118-75-190 37-62 116-81 178-43 34 21 62 71 62 111 0 32-29 86-54 103-27 17-82 27-111 19zM556 1178c-126-127-186-270-186-444 0-184 56-320 185-450 127-128 262-184 445-184 183 0 319 56 445 184 128 130 185 267 185 445 0 177-58 318-181 444-42 42-80 77-85 77-5 0-38-29-74-65l-64-64 65-60c77-70 124-151 145-250 49-239-118-476-368-522-131-24-278 25-381 128-183 183-174 465 20 643l67 61-64 64c-36 36-68 65-73 65-5 0-42-33-81-72z"></path>
</g>
</svg>
</a>
</div>
<div class="sidebar_icon">
<a href="#hardware">
<svg viewBox="0 0 512 512">
<path d="M269 243c0-3-1-5-3-7 -2-2-4-3-7-3h-12v18h12c3 0 5-1 7-3C268 248 269 246 269 243zM371 89H141c-29 0-52 23-52 52v229c0 29 23 52 52 52h231c29 0 52-23 52-52V142C424 113 400 89 371 89zM218 245h-18l0-2c-1-3-2-5-3-6 -1-1-4-2-6-2 -2 0-3 0-4 1 -1 1-2 1-3 2 -1 1-1 1-1 2 0 1-1 2-1 3 0 1 0 3-1 5 0 2 0 5 0 8 0 3 0 6 0 8 0 2 0 4 1 5 0 1 1 2 1 3 0 1 1 1 1 2 1 1 2 2 3 2 1 1 3 1 4 1 3 0 5-1 6-2 2-2 3-4 3-6l0-2h16l3 0 0 3c-1 8-5 14-10 18 -5 4-11 6-18 6 -4 0-8-1-12-2 -3-1-6-3-9-6 -2-2-4-4-5-6 -1-2-2-4-2-7 0-2-1-5-1-8 0-3 0-6 0-9 0-3 0-6 0-9 0-3 0-6 1-8 0-2 1-5 2-7 1-2 3-4 5-6 3-3 6-5 9-6 3-1 7-2 12-2 7 0 13 2 18 6 5 4 8 10 10 18l0 2L218 245zM122 203c0 0 0 0 0 0 -4 1-9-2-9-7V147c0-17 14-30 30-30h39c6 0 9 7 5 12l-62 72C125 202 123 203 122 203zM249 266L249 266h0v25H232v-72h28c4 0 7 1 10 2 3 1 6 3 8 5 2 2 4 5 5 7 1 3 2 6 2 9 0 3-1 6-2 9 -1 3-3 5-5 7 -2 2-5 4-8 5 -3 1-6 2-10 2h-11H249zM315 274c2 2 4 3 7 3 3 0 5-1 7-3 2-2 3-4 3-8v-46h17v46c0 4-1 7-2 11 -1 3-3 6-6 8 -2 2-5 4-9 5 -3 1-7 2-10 2 -4 0-7-1-10-2 -3-1-6-3-9-5 -2-2-4-5-6-8 -1-3-2-7-2-11v-46h17v46C313 270 314 272 315 274zM121 68v0h3 47 3v-3V46v-3h-3 -9c-2 0-4-2-4-4V3 0h-3 -15 -3v3 36c0 2-2 4-4 4h-9 -3v3 19 3V68L121 68zM243 68h3v-3V46v-3h-3 -9c-2 0-4-2-4-4V3 0h-3H212h-3v3 36c0 2-2 4-4 4h-9 -3v3 19 3h3H243zM266 68v0h3 47 3v-3V46v-3h-3 -9c-2 0-4-2-4-4V3 0h-3 -15 -3v3 36c0 2-2 4-4 4h-9 -3v3 19 3V68L266 68zM388 68h3v-3V46v-3h-3 -9c-2 0-4-2-4-4V3 0h-3 -15 -3v3 36c0 2-2 4-4 4h-9 -3v3 19 3h3H388zM342 444h-3v3 19 3h3 9c2 0 4 2 4 4v36V512h3 15 3v-3 -36c0-2 2-4 4-4h9 3 0l0 0h0v-3 -19 -3h-3H342zM269 444h-3v3 19 3 0l0 0v0h3 9c2 0 4 2 4 4v36V512h3 15 3v-3 -36c0-2 2-4 4-4h9 3 0l0 0h0v-3 -19 -3h-3H269zM196 444h-3v3 19 3h3 9c2 0 4 2 4 4v36V512h3 15 3v-3 -36c0-2 2-4 4-4h9 3 0l0 0h0v-3 -19 -3h-3H196zM124 444h-3v3 19 3 0l0 0v0h3 9c2 0 4 2 4 4v36 3 0l0 0V512h3 15 3v-3 -36c0-2 2-4 4-4h9 3 0l0 0h0v-3 -19 -3h-3H124zM509 137h-36c-2 0-4-2-4-4v-9 -3h-3 -19 -3v3 47 3h3 19 3v-3 -9c0-2 2-4 4-4h36 3 0l0 0H512v-3 -15 -3H509zM473 209c-2 0-4-2-4-4v-9 -3h-3 -19 -3 0l0 0h0v3 47 3h3 19 3v-3 -9c0-2 2-4 4-4h36H512v-3V212v-3h-3H473zM473 282c-2 0-4-2-4-4v-9 -3h-3 -19 -3v3 47 3h3 19 3v-3 -9c0-2 2-4 4-4h36 3l0 0v0H512v-3 -15 -3h-3H473zM473 355c-2 0-4-2-4-4v-9 -3h-3 -19 -3v3 47 3h3 19 3v-3 -9c0-2 2-4 4-4h36H512v-3 -15 -3h-3H473zM46 339h-3v3 9c0 2-2 4-4 4H3 0v3 15 3h3 36c2 0 4 2 4 4v9 3h3 19 3v-3V342v-3h-3H46zM46 266h-3v3 9c0 2-2 4-4 4H3 0v3 15 3h3 36c2 0 4 2 4 4v9 3h3 19 3v-3 -47 -3h-3H46zM46 193h-3 0l0 0h0v3 9c0 2-2 4-4 4H3 0v3 15 3h3 36c2 0 4 2 4 4v9 3h3 19 3v-3 -47 -3h-3H46zM46 121h-3v3 9c0 2-2 4-4 4H3 0v3 15 3h3 36c2 0 4 2 4 4v9 3h3 19 3v-3 -47 -3h-3H46z"></path>
</svg>
</a>
</div>
<div class="sidebar_icon">
<a href="#globe">
<svg viewBox="0 0 626 626">
<g transform="translate(0,626) scale(0.1,-0.1)">
<path d="M3807 6236c-120-50-246-162-389-348-94-122-255-380-294-470-16-37-18-38-68-38-62 0-262-24-366-44-425-82-851-312-1162-628-98-99-185-207-268-331l-65-97-220 0c-121 0-256-5-300-11-405-54-579-125-650-265-24-47-27-63-22-114 19-218 325-493 877-790 90-48 130-68 310-153 540-254 1217-486 1945-667 138-34 253-65 257-68 3-4-23-86-58-182-57-154-96-252-205-510-42-100-161-346-211-435-25-44-57-102-73-130-116-207-272-395-391-471-68-43-143-55-191-30-80 41-148 173-178 346-16 93-36 329-28 342 2 3 54-18 116-47 117-56 273-111 404-144 131-33 120-37 180 58l52 84-30 35c-27 30-29 36-17 54 8 12 29 26 48 32 31 10 35 15 32 41-7 82-24 115-88 172-66 58-75 80-54 128 9 19 9 19 16-3 9-31 27-23 38 17 12 41-17 84-60 89-16 2-33 8-38 13-6 5-23 9-38 9-23 0-28 4-28 24 0 18-11 31-46 50-62 35-104 46-205 55-68 6-93 13-120 33-44 32-111 58-152 58-57 1-67 10-163 149-21 30-43 77-50 105-6 28-22 74-35 101-13 28-22 53-21 57 1 4-7 12-19 18-18 10-20 19-16 78 3 37 10 68 16 70 17 6 54 83 44 91-4 4-75 33-158 66-130 50-285 116-470 198-27 12-107 50-178 85-71 34-131 61-133 59-5-5 33-263 50-337 127-566 471-1065 953-1383l93-61 0-221c0-563 114-912 314-966 98-27 232 29 361 150 36 34 80 83 163 181 35 42 171 239 203 295 257 453 387 736 593 1295 35 96 67 185 71 198 3 12 10 22 13 22 4 0 73-11 152-25 385-68 452-78 685-104 339-37 471-44 775-39 262 5 311 8 442 31 228 41 357 95 436 181 57 62 75 108 69 177-17 197-275 446-737 710l-135 77-2 49c-29 578-258 1105-653 1504-110 111-202 189-301 257l-46 31-8-117c-8-132-17-111 86-192 51-40 181-170 227-226 99-123 124-157 172-234 252-403 359-868 306-1330-18-155-63-353-78-344-5 3-6 19-3 36 4 16 1 43-6 59-9 23-9 33 0 42 11 11 16 47 6 47-4 0-20-7-37-16-24-13-35-13-59-4-26 11-32 9-71-23-50-40-145-90-157-82-5 3-7 14-4 25 8 30-17 24-47-11l-26-31-47 21c-26 12-47 27-47 34-1 6-11 25-24 41-27 33-46 31-72-9-21-32-7-72 37-104 16-12 29-30 29-41 0-13 7-20 20-20 13 0 20-7 20-19 0-34 57-5 93 45 35 50 54 55 63 19 4-18 15-26 41-31 25-5 33-10 28-22-13-34-27-103-22-108 3-3 104-8 225-10 171-4 221-2 229 8 37 50 123 483 123 624l0 45 28-16c84-48 131-80 256-179 63-50 135-127 174-186 33-50 37-61 37-126 0-64-3-74-30-106-93-109-349-168-729-168-298 0-674 36-1041 100-93 16-194 32-223 36-29 4-54 10-57 14-2 4 5 38 16 76 11 38 31 107 45 154 13 47 33 117 44 155 32 114 99 372 120 464 62 281 82 375 114 546 64 340 95 572 136 1010 15 166 13 627-5 775-41 347-124 546-257 613-67 34-123 35-201 3zm-1-397c120-116 173-384 161-823-8-289-21-435-68-756-71-482-171-954-286-1345-19-66-53-183-75-260-22-77-43-143-47-147-3-4-22-3-41 2-19 6-147 38-285 71-890 215-1771 554-2285 879-368 232-505 419-410 561 66 100 264 163 558 176l123 6-40-79c-49-99-95-213-132-329-27-87-62-235-57-240 2-2 45-29 96-60 226-137 602-311 952-441 52-20 130-49 172-65 91-34 95-35 102-11 11 32 67 82 93 82 30 0 60 15 95 48 24 22 28 23 34 9 3-9 25-22 48-29 22-6 48-20 57-31 13-16 20-17 37-8 12 6 52 17 89 24 80 15 138 5 177-32 17-16 32-22 48-18 27 7 186-7 196-17 3-4-6-17-22-29l-28-23 18-36c17-37 17-37-6-56l-24-19 30-31c19-18 46-33 70-38 45-8 70-26 78-57 3-14 27-33 68-53 99-50 104-50 129 4 11 26 36 99 54 163 37 125 37 137-4 216-11 23-21 58-21 78 0 51-45 131-78 140-38 9-50 22-62 64-17 61-24 67-54 47-31-20-33-46-6-71 11-10 20-24 20-32 0-31 42-93 73-109 47-24 67-44 67-68-1-19-2-19-11-3-5 9-19 17-29 17-16 0-19-5-13-31 5-24 0-36-23-60-15-16-34-29-41-29-7 0-18-11-23-25-5-14-13-25-17-25-5 1-28 19-53 40-34 30-42 42-33 51 7 7 19 8 30 4 37-16 96-15 115 2 17 15 17 18 1 42-19 31-83 109-135 168-26 29-38 52-38 72 0 16-7 34-16 42-13 11-23 9-60-11-40-22-47-23-76-11-18 8-49 14-68 15-27 1-35-3-38-19-6-32-33-55-63-55-16 0-44-8-64-17-30-14-35-22-35-50 0-26-4-33-19-33-10 0-21-9-24-19-10-39-162-39-211 0-15 12-23 26-20 34 4 8-1 18-10 21-19 7-56 65-56 88 0 9 17 35 38 59 43 48 60 80 64 121 5 50 28 53 94 15 63-36 118-59 146-59 10 0 29 17 42 38 20 29 25 49 23 95-1 38-5 57-14 57-17 0-46 57-33 65 5 3 23-1 39-10 41-21 51-19 51 9 0 35 15 40 29 10 8-19 16-24 29-19 9 4 27 10 40 13 12 2 27 13 33 23 5 11 18 19 29 19 10 0 21 4 25 10 3 5 11 7 18 4 7-2 23 9 35 26 21 27 27 30 73 28 63-3 82 16 73 73-6 35-4 40 24 56 17 10 33 27 36 38 5 17 8 18 16 5 17-27 11-66-15-88-29-25-32-53-9-76 19-19 26-20 43-3 10 10 15 9 24-4 20-26 45-29 97-12 35 11 54 13 61 6 7-7 20-7 40 1 24 9 29 15 24 33-12 48 39 118 60 83 7-12 45-14 45-2 0 4-9 13-20 20-33 21-25 50 18 61 20 6 49 11 65 11 15 0 27 4 27 9 0 5 3 16 6 25 8 21-8 20-61-4-62-28-89-20-110 36l-17 45 46 59c41 54 44 61 29 75-24 24-58 15-58-15 0-34-12-50-51-66-31-13-34-18-34-58 0-27 6-48 15-56 24-20 17-44-17-65-41-23-48-33-48-67 0-22-7-31-34-42-18-8-37-19-40-25-4-6-13-11-21-11-10 0-16 22-21 80-3 44-12 87-19 96-10 15-14 15-41 1-32-16-61-10-84 18-13 16-11 20 14 40 22 18 26 26 19 40-11 19 5 65 22 65 6 0 41 20 80 45 38 25 75 45 82 45 7 0 19 16 27 35 8 19 21 35 29 35 8 0 32 20 55 45 30 33 48 45 69 45 16 0 38 7 51 15 25 18 48 10 92-30 14-13 36-25 50-27 24-3 25 0 37 72 30 195 53 763 31 785-9 9-203 63-288 80-47 10-151 25-231 34l-147 16 37 61c51 84 96 145 172 235 83 97 122 131 195 170 51 27 67 30 117 27 49-4 62-9 93-39zm-1053-712c22 3 37 2 37-4 0-6 14-16 30-23 17-7 30-19 30-26 0-9-11-14-30-14-25 0-30-4-30-25 0-19-5-25-21-25-12 0-37-13-56-30-23-21-44-30-68-30-25 0-43-9-71-35-23-22-46-35-63-34-26 0-26 0-3 11 12 6 22 15 22 19 0 15-16 18-37 6-69-40-104-57-118-57-30 0-14 31 34 65 27 20 52 42 55 50 7 19 26 20 26 1 0-21 33-30 46-12 6 9 22 16 35 16 13 0 35 9 49 20 14 11 34 20 45 20 28 0 42 11 54 42 12 33 7 38-38 38l-36 0 25-20c27-21 29-19-47-37-24-6-43-6-43-2 0 15-28 10-62-11-36-22-78-27-78-9 0 6 18 18 39 26 23 9 37 21 35 28-6 14 176 66 192 54 5-5 27-6 47-2zm377-25c0-5 6-17 14-27 14-19 15-19 34-1 25 22 40 15 40-19 0-21-7-27-29-32-24-4-27-8-18-19 6-8 17-14 24-14 7 0 15-6 18-14 3-8 28-16 61-20 65-9 76-20 48-49-19-18-19-22-5-32 22-16 8-35-27-35-36 0-80-19-80-35 0-19-27-38-35-25-10 16-23 12-30-11-4-11-18-24-31-29-13-5-24-16-24-25 0-22-25-18-42 7-21 32-52 18-43-21 5-24 2-29-16-34-14-4-27 0-34 9-6 9-17 12-29 8-16-6-17-8-2-16 9-5 16-16 16-23 0-24-76-19-112 7-24 16-34 19-48 10-26-16-108-26-123-14-24 19-83 23-97 7-7-8-19-15-26-15-23 0-137-49-146-63-5-9-12-9-25-1-23 14-28 34-9 34 10 0 13 6 9 16-9 24 15 59 56 82 20 12 45 30 56 42 10 11 28 20 41 20 14 0 25 8 29 19 7 23 67 46 98 37 11-3 36 3 56 14 20 11 48 24 64 30 15 5 27 16 27 23 0 12 48 34 138 62 6 3 12 15 12 28 0 19 7 26 31 31 46 9 87 7 94-4 7-12 45 10 45 26 0 16-25 25-37 13-11-11-43-2-43 12 0 10 69 48 88 49 6 0 12-4 12-8zm-766-154c-34-59-75-89-164-120-10-4-7-8 12-13 14-4 35-2 46 4 14 7 23 8 27 1 9-15-2-27-32-35-15-3-58-25-95-48-56-35-70-49-80-79-6-21-19-40-30-43-10-4-18-14-18-23-1-9-21-30-46-46-68-43-106-77-100-91 2-7 0-17-6-23-13-13-58 5-58 23 0 17 38 49 90 76 43 23 44 24 18 27-26 3-28 7-28 47 0 50-10 60-48 50-23-6-25-8-9-16 9-6 17-19 17-30 0-16-5-19-20-14-14 4-20 2-20-9 0-8-12-22-27-29-18-10-31-28-38-53-8-29-17-40-33-42-30-5-37 20-16 54l18 27-24-6c-14-3-36-9-49-13-18-5-23-4-19 7 4 12 170 167 224 209 119 93 210 139 274 140 19 0 53 11 75 25 22 13 54 25 70 25 17 1 44 7 60 15 38 17 37 17 29 3zm600-834c23-9 20-23-6-33-23-9-23-9 4-16 15-4 29-13 32-21 5-14 0-17-42-30-11-3-10-8 2-26 10-14 16-44 16-83 0-49 4-62 20-73 11-7 20-16 20-21 0-17-91-72-104-63-17 14-85 22-92 11-3-6-12-3-19 8-15 21-1 47 22 39 18-7 17 9-2 24-19 16-19 30 0 30 9 0 18 7 21 15 4 8 17 15 30 15 22 0 24 4 24 43 1 23 1 51 1 62 1 11-2 30-6 42-5 17 0 30 23 53 33 33 33 33 56 24zM4490 1879c-17-51-115-177-169-217-72-54-228-178-293-235-67-57-98-99-98-134 0-37-44-70-135-101-133-45-199-63-310-81l-100-17-52-100c-29-54-52-102-53-106-1-15 303 35 440 72 502 137 946 447 1242 866l36 52-106 7c-111 7-263 21-343 31l-45 6-14-43z"></path>
</g>
</svg>
</a>
</div>
<div class="sidebar_icon">
<a href="#database">
<svg viewBox="0 0 2000 2000">
<g transform="translate(0,2000) scale(0.1,-0.1)">
<path d="M9170 19989c-1735-73-3268-330-4580-769-921-308-1648-682-2219-1143-154-124-429-397-535-530-332-417-525-862-575-1329-15-136-15-12300 0-12436 108-998 853-1869 2157-2521 1392-696 3282-1117 5582-1243 317-17 1682-18 1995 0 1644 91 2977 311 4201 692 1500 469 2592 1154 3128 1963 212 321 331 614 403 997 17 90 18 399 21 6260 2 4415 0 6196-8 6275-65 652-412 1265-1010 1786-856 745-2240 1322-4000 1668-540 106-1098 187-1730 250-312 32-769 62-1215 81-278 12-1328 11-1615-1zm1845-1268c433-27 803-56 1030-82 1611-179 2929-516 3920-1004 875-431 1392-940 1506-1483 27-126 23-355-9-472-108-402-412-768-922-1110-1091-731-3017-1248-5200-1394-505-34-702-40-1340-40-639 0-830 5-1340 40-1850 124-3515 511-4660 1084-867 433-1361 929-1475 1478-19 94-19 297 0 398 68 355 322 710 734 1028 1054 812 3116 1392 5481 1541 140 9 338 20 440 25 248 11 1621 5 1835-9zm-8250-5205c598-399 1401-750 2330-1016 2920-838 6890-838 9810 0 1050 301 1938 709 2563 1179l33 24-4-1144c-4-1251 0-1174-63-1364-240-728-1283-1406-2864-1860-1419-407-3168-610-4967-574-1736 34-3316 278-4619 714-1331 445-2205 1066-2418 1720-63 191-59 114-63 1364l-4 1143 63-46c35-25 126-88 203-140zm-42-3584c880-758 2534-1350 4542-1626 627-86 1115-130 1850-168 312-16 1466-16 1770 0 1161 61 1991 161 2920 352 1223 251 2289 642 3010 1104 255 164 416 289 648 505l38 36-4-1235c-4-1352 0-1264-63-1455-240-728-1283-1406-2864-1860-1419-407-3168-610-4967-574-1736 34-3316 278-4619 714-1331 445-2205 1066-2418 1720-63 192-59 104-63 1454l-4 1234 81-74c45-41 109-98 143-127zm0-3750c880-758 2534-1350 4542-1626 627-86 1115-130 1850-168 312-16 1466-16 1770 0 1161 61 1991 161 2920 352 1223 251 2289 642 3010 1104 255 164 418 290 648 505l38 36-4-1225c-3-1217-3-1226-25-1319-42-181-131-367-258-539-32-42-125-145-208-227-206-205-439-379-737-548-1684-956-4685-1433-7679-1222-1808 128-3462 516-4575 1072-312 156-523 285-749 456-140 106-397 358-479 469-129 174-216 356-259 539-22 93-22 102-25 1318l-4 1224 81-74c45-41 109-98 143-127zM15485 11864c-117-26-209-78-301-169-130-130-184-258-184-438 0-124 13-183 62-286 55-115 168-229 279-283 169-81 347-88 519-21 182 72 326 236 375 428 18 69 20 221 4 297-29 140-140 300-267 384-130 87-330 123-487 88zM15485 8114c-117-26-209-78-301-169-130-130-184-258-184-438 0-124 13-183 62-286 55-115 168-229 279-283 169-81 347-88 519-21 182 72 326 236 375 428 18 69 20 221 4 297-29 140-140 300-267 384-130 87-330 123-487 88zM15485 4364c-117-26-209-78-301-169-130-130-184-258-184-438 0-124 13-183 62-286 55-115 168-229 279-283 169-81 347-88 519-21 182 72 326 236 375 428 18 69 20 221 4 297-29 140-140 300-267 384-130 87-330 123-487 88z"></path>
</g>
</svg>
</a>
</div>
<div class="sidebar_icon">
<a href="#controlpanel">
<svg viewBox="0 0 512 512">
<g transform="translate(0,512) scale(0.1,-0.1)" stroke="none">
<path d="M1220 4794c-109-24-210-56-210-68 0-6 140-151 311-321 171-171 319-327 330-347 26-50 26-146 0-196-28-53-318-338-363-357-51-21-134-19-183 4-26 12-147 126-345 325-168 168-308 306-311 306-10 0-36-87-53-179-40-209-5-454 92-646 64-129 213-300 333-382 177-122 421-192 632-181l95 5 1098-1100c784-784 1118-1111 1164-1142 99-65 168-87 287-93 129-6 205 8 308 58 97 47 179 118 238 208 56 84 83 158 98 265 11 73 10 96-4 171-19 96-49 171-98 243-17 26-523 541-1124 1143l-1092 1095 8 40c21 105 5 297-36 441-80 278-324 540-605 652-171 68-408 91-570 56zm3055-3509c65-27 121-80 152-143 24-49 28-69 28-142 0-75-3-91-29-138-34-60-76-101-139-134-61-32-193-32-258 0-187 92-233 338-91 485 87 90 223 119 337 72zM4079 4786c-36-13-88-38-115-56-55-37-1205-1179-1203-1195 1-5 39-46 86-90l84-79 592 592c533 533 596 592 624 592 40 0 63-23 63-63 0-29-58-90-593-625l-593-593 95-94 96-94 595 594c642 641 624 626 669 569 12-15 21-34 21-43 0-8-268-283-595-611-327-327-594-600-594-605 1-6 39-46 86-90l84-79 580 579c326 326 596 603 616 633 56 86 73 149 73 272 0 123-19 192-76 278-68 102-148 164-271 209-89 32-230 32-324-1zM1520 1835l-335-335-147-32-147-31-265-404c-146-222-266-407-266-411 0-4 45-52 100-107 90-90 101-98 122-88 13 6 194 123 403 261 209 139 383 253 387 254 4 2 22 71 39 153l32 150 336 337 336 338-125 125c-69 69-127 125-130 125-3 0-156-151-340-335z"></path>
</g>
</svg>
</a>
</div>
<div class="sidebar_icon">
<a href="#info">
<svg viewBox="0 0 223 226">
<g transform="translate(0,226) scale(0.1,-0.1)">
<path d="M956 2250c-112-18-211-51-331-110-544-266-775-926-520-1485 201-442 677-708 1152-645 248 34 469 144 648 325 202 204 311 458 322 750 12 331-98 617-327 845-207 208-458 317-750 325-74 2-162 0-194-5zm308-265c179-31 315-103 452-240 175-173 255-367 255-615 1-343-187-641-494-785-138-64-207-79-367-79-117 1-147 4-225 28-243 74-428 230-535 451-62 129-80 202-87 351-11 237 65 450 220 619 202 222 489 321 781 270zM1020 1870c-106-19-187-65-260-147-81-91-120-205-120-349l0-74 125 0 125 0 0 74c0 165 75 249 225 249 141 0 234-93 205-204-15-55-41-81-158-163-159-112-162-119-162-357l0-169 124 0 124 0 4 123c3 112 5 127 28 160 13 19 57 56 96 82 87 56 158 129 187 193 18 39 22 65 22 152 0 99-2 109-34 173-92 188-314 295-531 257zM1000 500l0-130 125 0 125 0 0 130 0 130-125 0-125 0 0-130z"></path>
</g>
</svg>
</a>
</div>
</aside>
<article class="article-container">
<!-- TEMPLATES will be injected below -->
<div id="placeholder_article_dashboard" title="Global Dashboard" preload="true"></div>
<div id="placeholder_article_gateway" title="Gateways"></div>
<div id="placeholder_article_devices" title="devices"></div>
<div id="placeholder_article_hardware" title="Hardware"></div>
<div id="placeholder_article_globe" title=""></div>
<div id="placeholder_article_database" title="Database"></div>