[BasicUI] Add preview color to Colorpicker widget (#2873)

Also cleanup class ColorpickerRenderer --------- Signed-off-by: Laurent Garnier <lg.hc@free.fr>
openhab · Nov 18, 2024 · d5a0748 · d5a0748
1 parent 7c3d114
commit d5a0748
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 33 deletions.
diff --git a/bundles/org.openhab.ui.basic/snippets-src/colorpicker.html b/bundles/org.openhab.ui.basic/snippets-src/colorpicker.html
@@ -20,8 +20,9 @@
 			<i class="material-icons">&#xE316;</i>
 		</button>
 		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--pick">
-			<!-- color_lens -->
-			<i class="material-icons">&#xE3B7;</i>
+			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+				<rect width="100" height="100" x="0" y="0" rx="20" fill="Gray"/>
+			</svg>
 		</button>
 		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--down">
 			<!-- keyboard_arrow_down -->

diff --git a/bundles/org.openhab.ui.basic/snippets-src/colortemppicker.html b/bundles/org.openhab.ui.basic/snippets-src/colortemppicker.html
@@ -25,13 +25,9 @@
 		data-gradient-colors="%gradientColors%"
 	>
 		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colortemppicker--pick">
-			<!-- colorize -->
-			<i class="material-icons">&#xE3B8;</i>
-		</button>
-		<span class="mdl-form__colortemppicker--preview">
 			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-				<circle cx="50" cy="50" r="44" fill="Gray" stroke="LightGray" stroke-width="6" />
+				<rect width="100" height="100" x="0" y="0" rx="20" fill="Gray"/>
 			</svg>
-		</span>
+		</button>
 	</div>
 </div>
diff --git a/...nhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ColorpickerRenderer.java b/...nhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ColorpickerRenderer.java
@@ -21,7 +21,6 @@
 import org.openhab.core.model.sitemap.sitemap.Widget;
 import org.openhab.core.types.State;
 import org.openhab.core.ui.items.ItemUIRegistry;
-import org.openhab.ui.basic.internal.servlet.WebAppServlet;
 import org.openhab.ui.basic.render.RenderException;
 import org.openhab.ui.basic.render.WidgetRenderer;
 import org.osgi.framework.BundleContext;
@@ -65,23 +64,11 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         // get RGB hex value
         State state = itemUIRegistry.getState(cp);
         String hexValue = getRGBHexCodeFromItemState(state);
-        if (hexValue == null) {
-            hexValue = "#ffffff";
-        }
-        String purelabel = itemUIRegistry.getLabel(w);
-        if (purelabel != null) {
-            purelabel = purelabel.replaceAll("\\\"", "\\\\'");
-        }
 
         // Should be called before preprocessSnippet
-        snippet = snippet.replace("%state%", hexValue);
-        snippet = snippet.replace("%state_in_url%", escapeURL(hexValue));
+        snippet = snippet.replace("%state%", hexValue == null ? "#ffffff" : hexValue);
 
         snippet = preprocessSnippet(snippet, w);
-        if (purelabel != null) {
-            snippet = snippet.replace("%purelabel%", purelabel);
-        }
-        snippet = snippet.replace("%servletname%", WebAppServlet.SERVLET_PATH);
 
         // Process the color tags
         snippet = processColor(w, snippet);

diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss
@@ -348,10 +348,14 @@
 			padding-top: 6px;
 		}
 	}
-	&__colortemppicker--preview {
+	&__colorpicker--pick,
+	&__colortemppicker--pick {
+		padding-top: 0px !important;
+		padding-left: 7px;
+		padding-right: 7px;
 		svg {
-			width: 36px;
-			height: 36px;
+			width: 26px;
+			height: 26px;
 			object-fit: contain;
 		}
 	}

diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js
@@ -2121,6 +2121,7 @@
 
 		var
 			_t = this,
+			color,
 			repeatInterval = 300,
 			interval;
 
@@ -2132,23 +2133,47 @@
 			};
 		}
 
