[BasicUI] mapview : handle refresh and UNDEF state (#101)

Signed-off-by: Laurent Garnier <lg.hc@free.fr>

bundles/org.openhab.ui.basic/.gitignore

@@ -1,7 +1,6 @@
 node_modules
 node
 npm_cache
-web
 src/main/resources/web/smarthome.css
 src/main/resources/web/smarthome.js
 src/main/resources/web/fonts/*

bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/MapviewRenderer.java

@@ -37,6 +37,9 @@ import org.osgi.service.component.annotations.Reference;
 @Component(service = WidgetRenderer.class)
 public class MapviewRenderer extends AbstractWidgetRenderer {
 
+    private static final String MAP_URL = "//www.openstreetmap.org/export/embed.html?bbox=%lonminus%,%latminus%,%lonplus%,%latplus%&marker=%lat%,%lon%";
+    private static final double MAP_ZOOM = 0.01;
+
     @Override
     @Activate
     protected void activate(BundleContext bundleContext) {
@@ -67,14 +70,20 @@ public class MapviewRenderer extends AbstractWidgetRenderer {
             PointType pointState = (PointType) state;
             double latitude = pointState.getLatitude().doubleValue();
             double longitude = pointState.getLongitude().doubleValue();
+            snippet = StringUtils.replace(snippet, "%url%", MAP_URL);
             snippet = StringUtils.replace(snippet, "%lat%", Double.toString(latitude));
             snippet = StringUtils.replace(snippet, "%lon%", Double.toString(longitude));
-            snippet = StringUtils.replace(snippet, "%lonminus%", Double.toString(longitude - 0.01));
+            snippet = StringUtils.replace(snippet, "%lonminus%", Double.toString(longitude - MAP_ZOOM));
-            snippet = StringUtils.replace(snippet, "%lonplus%", Double.toString(longitude + 0.01));
+            snippet = StringUtils.replace(snippet, "%lonplus%", Double.toString(longitude + MAP_ZOOM));
-            snippet = StringUtils.replace(snippet, "%latminus%", Double.toString(latitude - 0.01));
+            snippet = StringUtils.replace(snippet, "%latminus%", Double.toString(latitude - MAP_ZOOM));
-            snippet = StringUtils.replace(snippet, "%latplus%", Double.toString(latitude + 0.01));
+            snippet = StringUtils.replace(snippet, "%latplus%", Double.toString(latitude + MAP_ZOOM));
+        } else {
+            snippet = StringUtils.replace(snippet, "%url%", "images/map-marker-off.png");
         }
 
+        snippet = StringUtils.replace(snippet, "%map_url%", MAP_URL);
+        snippet = StringUtils.replace(snippet, "%map_zoom%", Double.toString(MAP_ZOOM));
+
         int height = mapview.getHeight();
         if (height == 0) {
             height = 4; // set default height to something viewable

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

@@ -11,7 +11,9 @@
 		class="mdl-form__control mdl-form__webview"
 		data-control-type="mapview"
 		data-widget-id="%widget_id%"
+		data-map-url="%map_url%"
+		data-map-zoom="%map_zoom%"
 	>
-		<iframe src="//www.openstreetmap.org/export/embed.html?bbox=%lonminus%,%latminus%,%lonplus%,%latplus%&marker=%lat%,%lon%" height="%height%"></iframe>
+		<iframe src="%url%"></iframe>
 	</div>
 </div>

bundles/org.openhab.ui.basic/web-src/smarthome.js

@@ -539,6 +539,56 @@
 		}
 	}
 
+	/* class ControlMap */
+	function ControlMap(parentNode) {
+		Control.call(this, parentNode);
+
+		var
+			_t = this,
+			urlMarkerOffIcon = "images/map-marker-off.png",
+			urlNoneIcon = "images/none.png";
+
+		_t.iframe = parentNode.querySelector("iframe");
+		_t.url = parentNode.getAttribute("data-map-url");
+		_t.zoom = parseFloat(parentNode.getAttribute("data-map-zoom"));
+
+		_t.setValuePrivate = function(value, itemState, visible) {
+			var
+				mapUrl = urlMarkerOffIcon,
+				splittedState,
+				lat,
+				lon,
+				val;
+
+			if (!visible) {
+				mapUrl = urlNoneIcon;
+			} else if (itemState !== "UNDEF") {
+				splittedState = itemState.split(",");
+				lat = parseFloat(splittedState[0]);
+				lon = parseFloat(splittedState[1]);
+				mapUrl = _t.url.replace("%lat%", lat.toString());
+				mapUrl = mapUrl.replace("%lon%", lon.toString());
+				val = lon - _t.zoom;
+				mapUrl = mapUrl.replace("%lonminus%", val.toString());
+				val = lon + _t.zoom;
+				mapUrl = mapUrl.replace("%lonplus%", val.toString());
+				val = lat - _t.zoom;
+				mapUrl = mapUrl.replace("%latminus%", val.toString());
+				val = lat + _t.zoom;
+				mapUrl = mapUrl.replace("%latplus%", val.toString());
+			}
+			_t.iframe.setAttribute("src", mapUrl);
+		};
+
+		_t.destroy = function() {
+			var
+				mapParent = _t.iframe.parentNode;
+
+			_t.iframe.setAttribute("src", urlNoneIcon);
+			mapParent.removeChild(_t.iframe);
+		};
+	}
+
 	/* class ControlText extends Control */
 	function ControlText(parentNode) {
 		Control.call(this, parentNode);
@@ -1792,9 +1842,11 @@
 				case "colorpicker":
 					appendControl(new ControlColorpicker(e));
 					break;
+				case "mapview":
+					appendControl(new ControlMap(e));
+					break;
 				case "video":
 				case "webview":
-				case "mapview":
 					appendControl(new Control(e));
 					break;
 				default: