From 31795e0fdcaa6842fe653280f89537e82bb286b7 Mon Sep 17 00:00:00 2001 From: Laurent Garnier Date: Wed, 3 Jan 2024 19:18:11 +0100 Subject: [PATCH] [BasicUI] Move some app settings to per-device (browser) settings Fix #1832 A new page is available to show and update all per-device settings. This page is accessible through the sitemap list page or the home page of any sitemap. Basic UI theme now matches the dark mode of Main UI. It can be updated either in Main UI or in the new page of Baisc UI. Web Audio can also be enabled either in Main UI or Basic UI. Signed-off-by: Laurent Garnier --- bundles/org.openhab.ui.basic/.gitignore | 1 + bundles/org.openhab.ui.basic/gulpfile.js | 2 +- .../ui/basic/internal/WebAppConfig.java | 61 ---- .../render/AbstractWidgetRenderer.java | 17 +- .../internal/render/ButtongridRenderer.java | 21 +- .../basic/internal/render/ChartRenderer.java | 29 +- .../basic/internal/render/PageRenderer.java | 71 ++++- .../basic/internal/render/SwitchRenderer.java | 21 +- .../basic/internal/servlet/WebAppServlet.java | 14 + .../main/resources/OH-INF/config/config.xml | 46 --- .../resources/OH-INF/i18n/basic.properties | 2 +- .../src/main/resources/snippets/button.html | 6 +- .../src/main/resources/snippets/main.html | 9 +- .../main/resources/snippets/main_static.html | 13 +- .../resources/snippets/setting_buttons.html | 16 ++ .../resources/snippets/setting_switch.html | 19 ++ .../org.openhab.ui.basic/web-src/_layout.scss | 31 +++ .../web-src/_theming.scss | 40 +-- .../org.openhab.ui.basic/web-src/settings.js | 262 ++++++++++++++++++ .../org.openhab.ui.basic/web-src/smarthome.js | 132 ++++++++- 20 files changed, 576 insertions(+), 237 deletions(-) create mode 100644 bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_buttons.html create mode 100644 bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_switch.html create mode 100644 bundles/org.openhab.ui.basic/web-src/settings.js diff --git a/bundles/org.openhab.ui.basic/.gitignore b/bundles/org.openhab.ui.basic/.gitignore index 4a1ea5b512..9b882f0409 100644 --- a/bundles/org.openhab.ui.basic/.gitignore +++ b/bundles/org.openhab.ui.basic/.gitignore @@ -3,4 +3,5 @@ node npm_cache src/main/resources/web/smarthome.css src/main/resources/web/smarthome.js +src/main/resources/web/settings.js src/main/resources/web/fonts/* diff --git a/bundles/org.openhab.ui.basic/gulpfile.js b/bundles/org.openhab.ui.basic/gulpfile.js index 74ff17ea1c..01da2fcba2 100644 --- a/bundles/org.openhab.ui.basic/gulpfile.js +++ b/bundles/org.openhab.ui.basic/gulpfile.js @@ -9,7 +9,7 @@ var sources = { - js: "web-src/smarthome.js", + js: [ "web-src/smarthome.js", "web-src/settings.js" ], sass: "web-src/smarthome.scss" }; diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java index 93d3fcad9e..adec320085 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java @@ -13,10 +13,8 @@ package org.openhab.ui.basic.internal; import java.util.ArrayList; -import java.util.HashMap; import java.util.List; import java.util.Map; -import java.util.Map.Entry; import org.eclipse.jdt.annotation.NonNullByDefault; @@ -31,65 +29,25 @@ public class WebAppConfig { private static final String DEFAULT_SITEMAP = "default"; - public static final String THEME_NAME_BRIGHT = "bright"; - public static final String THEME_NAME_DARK = "dark"; - public static final String THEME_NAME_SYSTEM = "system"; - private static final String DEFAULT_THEME = THEME_NAME_BRIGHT; - - private static final String DEFAULT_ICONS = "true"; private static final String DEFAULT_ICONIFY = "false"; private static final String DEFAULT_INLINE_SVG = "false"; - private static final String DEFAULT_WEB_AUDIO = "false"; private static final String DEFAULT_CONFIG_NB_COLUMNS = "3-2"; private static final int DEFAULT_NB_COLUMNS_DESKTOP = 3; private static final int DEFAULT_NB_COLUMNS_TABLET = 2; private String defaultSitemap = DEFAULT_SITEMAP; - private String theme = DEFAULT_THEME; private int nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP; private int nbColsTablet = DEFAULT_NB_COLUMNS_TABLET; - private boolean icons = Boolean.parseBoolean(DEFAULT_ICONS); private boolean iconify = Boolean.parseBoolean(DEFAULT_ICONIFY); private boolean inlineSvg = Boolean.parseBoolean(DEFAULT_INLINE_SVG); - private boolean webAudio = Boolean.parseBoolean(DEFAULT_WEB_AUDIO); private List cssClassList = new ArrayList<>(); - private static final Map CSS_CLASSES; - private static final Map CSS_DEFAULT_VALUES; - - private static final String CONFIG_ENABLE_ICONS = "enableIcons"; - private static final String CONFIG_CONDENSED_LAYOUT = "condensedLayout"; private static final String CONFIG_NB_COLUMNS = "nbColumns"; - private static final String CONFIG_CAPITALIZE = "capitalizeValues"; - - static { - CSS_CLASSES = new HashMap<>(); - CSS_CLASSES.put(CONFIG_ENABLE_ICONS, "ui-icons-enabled"); - CSS_CLASSES.put(CONFIG_CONDENSED_LAYOUT, "ui-layout-condensed"); - CSS_CLASSES.put(CONFIG_CAPITALIZE, "ui-capitalize-values"); - - CSS_DEFAULT_VALUES = new HashMap<>(); - CSS_DEFAULT_VALUES.put(CONFIG_ENABLE_ICONS, true); - CSS_DEFAULT_VALUES.put(CONFIG_CONDENSED_LAYOUT, false); - CSS_DEFAULT_VALUES.put(CONFIG_CAPITALIZE, false); - } private void applyCssClasses(Map configProps) { cssClassList.clear(); - - for (Entry entry : CSS_CLASSES.entrySet()) { - String key = entry.getKey(); - Boolean value = CSS_DEFAULT_VALUES.get(key); - Object configValue = configProps.get(key); - if (configValue != null) { - value = "true".equalsIgnoreCase(configValue.toString()); - } - if (value != null && value) { - cssClassList.add(entry.getValue()); - } - } if (nbColsDesktop == 3) { cssClassList.add("ui-large-window"); } @@ -97,11 +55,6 @@ private void applyCssClasses(Map configProps) { public void applyConfig(Map configProps) { defaultSitemap = (String) configProps.getOrDefault("defaultSitemap", DEFAULT_SITEMAP); - theme = (String) configProps.getOrDefault("theme", DEFAULT_THEME); - // "default" was previously valid. For backward compatibility, accept it but convert it to DEFAULT_THEME - if ("default".equals(theme)) { - theme = DEFAULT_THEME; - } String nbColumns = (String) configProps.getOrDefault(CONFIG_NB_COLUMNS, DEFAULT_CONFIG_NB_COLUMNS); if (nbColumns.length() == 3) { try { @@ -118,10 +71,8 @@ public void applyConfig(Map configProps) { nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP; nbColsTablet = DEFAULT_NB_COLUMNS_TABLET; } - icons = "true".equalsIgnoreCase((String) configProps.getOrDefault(CONFIG_ENABLE_ICONS, DEFAULT_ICONS)); iconify = "true".equalsIgnoreCase((String) configProps.getOrDefault("enableIconify", DEFAULT_ICONIFY)); inlineSvg = "true".equalsIgnoreCase((String) configProps.getOrDefault("inlineSvg", DEFAULT_INLINE_SVG)); - webAudio = "true".equalsIgnoreCase((String) configProps.getOrDefault("webAudio", DEFAULT_WEB_AUDIO)); applyCssClasses(configProps); } @@ -130,10 +81,6 @@ public String getDefaultSitemap() { return defaultSitemap; } - public String getTheme() { - return theme; - } - public String getCssClassList() { String result = " "; for (String item : cssClassList) { @@ -150,10 +97,6 @@ public int getNbColsTablet() { return nbColsTablet; } - public boolean isIconsEnabled() { - return icons; - } - public boolean isIconifyEnabled() { return iconify; } @@ -161,8 +104,4 @@ public boolean isIconifyEnabled() { public boolean isInlineSvgEnabled() { return inlineSvg; } - - public boolean isWebAudio() { - return webAudio; - } } 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 54cd782e0c..3b18150133 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 @@ -393,18 +393,6 @@ protected String processColor(Widget w, String originalSnippet) { if (color != null) { style = "style=\"color:" + color + "\""; - } else { - switch (config.getTheme()) { - case WebAppConfig.THEME_NAME_BRIGHT: - style = "style=\"color-scheme: light\""; - break; - case WebAppConfig.THEME_NAME_DARK: - style = "style=\"color-scheme: dark\""; - break; - default: - break; - } - } snippet = snippet.replace("%iconstyle%", style); @@ -452,6 +440,11 @@ public void setConfig(WebAppConfig config) { this.config = config; } + protected String localizeText(String key, String defaultValue) { + String val = localizeText(key); + return val != null ? val : defaultValue; + } + protected @Nullable String localizeText(String key) { String result = ""; if (I18nUtil.isConstant(key)) { diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ButtongridRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ButtongridRenderer.java index efab75856a..c94327dc6b 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ButtongridRenderer.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ButtongridRenderer.java @@ -25,7 +25,6 @@ import org.openhab.core.model.sitemap.sitemap.Buttongrid; import org.openhab.core.model.sitemap.sitemap.Widget; import org.openhab.core.ui.items.ItemUIRegistry; -import org.openhab.ui.basic.internal.WebAppConfig; import org.openhab.ui.basic.render.RenderException; import org.openhab.ui.basic.render.WidgetRenderer; import org.osgi.framework.BundleContext; @@ -191,26 +190,16 @@ private String buildButton(String item, @Nullable String lab, String cmd, @Nulla button = button.replace("%item%", item); button = button.replace("%cmd%", escapeHtml(command)); String buttonClass = "buttongrid-button"; - String style = ""; - if (icon == null || !config.isIconsEnabled()) { - button = button.replace("%label%", escapeHtml(label)); + + button = button.replace("%label%", escapeHtml(label)); + if (icon == null) { + button = button.replace("%textclass%", ""); button = button.replace("%icon_snippet%", ""); } else { - button = button.replace("%label%", ""); + button = button.replace("%textclass%", "mdl-button-icon-text"); button = preprocessIcon(button, icon, true); buttonClass += " mdl-button-icon"; - switch (config.getTheme()) { - case WebAppConfig.THEME_NAME_BRIGHT: - style = "style=\"color-scheme: light\""; - break; - case WebAppConfig.THEME_NAME_DARK: - style = "style=\"color-scheme: dark\""; - break; - default: - break; - } } - button = button.replace("%buttonstyle%", style); button = button.replace("%class%", buttonClass); return button; diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java index 5b58674f71..d8173320cc 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java @@ -14,7 +14,6 @@ import java.net.URLEncoder; import java.nio.charset.StandardCharsets; -import java.util.Date; import java.util.List; import org.eclipse.emf.common.util.ECollections; @@ -29,7 +28,6 @@ import org.openhab.core.model.sitemap.sitemap.Chart; import org.openhab.core.model.sitemap.sitemap.Widget; import org.openhab.core.ui.items.ItemUIRegistry; -import org.openhab.ui.basic.internal.WebAppConfig; import org.openhab.ui.basic.render.RenderException; import org.openhab.ui.basic.render.WidgetRenderer; import org.osgi.framework.BundleContext; @@ -102,29 +100,6 @@ public EList renderWidget(Widget w, StringBuilder sb, String sitemap) th chartUrl += "&legend=false"; } } - // add theme GET parameter - String chartTheme = null; - switch (config.getTheme()) { - case WebAppConfig.THEME_NAME_BRIGHT: - chartTheme = "bright"; - break; - case WebAppConfig.THEME_NAME_DARK: - chartTheme = "dark"; - break; - } - if (chartTheme != null) { - chartUrl += "&theme=" + chartTheme; - } - String url; - boolean ignoreRefresh; - if (!itemUIRegistry.getVisiblity(w)) { - url = URL_NONE_ICON; - ignoreRefresh = true; - } else { - // add timestamp to circumvent browser cache - url = chartUrl + "&t=" + (new Date()).getTime(); - ignoreRefresh = false; - } String snippet = getSnippet("chart"); @@ -147,8 +122,8 @@ public EList renderWidget(Widget w, StringBuilder sb, String sitemap) th snippet = snippet.replace("%id%", itemUIRegistry.getWidgetId(w)); snippet = snippet.replace("%proxied_url%", chartUrl); snippet = snippet.replace("%valid_url%", "true"); - snippet = snippet.replace("%ignore_refresh%", ignoreRefresh ? "true" : "false"); - snippet = snippet.replace("%url%", url); + snippet = snippet.replace("%ignore_refresh%", itemUIRegistry.getVisiblity(w) ? "false" : "true"); + snippet = snippet.replace("%url%", URL_NONE_ICON); snippet = snippet.replace("%legend%", Boolean.valueOf(legend).toString()); List> periods = List.of(List.of("Last hour", "h"), List.of("Last 2 hours", "2h"), diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java index 19d85da26c..7bb46bb6b5 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java @@ -100,7 +100,6 @@ public StringBuilder processPage(String id, String sitemap, String label, EList< snippet = snippet.replaceAll("%main.long-polling-mode-msg%", longPollingModeMsg); } snippet = snippet.replaceAll("%id%", id); - snippet = snippet.replace("%config.web-audio%", Boolean.toString(config.isWebAudio())); // if the label contains a value span, we remove this span as // the title of a page/layer cannot deal with this @@ -117,7 +116,6 @@ public StringBuilder processPage(String id, String sitemap, String label, EList< snippet = snippet.replace("%htmlclass%", config.getCssClassList()); snippet = snippet.replace("%icon_type%", ICON_TYPE); snippet = snippet.replace("%inline%", config.isInlineSvgEnabled() ? "true" : "false"); - snippet = snippet.replace("%theme%", config.getTheme()); snippet = snippet.replace("%sitemapquery%", String.format("?sitemap=%s", sitemap)); snippet = snippet.replace("%primarycolor%", PRIMARY_COLOR); snippet = snippet.replace("%secondarycolor%", SECONDARY_COLOR); @@ -231,7 +229,6 @@ public CharSequence renderSitemapList(Set sitemapProviders) thr } } - String pageSnippet = getSnippet("main_static"); String listSnippet = getSnippet("sitemaps_list"); String sitemapSnippet = getSnippet("sitemaps_list_item"); @@ -284,12 +281,70 @@ public CharSequence renderSitemapList(Set sitemapProviders) thr listSnippet = listSnippet.replace("%items%", sb.toString()); - pageSnippet = pageSnippet.replace("%title%", "BasicUI"); - pageSnippet = pageSnippet.replace("%htmlclass%", config.getCssClassList() + " page-welcome-sitemaps"); - pageSnippet = pageSnippet.replace("%theme%", config.getTheme()); - pageSnippet = pageSnippet.replace("%content%", listSnippet); + return getSnippet("main_static") // + .replace("%title%", "Basic UI") // + .replace("%htmlclass%", "page-welcome-sitemaps") // + .replace("%show_settings%", "false") // + .replace("%content%", listSnippet); + } + + public CharSequence renderSettings() throws RenderException { + StringBuilder sb = new StringBuilder(); + + StringBuilder buttons = new StringBuilder(); + buildButton(localizeText("@text/ui.config.basic.theme.option.auto", "Auto"), "", buttons); + buildButton(localizeText("@text/ui.config.basic.theme.option.bright", "Bright"), "light", buttons); + buildButton(localizeText("@text/ui.config.basic.theme.option.dark", "Dark"), "dark", buttons); + + String description = localizeText("@text/ui.config.basic.theme.description"); + sb.append(getSnippet("setting_buttons") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.theme.label", "Theme"))) + .replace("%description%", description != null ? escapeHtml(description) : "") + .replace("%key%", "openhab.ui:theme.dark").replace("%default%", "") + .replace("%buttons%", buttons.toString())); + + renderSwitchSetting(localizeText("@text/ui.config.basic.enableIcons.label", "Enable Icons"), + localizeText("@text/ui.config.basic.enableIcons.description"), "enableIcons", + "openhab.ui.basic:enableIcons", "enabled", "disabled", true, sb); + // renderSwitchSetting(localizeText("@text/ui.config.basic.enableIconify.label", "Enable Iconify Icons"), + // localizeText("@text/ui.config.basic.enableIconify.description"), "enableIconify", + // "openhab.ui.basic:enableIconify", "enabled", "disabled", false, sb); + renderSwitchSetting(localizeText("@text/ui.config.basic.condensedLayout.label", "Condensed Layout"), + localizeText("@text/ui.config.basic.condensedLayout.description"), "condensedLayout", + "openhab.ui.basic:condensedLayout", "enabled", "disabled", false, sb); + renderSwitchSetting(localizeText("@text/ui.config.basic.capitalizeValues.label", "Capitalize Values"), + localizeText("@text/ui.config.basic.capitalizeValues.description"), "capitalizeValues", + "openhab.ui.basic:capitalizeValues", "enabled", "disabled", false, sb); + renderSwitchSetting(localizeText("@text/ui.config.basic.webAudio.label", "Web Audio"), + localizeText("@text/ui.config.basic.webAudio.description"), "webAudio", "openhab.ui:webaudio.enable", + "enabled", "", false, sb); + + return getSnippet("main_static") // + .replace("%title%", "Basic UI Settings") // + .replace("%htmlclass%", "") // + .replace("%show_settings%", "true") // + .replace("%content%", sb.toString()); + } + + private void buildButton(String label, String cmd, StringBuilder buttons) throws RenderException { + buttons.append(getSnippet("button") // + .replace("%cmd%", escapeHtml(cmd)) // + .replace("%label%", escapeHtml(label)) // + .replace("%textclass%", "") // + .replace("%icon_snippet%", "") // + .replace("%class%", "")); + } - return pageSnippet; + private void renderSwitchSetting(String label, @Nullable String description, String setting, String key, + String valueOn, String valueOff, boolean defaultValue, StringBuilder builder) throws RenderException { + builder.append(getSnippet("setting_switch") // + .replace("%label%", escapeHtml(label)) // + .replace("%description%", description != null ? escapeHtml(description) : "") // + .replace("%setting%", setting) // + .replace("%key%", key) // + .replace("%on%", valueOn) // + .replace("%off%", valueOff) // + .replace("%default%", defaultValue ? valueOn : valueOff)); } public CharSequence renderManifest(@Nullable String sitemapName) throws RenderException { diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java index 1a17c270d0..dad65e3a4b 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java @@ -34,7 +34,6 @@ import org.openhab.core.types.State; import org.openhab.core.types.util.UnitUtils; import org.openhab.core.ui.items.ItemUIRegistry; -import org.openhab.ui.basic.internal.WebAppConfig; import org.openhab.ui.basic.render.RenderException; import org.openhab.ui.basic.render.WidgetRenderer; import org.osgi.framework.BundleContext; @@ -166,29 +165,17 @@ private void buildButton(Switch w, @Nullable String lab, String cmd, @Nullable S label = label.substring(0, maxLabelSize - 1) + ELLIPSIS; } - button = button.replace("%item%", w.getItem()); button = button.replace("%cmd%", escapeHtml(command)); String buttonClass = ""; - String style = ""; - if (icon == null || !config.isIconsEnabled()) { - button = button.replace("%label%", escapeHtml(label)); + button = button.replace("%label%", escapeHtml(label)); + if (icon == null) { + button = button.replace("%textclass%", ""); button = button.replace("%icon_snippet%", ""); } else { - button = button.replace("%label%", ""); + button = button.replace("%textclass%", "mdl-button-icon-text"); button = preprocessIcon(button, icon, true); buttonClass = "mdl-button-icon"; - switch (config.getTheme()) { - case WebAppConfig.THEME_NAME_BRIGHT: - style = "style=\"color-scheme: light\""; - break; - case WebAppConfig.THEME_NAME_DARK: - style = "style=\"color-scheme: dark\""; - break; - default: - break; - } } - button = button.replace("%buttonstyle%", style); State compareMappingState = state; if (state instanceof QuantityType) { // convert the item state to the command value for proper diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/servlet/WebAppServlet.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/servlet/WebAppServlet.java index 52a76fdf57..e8afe8af37 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/servlet/WebAppServlet.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/servlet/WebAppServlet.java @@ -125,12 +125,21 @@ private void showSitemapList(ServletResponse res) throws IOException, RenderExce res.setContentType(CONTENT_TYPE); } + private void showSettings(ServletResponse res) throws IOException, RenderException { + PrintWriter resWriter; + resWriter = res.getWriter(); + resWriter.append(renderer.renderSettings()); + + res.setContentType(CONTENT_TYPE); + } + @Override protected void service(@NonNullByDefault({}) HttpServletRequest req, @NonNullByDefault({}) HttpServletResponse res) throws ServletException, IOException { logger.debug("Servlet request received!"); // read request parameters + String showSettings = req.getParameter("showSettings"); String sitemapName = req.getParameter("sitemap"); String widgetId = req.getParameter("w"); String subscriptionId = req.getParameter("subscriptionId"); @@ -151,6 +160,11 @@ protected void service(@NonNullByDefault({}) HttpServletRequest req, @NonNullByD } try { + if ("true".equals(showSettings)) { + showSettings(res); + return; + } + if (sitemap == null) { showSitemapList(res); return; diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml index 05d572d337..4c4b4bb8f2 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml +++ b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml @@ -6,25 +6,6 @@ https://openhab.org/schemas/config-description-1.0.0.xsd"> - - - Defines the UI theme. - - - - - - bright - - - - Defines whether UI renders icons for the widgets or not. - - - - - true - If enabled, any SVG icon provided by the openHAB icon server will automatically be converted to an @@ -52,15 +33,6 @@ false - - - When enabled, changes the layout so that more widgets can fit on the screen. - - - - - false - The number of columns to consider to fill the grid in large screen width (desktop) and medium screen @@ -74,24 +46,6 @@ 3-2 - - - Displays all widget states in uppercase. - - - - - false - - - - Play audio sent to the web audio sink. - - - - - false - The sitemap to show if no parameter is passed. diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties index 779e09224a..26a64d7314 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties +++ b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties @@ -31,7 +31,7 @@ ui.config.basic.theme.label = Theme ui.config.basic.theme.description = Defines the UI theme. ui.config.basic.theme.option.bright = Bright ui.config.basic.theme.option.dark = Dark -ui.config.basic.theme.option.system = Follow System +ui.config.basic.theme.option.auto = Auto ui.config.basic.webAudio.label = Web Audio ui.config.basic.webAudio.description = Play audio sent to the web audio sink. ui.config.basic.webAudio.option.true = Enable diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html index 2148173478..018f7121ce 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html @@ -1,6 +1,6 @@ - diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html index c9285bb78e..116513bd9c 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html @@ -28,7 +28,6 @@ - @@ -70,7 +69,7 @@ - +
@@ -78,9 +77,9 @@
-
- - +
+ +
%label%
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/main_static.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/main_static.html index e46c155a98..f3005ff5fa 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/main_static.html +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/main_static.html @@ -22,15 +22,20 @@ + - +
-
- - +
+ + +
+
+ +
%title%
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_buttons.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_buttons.html new file mode 100644 index 0000000000..9447558d40 --- /dev/null +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_buttons.html @@ -0,0 +1,16 @@ +
+ + %label% + +
+ %buttons% +
+
+
+ %description% +
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_switch.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_switch.html new file mode 100644 index 0000000000..1868a793bb --- /dev/null +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_switch.html @@ -0,0 +1,19 @@ +
+ + %label% + + +
+
+ %description% +
diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss index d55ee8fbe5..d798d5d85c 100644 --- a/bundles/org.openhab.ui.basic/web-src/_layout.scss +++ b/bundles/org.openhab.ui.basic/web-src/_layout.scss @@ -37,6 +37,11 @@ display: none; } } + &__button-settings { + .navigation-page & { + display: none; + } + } &__button-back { .navigation-home & { display: none; @@ -111,6 +116,10 @@ padding-right: $mdl-grid-spacing + 16px; } } + &--setting { + height: $form-row-desktop-height-condensed; + border-bottom: none; + } &--hidden { display: none; } @@ -122,6 +131,14 @@ border: none; } } + &__row-setting-descr { + margin: 0 $mdl-grid-spacing; + border-bottom: 1px solid $item-separator-color; + &:last-child { + border: none; + } + font-size: 12px; + } &__image { &.mdl-form__control { padding-left: 0; @@ -262,19 +279,33 @@ } .mdl-button-icon { min-width: 0; + &-text { + html.ui-icons-enabled & { + display: none; + } + } img { width: 24px; height: 24px; object-fit: contain; + html:not(.ui-icons-enabled) & { + display: none; + } } iconify-icon { font-size: 24px; vertical-align: middle; + html:not(.ui-icons-enabled) & { + display: none; + } } .material-icons, .f7-icons { font-size: 24px; vertical-align: middle; + html:not(.ui-icons-enabled) & { + display: none; + } } } .mdl-textfield { diff --git a/bundles/org.openhab.ui.basic/web-src/_theming.scss b/bundles/org.openhab.ui.basic/web-src/_theming.scss index d40f818626..50081c7832 100644 --- a/bundles/org.openhab.ui.basic/web-src/_theming.scss +++ b/bundles/org.openhab.ui.basic/web-src/_theming.scss @@ -1,4 +1,4 @@ -body[data-theme="bright"] { +body[data-theme="light"] { --primary-color: #3f51b5; --header-bg: var(--primary-color); --header-text-color: #fff; @@ -30,38 +30,6 @@ body[data-theme="dark"] { --button-color: #e0e0e0; } -body[data-theme="system"] { - --primary-color: #3f51b5; - --header-bg: var(--primary-color); - --header-text-color: #fff; - --body-bg: #f5f5f5; - --container-bg: #fff; - --container-text-color: #616161; - --switch-off-track-bg: rgba(0,0,0,.26); - --switch-on-track-bg: #9fa8da; - --border-color: #ccc; - --radio-unchecked-color: rgba(0,0,0,.5); - --input-undef-color: rgba(0,0,0,.26); - --input-icon-filter: invert(0%); - --button-color: #000000; - - @media (prefers-color-scheme: dark) { - --primary-color: #3f51b5; - --header-bg: #101010; - --header-text-color: #c0c0c0; - --body-bg: #181818; - --container-bg: #232323; - --container-text-color: #c0c0c0; - --switch-off-track-bg: rgba(255,255,255,.26); - --switch-on-track-bg: #9fa8da; - --border-color: #545454; - --radio-unchecked-color: rgba(255,255,255,.5); - --input-undef-color: rgba(158,158,158,.26); - --input-icon-filter: invert(100%); - --button-color: #e0e0e0; - } -} - .mdl-layout__header { background-color: #3f51b5 !important; background-color: var(--header-bg, #3f51b5) !important; @@ -83,14 +51,16 @@ body { } .mdl-form__row, -.mdl-form__row-buttongrid { +.mdl-form__row-buttongrid, +.mdl-form__row-setting-descr { border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--border-color, #ccc); color: #616161 !important; color: var(--container-text-color, #616161) !important; } -.mdl-form__row--header { +.mdl-form__row--header, +.mdl-form__row--setting { border-bottom: none; } diff --git a/bundles/org.openhab.ui.basic/web-src/settings.js b/bundles/org.openhab.ui.basic/web-src/settings.js new file mode 100644 index 0000000000..b883e0023d --- /dev/null +++ b/bundles/org.openhab.ui.basic/web-src/settings.js @@ -0,0 +1,262 @@ +/** + * openHAB BasicUI javascript + * + * @author Laurent Garnier — initial version + */ + +/*eslint-env browser */ +/*eslint no-undef:2*/ +/*eslint no-new:0 */ +/*eslint no-underscore-dangle:0*/ + +/*global componentHandler */ + +(function(o) { + "use strict"; + + var + smarthome = { + dataModel: {} + }; + + function Control(parentNode) { + var + _t = this; + + _t.parentNode = parentNode; + _t.key = _t.parentNode.getAttribute(o.storageKey); + _t.defaultValue = _t.parentNode.getAttribute(o.defaultValue); + + _t.setStorageValue = function(value) { + if (value === "") { + window.localStorage.removeItem(_t.key); + } else { + window.localStorage.setItem(_t.key, value); + } + }; + } + + function ControlSwitch(parentNode) { + Control.call(this, parentNode); + + var + _t = this; + + _t.input = _t.parentNode.querySelector("input[type=checkbox]"); + _t.valueOn = _t.parentNode.getAttribute(o.valueOn); + _t.valueOff = _t.parentNode.getAttribute(o.valueOff); + + function onChange() { + _t.setStorageValue(_t.input.checked ? _t.valueOn : _t.valueOff); + } + + _t.setValue = function() { + var + storageValue = window.localStorage.getItem(_t.key), + value = (storageValue === null) ? _t.defaultValue === _t.valueOn : storageValue === _t.valueOn; + + if (_t.input.checked !== value) { + _t.input.checked = value; + if (value) { + _t.parentNode.MaterialSwitch.on(); + } else { + _t.parentNode.MaterialSwitch.off(); + } + } + }; + + _t.input.addEventListener("change", onChange); + + _t.destroy = function() { + _t.input.removeEventListener("change", onChange); + componentHandler.downgradeElements([ _t.parentNode ]); + }; + } + + function ControlButtonsSelection(parentNode) { + Control.call(this, parentNode); + + var + _t = this; + + _t.reset = function() { + _t.buttons.forEach(function(button) { + button.classList.remove(o.buttonActiveClass); + }); + }; + + _t.onclick = function() { + /* HTMLButtonElement this */ + _t.setStorageValue(this.getAttribute("data-value") + ""); + + _t.reset(); + this.classList.add(o.buttonActiveClass); + smarthome.UI.applyTheme(); + }; + + _t.setValue = function() { + var + storageValue = window.localStorage.getItem(_t.key), + value = (storageValue === null) ? _t.defaultValue : storageValue; + + _t.buttons.forEach.call(_t.buttons, function(button) { + var + val = button.getAttribute("data-value") + ""; + + if (value === val) { + button.classList.add(o.buttonActiveClass); + } else { + button.classList.remove(o.buttonActiveClass); + } + }); + }; + + _t.buttons = [].slice.call(_t.parentNode.querySelectorAll(o.controlButton)); + + _t.buttons.forEach.call(_t.buttons, function(button) { + button.addEventListener("click", _t.onclick); + }); + + _t.destroy = function() { + _t.buttons.forEach(function(button) { + button.removeEventListener("click", _t.onclick); + }); + componentHandler.downgradeElements(_t.buttons); + }; + } + + function UI(root) { + var + _t = this; + + _t.root = root; + _t.showSettings = _t.root.body.getAttribute("data-show-settings"); + + _t.applyTheme = function() { + var + previousTheme = _t.theme; + + _t.theme = window.localStorage.getItem("openhab.ui:theme.dark"); + if (_t.theme !== "light" && _t.theme !== "dark") { + _t.theme = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light"; + } + if (previousTheme !== _t.theme) { + _t.root.body.setAttribute("data-theme", _t.theme); + } + }; + + _t.upgradeComponents = function() { + var + upgrade = componentHandler.upgradeElement; + + [].slice.call(document.querySelectorAll(o.formControls)).forEach(function(e) { + switch (e.getAttribute("data-control-type")) { + case "checkbox": + upgrade(e, "MaterialSwitch"); + break; + case "buttons": + [].slice.call(e.querySelectorAll("button")).forEach(function(button) { + upgrade(button, "MaterialButton"); + upgrade(button, "MaterialRipple"); + }); + break; + default: + break; + } + }); + }; + + _t.initControls = function() { + smarthome.dataModel = {}; + + function appendControl(control) { + smarthome.dataModel[control.key] = control; + } + + [].forEach.call(document.querySelectorAll(o.formControls), function(e) { + /*eslint no-fallthrough:0*/ + switch (e.getAttribute("data-control-type")) { + case "checkbox": + appendControl(new ControlSwitch(e)); + break; + case "buttons": + appendControl(new ControlButtonsSelection(e)); + break; + default: + break; + } + }); + + for (var key in smarthome.dataModel) { + smarthome.dataModel[key].setValue(); + } + }; + + (function() { + _t.header = document.querySelector(o.layoutHeader); + if (_t.showSettings === "true") { + _t.header.classList.remove("navigation-home"); + _t.header.classList.add("navigation-page"); + } + + document.querySelector(o.settingsButton).addEventListener("click", function() { + location.href = location.href + "?showSettings=true"; + }); + + document.querySelector(o.backButton).addEventListener("click", function() { + location.href = location.href.replace(/showSettings=true(&)?/, "").replace(/\&$/, "").replace(/\?$/, ""); + }); + })(); + } + + document.addEventListener("DOMContentLoaded", function() { + smarthome.UI = new UI(document); + smarthome.UI.upgradeComponents(); + smarthome.UI.initControls(); + smarthome.UI.applyTheme(); + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.addEventListener("change", smarthome.UI.applyTheme); + } + + function handleStorageEvent(event) { + if (event.key in smarthome.dataModel) { + smarthome.dataModel[event.key].setValue(); + } + if (event.key === "openhab.ui:theme.dark") { + smarthome.UI.applyTheme(); + } + } + + window.addEventListener("storage", handleStorageEvent); + + window.addEventListener("beforeunload", function() { + for (var key in smarthome.dataModel) { + smarthome.dataModel[key].destroy(); + } + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.removeEventListener("change", smarthome.UI.applyTheme); + } + + window.removeEventListener("storage", handleStorageEvent); + }); + }); +})({ + formControls: ".mdl-form__control", + storageKey: "data-storage-key", + valueOn: "data-value-on", + valueOff: "data-value-off", + defaultValue: "data-default-value", + controlButton: "button", + buttonActiveClass: "mdl-button--accent", + layoutHeader: ".mdl-layout__header", + settingsButton: ".navigation__button-settings", + backButton: ".navigation__button-back" +}); diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js index 26bc52877c..1602212067 100644 --- a/bundles/org.openhab.ui.basic/web-src/smarthome.js +++ b/bundles/org.openhab.ui.basic/web-src/smarthome.js @@ -627,9 +627,19 @@ _t.setIconColor = function(color) { if (_t.iconContainer !== null) { _t.iconContainer.style.color = color; + _t.iconContainer.style.colorScheme = ""; } }; + _t.setTheme = function(theme) { + if (_t.iconContainer !== null && _t.iconContainer.style.color === "") { + _t.iconContainer.style.colorScheme = theme; + } + _t.setThemePrivate(theme); + }; + + _t.setThemePrivate = function() {}; + _t.destroy = function() { if (_t.icon !== null && _t.iconSource === "oh") { _t.icon.removeEventListener("load", convertToInlineSVG); @@ -674,6 +684,7 @@ _t.setValueColor = function() {}; _t.setIconColor = function() {}; _t.suppressUpdate = function() {}; + _t.setTheme = function() {}; _t.destroy = function() {}; } @@ -944,6 +955,20 @@ } } + /* class ControlChart */ + function ControlChart(parentNode) { + ControlImage.call(this, parentNode, true); + + var + _t = this; + + _t.setThemePrivate = function(theme) { + // Add theme setting to chart URL and locad image + _t.url = _t.parentNode.getAttribute("data-proxied-url") + "&theme=" + (theme === "dark" ? "dark" : "bright"); + _t.setValuePrivate("", "", _t.visible); + }; + } + /* class ControlMap */ function ControlMap(parentNode) { Control.call(this, parentNode); @@ -1075,6 +1100,15 @@ } }; + _t.setThemePrivate = function(theme) { + var + buttons = [].slice.call(_t.parentNode.querySelectorAll(o.buttonIcon)); + + buttons.forEach(function(button) { + button.style.colorScheme = theme; + }); + }; + _t.buttons.forEach.call(_t.buttons, function(button) { var value = button.getAttribute("data-value") + ""; @@ -2314,6 +2348,46 @@ _t.layoutTitle.innerHTML = title; }; + _t.applyTheme = function() { + var + previousTheme = _t.theme; + + _t.theme = window.localStorage.getItem("openhab.ui:theme.dark"); + if (_t.theme !== "light" && _t.theme !== "dark") { + _t.theme = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light"; + } + if (previousTheme !== _t.theme) { + _t.root.body.setAttribute("data-theme", _t.theme); + + for (var id in smarthome.dataModel) { + smarthome.dataModel[id].setTheme(_t.theme); + } + } + }; + + _t.applyLocalSettings = function() { + var + icons; + + icons = window.localStorage.getItem("openhab.ui.basic:enableIcons"); + _t.root.documentElement.classList.remove("ui-icons-enabled"); + if (icons === null || icons === "enabled") { + _t.root.documentElement.classList.add("ui-icons-enabled"); + } + + _t.root.documentElement.classList.remove("ui-layout-condensed"); + if (window.localStorage.getItem("openhab.ui.basic:condensedLayout") === "enabled") { + _t.root.documentElement.classList.add("ui-layout-condensed"); + } + + _t.root.documentElement.classList.remove("ui-capitalize-values"); + if (window.localStorage.getItem("openhab.ui.basic:capitalizeValues") === "enabled") { + _t.root.documentElement.classList.add("ui-capitalize-values"); + } + + _t.webAudioEnabled = window.localStorage.getItem("openhab.ui:webaudio.enable") === "enabled"; + }; + function replaceContent(xmlResponse) { var page = xmlResponse.documentElement, @@ -2474,6 +2548,8 @@ appendControl(new ControlSlider(e)); break; case "chart": + appendControl(new ControlChart(e)); + break; case "image": appendControl(new ControlImage(e, true)); break; @@ -2529,6 +2605,10 @@ _t.header.classList.add("navigation-page"); } + document.querySelector(o.settingsButton).addEventListener("click", function() { + location.href = location.href + "&showSettings=true"; + }); + document.querySelector(o.backButton).addEventListener("click", function() { if (historyStack.level > 0) { history.back(); @@ -3032,17 +3112,65 @@ document.addEventListener("DOMContentLoaded", function() { smarthome.UI = new UI(document); + smarthome.UI.applyLocalSettings(); smarthome.UI.layoutChangeProxy = new VisibilityChangeProxy(100, 50); smarthome.eventMapper = new EventMapper(); smarthome.UI.initControls(); + smarthome.UI.applyTheme(); smarthome.changeListener = new ChangeListener(); - if (JSON.parse(document.getElementById("config").text).webAudio) { + if (smarthome.UI.webAudioEnabled) { smarthome.playAudioUrlListener = new PlayAudioUrlListener(); + } else { + smarthome.playAudioUrlListener = null; + } + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.addEventListener("change", smarthome.UI.applyTheme); + } + + function handleStorageEvent(event) { + var + oldValue; + + if (event.key === "openhab.ui:theme.dark") { + smarthome.UI.applyTheme(); + } else if (event.key === "openhab.ui:webaudio.enable") { + oldValue = smarthome.UI.webAudioEnabled; + smarthome.UI.applyLocalSettings(); + if (smarthome.UI.webAudioEnabled !== oldValue) { + if (smarthome.UI.webAudioEnabled) { + smarthome.playAudioUrlListener = new PlayAudioUrlListener(); + } else { + smarthome.playAudioUrlListener.source.close(); + smarthome.playAudioUrlListener = null; + } + } + } else if (event.key.startsWith("openhab.ui.basic:")) { + smarthome.UI.applyLocalSettings(); + } } + window.addEventListener("storage", handleStorageEvent); + window.addEventListener("beforeunload", function() { smarthome.changeListener.suppressErrors(); + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.removeEventListener("change", smarthome.UI.applyTheme); + } + + window.removeEventListener("storage", handleStorageEvent); + + if (smarthome.UI.webAudioEnabled) { + smarthome.playAudioUrlListener.source.close(); + } }); }); })({ @@ -3060,6 +3188,7 @@ secondaryColorAttribute: "data-secondary-color", controlButton: "button", buttonActiveClass: "mdl-button--accent", + buttonIcon: ".mdl-button-icon", modal: ".mdl-modal", modalContainer: ".mdl-modal__content", selectionRows: ".mdl-form__selection-rows", @@ -3081,6 +3210,7 @@ uiLoadingBar: ".ui__loading", layoutTitle: ".mdl-layout-title", layoutHeader: ".mdl-layout__header", + settingsButton: ".navigation__button-settings", backButton: ".navigation__button-back", rollerblind: { up: ".mdl-form__rollerblind--up",