[BasicUI] Add a new header line for image, chart and video elements.

Header line for video element contains icon and label. Header line for image element contains icon, label and a button to switch between no upscale and upscale of the image. Header line for chart element contains icon, label and 4 buttons: - one button to show or hide the legend - one button to change the time range - one button to switch between no upscale and upscale of the chart - one button to refresh the chart Fix handling of iconcolor and labelcolor parameters for mapview and webview elements. For image, chart, video, mapview and webview elements, if the label is emppty, the header line is hidden. For chart and image elements, there is now no upscale applied by default (tablet/phone devices) but a button allows upscaling. Closes openhab#1939 Fixes openhab#1367 Also related to openhab#1930 Signed-off-by: Laurent Garnier <[email protected]>
lolodomo · Aug 8, 2023 · 7a53d62 · 7a53d62
1 parent edc124e
commit 7a53d62
Show file tree

Hide file tree

Showing 13 changed files with 375 additions and 27 deletions.
diff --git a/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java b/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java
@@ -15,10 +15,12 @@
 import java.net.URLEncoder;
 import java.nio.charset.StandardCharsets;
 import java.util.Date;
+import java.util.List;
 
 import org.eclipse.emf.common.util.ECollections;
 import org.eclipse.emf.common.util.EList;
 import org.eclipse.jdt.annotation.NonNullByDefault;
+import org.eclipse.jdt.annotation.Nullable;
 import org.openhab.core.i18n.LocaleProvider;
 import org.openhab.core.i18n.TranslationProvider;
 import org.openhab.core.items.GroupItem;
@@ -91,7 +93,9 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
             }
 
             // if legend parameter is given, add corresponding GET parameter
+            boolean legend = item instanceof GroupItem && !forceAsItem;
             if (chart.getLegend() != null) {
+                legend = chart.getLegend();
                 if (chart.getLegend()) {
                     chartUrl += "&legend=true";
                 } else {
@@ -123,8 +127,17 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
             }
 
             String snippet = getSnippet("chart");
+
+            boolean showHeaderRow = !getLabel(w).isEmpty();
+            snippet = snippet.replace("%header_visibility_class%",
+                    showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
+            snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());
+
             snippet = preprocessSnippet(snippet, w);
 
+            // Process the color tags
+            snippet = processColor(w, snippet);
+
             if (chart.getRefresh() > 0) {
                 snippet = snippet.replace("%update_interval%", Integer.toString(chart.getRefresh()));
             } else {
@@ -136,11 +149,43 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
             snippet = snippet.replace("%valid_url%", "true");
             snippet = snippet.replace("%ignore_refresh%", ignoreRefresh ? "true" : "false");
             snippet = snippet.replace("%url%", url);
+            snippet = snippet.replace("%legend%", Boolean.valueOf(legend).toString());
+
+            List<List<String>> periods = List.of(List.of("Last hour", "h"), List.of("Last 4 hours", "4h"),
+                    List.of("Last 8 hours", "8h"), List.of("Last 12 hours", "12h"), List.of("Last day", "D"),
+                    List.of("Last 2 days", "2D"), List.of("Last 3 days", "3D"), List.of("Last week", "W"),
+                    List.of("Last 2 weeks", "2W"), List.of("Last month", "M"), List.of("Last 2 months", "2M"),
+                    List.of("Last 4 months", "4M"), List.of("Last year", "Y"));
+            StringBuilder rowSB = new StringBuilder();
+            for (List<String> period : periods) {
+                buildRow(chart, period.get(0), period.get(1), chart.getPeriod(), rowSB);
+            }
+            snippet = snippet.replace("%period_rows%", rowSB.toString());
 
             sb.append(snippet);
         } catch (ItemNotFoundException e) {
             logger.warn("Chart cannot be rendered as item '{}' does not exist.", chart.getItem());
         }
         return ECollections.emptyEList();
     }
+
+    private void buildRow(Chart w, @Nullable String lab, String cmd, String current, StringBuilder rowSB)
+            throws RenderException {
+        String rowSnippet = getSnippet("selection_row");
+
+        String command = cmd;
+        String label = lab == null ? cmd : lab;
+
+        rowSnippet = rowSnippet.replace("%item%", w.getItem() != null ? w.getItem() : "");
+        rowSnippet = rowSnippet.replace("%cmd%", escapeHtml(command));
+        rowSnippet = rowSnippet.replace("%label%", escapeHtml(label));
+
+        if (command.equals(current)) {
+            rowSnippet = rowSnippet.replace("%checked%", "checked=\"true\"");
+        } else {
+            rowSnippet = rowSnippet.replace("%checked%", "");
+        }
+
+        rowSB.append(rowSnippet);
+    }
 }
diff --git a/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ImageRenderer.java b/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ImageRenderer.java
@@ -69,8 +69,17 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
 
         String widgetId = itemUIRegistry.getWidgetId(w);
         snippet = snippet.replace("%id%", widgetId);
