From 269ffeaa642f0588e7da90552777842e1e24e737 Mon Sep 17 00:00:00 2001
From: David Panusch <d.panusch@gmx.de>
Date: Fri, 17 Jan 2025 09:48:17 +0100
Subject: [PATCH] Adressed Bug with background color picker.

---
 include/Transitiontypes/Transition.hpp |  2 +-
 include/clockWork.hpp                  |  1 +
 webpage/icons/color_bg.svg             | 13 ++++
 webpage/icons/color_fr.svg             | 29 +++++++++
 webpage/index.html                     | 30 ++++++++-
 webpage/script.js                      | 85 +++++++++++---------------
 webpage/style.css                      |  7 +++
 7 files changed, 112 insertions(+), 55 deletions(-)
 create mode 100644 webpage/icons/color_bg.svg
 create mode 100644 webpage/icons/color_fr.svg

diff --git a/include/Transitiontypes/Transition.hpp b/include/Transitiontypes/Transition.hpp
index ce241b6..b9e7753 100644
--- a/include/Transitiontypes/Transition.hpp
+++ b/include/Transitiontypes/Transition.hpp
@@ -1137,7 +1137,7 @@ void Transition::loop(struct tm &tm) {
                 setMinute();
                 if (G.secondVariant != SecondVariant::Off) {
                     led.setbySecondArray();
-                    // Workaround: setbySecoundArray not in 'work'
+                    // Workaround: setbySecondArray not in 'work'
                 }
             }
             led.show();
