From 4f0480266d231a4473cfe68e90e005bfd64b0057 Mon Sep 17 00:00:00 2001 From: Laurent Garnier Date: Mon, 14 Aug 2023 22:57:04 +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 | 70 +++++++++++-------- 4 files changed, 43 insertions(+), 33 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 a00b63055d..7ef162877d 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 de19af50bb..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 f568573b32..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 c5e2fd0c91..8f1a3a6490 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; @@ -375,10 +374,6 @@ } if (_t.icon !== null) { - _t.staticIcon = _t.icon.getAttribute(o.staticAttribute) === "true"; - 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 +384,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 +416,41 @@ }); }; - _t.reloadIcon = function(state) { + _t.reloadIcon = function(state, icon, staticIcon) { 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.staticIcon) { - if (state.length < 200) { - src = "/icon/" + encodeURIComponent(_t.iconName) + + if (_t.icon !== null && iconSource === "oh") { + if (!staticIcon && 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 +473,8 @@ _t.visible = state; }; - _t.setValue = function(value, itemState, visible) { - _t.reloadIcon(itemState); + _t.setValue = function(value, itemState, visible, icon, staticIcon) { + _t.reloadIcon(itemState, icon, staticIcon); if (suppress) { suppress = false; } else { @@ -1850,7 +1858,7 @@ _t.valueNode.innerHTML = value; } if (_t.locked) { - _t.reloadIcon(itemState); + // _t.reloadIcon(itemState); return; } if (value.indexOf(" ") > 0) { @@ -2290,7 +2298,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, update.staticIcon); } if (labelColor === "primary") { @@ -2410,7 +2418,9 @@ label: data.label, labelcolor: data.labelcolor, valuecolor: data.valuecolor, - iconcolor: data.iconcolor + iconcolor: data.iconcolor, + icon: data.icon, + staticIcon: data.staticIcon }; _t.updateWidget(smarthome.dataModel[data.widgetId], update); } @@ -2478,7 +2488,9 @@ label: widget.label, labelcolor: widget.labelcolor, valuecolor: widget.valuecolor, - iconcolor: widget.iconcolor + iconcolor: widget.iconcolor, + icon: widget.icon, + staticIcon: widget.staticIcon }; _t.updateWidget(w, update); } @@ -2734,9 +2746,7 @@ itemStateAttribute: "data-item-state", unitAttribute: "data-item-unit", idAttribute: "data-widget-id", - iconAttribute: "data-icon", iconTypeAttribute: "data-icon-type", - staticAttribute: "data-static", inlineSvgAttribute: "data-inline-svg", primaryColorAttribute: "data-primary-color", secondaryColorAttribute: "data-secondary-color",