diff --git a/bundles/org.openhab.ui.basic/snippets-src/colorpicker.html b/bundles/org.openhab.ui.basic/snippets-src/colorpicker.html index 2bb5f795f5..031416fe24 100644 --- a/bundles/org.openhab.ui.basic/snippets-src/colorpicker.html +++ b/bundles/org.openhab.ui.basic/snippets-src/colorpicker.html @@ -20,8 +20,9 @@ - - + - + diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ColorpickerRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ColorpickerRenderer.java index 87d4a28145..bb5af10ebb 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ColorpickerRenderer.java +++ b/bundles/org.openhab.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 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 index a4d55bce18..7c4f1f42ef 100644 --- 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 index 29f3a0e122..2fb704bbe8 100644 --- 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",