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 33d0d110f2..d742f842b0 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 f97641d33b..4660b56d09 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 @@ -50,15 +31,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 @@ -72,24 +44,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 5bba7e6db6..138651e1b6 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 acfc0f4ec7..124bb5d121 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() {}; } @@ -936,6 +947,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); @@ -1067,6 +1092,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") + ""; @@ -2306,6 +2340,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, @@ -2466,6 +2540,8 @@ appendControl(new ControlSlider(e)); break; case "chart": + appendControl(new ControlChart(e)); + break; case "image": appendControl(new ControlImage(e, true)); break; @@ -2521,6 +2597,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(); @@ -3024,17 +3104,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(); + } }); }); })({ @@ -3052,6 +3180,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", @@ -3073,6 +3202,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",