Skip to content

Commit 4e5aa4e

Browse files
add second background pattern
1 parent 1ce5441 commit 4e5aa4e

File tree

4 files changed

+132
-51
lines changed

4 files changed

+132
-51
lines changed

data/index.html

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
background-size: 400% 400%;
2525
/*-webkit-animation: gradientBG 14s ease infinite forwards;
2626
animation: gradientBG 14s ease infinite forwards;*/
27-
font-weight: lighter;
27+
font-weight: dark;
28+
font-size: 18px;
2829
}
2930
/** Animated background: Code By Webdevtrick ( https://webdevtrick.com ) **/
3031
@-webkit-keyframes gradientBG {
@@ -52,9 +53,9 @@
5253
}
5354

5455
h1 {
55-
font-weight: lighter;
56+
font-weight: dark;
5657
letter-spacing: .125rem;
57-
text-transform: uppercase;
58+
text-transform: upercase;
5859
color: black;
5960
text-align: center;
6061
font-size: x-large;
@@ -101,7 +102,7 @@
101102
display: grid;
102103
grid-column-gap: 5px;
103104
grid-row-gap: 5px;
104-
grid-template-columns: auto auto auto auto auto auto;
105+
grid-template-columns: auto auto auto auto auto;
105106
padding: 10px;
106107
}
107108

@@ -203,9 +204,19 @@
203204
margin: 10px;
204205
}
205206

207+
.checkbox-containerNessi{
208+
display:flex;
209+
flex-direction: row;
210+
justify-content: space-between;
211+
align-items: center;
212+
margin: 10px;
213+
color: red;
214+
/*font-size: 10px;*/
215+
}
216+
206217
.headline{
207218
text-align: center;
208-
font-weight: 200;
219+
font-weight: 400;
209220
font-size: larger;
210221
margin-bottom: 5px;
211222
}
@@ -278,7 +289,7 @@
278289
}
279290

280291
</style>
281-
<title>WORDCLOCK 2.0</title>
292+
<title>WORTUHR NESSI 3.0</title>
282293
<link rel="icon" type="image/svg" href="./icons/clock.svg">
283294
</head>
284295

@@ -321,12 +332,18 @@ <h1 id="headline">WORTUHR NESSI 3.0</h1>
321332
</div>
322333
</div>
323334
<div class="checkbox-container">
324-
<label for="StaticBackgroundPattern" style="align-self: flex-start">"WORTUHR NESSI" jede 5. Minuten: Aus/Ein </label>
335+
<label for="StaticBackgroundPattern" style="align-self: flex-start">"HOPP HCD" (jede 5. Min.): Aus/Ein </label>
325336
<div>
326337
<input name= "StaticBackgroundPattern" id="StaticBackgroundPattern" type="checkbox" class="toggle">
327338
</div>
328339
</div>
329340
<div class="checkbox-container">
341+
<label for="StaticBackgroundPattern2" style="align-self: flex-start">"EVZ" (jede 5. Min.): Aus/Ein </label>
342+
<div>
343+
<input name= "StaticBackgroundPattern2" id="StaticBackgroundPattern2" type="checkbox" class="toggle">
344+
</div>
345+
</div>
346+
<div class="checkbox-containerNessi">
330347
<label for="ResetWifi" style="align-self: flex-start">WLAN Anmeldedaten zurücksetzen! </label>
331348
<div>
332349
<input name= "ResetWifi" id="ResetWifi" type="checkbox" class="toggle">
@@ -354,26 +371,26 @@ <h1 id="headline">WORTUHR NESSI 3.0</h1>
354371
<input name= "LED_Off" id="LED_Off" type="checkbox" class="toggle">
355372
</div>
356373
</div>
357-
<div class="checkbox-container">
358-
<label for="frameLight" style="align-self: flex-start">Hintergrund LED Ein/Aus </label>
374+
<div class="checkbox-container">
375+
<label for="frameLight" style="align-self: flex-start">Hintergrund LED: Ein/Aus </label>
359376
<div>
360377
<input name= "frameLight" id="frameLight" type="checkbox" class="toggle">
361378
</div>
362379
</div>
363380
<div class="checkbox-container">
364-
<label for="frameSecondsActive" style="align-self: flex-start">Hintergrund Voll/Sek. </label>
381+
<label for="frameSecondsActive" style="align-self: flex-start">Hintergrund LED: Voll/Sek. </label>
365382
<div>
366383
<input name= "frameSecondsActive" id="frameSecondsActive" type="checkbox" class="toggle">
367384
</div>
368385
</div>
369386
<div class="checkbox-container">
370-
<label for="frameSecondsSingle" style="align-self: flex-start">Hintergrund Sek. Einzeln/Aufsteigend </label>
387+
<label for="frameSecondsSingle" style="align-self: flex-start">Hintergrund Sek.: Einzeln/Aufsteigend </label>
371388
<div>
372389
<input name= "frameSecondsSingle" id="frameSecondsSingle" type="checkbox" class="toggle">
373390
</div>
374391
</div>
375392
<div class="checkbox-container">
376-
<label for="frameSecondsIncDecCycle" style="align-self: flex-start">Hintergrund Sek. Aufsteigend/Absteigend </label>
393+
<label for="frameSecondsIncDecCycle" style="align-self: flex-start">Hintergrund Sek.: Auf.-/Absteigend </label>
377394
<div>
378395
<input name= "frameSecondsIncDecCycle" id="frameSecondsIncDecCycle" type="checkbox" class="toggle">
379396
</div>
@@ -411,6 +428,9 @@ <h1 id="headline">WORTUHR NESSI 3.0</h1>
411428
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=0-255-0')" class="buttonClass" style="background:rgb(0,255,0);"></a></span></div>
412429
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-255-0')" class="buttonClass" style="background:rgb(255,255,0);"></a></span></div>
413430
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-128-0')" class="buttonClass" style="background:rgb(255,128,0);"></a></span></div>
431+
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=200-128-0')" class="buttonClass" style="background:rgb(200,128,0);"></a></span></div>
432+
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=152-245-255')" class="buttonClass" style="background:rgb(152,245,255);"></a></span></div>
433+
<div class="grid-item"><span class="dot"><a onclick="sendCommand('./cmd?led=255-193-193')" class="buttonClass" style="background:rgb(255,193,193);"></a></span></div>
414434
</div>
415435
</div>
416436
</div>
@@ -553,7 +573,7 @@ <h1 id="headline">WORTUHR NESSI 3.0</h1>
553573
}
554574
});
555575