+
+        boolean showHeaderRow = !getLabel(w).isEmpty();
+        snippet = snippet.replace("%header_visibility_class%",
+                showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
+        snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());
+
         snippet = preprocessSnippet(snippet, w);
 
+        // Process the color tags
+        snippet = processColor(w, snippet);
+
         boolean validUrl = isValidURL(image.getUrl());
         String proxiedUrl = "../proxy?sitemap=" + sitemap + "&amp;widgetId=" + widgetId;
         State state = itemUIRegistry.getState(w);

diff --git a/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/MapviewRenderer.java b/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/MapviewRenderer.java
@@ -57,7 +57,14 @@ public boolean canRender(Widget w) {
     public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) throws RenderException {
         Mapview mapview = (Mapview) w;
         String snippet = getSnippet("mapview");
+
+        boolean showHeaderRow = !getLabel(w).isEmpty();
+        snippet = snippet.replace("%header_visibility_class%",
+                showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
+        snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());
+
         snippet = preprocessSnippet(snippet, mapview, true);
+
         // Process the color tags
         snippet = processColor(w, snippet);
 

diff --git a/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/VideoRenderer.java b/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/VideoRenderer.java
@@ -66,8 +66,17 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
                 && videoWidget.getEncoding().toLowerCase().contains("mjpeg")) ? "image" : "video";
 
         snippet = getSnippet(snippetName);
+
+        boolean showHeaderRow = !getLabel(w).isEmpty();
+        snippet = snippet.replace("%header_visibility_class%",
+                showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
+        snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());
+
         snippet = preprocessSnippet(snippet, w);
 
+        // Process the color tags
+        snippet = processColor(w, snippet);
+
         State state = itemUIRegistry.getState(w);
         String url;
         if ("image".equals(snippetName)) {

diff --git a/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/WebviewRenderer.java b/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/WebviewRenderer.java
@@ -52,7 +52,14 @@ public boolean canRender(Widget w) {
     public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) throws RenderException {
         Webview webview = (Webview) w;
         String snippet = getSnippet("webview");
+
+        boolean showHeaderRow = !getLabel(w).isEmpty();
+        snippet = snippet.replace("%header_visibility_class%",
+                showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
+        snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());
+
         snippet = preprocessSnippet(snippet, webview, true);
+
         // Process the color tags
         snippet = processColor(w, snippet);
 

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/chart.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/chart.html
@@ -1,3 +1,36 @@
+<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
+	<span %iconstyle% class="mdl-form__icon">
+		%icon_snippet%
+	</span>
+	<span %labelstyle% class="mdl-form__label">
+		%label%
+	</span>
+	<div class="mdl-form__header">
+		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect chart-legend-button">
+			<!-- legend_toggle -->
+			<!-- <i class="material-icons">&#xF11B;</i> -->
+			Legend
+		</button>
+		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect chart-period-button">
+			<!-- more_time -->
+			<!-- <i class="material-icons">&#xEA5D;</i> -->
+			Time
+		</button>
+		<script type="text/html" class="mdl-form__header-rows">
+			<div class="mdl-radio__group">
+				%period_rows%
+			</div>
+		</script>
+		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect image-upscale-button">
+			<!-- fullscreen -->
+			<i class="material-icons">&#xE5D0;</i>
+		</button>
+		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect chart-refresh-button">
+			<!-- refresh -->
+			<i class="material-icons">&#xE5D5;</i>
+		</button>
+	</div>
+</div>
 <div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%">
 	<div
 		class="mdl-form__control mdl-form__image"
@@ -7,6 +40,8 @@
 		data-proxied-url="%proxied_url%"
 		data-valid-url="%valid_url%"
 		data-ignore-refresh="%ignore_refresh%"
+		data-header-row="%header_row%"
+		data-legend="%legend%"
 	>
 		<img src="%url%" />
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/image.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/image.html
@@ -1,3 +1,17 @@
+<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
+	<span %iconstyle% class="mdl-form__icon">
+		%icon_snippet%
+	</span>
+	<span %labelstyle% class="mdl-form__label">
+		%label%
+	</span>
+	<div class="mdl-form__header">
+		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect image-upscale-button">
+			<!-- fullscreen -->
+			<i class="material-icons">&#xE5D0;</i>
+		</button>
+	</div>
+</div>
 <div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%">
 	<div
 		class="mdl-form__control mdl-form__image"
@@ -8,6 +22,7 @@
 		data-proxied-url="%proxied_url%"
 		data-valid-url="%valid_url%"
 		data-ignore-refresh="%ignore_refresh%"
+		data-header-row="%header_row%"
 	>
 		<img src="%url%" />
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html
@@ -1,10 +1,10 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
-    <span %iconstyle% class="mdl-form__icon">
-        %icon_snippet%
-    </span>
-    <span %labelstyle% class="mdl-form__label">
-        %label%
-    </span>
+<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
+	<span %iconstyle% class="mdl-form__icon">
+		%icon_snippet%
+	</span>
+	<span %labelstyle% class="mdl-form__label">
+		%label%
+	</span>
 </div>
 <div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%">
 	<div
@@ -13,6 +13,7 @@
 		data-widget-id="%widget_id%"
 		data-map-url="%map_url%"
 		data-map-zoom="%map_zoom%"
+		data-header-row="%header_row%"
 	>
 		<iframe src="%url%" height="%height%"></iframe>
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/video.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/video.html
@@ -1,8 +1,17 @@
+<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
+	<span %iconstyle% class="mdl-form__icon">
+		%icon_snippet%
+	</span>
+	<span %labelstyle% class="mdl-form__label">
+		%label%
+	</span>
+</div>
 <div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%">
 	<div
 		class="mdl-form__control mdl-form__video"
 		data-control-type="video"
 		data-widget-id="%widget_id%"
+		data-header-row="%header_row%"
 	>
 	   <video autoplay controls src="%url%" %media_type%></video>
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html
@@ -1,16 +1,17 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
-    <span %iconstyle% class="mdl-form__icon">
-        %icon_snippet%
-    </span>
-    <span %labelstyle% class="mdl-form__label">
-        %label%
-    </span>
+<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
+	<span %iconstyle% class="mdl-form__icon">
+		%icon_snippet%
+	</span>
+	<span %labelstyle% class="mdl-form__label">
+		%label%
+	</span>
 </div>
 <div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%">
 	<div
 		class="mdl-form__control mdl-form__webview"
 		data-control-type="webview"
 		data-widget-id="%widget_id%"
+		data-header-row="%header_row%"
 	>
 		<iframe src="%url%" height="%height%"></iframe>
 	</div>

diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss
@@ -67,6 +67,9 @@
 		@include align-items-2011(center);
 		white-space: nowrap;
 		height: $form-row-desktop-height;
+		html.ui-layout-condensed & {
+			height: $form-row-desktop-height-condensed;
+		}
 		box-sizing: content-box;
 		padding: 4px 0;
 		margin: 0 $mdl-grid-spacing;
@@ -76,7 +79,7 @@
 			padding: 4px $mdl-grid-spacing;
 			margin: 0;
 			html.ui-layout-condensed & {
-				height: $form-row-desktop-height-condensed;
+				height: $form-row-mobile-height-condensed;
 			}
 		}
 		@media screen and (min-width: $layout-tablet-size-threshold) {
@@ -95,12 +98,19 @@
 				height: auto;
 			}
 		}