-		_t.value = hex2rgb(_t.parentNode.getAttribute("data-value"));
+		function rgb2color(rgb) {
+			var
+				r = Math.round(rgb.r).toString(16),
+				g = Math.round(rgb.g).toString(16),
+				b = Math.round(rgb.b).toString(16);
+
+			return "#" + (r.length < 2 ? "0" : "") + r + (g.length < 2 ? "0" : "") + g + (b.length < 2 ? "0" : "") + b;
+		}
+
+		color = _t.parentNode.getAttribute("data-value");
+		_t.value = hex2rgb(color);
 		_t.modalControl = null;
 		_t.buttonUp = _t.parentNode.querySelector(o.colorpicker.up);
 		_t.buttonDown = _t.parentNode.querySelector(o.colorpicker.down);
 		_t.buttonPick = _t.parentNode.querySelector(o.colorpicker.pick);
+		_t.colorPreview = _t.parentNode.querySelector(o.colorpicker.rectSvg);
+		_t.colorPreview.setAttribute("fill", color);
 		_t.longPress = false;
 		_t.pressed = false;
 
 		_t.setValue = function(value, itemState) {
 			var
-				t = itemState.split(","),
+				t,
+				hsv,
+				color;
+
+			if (itemState === "NULL" || itemState === "UNDEF") {
+				color = "#ffffff";
+				_t.value = hex2rgb(color);
+			} else {
+				t = itemState.split(",");
 				hsv = {
 					h: t[0] / 360,
 					s: t[1] / 100,
 					v: t[2] / 100
 				};
-			_t.value = Colorpicker.hsv2rgb(hsv);
+				_t.value = Colorpicker.hsv2rgb(hsv);
+				color = rgb2color(_t.value);
+			}
+
+			_t.colorPreview.setAttribute("fill", color);
 
 			if (_t.modalControl !== null) {
 				_t.modalControl.updateColor(_t.value);
@@ -2361,10 +2386,10 @@
 		_t.colors = (_t.gradientColors === "" ? "Gray" : _t.gradientColors).split(",");
 		_t.modalControl = null;
 		_t.buttonPick = _t.parentNode.querySelector(o.colortemppicker.pick);
-		_t.circle = _t.parentNode.querySelector(o.colortemppicker.circle);
+		_t.colorPreview = _t.parentNode.querySelector(o.colortemppicker.rectSvg);
 		color = _t.parentNode.getAttribute("data-color");
 		if (color !== "") {
-			_t.circle.setAttribute("fill", color);
+			_t.colorPreview.setAttribute("fill", color);
 		}
 
 		_t.setValuePrivate = function(value, itemState) {
@@ -2383,8 +2408,8 @@
 				_t.value = itemState * 1;
 			}
 
-			// Set the color in the preview circle with the most approaching color used to generate the gradient
-			_t.circle.setAttribute("fill", (isNaN(_t.value) || _t.value < _t.min || _t.value > _t.max)
+			// Set the color in the preview rectange with the most approaching color used to generate the gradient
+			_t.colorPreview.setAttribute("fill", (isNaN(_t.value) || _t.value < _t.min || _t.value > _t.max)
 				? "Gray"
 				: _t.colors[Math.round((_t.value - _t.min) * (_t.colors.length - 1) / (_t.max - _t.min))]);
 
@@ -3946,6 +3971,7 @@
 		up: ".mdl-form__colorpicker--up",
 		down: ".mdl-form__colorpicker--down",
 		pick: ".mdl-form__colorpicker--pick",
+		rectSvg: ".mdl-form__colorpicker--pick > svg > rect",
 		modalClass: "mdl-modal--colorpicker",
 		image: ".colorpicker__image",
 		handle: ".colorpicker__handle",
@@ -3956,7 +3982,7 @@
 	},
 	colortemppicker: {
 		pick: ".mdl-form__colortemppicker--pick",
-		circle: ".mdl-form__colortemppicker--preview > svg > circle",
+		rectSvg: ".mdl-form__colortemppicker--pick > svg > rect",
 		modalClass: "mdl-modal--colortemppicker",
 		slider: ".colortemppicker__input",
 		colortemppicker: ".colortemppicker",