[BasicUI] Add support for icons based on conditional rules

Depends on openhab/openhab-core#3759 and openhab#1998

Signed-off-by: Laurent Garnier <[email protected]>

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());
     }
 
     /**

bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh.html

@@ -1 +1 @@
-<img data-icon="%icon_set%:%icon_name%" src="../icon/%icon_name_in_url%?state=%state_in_url%&iconset=%icon_set_in_url%&format=%icon_type%&anyFormat=true" />
+<img src="../icon/%icon_name_in_url%?state=%state_in_url%&iconset=%icon_set_in_url%&format=%icon_type%&anyFormat=true" />

bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_oh_no_state.html

@@ -1 +1 @@
-<img data-icon="%icon_set%:%icon_name%" src="../icon/%icon_name_in_url%?iconset=%icon_set_in_url%&format=%icon_type%&anyFormat=true" />
+<img src="../icon/%icon_name_in_url%?iconset=%icon_set_in_url%&format=%icon_type%&anyFormat=true" />

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",