-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
634 lines (594 loc) · 30.9 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign Controller</title>
<meta name="description" content="A dynamic sign controller">
<link rel="stylesheet" href="plugins/pickr/pickr.min.css"/>
<script src="plugins/jquery/jquery-3.6.0.min.js"></script>
<style>
body,html {
background: #fff;
padding: 30px;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
g {
stroke: #0a2038;
/* 1a1d20 */
stroke-width: 1;
}
.selected {
stroke: #4899d9;
stroke-width: 1;
/*stroke-opacity: .9;*/
-webkit-filter: blur(10px);
filter: blur(10px);
}
.svgContainer {
padding: 40px;
padding-bottom: 34;
padding-top: 34;
width: 1180px;
height: 105px;
background-image: linear-gradient(to bottom, #f0f6ff 30%, #fff2ea, #243956, #0a2038 75%);
color: #333;
background-size: 100% 400%;
background-position: 100% 0%;
transition: all 1s;
position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
border-radius: 11px;
-moz-border-radius: 11px;
overflow: hidden;
}
.svgContainer.night {
background-position: 100% 100%;
color: #333;
}
.svgContainer.disabled {
background-position: 100% 0%;
color: #000;
}
button {
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 40px;
background: #fff;
border: 2px solid #6d7277;
color: #6d7277;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease;
}
button:hover {
color: white;
background: #6d7277;
border: 2px solid #6d7277;
}
.button-red {
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 40px;
background: #fff;
border: 2px solid #f78285;
color: #f78285;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease;
}
.button-red:hover {
color: white;
background: #f78285;
border: 2px solid #f78285;
}
.button-green {
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 40px;
background: #fff;
border: 2px solid #31c66f;
color: #31c66f;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease;
}
.button-green:hover {
color: white;
background: #31c66f;
border: 2px solid #31c66f;
}
.toggle-box-label-left:empty {
margin-left: -25px;
}
.toggle-box-label-left:before,
.toggle-box-label-left:after {
box-sizing: border-box;
margin: 0;
padding: 0;
/*transition*/
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
outline: none;
}
.toggle-box input[type=checkbox],
.toggle-box input[type=checkbox]:active {
position: absolute;
top: -5000px;
height: 0;
width: 0;
opacity: 0;
border: none;
outline: none;
}
.toggle-box input[type=checkbox]:disabled {
color: rgba(0,0,0);
}
.toggle-box label {
display: inline-block;
position: relative;
padding: 0px;
margin-bottom: 20px;
font-size: 14px;
line-height: 16px;
cursor: pointer;
color: rgba(149, 149, 149, 0.51);
font-weight: normal;
}
.toggle-box-label-left:before {
content: '';
display: block;
position: absolute;
z-index: 1;
line-height: 34px;
text-indent: 40px;
height: 16px;
width: 16px;
margin: 4px;
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
right: 26px;
bottom: 0px;
background: #FFB200;
transform: rotate(-45deg);
box-shadow: 0 0 10px white;
}
.toggle-box-label-left:after {
content: "";
display: inline-block;
width: 40px;
height: 24px;
/*border-radius*/
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.15);
vertical-align: middle;
margin: 0 10px;
border: 2px solid #FFB200;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:before {
right: 17px;
box-shadow: 5px 5px 0 0 #eee;
background: transparent;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:after {
background: rgba(0, 0, 0, 0.15);
border: 2px solid white;
}
.toggle-box input[type=checkbox] + .toggle-box-label-left {
color: rgba(250, 250, 250, 0.51);
font-weight: bold;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left {
color: rgba(149, 149, 149, 0.51);
font-weight: normal;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left + .toggle-box-label {
color: rgba(250, 250, 250, 0.51);
font-weight: bold;
}
</style>
</head>
<body>
<div class="svgContainer" id="container">
<svg width="100%" viewBox="0 0 1180 105" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Sun Grove Logo</title>
<g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Sun-Grove-Logo-Full-Width-Light">
<path d="M0.14,63.77 C-0.43,62.77 0.91,62.21 1.98,61.54 C3.05,60.87 13.72,55.33 29.24,55.33 C44.76,55.33 65.42,58.82 94.14,70.94 C122.86,83.06 137.14,81.81 146.33,81.81 C155.52,81.81 171.45,79.87 177.56,77.54 C177.56,77.54 179.31,77.06 179.89,77.83 C180.47,78.6 180.29,79.01 179.8,79.68 C178.93,80.84 164.47,99.08 135.37,103.54 C117.58087,106.181569 99.4104373,103.232369 83.37,95.1 C59.85,82.86 39,66.1 25.16,64.54 C12.26,63.09 12.07,63 5,63.77 C5,63.77 0.72,64.74 0.14,63.77 Z" id="Cloud" fill="#ffffff" fill-rule="nonzero"></path>
<path d="M82.69,61.54 C101.36,68.72 120.37,78.22 144.93,77.45 C148.6,70.71 150.5,62.45 150.5,53 C150.726437,24.281193 127.628807,0.816436747 98.91,0.59 C70.191193,0.363563253 46.7264367,23.461193 46.5,52.18 C54.66,53.5 69.19,56.35 82.69,61.54 Z" id="Sun" fill="#ffffff" fill-rule="nonzero"></path>
<path d="M1029.65,47.93 C1030.53961,47.8873253 1031.41698,47.7051021 1032.25,47.39 C1032.89661,47.1385286 1033.46324,46.7170054 1033.89,46.17 C1034.32998,45.4801015 1034.53356,44.6657841 1034.47,43.85 C1034.52164,43.0651875 1034.34077,42.2825662 1033.95,41.6 C1033.57873,41.0598627 1033.07636,40.6228688 1032.49,40.33 C1031.75241,39.9769505 1030.96193,39.7472363 1030.15,39.65 C1029.1926,39.5151327 1028.22685,39.4482985 1027.26,39.45 L1021.42,39.45 L1021.42,48 L1026.54,48 C1027.51,48 1028.55,48 1029.65,47.93 Z" id="Mask"></path>
<path d="M538.62,47.93 C539.50948,47.8863431 540.3867,47.7041513 541.22,47.39 C541.863099,47.1322277 542.428216,46.7118354 542.86,46.17 C543.295344,45.4781144 543.498534,44.6653551 543.44,43.85 C543.488617,43.0641844 543.30425,42.281496 542.91,41.6 C542.542505,41.0602712 542.043449,40.6231674 541.46,40.33 C540.721903,39.9782896 539.931639,39.7486403 539.12,39.65 C538.162533,39.5157937 537.196826,39.4489628 536.23,39.45 L530.38,39.45 L530.38,48 L535.51,48 C536.47,48 537.52,48 538.62,47.93 Z" id="Mask"></path>
<path d="M616.79,60 C618.150216,56.0847758 618.150216,51.8252242 616.79,47.91 C616.161083,46.1601036 615.181011,44.5572784 613.91,43.2 C612.636392,41.8789118 611.104651,40.8339241 609.41,40.13 C605.591765,38.6498291 601.358235,38.6498291 597.54,40.13 C595.84258,40.8288006 594.309848,41.8744651 593.04,43.2 C591.768989,44.5572784 590.788917,46.1601036 590.16,47.91 C588.793501,51.8241613 588.793501,56.0858387 590.16,60 C590.783876,61.7313862 591.749705,63.3195626 593,64.67 C594.269848,65.9955349 595.80258,67.0411994 597.5,67.74 C601.318235,69.2201709 605.551765,69.2201709 609.37,67.74 C611.066581,67.039645 612.599011,65.9941868 613.87,64.67 C615.149434,63.3270537 616.142839,61.7382858 616.79,60 L616.79,60 Z" id="Mask"></path>
<path d="M233.16,40 C233.81161,39.65233 234.508226,39.3965676 235.23,39.24 C235.951623,39.0731672 236.689367,38.9859793 237.43,38.98 C238.773202,39.0038851 240.102402,39.2575491 241.36,39.73 C242.536951,40.1197688 243.577881,40.8380102 244.36,41.8 L245.45,43.18 L255.37,32.33 L254.24,31.33 C251.976805,29.3073925 249.302052,27.7994321 246.4,26.91 C241.060536,25.2932325 235.369991,25.237715 230,26.75 C227.569553,27.4544995 225.290967,28.6039645 223.28,30.14 C219.054696,33.3547365 216.62944,38.4023943 216.76,43.71 C216.639664,46.4128239 217.336632,49.0891823 218.76,51.39 C220.030695,53.2741646 221.70441,54.8522394 223.66,56.01 C225.574574,57.1429696 227.619509,58.0395174 229.75,58.68 C231.75,59.29 233.69,59.91 235.45,60.53 C236.876127,60.9922006 238.224564,61.6664191 239.45,62.53 C240.235802,63.0989811 240.673954,64.0319429 240.61,65 C240.629872,65.54238 240.479512,66.0773815 240.18,66.53 C239.841741,67.0256917 239.393383,67.4364013 238.87,67.73 C238.21533,68.1053581 237.507162,68.3785085 236.77,68.54 C234.336897,69.1140104 231.779728,68.8204489 229.54,67.71 C228.038541,66.9989336 226.733923,65.9312067 225.74,64.6 L224.65,63.15 L214.44,74.4 L215.53,75.4 C217.964028,77.6845643 220.834892,79.4533433 223.97,80.6 C227.093523,81.689737 230.381986,82.2310478 233.69,82.2 C236.369611,82.2147367 239.038335,81.8580095 241.62,81.14 C244.070819,80.4683499 246.369346,79.3309696 248.39,77.79 C250.378421,76.2418005 251.988981,74.2619408 253.1,72 C254.303803,69.4797683 254.89976,66.7123357 254.84,63.92 C254.954767,61.1324944 254.260143,58.3713648 252.84,55.97 C251.606045,54.0575252 249.950362,52.4531546 248,51.28 C246.122978,50.1509029 244.105705,49.2733891 242,48.67 C240,48.1 238.12,47.53 236.4,46.96 C234.98095,46.5302066 233.633096,45.8933458 232.4,45.07 C231.247203,44.1190756 230.970054,42.4647086 231.75,41.19 C232.118341,40.6865335 232.6018,40.2785077 233.16,40 L233.16,40 Z" id="S" fill="#ffffff" fill-rule="nonzero"></path>
<path d="M306.34,59.33 C306.353841,60.6491398 306.130282,61.9600129 305.68,63.2 C305.2794,64.3113331 304.6606,65.331333 303.86,66.2 C303.094484,67.0486219 302.161574,67.7295775 301.12,68.2 C298.877179,69.1191179 296.362821,69.1191179 294.12,68.2 C293.061073,67.7396294 292.113117,67.0576463 291.34,66.2 C290.546283,65.3261744 289.928355,64.3076115 289.52,63.2 C289.073456,61.959027 288.850012,60.6488311 288.86,59.33 L288.86,26.94 L274.59,26.94 L274.59,59.76 C274.560353,62.7755635 275.054352,65.7733902 276.05,68.62 C276.993022,71.2913521 278.492794,73.7318894 280.45,75.78 C282.498014,77.8697286 284.974967,79.4903246 287.71,80.53 C294.102758,82.7701993 301.067242,82.7701993 307.46,80.53 C310.195033,79.4903246 312.671986,77.8697286 314.72,75.78 C316.677206,73.7318894 318.176978,71.2913521 319.12,68.62 C320.114078,65.7729898 320.608031,62.7754391 320.58,59.76 L320.58,26.94 L306.34,26.94 L306.34,59.33 Z" id="U" fill="#ffffff" fill-rule="nonzero"></path>
<polygon id="N" fill="#ffffff" fill-rule="nonzero" points="379.42 58.77 359.95 26.94 342.34 26.94 342.34 80.92 356.58 80.92 356.58 48.21 376.63 80.92 393.66 80.92 393.66 26.94 379.42 26.94"></polygon>
<path d="M471.94,61.05 L481.09,61.05 L481.09,66.9 C480.048145,67.3604356 478.97955,67.7578191 477.89,68.09 C475.974803,68.6319937 473.990046,68.8880914 472,68.85 C469.9693,68.8767088 467.953555,68.499394 466.07,67.74 C464.37258,67.0411994 462.839848,65.9955349 461.57,64.67 C460.298444,63.3265759 459.314974,61.7373688 458.68,60 C457.313501,56.0858387 457.313501,51.8241613 458.68,47.91 C459.305041,46.1582488 460.285571,44.5546737 461.56,43.2 C462.829848,41.8744651 464.36258,40.8288006 466.06,40.13 C467.945268,39.3624585 469.964592,38.9783111 472,39 C474.258186,38.9311231 476.507783,39.3083214 478.62,40.11 C480.385457,40.8723726 481.980199,41.9808716 483.31,43.37 L484.42,44.51 L494.42,33.6 L493.33,32.6 C490.585289,30.0582664 487.278769,28.2011329 483.68,27.18 C479.876901,26.128632 475.945582,25.6136561 472,25.65 C468.065208,25.62754 464.157753,26.3047418 460.46,27.65 C457.036186,28.9044886 453.900395,30.8362996 451.24,33.33 C448.605559,35.8712252 446.534186,38.9374021 445.16,42.33 C443.692784,46.0194916 442.959093,49.9596854 443,53.93 C442.95126,57.9204625 443.685091,61.8817917 445.16,65.59 C446.534186,68.9825979 448.605559,72.0487748 451.24,74.59 C453.898211,77.0865559 457.034618,79.018746 460.46,80.27 C464.157753,81.6152582 468.065208,82.29246 472,82.27 C475.810812,82.2461589 479.608483,81.8204711 483.33,81 C487.071747,80.1967998 490.687798,78.8916576 494.08,77.12 L494.89,76.7 L494.89,47.68 L471.94,47.68 L471.94,61.05 Z" id="G" fill="#ffffff" fill-rule="nonzero"></path>
<path d="M555,54 C557.106851,51.0689215 558.195687,47.5284463 558.1,43.92 C558.182754,41.1095272 557.596664,38.3196 556.39,35.78 C555.306493,33.6411205 553.695817,31.8136231 551.71,30.47 C549.692559,29.1467487 547.443012,28.2170715 545.08,27.73 C542.54815,27.1973024 539.967272,26.9325111 537.38,26.94 L516.15,26.94 L516.15,80.94 L530.38,80.94 L530.38,60.54 L533.52,60.54 L544.17,80.92 L561.17,80.92 L547.92,58.86 C550.745136,58.0518038 553.230366,56.3458405 555,54 L555,54 Z M530.38,39.45 L536.23,39.45 C537.196826,39.4489628 538.162533,39.5157937 539.12,39.65 C539.931639,39.7486403 540.721903,39.9782896 541.46,40.33 C542.043449,40.6231674 542.542505,41.0602712 542.91,41.6 C543.30425,42.281496 543.488617,43.0641844 543.44,43.85 C543.498534,44.6653551 543.295344,45.4781144 542.86,46.17 C542.428216,46.7118354 541.863099,47.1322277 541.22,47.39 C540.3867,47.7041513 539.50948,47.8863431 538.62,47.93 C537.52,48 536.47,48.04 535.51,48.04 L530.38,48.04 L530.38,39.45 Z" id="R" fill="#ffffff" fill-rule="nonzero"></path>
<path d="M624.24,33.29 C621.574559,30.7929213 618.431527,28.860841 615,27.61 C607.532065,24.9964356 599.397935,24.9964356 591.93,27.61 C588.502029,28.8620453 585.362499,30.7940635 582.7,33.29 C580.065942,35.8294805 577.997531,38.8963176 576.63,42.29 C575.146898,45.9961376 574.409487,49.9584468 574.46,53.95 C574.409487,57.9415532 575.146898,61.9038624 576.63,65.61 C577.997531,69.0036824 580.065942,72.0705195 582.7,74.61 C585.359965,77.1092522 588.500211,79.0417116 591.93,80.29 C599.397935,82.9035644 607.532065,82.9035644 615,80.29 C618.429789,79.0417116 621.570035,77.1092522 624.23,74.61 C626.864058,72.0705195 628.932469,69.0036824 630.3,65.61 C631.783102,61.9038624 632.520513,57.9415532 632.47,53.95 C632.520513,49.9584468 631.783102,45.9961376 630.3,42.29 C628.935408,38.8972105 626.870452,35.8304437 624.24,33.29 L624.24,33.29 Z M603.47,68.85 C601.439391,68.8756455 599.423854,68.4983695 597.54,67.74 C595.84258,67.0411994 594.309848,65.9955349 593.04,64.67 C591.771773,63.3240166 590.788749,61.7355317 590.15,60 C588.783501,56.0858387 588.783501,51.8241613 590.15,47.91 C590.768784,46.1590599 591.738595,44.5529172 593,43.19 C594.269848,41.8644651 595.80258,40.8188006 597.5,40.12 C601.318235,38.6398291 605.551765,38.6398291 609.37,40.12 C611.064651,40.8239241 612.596392,41.8689118 613.87,43.19 C615.141011,44.5472784 616.121083,46.1501036 616.75,47.9 C618.110216,51.8152242 618.110216,56.0747758 616.75,59.99 C616.115926,61.7284971 615.136222,63.3205172 613.87,64.67 C612.599011,65.9941868 611.066581,67.039645 609.37,67.74 C607.495416,68.494226 605.49051,68.8714201 603.47,68.85 L603.47,68.85 Z" id="O" fill="#ffffff" fill-rule="nonzero"></path>
<polygon id="V" fill="#ffffff" fill-rule="nonzero" points="673.47 57.82 661.82 26.94 645.75 26.94 667.33 80.92 678.35 80.92 700.61 26.94 685.31 26.94"></polygon>
<polygon id="E" fill="#ffffff" fill-rule="nonzero" points="731.26 60.18 753.36 60.18 753.36 46.81 731.26 46.81 731.26 40.31 754.66 40.31 754.66 26.94 717.03 26.94 717.03 80.92 755.96 80.92 755.96 67.55 731.26 67.55"></polygon>
<path d="M840.76,64 C839.786125,65.4838424 838.46,66.7034655 836.9,67.55 C835.233027,68.413173 833.376845,68.8462821 831.5,68.81 C829.773528,68.8180978 828.066449,68.4459546 826.5,67.72 C824.940884,66.9963278 823.548363,65.9578948 822.41,64.67 C821.203141,63.2963922 820.257595,61.7137034 819.62,60 C818.259784,56.0847758 818.259784,51.8252242 819.62,47.91 C820.244086,46.1666333 821.194332,44.5580019 822.42,43.17 C824.817666,40.4831408 828.259078,38.9629406 831.86,39 C833.578806,38.9740835 835.283378,39.3149979 836.86,40 C838.225794,40.6074191 839.431063,41.5250672 840.38,42.68 L841.33,43.84 L852.33,34.9 L851.41,33.74 C850.250847,32.2684954 848.879156,30.9776902 847.34,29.91 C845.886703,28.904533 844.319038,28.0753827 842.67,27.44 C841.084704,26.8332927 839.443423,26.3844527 837.77,26.1 C836.203727,25.8350679 834.618502,25.6979494 833.03,25.69 C829.095066,25.6658358 825.187313,26.3430895 821.49,27.69 C818.060211,28.9382884 814.919965,30.8707478 812.26,33.37 C809.625942,35.9094805 807.557531,38.9763176 806.19,42.37 C804.706898,46.0761376 803.969487,50.0384468 804.02,54.03 C803.969487,58.0215532 804.706898,61.9838624 806.19,65.69 C807.557531,69.0836824 809.625942,72.1505195 812.26,74.69 C814.919965,77.1892522 818.060211,79.1217116 821.49,80.37 C825.187313,81.7169105 829.095066,82.3941642 833.03,82.37 C836.755337,82.3645864 840.439247,81.5883095 843.85,80.09 C847.398954,78.5468726 850.454097,76.0557026 852.68,72.89 L853.53,71.69 L841.73,62.89 L840.76,64 Z" id="C2" fill="#ffffff" fill-rule="nonzero"></path>
<polygon id="H2" fill="#ffffff" fill-rule="nonzero" points="903.44 45.95 884.62 45.95 884.62 26.94 870.39 26.94 870.39 80.92 884.62 80.92 884.62 58.88 903.44 58.88 903.44 80.92 917.67 80.92 917.67 26.94 903.44 26.94"></polygon>
<path d="M971.19,59.33 C971.199988,60.6488311 970.976544,61.959027 970.53,63.2 C970.121645,64.3076115 969.503717,65.3261744 968.71,66.2 C967.9387,67.0465408 967.003001,67.727049 965.96,68.2 C963.717179,69.1191179 961.202821,69.1191179 958.96,68.2 C957.903421,67.7405757 956.958543,67.0583532 956.19,66.2 C955.3894,65.331333 954.7706,64.3113331 954.37,63.2 C953.919718,61.9600129 953.696159,60.6491398 953.71,59.33 L953.71,26.94 L939.43,26.94 L939.43,59.76 C939.400353,62.7755635 939.894352,65.7733902 940.89,68.62 C941.833022,71.2913521 943.332794,73.7318894 945.29,75.78 C947.338014,77.8697286 949.814967,79.4903246 952.55,80.53 C955.719976,81.7019238 959.080895,82.2716861 962.46,82.21 C965.816125,82.2692986 969.153666,81.6994745 972.3,80.53 C975.035033,79.4903246 977.511986,77.8697286 979.56,75.78 C981.517206,73.7318894 983.016978,71.2913521 983.96,68.62 C984.954078,65.7729898 985.448031,62.7754391 985.42,59.76 L985.42,26.94 L971.19,26.94 L971.19,59.33 Z" id="U" fill="#ffffff" fill-rule="nonzero"></path>
<path d="M1046,54 C1048.10973,51.0698351 1049.20205,47.529484 1049.11,43.92 C1049.19466,41.1082695 1048.60488,38.3171353 1047.39,35.78 C1046.31336,33.6395467 1044.7054,31.8112245 1042.72,30.47 C1040.69796,29.1485701 1038.4455,28.2190915 1036.08,27.73 C1033.54831,27.1962731 1030.96732,26.9314705 1028.38,26.94 L1007.16,26.94 L1007.16,80.94 L1021.39,80.94 L1021.39,60.54 L1024.52,60.54 L1035.18,80.92 L1052.18,80.92 L1039,58.86 C1041.79685,58.0382475 1044.25258,56.3332711 1046,54 L1046,54 Z M1021.39,39.45 L1027.23,39.45 C1028.19685,39.4482985 1029.1626,39.5151327 1030.12,39.65 C1030.93193,39.7472363 1031.72241,39.9769505 1032.46,40.33 C1033.07556,40.6113853 1033.60655,41.0492853 1034,41.6 C1034.39077,42.2825662 1034.57164,43.0651875 1034.52,43.85 C1034.58356,44.6657841 1034.37998,45.4801015 1033.94,46.17 C1033.51324,46.7170054 1032.94661,47.1385286 1032.3,47.39 C1031.46698,47.7051021 1030.58961,47.8873253 1029.7,47.93 C1028.6,48 1027.56,48.04 1026.59,48.04 L1021.47,48.04 L1021.39,39.45 Z" id="R" fill="#ffffff" fill-rule="nonzero"></path>
<path d="M1102.33,64 C1101.3587,65.4860251 1100.03196,66.7062117 1098.47,67.55 C1096.80303,68.413173 1094.94685,68.8462821 1093.07,68.81 C1091.34353,68.8180978 1089.63645,68.4459546 1088.07,67.72 C1086.51237,66.9986679 1085.12267,65.9597979 1083.99,64.67 C1082.78147,63.280643 1081.83909,61.6806349 1081.21,59.95 C1079.84978,56.0347758 1079.84978,51.7752242 1081.21,47.86 C1081.83753,46.1160665 1082.79116,44.5074611 1084.02,43.12 C1086.41507,40.4377639 1089.85436,38.9241857 1093.45,38.97 C1095.16867,38.9456128 1096.87292,39.2864635 1098.45,39.97 C1099.8143,40.5799461 1101.01903,41.4971836 1101.97,42.65 L1102.92,43.81 L1113.86,34.87 L1112.94,33.71 C1111.78085,32.2384954 1110.40916,30.9476902 1108.87,29.88 C1107.4179,28.8725695 1105.84999,28.043291 1104.2,27.41 C1102.61773,26.8045382 1100.97989,26.3557232 1099.31,26.07 C1097.74037,25.8050535 1096.15182,25.6679367 1094.56,25.66 C1090.62507,25.6358358 1086.71731,26.3130895 1083.02,27.66 C1079.59316,28.9082388 1076.45617,30.8407839 1073.8,33.34 C1071.16234,35.8785162 1069.09047,38.9454237 1067.72,42.34 C1066.2369,46.0461376 1065.49949,50.0084468 1065.55,54 C1065.49949,57.9915532 1066.2369,61.9538624 1067.72,65.66 C1069.09047,69.0545763 1071.16234,72.1214838 1073.8,74.66 C1076.45617,77.1592161 1079.59316,79.0917612 1083.02,80.34 C1086.71731,81.6869105 1090.62507,82.3641642 1094.56,82.34 C1098.28534,82.3345864 1101.96925,81.5583095 1105.38,80.06 C1108.92895,78.5168726 1111.9841,76.0257026 1114.21,72.86 L1115.06,71.66 L1103.26,62.86 L1102.33,64 Z" id="C" fill="#ffffff" fill-rule="nonzero"></path>
<polygon id="H" fill="#ffffff" fill-rule="nonzero" points="1165.01 26.94 1165.01 45.95 1146.19 45.95 1146.19 26.94 1131.96 26.94 1131.96 80.92 1146.19 80.92 1146.19 58.88 1165.01 58.88 1165.01 80.92 1179.24 80.92 1179.24 26.94"></polygon>
</g>
</g>
</svg>
<div class="toggle-box" style="display:none">
<input type="checkbox" name="checkbox1" id="toggle-box-checkbox" />
<label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
<label for="toggle-box-checkbox" class="toggle-box-label"></label>
</div>
</div>
<div id="controls">
<!--<button class="button" onclick="resetColors()">Reset Colors</button>-->
<button onclick="toggleBlackoutState()" id="blackout-toggle" class="button-red" style="display:none">Turn Sign Off</button>
<button onclick="selectIcon()">Select Icon</button>
<button onclick="selectLetters()">Select Letters</button>
</div>
<div class="color-picker"></div>
<script>
var currentPreset = "day"; //get state from server.
window.global = {
ip: '169.254.188.27',
blackout: false, //bool
currentPreset: currentPreset,
fixtures: {},
presets: { //
default: {
},
day: {
},
night: {
}
}
}
global.presets = JSON.parse(localStorage.getItem('clientSavedPresets')) || {};
$('#toggle-box-checkbox').on('change', function(){
if(this.checked){
// load night theme from server
// loadNightPresetWithTransition();
// theme vs preset
currentPreset = "night";
}else{
// load day theme from server
// loadDayPresetWithTransition();
currentPreset = "day";
}
//loadPresetWithTransition(currentPreset, 1);
global.currentPreset = currentPreset;
setTimeout(function(){loadPreset(currentPreset)}, 250);
});
$('#toggle-box-checkbox').change(function() {
$('#container').toggleClass('night', $(this).is(':checked'))
localStorage.setItem("lastPreset", $(this).is(':checked') ? "night" : "day");
});
var logo = $("svg").find("g").eq(1).find('*').not("#Mask"); // these are mostly <polygon>s here, but some are <path> and some are <g>. Targetting the direct decendenants easiest.
var letters = logo.not("#Mask").not("#Sun").not("#Cloud");
var icon = logo.filter("#Sun").add(logo.filter("#Cloud"));
logo.on("click", function() {
if(!shifted){
logo.removeClass("selected");
}
$(this).addClass("selected");
pickr.show();
});
// record key states
$(document).on('keyup keydown', function(e){shifted = e.shiftKey} );
function toggleBlackoutState(){
/* option to force the state on / off based on argument passed to function
if(forceState !== undefined){
if(!forceState){
blackout();
}
}*/
if(global.blackout){
$('#blackout-toggle').addClass('button-red').removeClass('button-green');
$('#blackout-toggle').html("Turn Sign Off");
$(".toggle-box").show();
global.blackout = false;
logo.addClass("selected");
logo.not("#Mask").css({ fill: '#fff' });
pickr.show();
update(null, true);
}else{
// change button state
$('#blackout-toggle').addClass('button-green').removeClass('button-red');
$('#blackout-toggle').html("Turn Sign On");
// hide day/night toggle
$(".toggle-box").hide();
blackout();
}
}
function update(values, force){
var values = values || getCurrentClientValues()
global.currentPreset = currentPreset;
global.presets[currentPreset] = values;
updateClientValues(values);
//updateServer();
updateCueServer(dmxToCueServerSyntax(convertFixturesToDMX(values)));
localStorage.setItem('clientSavedPresets', JSON.stringify(global.presets));
}
function convertFixturesToDMX(values){
var channels = [];
var channelCount = 1;
for(var f in values){
for(var c in values[f]){
channels[channelCount] = values[f][c];
channelCount++;
}
}
return channels;
}
function dmxToCueServerSyntax(channels){
var command = '';
for(var v in channels){
dmxValue = channels[v];
command += 'C' + v + '@#' + dmxValue + '';
}
return command;
}
function loadPreset(preset){
// this will create an preset if none exists.
if(preset){
currentPreset = preset;
update(global.presets[currentPreset]);
}
}
function loadPresetWithTransition(preset, time){
}
function resetColors(){
logo.removeClass("selected");
logo.css({ fill: '' });
update(null, true);
}
function selectLetters(){
logo.removeClass("selected");
letters.addClass("selected");
pickr.show();
}
function selectIcon(){
logo.removeClass("selected");
icon.addClass("selected");
pickr.show();
}
function blackout(){
// todo
logo.removeClass("selected");
logo.not("#Mask").css({ fill: '#000' });
update(null, true);
// set current preset to black
global.blackout = true;
}
function valueToDMX(value){
return Math.round(2.55*value.clamp(0,100));
}
function applyCurrentCueServerValuesToClient(){
var req = new XMLHttpRequest();
req.open("GET", "http://" + global.ip + "/get.cgi?req=out", true);
req.responseType = "arraybuffer";
req.onload = function(event) {
var arrayBuffer = req.response;
var byteArray = new Uint8Array(arrayBuffer);
var values = [];
for(var v in byteArray){
if(v > 48){
// unused dmx addresses above 48
continue;
}
var value = byteArray[v];
v++; // because DMX address start at 1, from here out we're counting from one.
if(value || value === 0){
var fixture = Math.ceil(v / 3);
var channel = (v) % 3 || 3;
if(!values[fixture]){
values[fixture] = [];
}
if(fixture && channel){
values[fixture][channel-1] = value; // have to remove 1 from channel value because Javascript arrays start at zero
}
}
}
updateClientValues(values);
};
req.send();
}
function getCurrentClientValues(){
var values = {
}
var fixture = 0;
$('#container').children('svg').children('g').children('g').children("*").not("#Mask").each(function () {
if($(this).attr('fill')){
//state.fixtures[fixture] = {name: $(this).attr('id'), id: 'fixture_' + fixture, channels: ['r', 'g', 'b']};
var rgb = $(this).css('fill').replace(/[^\d,]/g, '').split(',');
//state.dmx[fixture] = rgb;
values[fixture] = rgb;
fixture++;
}
});
global.presets[currentPreset] = values;
return values;
}
function updateClientValues(values){
if(values && !jQuery.isEmptyObject(values)){
for(var p in values){
var color = values[p];
logo.eq(p).css({ fill: 'rgb(' + color.join(', ') + ')' })
}
}else{
//resetColors();
}
}
function restoreAutosavedClientValues(){
return;
var values = JSON.parse(localStorage.getItem("lastClientValues"));
updateStateDisplay(values);
}
var canCall = true;
window.updateServer = function(force){
console.log(global);
if (!canCall && !force)
return;
$.ajax({
type: "POST",
data: global,
url: "http://localhost/Sign/api.php",
success: function(msg){
console.log(msg);
}
});
canCall = false;
setTimeout(function(){
canCall = true;
}, 500); // prevent sending more than 2 requests /sec
}
window.updateCueServer = function(command, force){
if ((!canCall && !force) || !command)
return;
$.ajax({
type: "GET",
url: "http://" + global.ip + "/exe.cgi?cmd=" + encodeURIComponent(command),
beforeSend: function (xhr) {
xhr.setRequestHeader('Content-Type', 'text/plain');
},
success: function(msg){
console.log(msg);
}
});
canCall = false;
setTimeout(function(){
canCall = true;
}, 1000); // throttled to 1/msg per second
}
window.attemptConnectionToCueServer = function(){
//TODO check if we can reach the CueServer with http GET request
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
Number.prototype.clamp = function(min, max) {
return Math.min(Math.max(this, min), max);
};
loadPreset(currentPreset);
</script>
<script src="plugins/pickr/pickr.min.js"></script>
<script src="plugins/drag-select/ds.min.js"></script>
<script>
const pickr = new Pickr({
el: '.color-picker',
comparison: false,
useAsButton: true,
default: '#42445A',
swatches: [
'#000',
'#4899d9',
'#be583a',
'#70483b',
'#fff',
],
components: {
preview: true,
opacity: false,
hue: true,
interaction: {
hex: true,
rgba: true,
hsva: true,
input: true,
clear: false,
save: false
}
},
onChange(hsva, instance) {
var RGBA = hsva.toRGBA();
//console.log();
$(".selected").css('fill', RGBA);
update(); // and send out to DMX node
},
onSave(hsva, instance) {
update();
logo.removeClass('selected');
}
});
new DragSelect({
selectables: logo,
area: document.getElementById('container'),
callback: e => console.log(e),
onElementSelect: function(element) {
$(element).addClass("selected");
}, // fired every time an element is selected. (element) = just selected node
onElementUnselect: function(element) {
$(element).removeClass("selected");
}, // fired every time an element is de-selected. (element) = just de-selected node.
callback: function(elements) { // fired once the user releases the mouse. (elements) = selected nodes.
logo.removeClass("selected");
//logo.css({ fill: '' });
$(elements).not("#Mask").addClass("selected");
if(elements.length > 0){
pickr.show();
}else{
pickr.hide();
}
},
autoScrollSpeed: 0.0001
});
// unclick things
/*$(window).click(function() {
//Hide the menus if visible
pickr.hide();
logo.removeClass("selected");
});
$('#container').click(function(event){
event.stopPropagation();
});*/
// unselect letters when clicking outside of the color picker, and the svg logo
$(document).mousedown(function(event) {
$target = $(event.target);
if(!$target.closest('#container').length &&
!$target.closest('.pcr-app').length) {
logo.removeClass("selected");
}
});
pickr.on('changestop', instance => {
update(null, true);
}).on('cancel', instance => {
update(null, true);
});
</script>
</body>
</html>