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