556-
// set checkbox states
576+
// set checkbox (HOPP HCD)
557577
var ckb_staticbackground = document.querySelector('input[id="StaticBackgroundPattern"]');
558578
if(myVar.staticbackground == "1") {
559579
console.log("staticbackground == 1");
@@ -570,6 +590,24 @@ <h1 id="headline">WORTUHR NESSI 3.0</h1>
570590
sendCommand("./cmd?staticbackground=0");
571591
}
572592
});
593+
594+
// set checkbox (EVZ)
595+
var ckb_staticbackground2 = document.querySelector('input[id="StaticBackgroundPattern2"]');
596+
if(myVar.staticbackground == "1") {
597+
console.log("staticbackground2 == 1");
598+
ckb_staticbackground2.checked = true;
599+
}
600+
else {
601+
console.log("staticbackground2 == 0");
602+
ckb_staticbackground2.checked = false;
603+
}
604+
ckb_staticbackground2.addEventListener('change', () => {
605+
if(ckb_staticbackground2.checked) {
606+
sendCommand("./cmd?staticbackground2=1");
607+
} else {
608+
sendCommand("./cmd?staticbackground2=0");
609+
}
610+
});
573611

574612
// set checkbox states
575613
var ckb_ledoff = document.querySelector('input[id="LED_Off"]');
@@ -628,17 +666,17 @@ <h1 id="headline">WORTUHR NESSI 3.0</h1>
628666
var ckb_frameLight = document.querySelector('input[id="frameLight"]');
629667
if(myVar.frameLight == "1") {
630668
console.log("frameLight == 1");
631-
ckb_frameLight.checked = true;
669+
ckb_frameLight.checked = false;
632670
}
633671
else {
634672
console.log("frameLight == 0");
635-
ckb_frameLight.checked = false;
673+
ckb_frameLight.checked = true;
636674
}
637675
ckb_frameLight.addEventListener('change', () => {
638676
if(ckb_frameLight.checked) {
639-
sendCommand("./cmd?frameLight=1");
640-
} else {
641677
sendCommand("./cmd?frameLight=0");
678+
} else {
679+
sendCommand("./cmd?frameLight=1");
642680
}
643681
});
644682

