From 66175a56a6d8d3275b7705d2935ed36c9fa16bdb Mon Sep 17 00:00:00 2001 From: Laurent Garnier Date: Tue, 15 Aug 2023 02:54:43 +0200 Subject: [PATCH] [BasicUI] Add support for icons based on conditional rules Depends on openhab/openhab-core#3759 and #1998 Signed-off-by: Laurent Garnier --- .../render/AbstractWidgetRenderer.java | 2 +- .../src/main/resources/snippets/icon_oh.html | 2 +- .../resources/snippets/icon_oh_no_state.html | 2 +- .../org.openhab.ui.basic/web-src/smarthome.js | 66 +++++++++++-------- 4 files changed, 41 insertions(+), 31 deletions(-) diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java index 3815f99069..45307a73ff 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java @@ -111,7 +111,7 @@ public ItemUIRegistry getItemUIRegistry() { * @return HTML code */ protected String preprocessSnippet(String originalSnippet, Widget w) { - return preprocessSnippet(originalSnippet, w, w.getStaticIcon() != null); + return preprocessSnippet(originalSnippet, w, w.getStaticIcon() != null || !w.getDynamicIcon().isEmpty()); } /** diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh.html index 53b690ab8d..1471536fa1 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh.html +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh_no_state.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh_no_state.html index 2effa429a4..4de271cb9f 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh_no_state.html +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh_no_state.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js index abc99baa7d..b0dac09bf4 100644 --- a/bundles/org.openhab.ui.basic/web-src/smarthome.js +++ b/bundles/org.openhab.ui.basic/web-src/smarthome.js @@ -349,8 +349,7 @@ var _t = this, suppress = false, - noneImageSrc = "/icon/none.png", - splittedIconAttr; + noneImageSrc = "/icon/none.png"; _t.parentNode = parentNode; _t.formRow = parentNode.parentNode; @@ -376,9 +375,6 @@ } if (_t.icon !== null) { - splittedIconAttr = _t.icon.getAttribute(o.iconAttribute).split(":"); - _t.iconSet = splittedIconAttr[0]; - _t.iconName = splittedIconAttr[1]; if (_t.icon.src !== noneImageSrc) { _t.icon.addEventListener("load", convertToInlineSVG); _t.icon.addEventListener("error", replaceImageWithNone); @@ -389,20 +385,13 @@ var parser, docSvg, - newIconElement, - dataIcon; + newIconElement; // Parse the SVG text and turn it into DOM nodes parser = new DOMParser(); docSvg = parser.parseFromString(svgText, "image/svg+xml"); newIconElement = docSvg.querySelector("svg"); - // Keep the attribute data-icon - dataIcon = _t.icon.getAttribute("data-icon"); - if (dataIcon !== null) { - newIconElement.setAttribute("data-icon", dataIcon); - } - // Replace the current icon element with the built inline SVG _t.iconContainer.replaceChild(newIconElement, _t.icon); _t.icon = _t.parentNode.parentNode.querySelector(o.formIconSvg); @@ -428,21 +417,41 @@ }); }; - _t.reloadIcon = function(state) { + _t.reloadIcon = function(state, icon) { var - src; + src, + splittedIcon, + iconSource = "oh", + iconSet = "classic", + iconName = "none"; + + if (icon === undefined) { + return; + } + + splittedIcon = icon.split(":"); + if (splittedIcon.length === 1) { + iconName = splittedIcon[0]; + } else if (splittedIcon.length === 2) { + iconSource = splittedIcon[0]; + iconName = splittedIcon[1]; + } else if (splittedIcon.length === 3) { + iconSource = splittedIcon[0]; + iconSet = splittedIcon[1]; + iconName = splittedIcon[2]; + } // Some widgets don't have icons - if (_t.icon !== null && _t.iconWithState) { - if (state.length < 200) { - src = "/icon/" + encodeURIComponent(_t.iconName) + + if (_t.icon !== null && iconSource === "oh") { + if (_t.iconWithState && state.length < 200) { + src = "/icon/" + encodeURIComponent(iconName) + "?state=" + encodeURIComponent(state) + - "&iconset=" + encodeURIComponent(_t.iconSet) + + "&iconset=" + encodeURIComponent(iconSet) + "&format=" + smarthome.UI.iconType + "&anyFormat=true"; } else { - src = "/icon/" + encodeURIComponent(_t.iconName) + - "?iconset=" + encodeURIComponent(_t.iconSet) + + src = "/icon/" + encodeURIComponent(iconName) + + "?iconset=" + encodeURIComponent(iconSet) + "&format=" + smarthome.UI.iconType + "&anyFormat=true"; } @@ -465,8 +474,8 @@ _t.visible = state; }; - _t.setValue = function(value, itemState, visible) { - _t.reloadIcon(itemState); + _t.setValue = function(value, itemState, visible, icon) { + _t.reloadIcon(itemState, icon); if (suppress) { suppress = false; } else { @@ -1850,7 +1859,7 @@ _t.valueNode.innerHTML = value; } if (_t.locked) { - _t.reloadIcon(itemState); + // _t.reloadIcon(itemState); return; } if (value.indexOf(" ") > 0) { @@ -2290,7 +2299,7 @@ if (value === null) { value = update.state; } - widget.setValue(smarthome.UI.escapeHtml(value), update.state, update.visibility); + widget.setValue(smarthome.UI.escapeHtml(value), update.state, update.visibility, update.icon); } if (labelColor === "primary") { @@ -2410,7 +2419,8 @@ label: data.label, labelcolor: data.labelcolor, valuecolor: data.valuecolor, - iconcolor: data.iconcolor + iconcolor: data.iconcolor, + icon: data.icon }; _t.updateWidget(smarthome.dataModel[data.widgetId], update); } @@ -2478,7 +2488,8 @@ label: widget.label, labelcolor: widget.labelcolor, valuecolor: widget.valuecolor, - iconcolor: widget.iconcolor + iconcolor: widget.iconcolor, + icon: widget.icon }; _t.updateWidget(w, update); } @@ -2734,7 +2745,6 @@ itemStateAttribute: "data-item-state", unitAttribute: "data-item-unit", idAttribute: "data-widget-id", - iconAttribute: "data-icon", iconTypeAttribute: "data-icon-type", iconWithStateAttribute: "data-icon-with-state", inlineSvgAttribute: "data-inline-svg",