diff --git a/include/clockWork.hpp b/include/clockWork.hpp
index 5572068..3319a8a 100644
--- a/include/clockWork.hpp
+++ b/include/clockWork.hpp
@@ -1207,6 +1207,7 @@ void ClockWork::loop(struct tm &tm) {
         config["effectSpeed"] = G.effectSpeed;
         config["colortype"] = G.Colortype;
         config["hasHappyBirthday"] = usedUhrType->hasHappyBirthday();
+        config["hasSecondsFrame"] = usedUhrType->hasSecondsFrame();
         config["prog"] = G.prog;
         serializeJson(config, str);
         webSocket.sendTXT(G.client_nr, str, strlen(str));
diff --git a/webpage/icons/color_bg.svg b/webpage/icons/color_bg.svg
new file mode 100644
index 0000000..a5b4c63
--- /dev/null
+++ b/webpage/icons/color_bg.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7F8080;}
+	.st1{fill:#5C5C5C;}
+</style>
+<g>
+	<path class="st0" d="M5,28h22c0.6,0,1-0.4,1-1V5c0-0.6-0.4-1-1-1H5C4.4,4,4,4.4,4,5v22C4,27.6,4.4,28,5,28z M26,24H14v-3h12V24z
+		 M10,18v-3h9v3H10z M14,10h12v3H14V10z M7,6h6v3H7V6z"/>
+	<path class="st1" d="M27,2H5C3.4,2,2,3.4,2,5v22c0,1.6,1.4,3,3,3h22c1.6,0,3-1.4,3-3V5C30,3.4,28.6,2,27,2z M28,27c0,0.6-0.4,1-1,1
+		H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h22c0.6,0,1,0.4,1,1V27z"/>
+</g>
+</svg>
diff --git a/webpage/icons/color_fr.svg b/webpage/icons/color_fr.svg
new file mode 100644
index 0000000..401f320
--- /dev/null
+++ b/webpage/icons/color_fr.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Ebene_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 32 32"
+   style="enable-background:new 0 0 32 32;"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs2" />
+<style
+   type="text/css"
+   id="style1">
+	.st0{fill:#5C5C5C;}
+	.st1{fill:#7F8080;}
+</style>
+<path
+   class="st0"
+   d="M 27.9,0 H 4.1 C 1.8,0 0,1.8 0,4.1 V 28 c 0,2.2 1.8,4 4.1,4 H 28 c 2.2,0 4.1,-1.8 4.1,-4.1 V 4.1 C 32,1.8 30.2,0 27.9,0 Z M 30,9.1 V 27 c 0,1.6 -1.4,3 -3,3 H 5 C 3.4,30 2,28.6 2,27 V 5 C 2,3.4 3.4,2 5,2 h 22 c 1.6,0 3,1.4 3,3 z"
+   id="path1" />
+<path
+   class="st1"
+   d="M 27,2 H 5 C 3.4,2 2,3.4 2,5 v 22 c 0,1.6 1.4,3 3,3 h 22 c 1.6,0 3,-1.4 3,-3 V 5 C 30,3.4 28.6,2 27,2 Z M 5,28 C 4.4,28 4,27.6 4,27 V 5 C 4,4.4 4.4,4 5,4 h 22 c 0.6,0 1,0.4 1,1 v 22 c 0,0.6 -0.4,1 -1,1 z"
+   id="path2" />
+</svg>
diff --git a/webpage/index.html b/webpage/index.html
index 08347fb..25152cd 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -68,6 +68,14 @@
     <symbol id="icon-mode-wordclock" viewBox="0 0 32 32">
         <path d="m5 2c-1.6447 0-3 1.3553-3 3v22c0 1.6447 1.3553 3 3 3h22c1.6447 0 3-1.3553 3-3v-22c0-1.6447-1.3553-3-3-3zm0 2h22c0.5713 0 1 0.4287 1 1v22c0 0.5713-0.4287 1-1 1h-22c-0.5713 0-1-0.4287-1-1v-22c0-0.5713 0.4287-1 1-1z" fill="#5c5c5c" stroke-linecap="round" stroke-linejoin="round"/><path d="m14 21h12v3h-12z" fill="#999"/><path d="m10 15h9v3h-9z" fill="#6c6c6c"/><path d="m14 10h12v3h-12z" fill="#525252"/><path d="m7 6h6v3h-6z" fill="#a6a6a6"/>
     </symbol>
+
+    <symbol id="icon-color-background" viewBox="0 0 32 32">
+        <path d="m5 28h22c0.6 0 1-0.4 1-1v-22c0-0.6-0.4-1-1-1h-22c-0.6 0-1 0.4-1 1v22c0 0.6 0.4 1 1 1zm21-4h-12v-3h12v3zm-16-6v-3h9v3h-9zm4-8h12v3h-12v-3zm-7-4h6v3h-6v-3z" fill="#7F8080" /><path d="M27,2H5C3.4,2,2,3.4,2,5v22c0,1.6,1.4,3,3,3h22c1.6,0,3-1.4,3-3V5C30,3.4,28.6,2,27,2z M28,27c0,0.6-0.4,1-1,1   H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h22c0.6,0,1,0.4,1,1V27z" fill="#5C5C5C"/>
+    </symbol>
+
+    <symbol id="icon-color-frame" viewBox="0 0 32 32">
+        <path d="M 27.9,0 H 4.1 C 1.8,0 0,1.8 0,4.1 V 28 c 0,2.2 1.8,4 4.1,4 H 28 c 2.2,0 4.1,-1.8 4.1,-4.1 V 4.1 C 32,1.8 30.2,0 27.9,0 Z M 30,9.1 V 27 c 0,1.6 -1.4,3 -3,3 H 5 C 3.4,30 2,28.6 2,27 V 5 C 2,3.4 3.4,2 5,2 h 22 c 1.6,0 3,1.4 3,3 z" id="path1" fill="#999"/><path d="M 27,2 H 5 C 3.4,2 2,3.4 2,5 v 22 c 0,1.6 1.4,3 3,3 h 22 c 1.6,0 3,-1.4 3,-3 V 5 C 30,3.4 28.6,2 27,2 Z M 5,28 C 4.4,28 4,27.6 4,27 V 5 C 4,4.4 4.4,4 5,4 h 22 c 0.6,0 1,0.4 1,1 v 22 c 0,0.6 -0.4,1 -1,1 z" id="path2" fill="#5C5C5C"/>
+    </symbol>
 </svg>
 
     <a href="#menu" role="button" aria-controls="menu" aria-expanded="false" class="hamburger">
@@ -120,9 +128,25 @@ <h1 data-i18next="colors.h1"></h1>
                 </header>
 
                 <div class="box box-color">
-                    <p>
-                        <input type="checkbox" id="with-background" checked=""/> <label for="with-background" class="pure-checkbox" data-i18next="colors.with-background"></label>
-                    </p>
+                    <form name="prog" class="mode-color-form" id="mode-color-form">
+                            <label for="colorwheel-foreground" class="radio-select">
+                                <input id="colorwheel-foreground" type="radio" name="colorwheel" value="color" checked>
+                                <svg aria-hidden="true"><use href="#icon-mode-wordclock"/></svg>
+                                <span data-i18next="functions.color.foreground"></span>
+                            </label>
+                            <label for="colorwheel-background" class="radio-select">
+                                <input id="colorwheel-background" type="radio" name="colorwheel" value="color">
+                                <svg aria-hidden="true"><use href="#icon-color-background"/></svg>
+                                <span data-i18next="functions.color.background"></span>
+                            </label>
+                            <div class="specific-layout-7">
+                            <label for="colorwheel-frame" class="radio-select">
+                                <input id="colorwheel-frame" type="radio" name="colorwheel" value="color">
+                                <svg aria-hidden="true"><use href="#icon-color-frame"/></svg>
+                                <span data-i18next="functions.color.frame"></span>
+                            </label>
+                            </div>
+                    </form>
                     <div id="color-picker" class="color-picker"></div>
                     <div class="swatch-grid" id="swatch-grid">
                         <div class="swatch" data-color="#ffffff" style="background: #ffffff"></div>
diff --git a/webpage/script.js b/webpage/script.js
index 61902e5..89ed60d 100644
--- a/webpage/script.js
+++ b/webpage/script.js
@@ -49,8 +49,10 @@ var debug = true;
 var command = 1;
 var hsb = [
 	[0, 100, 50],
-	[120, 100, 50]
+	[120, 100, 50],
+	[240, 100, 50]
 ];
+var colorPosition = 0;
 var effectBri = 2;
 var effectSpeed = 10;
 var sleep = 0;
@@ -193,7 +195,8 @@ function initConfigValues() {
 	command = 1;
 	hsb = [
 		[0, 100, 50],
-		[120, 100, 50]
+		[120, 100, 50],
+		[240, 100, 50]
 	];
 	effectBri = 2;
 	effectSpeed = 10;
@@ -324,6 +327,8 @@ function initWebsocket() {
 
 	websocket.onmessage = function(event) {
 
+		const modeColorForm = document.getElementById("mode-color-form");
+
 		var data = JSON.parse(event.data);
 
 		debugMessage("WebSocket response arrived (command " + data.command + ").", data);
@@ -394,12 +399,15 @@ function initWebsocket() {
 			document.getElementById("boot-show-wifi").checked = data.bootShowWifi;
 			document.getElementById("boot-show-ip").checked = data.bootShowIP;
 
+			modeColorForm.style.gridTemplateColumns = data.hasSecondsFrame ? "1fr 1fr 1fr" : "1fr 1fr";
+
 			enableSpecific("specific-layout-1", !data.isRomanLanguage);
 			enableSpecific("specific-layout-2", data.hasDreiviertel);
 			enableSpecific("specific-layout-3", data.hasZwanzig);
 			enableSpecific("specific-layout-4", data.hasSecondsFrame);
 			enableSpecific("specific-layout-5", data.hasWeatherLayout);
 			enableSpecific("specific-layout-6", data.UhrtypeDef === 10); // Add A-Quarter to (En10x11 exclusive)
+			enableSpecific("specific-layout-7", data.hasSecondsFrame);
 
 			enableSpecific("specific-colortype-4", data.colortype === 5);
 
@@ -425,6 +433,8 @@ function initWebsocket() {
 			colortype = data.colortype;
 			hasHappyBirthday = data.hasHappyBirthday;
 
+			modeColorForm.style.gridTemplateColumns = data.hasSecondsFrame ? "1fr 1fr 1fr" : "1fr 1fr";
+
 			var prog = data.prog;
 			command = prog === 0 ? COMMAND_MODE_WORD_CLOCK : prog;	// 0 == COMMAND_IDLE
 			const inputID = MODE_TO_INPUT_ID.get(prog);
@@ -434,6 +444,7 @@ function initWebsocket() {
 			setSliders();
 			setColors();
 			enableSpecific("specific-colortype-4", data.colortype === 5);
+			enableSpecific("specific-layout-7", data.hasSecondsFrame);
 		}
 		if (data.command === "wlan") {
 			document.getElementById("wlanlist").innerHTML = data.list;
@@ -460,10 +471,10 @@ function initWebsocket() {
 }
 
 function changeColor(color) {
-	hsb[color.index][0] = color.hue;
-	hsb[color.index][1] = color.saturation;
+	hsb[colorPosition][0] = color.hue;
+	hsb[colorPosition][1] = color.saturation;
 	if (color.value !== 100) {
-		hsb[color.index][2] = color.value;
+		hsb[colorPosition][2] = color.value;
 	}
 
 	setColors();
@@ -489,58 +500,18 @@ function createColorPicker() {
 }
 
 /**
- * show the color configuration in the color picker
+ * initialize background checkbox and color picker
  */
-function setColorPicker(withBackground) {
+function setColors() {
 	var hsbFg = {
-		h: hsb[COLOR_FOREGROUND][0],
-		s: hsb[COLOR_FOREGROUND][1],
-		v: hsb[COLOR_FOREGROUND][2]
-	};
-	var hsbBg = {
-		h: hsb[COLOR_BACKGROUND][0],
-		s: hsb[COLOR_BACKGROUND][1],
-		v: hsb[COLOR_BACKGROUND][2]
+		h: hsb[colorPosition][0],
+		s: hsb[colorPosition][1],
+		v: hsb[colorPosition][2]
 	};
 	var colors = [hsbFg];
-	if (withBackground) {
-		colors.push(hsbBg);
-	}
 	colorPicker.setColors(colors);
 }
 
-/**
- * initialize background checkbox and color picker
- */
-function setColors() {
-	var withBackground =
-		hsb[COLOR_BACKGROUND][0] ||
-		hsb[COLOR_BACKGROUND][1] ||
-		hsb[COLOR_BACKGROUND][2];
-	setColorPicker(withBackground);
-	$("#with-background").set("checked", withBackground);
-}
-
-/**
- * toggle between no background and a default dark gray background
- */
-function toggleBackground() {
-	var withBackground = $("#with-background").get("checked") | 0;
-	if (withBackground) {
-		// set to dark gray
-		hsb[COLOR_BACKGROUND][0] = 0;
-		hsb[COLOR_BACKGROUND][1] = 0;
-		hsb[COLOR_BACKGROUND][2] = 10;
-	} else {
-		// set to black
-		hsb[COLOR_BACKGROUND][0] = 0;
-		hsb[COLOR_BACKGROUND][1] = 0;
-		hsb[COLOR_BACKGROUND][2] = 0;
-	}
-	setColorPicker(withBackground);
-	sendColorData(command, nstr(1));
-}
-
 /**
  * Sets all sliders (the values) and their corresponding labels to
  * the currently stored config values.
@@ -670,7 +641,19 @@ $.ready(function() {
 	initWebsocket();
 	setColors();
 
-	$("#with-background").on("change", toggleBackground);
+	$("input[name='colorwheel']").on("change", function() {
+		var id = $(this).get("id");
+		if (id === "colorwheel-frame") {
+			colorPosition = 2;
+		} else if (id === "colorwheel-background") {
+			colorPosition = 1;
+		} else {
+			colorPosition = 0;
+		}
+		console.log("colorPosition: " + colorPosition);
+		setColors();
+	});
+
 	$(".status-button").on("click", function() {
 		var value = $(this).get("value");
 		$("#status").fill("Verbinden ...");
diff --git a/webpage/style.css b/webpage/style.css
index 2d16f5b..60382f9 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -259,6 +259,13 @@ a:visited:hover {
     grid-gap: .5em;
 }
 
+.mode-color-form {
+    display: inline-grid;
+    grid-gap: .5em;
+    margin-bottom: 1em;
+    grid-template-columns: 1fr 1fr;
+}
+
 .radio-select {
     border: 2px solid #eee;
     border-radius: .4em;