framefunctions.ino

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ void showSeconds(uint8_t minutes) // use minutes to calculate the seconds (more
5858
if(i == activePixelSeconds){
5959
for(int j = 0; j < NUM_LED_PER_SECOND; j++)
6060
{
61-
frameLED.setPixel((i - j) % RING_LED_COUNT, maincolor_clock);
61+
frameLED.setPixel((i - j + RING_LED_COUNT) % RING_LED_COUNT, maincolor_clock);
6262
}
6363
}
6464
}

wordclock_esp8266.ino

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
#define ADR_FRAMELIGHTSECONDSACTIVE 12
6666
#define ADR_FRAMELIGHTSECONDSSINGLE 13
6767
#define ADR_FRAMELIGHTSECONDSINCDECCYCLE 14
68+
#define ADR_STATICBACKGROUND2 15
6869
#define ADR_STATE 26
6970
#define ADR_NM_ACTIVATED 27
7071
#define ADR_COLSHIFTSPEED 28
@@ -208,6 +209,7 @@ uint8_t dynColorShiftPhase = 0; // stores the phase of the dynamic
208209
uint8_t dynColorShiftSpeed = 1; // stores the speed of the dynamic color shift -> used to calc update period
209210
bool puristModeActive = false; // stores if purist mode is active
210211
bool staticBackgroundActive = false; // stores if static background is active
212+
bool staticBackground2Active = false; // stores if static background is active
211213
bool frameLightActive = false; // stores if frame light is active
212214
bool frameSecondsActive = false; // stores if frame light should be active for seconds
213215
bool frameSecondsSingle = false; // stores if frame light should be active for seconds in single mode (false == increment mode)
@@ -440,7 +442,7 @@ void loop() {
440442
Serial.println("connection lost");
441443
ledmatrix.gridAddPixel(0, 5, colors24bit[1]);
442444
ledmatrix.drawOnMatrixInstant();
443-
delay(2000); // Sandro 1000
445+
delay(2000); // Nessi (1000)
444446
}
445447
}
446448

