ClassicUI: full image and chart refresh

extensions/ui/org.eclipse.smarthome.ui.classic/snippets/chart.html

@@ -1 +1 @@
-%setrefresh%<p><center><img style="padding:10px;width:90%" src="%url%" %refresh% /></center></p>
+<p><center><img style="padding:10px;width:90%" src="%url%" %refresh% /></center></p>

extensions/ui/org.eclipse.smarthome.ui.classic/snippets/image.html

@@ -1 +1 @@
-%setrefresh%<p><center><img style="padding:10px;width:90%" src="%url%" %refresh% /></center></p>
+<p><center><img style="padding:10px;width:90%" src="%url%" %refresh% /></center></p>

extensions/ui/org.eclipse.smarthome.ui.classic/snippets/image_link.html

@@ -1 +1 @@
-%setrefresh%<p><center><a href="#_%id%" onclick="AsyncLoad('%id%')"><img style="padding:10px;width:90%" src="%url%" %refresh% /></a></center></p>
+<p><center><a href="#_%id%" onclick="AsyncLoad('%id%')"><img style="padding:10px;width:90%" src="%url%" %refresh% /></a></center></p>

extensions/ui/org.eclipse.smarthome.ui.classic/snippets/main.html

@@ -45,8 +45,6 @@
 				search = search + "sitemap=%sitemap%&w=" + hash.substring(2) + "&poll=true";
 				url = path + search; 
 				WA.Request(url, null, -1, true, null);
-				imageRefresh = imagesToRefreshOnPage;
-				imagesToRefreshOnPage = 0;
 			});
 
 			WA.AddEventListener("load", function() {
@@ -57,15 +55,31 @@
 	            WA.Request(request, null, null, true);
 	        }
 
-			// Functions for image refresh
-			var imageRefresh=0;
-			var imagesToRefreshOnPage = 0;
-
-	        function reloadImage(url, id) {
-				if(imageRefresh) { 
-					document.getElementById(id).src=url + new Date().getMilliseconds(); 
+			// Functions for image and chart support
+
+			var imageTimers = {};
+
+			function startReloadImage(url, id) {
+				var img = document.getElementById(id);
+				if (img && imageTimers[id] === undefined) {
+					imageTimers[id] = setTimeout('reloadImage(\''+url+'\', \''+id+'\')', img.dataset.timeout);
 				}
-	        }
+			}
+
+			function reloadImage(url, id) {
+				imageTimers[id] = undefined;
+				var img = document.getElementById(id);
+				if (img) {
+				  // if image is currently visible
+				  if (img.offsetWidth > 0 && img.offsetHeight > 0) { 
+				    // load the specified URL with cache busting
+				    img.src = url.replace( /&t=\d+/g , '&t=' + new Date().getTime());
+				  } else {
+				    // load a blank image (a data URI does not work in Safari)
+				    img.src = "images/none.png";
+				  }
+				}
+			}
 
 			// Functions for dimmer support
 	        var repeat_on=0;

extensions/ui/org.eclipse.smarthome.ui.classic/src/main/java/org/eclipse/smarthome/ui/classic/internal/render/ChartRenderer.java

@@ -7,6 +7,8 @@
  */
 package org.eclipse.smarthome.ui.classic.internal.render;
 
+import java.util.Date;
+
 import org.apache.commons.lang.StringUtils;
 import org.eclipse.emf.common.util.EList;
 import org.eclipse.smarthome.core.items.GroupItem;
@@ -54,26 +56,22 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb) throws RenderExcep
                 itemParam = "items=" + chart.getItem();
             }
 
-            String url = "/chart?" + itemParam + "&period=" + chart.getPeriod() + "&random=1";
-            if (chart.getService() != null)
+            String url = "/chart?" + itemParam + "&period=" + chart.getPeriod() + "&t=" + (new Date()).getTime();
+            if (chart.getService() != null) {
                 url += "&service=" + chart.getService();
+            }
 
             String snippet = getSnippet("image");
 
             if (chart.getRefresh() > 0) {
-                snippet = StringUtils.replace(snippet, "%setrefresh%",
-                        "<script type=\"text/javascript\">imagesToRefreshOnPage=1</script>");
-                snippet = StringUtils.replace(snippet, "%refresh%",
-                        "id=\"%id%\" onload=\"setTimeout('reloadImage(\\'%url%\\', \\'%id%\\')', " + chart.getRefresh()
-                                + ")\"");
+                snippet = StringUtils.replace(snippet, "%refresh%", "id=\"%id%\" data-timeout=\"" + chart.getRefresh()
+                        + "\" onload=\"startReloadImage('%url%', '%id%')\"");
             } else {
-                snippet = StringUtils.replace(snippet, "%setrefresh%", "");
                 snippet = StringUtils.replace(snippet, "%refresh%", "");
             }
 
             snippet = StringUtils.replace(snippet, "%id%", itemUIRegistry.getWidgetId(w));
             snippet = StringUtils.replace(snippet, "%url%", url);
-            snippet = StringUtils.replace(snippet, "%refresh%", Integer.toString(chart.getRefresh()));
 
             sb.append(snippet);
         } catch (ItemNotFoundException e) {

extensions/ui/org.eclipse.smarthome.ui.classic/src/main/java/org/eclipse/smarthome/ui/classic/internal/render/ImageRenderer.java

@@ -42,13 +42,9 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb) throws RenderExcep
         String snippet = (image.getChildren().size() > 0) ? getSnippet("image_link") : getSnippet("image");
 
         if (image.getRefresh() > 0) {
-            snippet = StringUtils.replace(snippet, "%setrefresh%",
-                    "<script type=\"text/javascript\">imagesToRefreshOnPage=1</script>");
-            snippet = StringUtils.replace(snippet, "%refresh%",
-                    "id=\"%id%\" onload=\"setTimeout('reloadImage(\\'%url%\\', \\'%id%\\')', " + image.getRefresh()
-                            + ")\"");
+            snippet = StringUtils.replace(snippet, "%refresh%", "id=\"%id%\" data-timeout=\"" + image.getRefresh()
+                            + "\" onload=\"startReloadImage('%url%', '%id%')\"");
         } else {
-            snippet = StringUtils.replace(snippet, "%setrefresh%", "");
             snippet = StringUtils.replace(snippet, "%refresh%", "");
         }