+		&--header {
+			border-bottom: none;
+			padding-bottom: 0;
+			padding-left: 48px;
+			padding-right: 48px;
+			@media screen and (max-width: $layout-tablet-size-threshold) {
+				padding-left: $mdl-grid-spacing + 16px;
+				padding-right: $mdl-grid-spacing + 16px;
+			}
+		}
 		&--hidden {
 			display: none;
 		}
-		html.ui-layout-condensed & {
-			height: $form-row-desktop-height-condensed;
-		}
 	}
 	&__image {
 		&.mdl-form__control {
@@ -111,11 +121,7 @@
 				max-width: 100%;
 			}
 		}
-		@media screen and (max-width: $layout-tablet-size-threshold) {
-			&.mdl-form__control {
-				padding-left: 0;
-				padding-right: 0;
-			}
+		&-upscale {
 			width: 100%;
 			img {
 				height: auto;
@@ -250,6 +256,26 @@
 			padding-top: 6px;
 		}
 	}
+	&__header {
+		padding-left: 8px;
+		padding-right: $form-row-desktop-padding;
+		@media screen and (max-width: $layout-tablet-size-threshold) {
+			padding-right: $form-row-mobile-padding;
+		}
+		.mdl-button {
+			box-shadow: none;
+			-webkit-box-shadow: none;
+			min-width: 0;
+			padding-top: 6px;
+		}
+		.chart-legend-button,
+		.chart-period-button {
+			padding-top: 1px;
+		}
+		&-rows {
+			display: none;
+		}
+	}
 	&__group {
 		padding-top: 4px;
 	}

diff --git a/bundles/org.openhab.ui.basic/web-src/_theming.scss b/bundles/org.openhab.ui.basic/web-src/_theming.scss
@@ -84,6 +84,10 @@ body {
 	color: var(--container-text-color, #616161) !important;
 }
 
+.mdl-form__row--header {
+	border-bottom: none;
+}
+
 .mdl-switch .mdl-switch__track {
 	background: rgba(0,0,0,.26);
 	background: var(--switch-off-track-bg, rgba(0,0,0,.26));