@@ -567,13 +569,9 @@ void updateStateBehavior(uint8_t state){
567569
}
568570
showStringOnClock(timeAsString, maincolor_clock);
569571
drawMinuteIndicator(minutes, maincolor_clock);
570-
571-
// show static background pattern every 5 minutes for 1 minute
572-
// if(minutes % 5 == 0 && staticBackgroundActive){ // Sandro
573-
// showStaticBackgroundPattern(); // Sandro
574-
// } // Sandro
575572
}
576573
break;
574+
577575
// state diclock
578576
case st_diclock:
579577
{
@@ -585,7 +583,7 @@ void updateStateBehavior(uint8_t state){
585583
// state spiral
586584
case st_spiral:
587585
{
588-
int res = spiral(false, sprialDir, WIDTH-0); // Sandro WIDTH-6);
586+
int res = spiral(false, sprialDir, WIDTH-0); // Nessi WIDTH-6);
589587
if(res && sprialDir == 0){
590588
// change spiral direction to closing (draw empty leds)
591589
sprialDir = 1;
@@ -831,8 +829,8 @@ void handleButton(){
831829
if(ledOff){
832830
ledOff = false;
833831
}else{
834-
// stateChange((currentState + 1) % NUM_STATES, true); // Sandro, umschalten 6 Modi
835-
stateChange((currentState + 1) % 2, true); // Sandro, umschalten nur Uhr und Digi
832+
// stateChange((currentState + 1) % NUM_STATES, true); // Nessi, umschalten 6 Modi
833+
stateChange((currentState + 1) % 2, true); // Nessi, umschalten nur Uhr und Digi
836834
}
837835

838836
}
@@ -881,6 +879,7 @@ void loadCurrentStateFromEEPROM(){
881879

882880
puristModeActive = EEPROM.read(ADR_PURIST_MODE_ACTIVE);
883881
staticBackgroundActive = EEPROM.read(ADR_STATICBACKGROUND);
882+
staticBackground2Active = EEPROM.read(ADR_STATICBACKGROUND2);
884883
frameLightActive = EEPROM.read(ADR_FRAMELIGHTACTIVE);
885884
frameSecondsActive = EEPROM.read(ADR_FRAMELIGHTSECONDSACTIVE);
886885
frameSecondsSingle = EEPROM.read(ADR_FRAMELIGHTSECONDSSINGLE);
@@ -1140,6 +1139,14 @@ void handleCommand() {
11401139
EEPROM.write(ADR_STATICBACKGROUND, staticBackgroundActive);
11411140
EEPROM.commit();
11421141
}
1142+
else if(server.argName(0) == "staticbackground2"){
1143+
Serial.println("StaticBackground2 change via Webserver");
1144+
String str = server.arg(0);
1145+
if(str == "1") staticBackground2Active = true;
1146+
else staticBackground2Active = false;
1147+
EEPROM.write(ADR_STATICBACKGROUND2, staticBackground2Active);
1148+
EEPROM.commit();
1149+
}
11431150
else if(server.argName(0) == "frameLight"){
11441151
Serial.println("FrameLight change via Webserver");
11451152
String str = server.arg(0);
@@ -1241,6 +1248,8 @@ void handleDataRequest() {
12411248
message += ",";
12421249
message += "\"staticbackground\":\"" + String(staticBackgroundActive) + "\"";
12431250
message += ",";
1251+
message += "\"staticbackground2\":\"" + String(staticBackground2Active) + "\"";
1252+
message += ",";
12441253
message += "\"frameLight\":\"" + String(frameLightActive) + "\"";
12451254
message += ",";
12461255
message += "\"frameSecondsActive\":\"" + String(frameSecondsActive) + "\"";
@@ -1279,13 +1288,41 @@ String leadingZero2Digit(int value){
12791288
void showStaticBackgroundPattern(){
12801289
// define the coordinates of the background pattern to light up
12811290
// top left corner is (0,0)
1282-
uint8_t coordinatesX[] = {4, 5, 6, 7, 8, 9, 10, 6, 7, 8, 9, 10}; // Sandro
1283-
uint8_t coordinatesY[] = {3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4}; // Sandro
1291+
uint8_t coordinatesX[] = {4, 5, 6, 7, 8, 9, 10}; // Nessi (WORTUHR)
1292+
uint8_t coordinatesY[] = {3, 3, 3, 3, 3, 3, 3}; // Nessi (NESSI)
12841293

12851294
uint8_t red = 0; // red color value (0-255)
12861295
uint8_t green = 255; // green color value (0-255)
12871296
uint8_t blue = 0; // blue color value (0-255)
1288-
uint8_t patternBrightness = 0.9 * brightness; // brightness of the pattern (0-255) // Sandro 0.7 entspricht 70%
1297+
uint8_t patternBrightness = 0.9 * brightness; // brightness of the pattern (0-255) // Nessi 0.7 entspricht 70%
1298+
1299+
if(patternBrightness < 10) patternBrightness = 10;
1300+
if(patternBrightness > 255) patternBrightness = 255;
1301+
float factor = patternBrightness / 255.0;
1302+
uint32_t color = LEDMatrix::Color24bit(red * factor, green * factor, blue * factor);
1303+
ledmatrix.setDynamicColorShiftPhase(-1);
1304+
for (uint8_t i = 0; i < sizeof(coordinatesX); i++) {
1305+
ledmatrix.gridAddPixel(coordinatesX[i], coordinatesY[i], color);
1306+
}
1307+
}
1308+
1309+
/**
1310+
* @brief Show a second static background pattern on the matrix
1311+
*
1312+
* You can define which leds should be lit up by changing the coordinatesX and coordinatesY arrays.
1313+
* You can define the color by changing the color variable.
1314+
*
1315+
*/
1316+
void showStaticBackgroundPattern2(){
1317+
// define the coordinates of the background pattern to light up
1318+
// top left corner is (0,0)
1319+
uint8_t coordinatesX[] = { 6, 7, 8, 9, 10}; // Nessi (WORTUHR)
1320+
uint8_t coordinatesY[] = { 4, 4, 4, 4, 4}; // Nessi (NESSI)
1321+
1322+
uint8_t red = 0; // red color value (0-255)
1323+
uint8_t green = 0; // green color value (0-255)
1324+
uint8_t blue = 255; // blue color value (0-255)
1325+
uint8_t patternBrightness = 0.9 * brightness; // brightness of the pattern (0-255) // Nessi 0.7 entspricht 70%
12891326

12901327
if(patternBrightness < 10) patternBrightness = 10;
12911328
if(patternBrightness > 255) patternBrightness = 255;

0 commit comments

Comments
 (0)