From c4778a76fb742d17b1f1d3ca755da45bb3a163d6 Mon Sep 17 00:00:00 2001 From: Laurent Garnier Date: Fri, 2 Feb 2024 22:54:30 +0100 Subject: [PATCH] [BasicUI] Move most of app settings to per-device (browser) settings Fix #1832 Closes #1930 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. New settings are also available to control the size of the chart and the size of content (text, line) in the chart. Signed-off-by: Laurent Garnier --- bundles/org.openhab.ui.basic/.gitignore | 2 + bundles/org.openhab.ui.basic/gulpfile.js | 2 +- .../ui/basic/internal/WebAppConfig.java | 123 +--- .../render/AbstractWidgetRenderer.java | 27 +- .../internal/render/ButtongridRenderer.java | 21 +- .../basic/internal/render/ChartRenderer.java | 32 +- .../basic/internal/render/PageRenderer.java | 164 ++++- .../basic/internal/render/SwitchRenderer.java | 21 +- .../basic/internal/servlet/WebAppServlet.java | 15 +- .../main/resources/OH-INF/config/config.xml | 70 --- .../resources/OH-INF/i18n/basic.properties | 40 +- .../src/main/resources/snippets/button.html | 6 +- .../src/main/resources/snippets/main.html | 12 +- .../main/resources/snippets/main_static.html | 34 +- .../resources/snippets/setting_buttons.html | 16 + .../resources/snippets/setting_selection.html | 25 + .../resources/snippets/setting_switch.html | 19 + .../org.openhab.ui.basic/web-src/_layout.scss | 28 + .../web-src/_theming.scss | 37 +- .../org.openhab.ui.basic/web-src/settings.js | 448 +++++++++++++ .../org.openhab.ui.basic/web-src/smarthome.js | 588 ++++++++++++++---- .../org.openhab.ui.basic/web-src/static.js | 75 +++ .../src/main/resources/conf/basicui.cfg | 29 - 23 files changed, 1315 insertions(+), 519 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_selection.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 create mode 100644 bundles/org.openhab.ui.basic/web-src/static.js diff --git a/bundles/org.openhab.ui.basic/.gitignore b/bundles/org.openhab.ui.basic/.gitignore index 4a1ea5b512..c816b2df88 100644 --- a/bundles/org.openhab.ui.basic/.gitignore +++ b/bundles/org.openhab.ui.basic/.gitignore @@ -3,4 +3,6 @@ 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/static.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..821942281a 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/static.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 8638ae5af1..cd46fb7c45 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 @@ -12,11 +12,7 @@ */ 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; @@ -26,143 +22,26 @@ * * @author Vlad Ivanov - Initial contribution * @author Laurent Garnier - New config parameter "enableIconify" + * @author Laurent Garnier - Replace almost all (server) settings by browser settings */ @NonNullByDefault 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"); - } - } 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 { - nbColsDesktop = Integer.parseInt(nbColumns.substring(0, 1)); - } catch (NumberFormatException e) { - nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP; - } - try { - nbColsTablet = Integer.parseInt(nbColumns.substring(2, 3)); - } catch (NumberFormatException e) { - nbColsTablet = DEFAULT_NB_COLUMNS_TABLET; - } - } else { - 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); } public String getDefaultSitemap() { return defaultSitemap; } - public String getTheme() { - return theme; - } - - public String getCssClassList() { - String result = " "; - for (String item : cssClassList) { - result += item + " "; - } - return result; - } - - public int getNbColsDesktop() { - return nbColsDesktop; - } - - public int getNbColsTablet() { - return nbColsTablet; - } - - public boolean isIconsEnabled() { - return icons; - } - - public boolean isIconifyEnabled() { - return iconify; - } - 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 9ca1d19c0f..58ffac8494 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 @@ -69,6 +69,9 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer { public static final String ICON_TYPE = "svg"; + private static final int DEFAULT_NB_COLUMNS_DESKTOP = 3; + private static final int DEFAULT_NB_COLUMNS_TABLET = 2; + public static final String PRIMARY_COLOR = "#3f51b5"; public static final String SECONDARY_COLOR = "#ff4081"; @@ -125,8 +128,8 @@ protected String preprocessSnippet(String originalSnippet, Widget w) { protected String preprocessSnippet(String originalSnippet, Widget w, boolean ignoreStateForIcon) { String snippet = preprocessIcon(originalSnippet, getCategory(w), ignoreStateForIcon); - snippet = snippet.replace("%cells%", String.valueOf(12 / config.getNbColsDesktop())); - snippet = snippet.replace("%cells_tablet%", String.valueOf(8 / config.getNbColsTablet())); + snippet = snippet.replace("%cells%", String.valueOf(12 / DEFAULT_NB_COLUMNS_DESKTOP)); + snippet = snippet.replace("%cells_tablet%", String.valueOf(8 / DEFAULT_NB_COLUMNS_TABLET)); snippet = snippet.replace("%widget_id%", itemUIRegistry.getWidgetId(w)); snippet = snippet.replace("%icon_with_state%", Boolean.valueOf(!ignoreStateForIcon).toString()); snippet = snippet.replace("%item%", w.getItem() != null ? w.getItem() : ""); @@ -170,9 +173,7 @@ protected String preprocessIcon(String originalSnippet, @Nullable String icon, b break; case ICON_SOURCE_IF: case ICON_SOURCE_ICONIFY: - if (config.isIconifyEnabled()) { - iconSnippet = getSnippet("icon_iconify"); - } + iconSnippet = getSnippet("icon_iconify"); break; case ICON_SOURCE_MATERIAL: iconSnippet = getSnippet("icon_material"); @@ -388,18 +389,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); @@ -446,13 +435,13 @@ public void setConfig(WebAppConfig config) { this.config = config; } - protected @Nullable String localizeText(String key) { + protected String localizeText(String key) { String result = ""; if (I18nUtil.isConstant(key)) { result = i18nProvider.getText(bundleContext.getBundle(), I18nUtil.stripConstant(key), "", localeProvider.getLocale()); } - return result; + return result != null ? result : ""; } protected @Nullable String getUnitForWidget(Widget widget) { 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 23554e56f5..199c518ca8 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; @@ -190,26 +189,16 @@ private String buildButton(String item, @Nullable String lab, String cmd, @Nulla button = button.replace("%item%", item); button = button.replace("%cmd%", escapeHtml(cmd)); 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 dd2d0cc65a..f57ecd3bee 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; @@ -45,6 +43,7 @@ * * @author Kai Kreuzer - Initial contribution and API * @author Vlad Ivanov - BasicUI changes + * @author Laurent Garnier - Delegate the definition of certain chart URL parameters to the frontend (smarthome.js) */ @Component(service = WidgetRenderer.class) @NonNullByDefault @@ -102,29 +101,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 +123,10 @@ 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); + // Let the frontend set the final URL with additional parameters depending on browser settings + // and schedule the refresh + snippet = snippet.replace("%ignore_refresh%", "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 fbe33e0163..f4bbee1add 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 @@ -42,6 +42,8 @@ import org.slf4j.Logger; import org.slf4j.LoggerFactory; +import com.google.gson.JsonObject; + /** * This is an implementation of the {@link WidgetRenderer} interface, which * is the main entry point for HTML code construction. @@ -52,6 +54,7 @@ * @author Kai Kreuzer - Initial contribution and API * @author Vlad Ivanov - BasicUI changes * @author Laurent Garnier - primary/secondary colors + * @author Laurent Garnier - Build of new page for app settings */ @Component(service = { PageRenderer.class }) @NonNullByDefault @@ -91,16 +94,9 @@ public void removeWidgetRenderer(WidgetRenderer widgetRenderer) { public StringBuilder processPage(String id, String sitemap, String label, EList children, boolean async) throws RenderException { String snippet = getSnippet(async ? "layer" : "main"); - String offlineMsg = localizeText("@text/main.offline-msg"); - if (offlineMsg != null) { - snippet = snippet.replaceAll("%main.offline-msg%", offlineMsg); - } - String longPollingModeMsg = localizeText("@text/main.long-polling-mode-msg"); - if (longPollingModeMsg != null) { - snippet = snippet.replaceAll("%main.long-polling-mode-msg%", longPollingModeMsg); - } + snippet = snippet.replaceAll("%main.offline-msg%", localizeText("@text/main.offline-msg")); + snippet = snippet.replaceAll("%main.long-polling-mode-msg%", localizeText("@text/main.long-polling-mode-msg")); 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 @@ -114,10 +110,8 @@ public StringBuilder processPage(String id, String sitemap, String label, EList< snippet = snippet.replace("%label%", escapeHtml(labelPlain)); snippet = snippet.replace("%servletname%", WebAppServlet.SERVLET_PATH); snippet = snippet.replace("%sitemap%", sitemap); - 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,17 +225,14 @@ public CharSequence renderSitemapList(Set sitemapProviders) thr } } - String pageSnippet = getSnippet("main_static"); String listSnippet = getSnippet("sitemaps_list"); String sitemapSnippet = getSnippet("sitemaps_list_item"); StringBuilder sb = new StringBuilder(); if (sitemapList.isEmpty()) { String listEmptySnippet = getSnippet("sitemaps_list_empty"); - String text = localizeText("@text/sitemaps-list-empty.info"); - if (text != null) { - listEmptySnippet = listEmptySnippet.replace("%sitemaps-list-empty.info%", text); - } + listEmptySnippet = listEmptySnippet.replace("%sitemaps-list-empty.info%", + localizeText("@text/sitemaps-list-empty.info")); sb.append(listEmptySnippet); } else { sitemapList.sort((s1, s2) -> { @@ -272,24 +263,141 @@ public CharSequence renderSitemapList(Set sitemapProviders) thr } } - String text = localizeText("@text/sitemaps-list.welcome"); - if (text != null) { - listSnippet = listSnippet.replace("%sitemaps-list.welcome%", text); + listSnippet = listSnippet.replace("%sitemaps-list.welcome%", localizeText("@text/sitemaps-list.welcome")); + listSnippet = listSnippet.replace("%sitemaps-list.available-sitemaps%", + localizeText("@text/sitemaps-list.available-sitemaps")); + + listSnippet = listSnippet.replace("%items%", sb.toString()); + + return getSnippet("main_static") // + .replace("%title%", "Basic UI") // + .replace("%htmlclass%", "page-welcome-sitemaps") // + .replace("%relpath%", "") // + .replace("%script%", "static.js") // + .replace("%navigation%", "navigation-home") // + .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"), "", buttons); + buildButton(localizeText("@text/ui.config.basic.theme.option.bright"), "light", buttons); + buildButton(localizeText("@text/ui.config.basic.theme.option.dark"), "dark", buttons); + + sb.append(getSnippet("setting_buttons") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.theme.label"))) + .replace("%description%", escapeHtml(localizeText("@text/ui.config.basic.theme.description"))) + .replace("%key%", "openhab.ui:theme.dark").replace("%default%", "") + .replace("%buttons%", buttons.toString())); + + renderSwitchSetting(localizeText("@text/ui.config.basic.enableIcons.label"), + localizeText("@text/ui.config.basic.enableIcons.description"), "icons", "openhab.ui.basic:icons", + "enabled", "disabled", true, sb); + + renderSwitchSetting(localizeText("@text/ui.config.basic.enableIconify.label"), + localizeText("@text/ui.config.basic.enableIconify.description"), "iconify", "openhab.ui.basic:iconify", + "enabled", "disabled", false, sb); + + renderSwitchSetting(localizeText("@text/ui.config.basic.condensedLayout.label"), + localizeText("@text/ui.config.basic.condensedLayout.description"), "condensedLayout", + "openhab.ui.basic:condensedLayout", "enabled", "disabled", false, sb); + + buttons = new StringBuilder(); + buildButton("1", "1", buttons); + buildButton("2", "", buttons); + + sb.append(getSnippet("setting_buttons") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.nbColumnsTablet.label"))) + .replace("%description%", escapeHtml(localizeText("@text/ui.config.basic.nbColumnsTablet.description"))) + .replace("%key%", "openhab.ui.basic:nbColumnsTablet").replace("%default%", "") + .replace("%buttons%", buttons.toString())); + + buttons = new StringBuilder(); + buildButton("1", "1", buttons); + buildButton("2", "2", buttons); + buildButton("3", "", buttons); + + sb.append(getSnippet("setting_buttons") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.nbColumnsDesktop.label"))) + .replace("%description%", + escapeHtml(localizeText("@text/ui.config.basic.nbColumnsDesktop.description"))) + .replace("%key%", "openhab.ui.basic:nbColumnsDesktop").replace("%default%", "") + .replace("%buttons%", buttons.toString())); + + renderSwitchSetting(localizeText("@text/ui.config.basic.capitalizeValues.label"), + localizeText("@text/ui.config.basic.capitalizeValues.description"), "capitalizeValues", + "openhab.ui.basic:capitalizeValues", "enabled", "disabled", false, sb); + + renderSwitchSetting(localizeText("@text/ui.config.basic.webAudio.label"), + localizeText("@text/ui.config.basic.webAudio.description"), "webAudio", "openhab.ui:webaudio.enable", + "enabled", "", false, sb); + + StringBuilder rows = new StringBuilder(); + JsonObject jsonObject = new JsonObject(); + buildRow("chartSize", localizeText("@text/ui.config.basic.chartSize.option.default"), "", rows, jsonObject); + for (String val : new String[] { "360x180", "480x240", "600x300", "720x360", "840x420", "960x480" }) { + buildRow("chartSize", localizeText("@text/ui.config.basic.chartSize.option." + val), val, rows, jsonObject); } - text = localizeText("@text/sitemaps-list.available-sitemaps"); - if (text != null) { - listSnippet = listSnippet.replace("%sitemaps-list.available-sitemaps%", text); + sb.append(getSnippet("setting_selection") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.chartSize.label"))) + .replace("%description%", escapeHtml(localizeText("@text/ui.config.basic.chartSize.description"))) + .replace("%key%", "openhab.ui.basic:chartSize").replace("%default%", "") + .replace("%value_map%", escapeHtml(jsonObject.toString())).replace("%rows%", rows.toString())); + + rows = new StringBuilder(); + jsonObject = new JsonObject(); + buildRow("chartDPI", localizeText("@text/ui.config.basic.chartDPI.option.96"), "", rows, jsonObject); + for (String val : new String[] { "120", "144", "168", "192", "240" }) { + buildRow("chartDPI", localizeText("@text/ui.config.basic.chartDPI.option." + val), val, rows, jsonObject); } - listSnippet = listSnippet.replace("%items%", sb.toString()); + sb.append(getSnippet("setting_selection") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.chartDPI.label"))) + .replace("%description%", escapeHtml(localizeText("@text/ui.config.basic.chartDPI.description"))) + .replace("%key%", "openhab.ui.basic:chartDPI").replace("%default%", "") + .replace("%value_map%", escapeHtml(jsonObject.toString())).replace("%rows%", rows.toString())); + + return getSnippet("main_static") // + .replace("%title%", "Basic UI Settings") // + .replace("%htmlclass%", "") // + .replace("%relpath%", "../") // + .replace("%script%", "settings.js") // + .replace("%navigation%", "navigation-page") // + .replace("%content%", 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); + 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%", "")); + } + + private void buildRow(String setting, String label, String cmd, StringBuilder rows, JsonObject jsonObject) + throws RenderException { + jsonObject.addProperty(cmd.isEmpty() ? "_empty_" : cmd, label); + rows.append(getSnippet("selection_row") // + .replace("%cmd%", escapeHtml(cmd)) // + .replace("%label%", escapeHtml(label)) // + .replace("%item%", setting) // + .replace("%checked%", "")); + } - return pageSnippet; + private void renderSwitchSetting(String label, 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%", 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 5898f294a7..841f371f0d 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 0ce2b7cccd..7418ac4592 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 @@ -57,7 +57,7 @@ * * @author Kai Kreuzer - Initial contribution and API * @author Vlad Ivanov - Basic UI changes - * + * @author Laurent Garnier - New page /basicui/app/settings */ @Component(immediate = true, service = Servlet.class, configurationPid = "org.openhab.basicui", // property = Constants.SERVICE_PID + "=org.openhab.basicui") @@ -125,6 +125,14 @@ 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 { @@ -151,6 +159,11 @@ protected void service(@NonNullByDefault({}) HttpServletRequest req, @NonNullByD } try { + if ("/settings".equals(req.getPathInfo())) { + 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..cddb695295 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 @@ -41,57 +22,6 @@ false - - - If enabled, the UI will render iconify icons directly by downloading them from the Internet and caching - them in the WEB browser. If disabled, the UI will use the standard method by requesting the server icon proxy and - assuming iconify icons are installed on the server. Default is disabled. - - - - - 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 - width (tablet). - - - - - - - - 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..9533ee8984 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 @@ -1,41 +1,45 @@ ui.config.basic.capitalizeValues.label = Capitalize Values ui.config.basic.capitalizeValues.description = Displays all widget states in uppercase. -ui.config.basic.capitalizeValues.option.true = Enable -ui.config.basic.capitalizeValues.option.false = Disable +ui.config.basic.chartDPI.label = Chart DPI +ui.config.basic.chartDPI.description = Adjusts the size of the content (text, line) in the chart. +ui.config.basic.chartDPI.option.96 = 96 DPI (default) +ui.config.basic.chartDPI.option.120 = 120 DPI +ui.config.basic.chartDPI.option.144 = 144 DPI +ui.config.basic.chartDPI.option.168 = 168 DPI +ui.config.basic.chartDPI.option.192 = 192 DPI +ui.config.basic.chartDPI.option.240 = 240 DPI +ui.config.basic.chartSize.label = Chart Size +ui.config.basic.chartSize.description = Sets the size of the chart. +ui.config.basic.chartSize.option.default = Default +ui.config.basic.chartSize.option.360x180 = 360 x 180 (phone) +ui.config.basic.chartSize.option.480x240 = 480 x 240 (tablet) +ui.config.basic.chartSize.option.600x300 = 600 x 300 (tablet) +ui.config.basic.chartSize.option.720x360 = 720 x 360 (desktop) +ui.config.basic.chartSize.option.840x420 = 840 x 420 (desktop) +ui.config.basic.chartSize.option.960x480 = 960 x 480 (desktop) ui.config.basic.condensedLayout.label = Condensed Layout ui.config.basic.condensedLayout.description = When enabled, changes the layout so that more widgets can fit on the screen. -ui.config.basic.condensedLayout.option.true = Enable -ui.config.basic.condensedLayout.option.false = Disable ui.config.basic.defaultSitemap.label = Default Sitemap ui.config.basic.defaultSitemap.description = The sitemap to show if no parameter is passed. ui.config.basic.enableIconify.label = Enable Iconify Icons ui.config.basic.enableIconify.description = If enabled, the UI will render iconify icons directly by downloading them from the Internet and caching them in the WEB browser. If disabled, the UI will use the standard method by requesting the server icon proxy and assuming iconify icons are installed on the server. Default is disabled. -ui.config.basic.enableIconify.option.true = Enable -ui.config.basic.enableIconify.option.false = Disable ui.config.basic.enableIcons.label = Enable Icons ui.config.basic.enableIcons.description = Defines whether UI renders icons for the widgets or not. -ui.config.basic.enableIcons.option.true = Enable -ui.config.basic.enableIcons.option.false = Disable ui.config.basic.inlineSvg.label = Inline SVG ui.config.basic.inlineSvg.description = If enabled, any SVG icon provided by the openHAB icon server will automatically be converted to an inline SVG in the WEB page, allowing control of its color with the sitemap widget property "iconcolor" in the case where the SVG icon sets "currentColor" as the fill color. Note that this will work with custom SVG icons but not with all the packaged icons from the classic iconset since they are defined with a hard-coded color palette. This feature is disabled by default due to additional non-standard processing required leading to a larger page size and because it is unnecessary if you only use Material/framework7/iconify icons or openHAB icons from the classic icon set. ui.config.basic.inlineSvg.option.true = Enable ui.config.basic.inlineSvg.option.false = Disable -ui.config.basic.nbColumns.label = Number of Columns -ui.config.basic.nbColumns.description = The number of columns to consider to fill the grid in large screen width (desktop) and medium screen width (tablet). -ui.config.basic.nbColumns.option.1-1 = 1 column on desktop and tablet -ui.config.basic.nbColumns.option.2-1 = 2 columns on desktop but only 1 on tablet -ui.config.basic.nbColumns.option.2-2 = 2 columns on desktop and tablet -ui.config.basic.nbColumns.option.3-1 = 3 columns on desktop but only 1 on tablet -ui.config.basic.nbColumns.option.3-2 = 3 columns on desktop but only 2 on tablet +ui.config.basic.nbColumnsDesktop.label = Columns (desktop) +ui.config.basic.nbColumnsDesktop.description = Sets the number of columns to take into account when filling the grid for a large screen width (desktop). +ui.config.basic.nbColumnsTablet.label = Columns (tablet) +ui.config.basic.nbColumnsTablet.description = Sets the number of columns to take into account when filling the grid for a medium screen width (tablet). 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 -ui.config.basic.webAudio.option.false = Disable # service 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..f29e775c76 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 @@ -1,5 +1,5 @@ - + %label% @@ -28,10 +28,8 @@ - - - +
@@ -78,9 +76,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..de371f4ce3 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 @@ -10,7 +10,7 @@ - + @@ -18,19 +18,33 @@ - - - + + + - + + + - +
-
+
-
- - +
+ + +
+
+ +
%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..ff78808289 --- /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_selection.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_selection.html new file mode 100644 index 0000000000..7622b10cc7 --- /dev/null +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_selection.html @@ -0,0 +1,25 @@ +
+ + %label% + + + +
+ + + +
+
+
+ %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..a774d2dde2 --- /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 0fceebb73d..d196154ef4 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,15 @@ padding-right: $mdl-grid-spacing + 16px; } } + &--setting { + height: $form-row-desktop-height-condensed; + border-bottom: none; + } + &--setting-descr { + white-space: normal; + height: 100%; + font-size: 11px; + } &--hidden { display: none; } @@ -255,20 +269,34 @@ } .mdl-button-icon { min-width: 0; + &-text { + html.ui-icons-enabled & { + display: none; + } + } img, svg { 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 95451647d2..e0b53165a6 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; @@ -89,7 +57,8 @@ body { 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..2387a7581c --- /dev/null +++ b/bundles/org.openhab.ui.basic/web-src/settings.js @@ -0,0 +1,448 @@ +/** + * openHAB BasicUI javascript for the settings page + * + * @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 createDOM(text) { + var + e = document.createElement("div"); + + e.innerHTML = text; + return e.childNodes; + } + + function append(node, child) { + if (child instanceof NodeList) { + [].slice.call(child).forEach(function(e) { + node.appendChild(e); + }); + } else { + node.appendChild(child); + } + } + + function renderTemplate(id, contents) { + var + text = document.getElementById(id).innerHTML; + + return text.replace(/\{([\w]+)\}/, function(match, capture) { + //jshint unused:false + if (typeof contents[capture] !== "undefined") { + return contents[capture]; + } else { + return ""; + } + }); + } + + function Modal(text) { + var + _t = this; + + _t.templateId = "template-modal"; + _t.text = renderTemplate(_t.templateId, { + content: text + }); + + function onkeydown(event) { + event = event || window.event; + if (event.keyCode === 27) { + _t.hide(); + } + } + + function init() { + document.addEventListener("keydown", onkeydown); + } + + function destroy() { + if (_t.onHide !== undefined) { + _t.onHide(); + } + + document.removeEventListener("keydown", onkeydown); + } + + _t.show = function() { + append(document.body, createDOM(_t.text)); + + _t.bg = document.querySelector(o.modal); + _t.container = _t.bg.querySelector(o.modalContainer); + + smarthome.UI.currentModal = _t; + _t.bg.addEventListener("click", function() { + _t.hide(); + }); + + _t.container.addEventListener("click", function(event) { + event.stopPropagation(); + }); + + init(); + }; + + _t.hide = function() { + document.body.querySelector(o.modal).remove(); + delete smarthome.UI.currentModal; + destroy(); + }; + } + + 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); + } + smarthome.UI.updateLocalSetting(_t.key); + }; + } + + 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); + }; + + _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 ControlRadioSelection(parentNode) { + Control.call(this, parentNode); + + var + _t = this, + valueMapString = parentNode.getAttribute("data-value-map"); + + _t.value = null; + _t.valueNode = parentNode.parentNode.querySelector(o.formValue); + + if (valueMapString !== null) { + _t.valueMap = JSON.parse(valueMapString); + } else { + _t.valueMap = {}; + } + + function setValueNode(value) { + if (value !== "" && _t.valueMap[value] !== undefined) { + _t.valueNode.innerHTML = _t.valueMap[value]; + } else if (value === "" && _t.valueMap["_empty_"] !== undefined) { + _t.valueNode.innerHTML = _t.valueMap["_empty_"]; + } else { + _t.valueNode.innerHTML = value; + } + } + + function onRadioChange(event) { + event.stopPropagation(); + + if (event.target.tagName.toLowerCase() !== "input") { + return; + } + + _t.value = event.target.getAttribute("value"); + _t.setStorageValue(_t.value); + setValueNode(_t.value); + + setTimeout(function() { + _t.modal.hide(); + }, 300); + } + + _t.showModal = function() { + var + content = _t.parentNode.querySelector(o.selectionRows).innerHTML; + + _t.modal = new Modal(content); + _t.modal.show(); + _t.modal.onHide = function() { + var + items = [].slice.call(_t.modal.container.querySelectorAll(o.formRadio)); + + componentHandler.downgradeElements(items); + items.forEach(function(control) { + control.removeEventListener("click", onRadioChange); + }); + + _t.modal = null; + }; + + var + controls = [].slice.call(_t.modal.container.querySelectorAll(o.formRadio)); + + if (_t.value !== null) { + var + items = [].slice.call(_t.modal.container.querySelectorAll("input[type=radio]")); + + items.forEach(function(radioItem) { + if (radioItem.value === _t.value) { + radioItem.checked = true; + } else { + radioItem.checked = false; + } + }); + } + + controls.forEach(function(control) { + componentHandler.upgradeElement(control, "MaterialRadio"); + control.addEventListener("click", onRadioChange); + }); + }; + + _t.setValue = function() { + var + storageValue = window.localStorage.getItem(_t.key); + + _t.value = (storageValue === null) ? _t.defaultValue : storageValue; + setValueNode(_t.value); + }; + + _t.destroy = function() { + _t.parentNode.parentNode.removeEventListener("click", _t.showModal); + }; + + _t.parentNode.parentNode.addEventListener("click", _t.showModal); + } + + function UI(root) { + var + _t = this; + + _t.root = root; + + _t.updateLocalSetting = function(param) { + var + oldValue, + newValue; + + if (param === null || param === "openhab.ui:theme.dark") { + oldValue = _t.theme; + newValue = window.localStorage.getItem("openhab.ui:theme.dark"); + if (newValue !== "light" && newValue !== "dark") { + newValue = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light"; + } + _t.theme = newValue; + if (oldValue !== newValue) { + _t.root.body.setAttribute("data-theme", newValue); + } + } + }; + + _t.updateControlLocalSetting = function(param) { + if (param in smarthome.dataModel) { + smarthome.dataModel[param].setValue(); + } + }; + + _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; + case "selection": + appendControl(new ControlRadioSelection(e)); + break; + default: + break; + } + }); + + for (var key in smarthome.dataModel) { + smarthome.dataModel[key].setValue(); + } + }; + } + + document.addEventListener("DOMContentLoaded", function() { + smarthome.UI = new UI(document); + smarthome.UI.updateLocalSetting(null); + smarthome.UI.upgradeComponents(); + smarthome.UI.initControls(); + + document.querySelector(o.backButton).addEventListener("click", function() { + location.href = location.href.replace("\/basicui\/app\/settings", "/basicui/app"); + }); + + function updateTheme() { + smarthome.UI.updateLocalSetting("openhab.ui:theme.dark"); + } + + function handleStorageEvent(event) { + smarthome.UI.updateLocalSetting(event.key); + smarthome.UI.updateControlLocalSetting(event.key); + } + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.addEventListener("change", updateTheme); + } + + 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", updateTheme); + } + + 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", + modal: ".mdl-modal", + modalContainer: ".mdl-modal__content", + selectionRows: ".mdl-form__selection-rows", + formValue: ".mdl-form__value", + formRadio: ".mdl-radio", + 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 ad4bb8e5dc..8b48756755 100644 --- a/bundles/org.openhab.ui.basic/web-src/smarthome.js +++ b/bundles/org.openhab.ui.basic/web-src/smarthome.js @@ -1,8 +1,9 @@ /** - * Eclipse SmartHome BasicUI javascript + * openHAB BasicUI javascript * * @author Vlad Ivanov — initial version * @author Mark Herwege - input widget + * @author Laurent Garnier — handling of app settings stored in browser local storage */ /*eslint-env browser */ @@ -359,6 +360,9 @@ _t.id = _t.parentNode.getAttribute(o.idAttribute); _t.iconWithState = _t.parentNode.getAttribute(o.iconWithStateAttribute) === "true"; _t.visible = !_t.formRow.classList.contains(o.formRowHidden); + _t.fillFullWidth = _t.formRow.classList.contains(o.cell12Col); + _t.cellSizeTablet = 4; + _t.cellSizeDesktop = 4; _t.headerRow = _t.parentNode.getAttribute("data-header-row"); if (_t.headerRow !== null) { _t.formHeaderRow = _t.formRow.previousElementSibling; @@ -399,6 +403,11 @@ _t.icon = formRow.querySelector(o.formIconIconify); if (_t.icon !== null) { _t.iconSource = "if"; + splitIconAttr = _t.icon.getAttribute("icon").split(":"); + if (splitIconAttr.length === 2) { + _t.iconSet = splitIconAttr[0]; + _t.iconName = splitIconAttr[1]; + } return; } _t.icon = formRow.querySelector(o.formIconMaterial); @@ -425,12 +434,6 @@ this.src = noneImageSrc; }; - _t.findIcon(); - if (_t.icon !== null && _t.iconSource === "oh") { - _t.icon.addEventListener("load", _t.convertToInlineSVG); - _t.icon.addEventListener("error", _t.replaceImageWithNone); - } - _t.replaceIconWithInlineSVG = function(iconElement, svgText) { var parser, @@ -535,6 +538,15 @@ if (iconSrc === "iconify") { iconSrc = "if"; } + if (iconSrc === "if" && !smarthome.UI.iconify) { + // Replace the iconify icon by the none OH icon + _t.iconifyIconReplaced = true; + iconSrc = "oh"; + iconSet = "classic"; + iconName = "none"; + } else { + _t.iconifyIconReplaced = false; + } if (iconSrc === "oh") { imgURL = "/icon/" + encodeURIComponent(iconName) + @@ -629,9 +641,52 @@ _t.setIconColor = function(color) { if (_t.iconContainer !== null) { _t.iconContainer.style.color = color; + _t.iconContainer.style.colorScheme = ""; } }; + function setIconColorScheme(value) { + if (_t.iconContainer !== null && _t.iconContainer.style.color === "") { + _t.iconContainer.style.colorScheme = value; + } + } + + function setCellSize(sizeTablet, sizeDesktop) { + if (_t.fillFullWidth) { + return; + } + if (_t.cellSizeTablet !== sizeTablet) { + _t.formRow.classList.remove("mdl-cell--" + _t.cellSizeTablet + "-col-tablet"); + _t.formRow.classList.add("mdl-cell--" + sizeTablet + "-col-tablet"); + _t.cellSizeTablet = sizeTablet; + } + if (_t.cellSizeDesktop !== sizeDesktop) { + _t.formRow.classList.remove("mdl-cell--" + _t.cellSizeDesktop + "-col"); + _t.formRow.classList.add("mdl-cell--" + sizeDesktop + "-col"); + _t.cellSizeDesktop = sizeDesktop; + } + } + + _t.applyLocalSettings = function() { + setCellSize(smarthome.UI.cellSizeTablet, smarthome.UI.cellSizeDesktop); + + if (_t.icon !== null) { + if (smarthome.UI.iconify && _t.iconifyIconReplaced) { + // Reload current page without affecting the history + smarthome.UI.navigate(smarthome.UI.page, false); + return; + } else if (!smarthome.UI.iconify && _t.iconSource === "if") { + _t.reloadIcon("", _t.iconSource + ":" + _t.iconSet + ":" + _t.iconName); + } + } + + setIconColorScheme(smarthome.UI.theme); + + _t.applyLocalSettingsPrivate(); + }; + + _t.applyLocalSettingsPrivate = function() {}; + _t.destroy = function() { if (_t.icon !== null && _t.iconSource === "oh") { _t.icon.removeEventListener("load", _t.convertToInlineSVG); @@ -644,6 +699,18 @@ } }); }; + + setCellSize(smarthome.UI.cellSizeTablet, smarthome.UI.cellSizeDesktop); + + _t.findIcon(); + _t.iconifyIconReplaced = false; + if (_t.icon !== null && _t.iconSource === "oh") { + _t.icon.addEventListener("load", _t.convertToInlineSVG); + _t.icon.addEventListener("error", _t.replaceImageWithNone); + } else if (_t.icon !== null && _t.iconSource === "if" && !smarthome.UI.iconify) { + _t.reloadIcon("", _t.iconSource + ":" + _t.iconSet + ":" + _t.iconName); + } + setIconColorScheme(smarthome.UI.theme); } /* class Frame */ @@ -676,6 +743,7 @@ _t.setValueColor = function() {}; _t.setIconColor = function() {}; _t.suppressUpdate = function() {}; + _t.applyLocalSettings = function() {}; _t.destroy = function() {}; } @@ -707,27 +775,12 @@ _t.url = parentNode.getAttribute("data-proxied-url"); _t.validUrl = parentNode.getAttribute("data-valid-url") === "true"; _t.ignoreRefresh = parentNode.getAttribute("data-ignore-refresh") === "true"; - _t.legendButton = null; - _t.periodButton = null; _t.upscaleButton = null; _t.refreshButton = null; if (_t.headerRow !== null) { - _t.legendButton = _t.formHeaderRow.querySelector(o.image.legendButton); - _t.periodButton = _t.formHeaderRow.querySelector(o.image.periodButton); _t.upscaleButton = _t.formHeaderRow.querySelector(o.image.upscaleButton); _t.refreshButton = _t.formHeaderRow.querySelector(o.image.refreshButton); - if (_t.legendButton !== null) { - _t.displayLegend = _t.parentNode.getAttribute("data-legend") === "true"; - if (_t.displayLegend) { - _t.legendButton.classList.add(o.buttonActiveClass); - } else { - _t.legendButton.classList.remove(o.buttonActiveClass); - } - } - if (_t.periodButton !== null) { - _t.period = null; - } if (_t.upscaleButton !== null) { _t.upscale = false; } @@ -798,6 +851,98 @@ }, _t.updateInterval); }; + function onUpscaleClick() { + _t.upscale = !_t.upscale; + if (_t.upscale) { + _t.upscaleButton.classList.add(o.buttonActiveClass); + } else { + _t.upscaleButton.classList.remove(o.buttonActiveClass); + } + if (_t.upscale) { + _t.parentNode.classList.add(o.image.upscaleClass); + } else { + _t.parentNode.classList.remove(o.image.upscaleClass); + } + } + + function onRefreshClick() { + _t.image.setAttribute("src", _t.url + "&t=" + Date.now()); + } + + function toggleHeaderRow() { + _t.headerRow = _t.headerRow === "true" ? "false" : "true"; + if (_t.headerRow === "true") { + _t.formHeaderRow.classList.remove(o.formRowHidden); + } else { + _t.formHeaderRow.classList.add(o.formRowHidden); + } + } + + _t.destroy = function() { + var + imageParent = _t.image.parentNode; + + _t.image.setAttribute("src", urlNoneIcon); + imageParent.removeChild(_t.image); + + if (_t.upscaleButton !== null) { + componentHandler.downgradeElements([ _t.upscaleButton ]); + _t.upscaleButton.removeEventListener("click", onUpscaleClick); + } + if (_t.refreshButton !== null) { + componentHandler.downgradeElements([ _t.refreshButton ]); + _t.refreshButton.removeEventListener("click", onRefreshClick); + } + if (_t.headerRow !== null) { + _t.parentNode.parentNode.removeEventListener("click", toggleHeaderRow); + } + + _t.destroyPrivate(); + }; + + _t.destroyPrivate = function() {}; + + if (_t.upscaleButton !== null) { + _t.upscaleButton.addEventListener("click", onUpscaleClick); + } + if (_t.refreshButton !== null) { + _t.refreshButton.addEventListener("click", onRefreshClick); + } + if (_t.headerRow !== null) { + _t.parentNode.parentNode.addEventListener("click", toggleHeaderRow); + } + + if (_t.visible) { + _t.activateRefresh(); + } + } + + /* class ControlChart */ + function ControlChart(parentNode) { + ControlImage.call(this, parentNode, true); + + var + _t = this; + + _t.legendButton = null; + _t.periodButton = null; + + if (_t.headerRow !== null) { + _t.legendButton = _t.formHeaderRow.querySelector(o.image.legendButton); + _t.periodButton = _t.formHeaderRow.querySelector(o.image.periodButton); + if (_t.legendButton !== null) { + _t.displayLegend = _t.parentNode.getAttribute("data-legend") === "true"; + if (_t.displayLegend) { + _t.legendButton.classList.add(o.buttonActiveClass); + } else { + _t.legendButton.classList.remove(o.buttonActiveClass); + } + } + if (_t.periodButton !== null) { + _t.period = null; + } + } + function onLegendClick() { _t.displayLegend = !_t.displayLegend; if (_t.displayLegend) { @@ -870,40 +1015,34 @@ }); }; - function onUpscaleClick() { - _t.upscale = !_t.upscale; - if (_t.upscale) { - _t.upscaleButton.classList.add(o.buttonActiveClass); - } else { - _t.upscaleButton.classList.remove(o.buttonActiveClass); - } - if (_t.upscale) { - _t.parentNode.classList.add(o.image.upscaleClass); - } else { - _t.parentNode.classList.remove(o.image.upscaleClass); - } - } + _t.applyLocalSettingsPrivate = function() { + var + splittedSize; - function onRefreshClick() { - _t.image.setAttribute("src", _t.url + "&t=" + Date.now()); - } + // Add chart parameters to chart URL + _t.url = _t.url.replace(/&theme=\w+/, ""); + _t.url = _t.url + "&theme=" + (smarthome.UI.theme === "dark" ? "dark" : "bright"); - function toggleHeaderRow() { - _t.headerRow = _t.headerRow === "true" ? "false" : "true"; - if (_t.headerRow === "true") { - _t.formHeaderRow.classList.remove(o.formRowHidden); - } else { - _t.formHeaderRow.classList.add(o.formRowHidden); + _t.url = _t.url.replace(/&w=\w+/, ""); + _t.url = _t.url.replace(/&h=\w+/, ""); + if (smarthome.UI.chartSize !== null) { + splittedSize = smarthome.UI.chartSize.split("x"); + _t.url = _t.url + "&w=" + splittedSize[0]; + _t.url = _t.url + "&h=" + splittedSize[1]; } - } - _t.destroy = function() { - var - imageParent = _t.image.parentNode; + _t.url = _t.url.replace(/&dpi=\w+/, ""); + if (smarthome.UI.chartDPI !== null) { + _t.url = _t.url + "&dpi=" + smarthome.UI.chartDPI; + } - _t.image.setAttribute("src", urlNoneIcon); - imageParent.removeChild(_t.image); + _t.setValuePrivate("", "", _t.visible); + if (_t.visible) { + _t.activateRefresh(); + } + }; + _t.destroyPrivate = function() { if (_t.legendButton !== null) { componentHandler.downgradeElements([ _t.legendButton ]); _t.legendButton.removeEventListener("click", onLegendClick); @@ -912,38 +1051,16 @@ componentHandler.downgradeElements([ _t.periodButton ]); _t.periodButton.removeEventListener("click", _t.showModalPeriods); } - if (_t.upscaleButton !== null) { - componentHandler.downgradeElements([ _t.upscaleButton ]); - _t.upscaleButton.removeEventListener("click", onUpscaleClick); - } - if (_t.refreshButton !== null) { - componentHandler.downgradeElements([ _t.refreshButton ]); - _t.refreshButton.removeEventListener("click", onRefreshClick); - } - if (_t.headerRow !== null) { - _t.parentNode.parentNode.removeEventListener("click", toggleHeaderRow); - } }; + _t.applyLocalSettingsPrivate(); + if (_t.legendButton !== null) { _t.legendButton.addEventListener("click", onLegendClick); } if (_t.periodButton !== null) { _t.periodButton.addEventListener("click", _t.showModalPeriods); } - if (_t.upscaleButton !== null) { - _t.upscaleButton.addEventListener("click", onUpscaleClick); - } - if (_t.refreshButton !== null) { - _t.refreshButton.addEventListener("click", onRefreshClick); - } - if (_t.headerRow !== null) { - _t.parentNode.parentNode.addEventListener("click", toggleHeaderRow); - } - - if (_t.visible) { - _t.activateRefresh(); - } } /* class ControlMap */ @@ -1023,6 +1140,7 @@ _t.hasValue = _t.parentNode.getAttribute("data-has-value") === "true"; _t.value = _t.parentNode.parentNode.querySelector(o.formValue); _t.suppressUpdateButtons = false; + _t.reset = function() { _t.buttons.forEach(function(button) { button.classList.remove(o.buttonActiveClass); @@ -1077,6 +1195,75 @@ } }; + function checkIconifyInButtons() { + var + found = false, + buttons = [].slice.call(_t.parentNode.querySelectorAll(o.buttonIcon)); + + buttons.forEach(function(button) { + if (button.querySelector("iconify-icon") !== null) { + found = true; + } + }); + return found; + } + + function removeIconifyFromButtons() { + var + removed = false, + buttons = [].slice.call(_t.parentNode.querySelectorAll(o.buttonIcon)); + + buttons.forEach(function(button) { + var + icon = button.querySelector("iconify-icon"), + textNode = button.querySelector(o.buttonIconText); + + if (icon !== null) { + button.classList.remove("mdl-button-icon"); + button.style.colorScheme = ""; + button.removeChild(icon); + if (textNode !== null) { + textNode.classList.remove("mdl-button-icon-text"); + } + removed = true; + } + }); + return removed; + } + + function setButtonsColorScheme(value) { + var + buttons = [].slice.call(_t.parentNode.querySelectorAll(o.buttonIcon)); + + buttons.forEach(function(button) { + button.style.colorScheme = value; + }); + } + + _t.applyLocalSettingsPrivate = function() { + var + removed; + + if (_t.iconifyInButtons) { + if (smarthome.UI.iconify && _t.iconifyRemoved) { + // Reload current page without affecting the history + smarthome.UI.navigate(smarthome.UI.page, false); + return; + } else if (!smarthome.UI.iconify) { + removed = removeIconifyFromButtons(); + if (!_t.iconifyRemoved && removed) { + _t.iconifyRemoved = true; + } + } + } + + setButtonsColorScheme(smarthome.UI.theme); + }; + + _t.iconifyInButtons = checkIconifyInButtons(); + _t.iconifyRemoved = _t.iconifyInButtons && !smarthome.UI.iconify ? removeIconifyFromButtons() : false; + setButtonsColorScheme(smarthome.UI.theme); + _t.buttons.forEach.call(_t.buttons, function(button) { var icon, @@ -2286,6 +2473,47 @@ }); } + function PlayAudioUrlListener() { + var + _t = this; + + _t.source = new EventSource("/rest/events?topics=openhab/webaudio/playurl"); + _t.source.addEventListener("message", function(event) { + var context; + try { + window.AudioContext = window.AudioContext || window.webkitAudioContext; + if (typeof (window.AudioContext) !== "undefined") { + context = new AudioContext(); + } + + var data = JSON.parse(event.data); + var audioUrl = JSON.parse(data.payload); + + ajax({ + url: audioUrl, + type: "GET", + reponseType: "arraybuffer", + callback: function(request) { + context.decodeAudioData(request.response, function(buffer) { + var source = context.createBufferSource(); + source.buffer = buffer; + source.connect(context.destination); + source.onended = function () { + context.close(); + }; + source.start(0); + }); + } + }); + } + catch (e) { + if (context) { + context.close(); + } + } + }); + } + function UI(root) { /* const */ var @@ -2310,6 +2538,7 @@ _t.primaryColor = document.body.getAttribute(o.primaryColorAttribute); _t.secondaryColor = document.body.getAttribute(o.secondaryColorAttribute); _t.notification = document.querySelector(o.notify); + _t.iconifyScript = null; _t.escapeHtml = function(text) { var @@ -2332,6 +2561,135 @@ _t.layoutTitle.innerHTML = title; }; + _t.updateLocalSetting = function(param) { + var + oldValue, + newValue, + id; + + if (param === null || param === "openhab.ui:theme.dark") { + oldValue = _t.theme; + newValue = window.localStorage.getItem("openhab.ui:theme.dark"); + if (newValue !== "light" && newValue !== "dark") { + newValue = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light"; + } + _t.theme = newValue; + if (oldValue !== newValue) { + _t.root.body.setAttribute("data-theme", newValue); + for (id in smarthome.dataModel) { + smarthome.dataModel[id].applyLocalSettings(); + } + } + } + + if (param === null || param === "openhab.ui.basic:icons") { + newValue = window.localStorage.getItem("openhab.ui.basic:icons"); + _t.root.documentElement.classList.remove("ui-icons-enabled"); + if (newValue === null || newValue === "enabled") { + _t.root.documentElement.classList.add("ui-icons-enabled"); + } + } + + if (param === null || param === "openhab.ui.basic:iconify") { + oldValue = _t.iconify; + newValue = window.localStorage.getItem("openhab.ui.basic:iconify") === "enabled"; + _t.iconify = newValue; + if (oldValue !== newValue) { + if (newValue && _t.iconifyScript === null) { + _t.iconifyScript = _t.root.createElement("script"); + _t.iconifyScript.src = "iconify/iconify-icon.min.js"; + _t.root.head.appendChild(_t.iconifyScript); + } else if (!newValue && _t.iconifyScript !== null) { + _t.root.head.removeChild(_t.iconifyScript); + _t.iconifyScript = null; + } + for (id in smarthome.dataModel) { + smarthome.dataModel[id].applyLocalSettings(); + } + } + } + + if (param === null || param === "openhab.ui.basic:condensedLayout") { + _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"); + } + } + + if (param === null || param === "openhab.ui.basic:nbColumnsTablet") { + oldValue = _t.cellSizeTablet; + newValue = window.localStorage.getItem("openhab.ui.basic:nbColumnsTablet") === null ? 4 + : 8 / (window.localStorage.getItem("openhab.ui.basic:nbColumnsTablet") * 1); + _t.cellSizeTablet = newValue; + if (oldValue !== newValue) { + for (id in smarthome.dataModel) { + smarthome.dataModel[id].applyLocalSettings(); + } + } + } + + if (param === null || param === "openhab.ui.basic:nbColumnsDesktop") { + oldValue = _t.cellSizeDesktop; + newValue = window.localStorage.getItem("openhab.ui.basic:nbColumnsDesktop") === null ? 4 + : 12 / (window.localStorage.getItem("openhab.ui.basic:nbColumnsDesktop") * 1); + _t.cellSizeDesktop = newValue; + if (oldValue !== newValue) { + _t.root.documentElement.classList.remove("ui-large-window"); + if (newValue === 4) { + _t.root.documentElement.classList.add("ui-large-window"); + } + for (id in smarthome.dataModel) { + smarthome.dataModel[id].applyLocalSettings(); + } + } + } + + if (param === null || param === "openhab.ui.basic:capitalizeValues") { + _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"); + } + } + + if (param === null || param === "openhab.ui:webaudio.enable") { + oldValue = _t.webAudioEnabled; + newValue = window.localStorage.getItem("openhab.ui:webaudio.enable") === "enabled"; + _t.webAudioEnabled = newValue; + if (oldValue !== newValue) { + if (newValue) { + smarthome.playAudioUrlListener = new PlayAudioUrlListener(); + } else { + if (oldValue !== undefined) { + smarthome.playAudioUrlListener.source.close(); + } + smarthome.playAudioUrlListener = null; + } + } + } + + if (param === null || param === "openhab.ui.basic:chartSize") { + oldValue = _t.chartSize; + newValue = window.localStorage.getItem("openhab.ui.basic:chartSize"); + _t.chartSize = newValue; + if (oldValue !== newValue) { + for (id in smarthome.dataModel) { + smarthome.dataModel[id].applyLocalSettings(); + } + } + } + + if (param === null || param === "openhab.ui.basic:chartDPI") { + oldValue = _t.chartDPI; + newValue = window.localStorage.getItem("openhab.ui.basic:chartDPI"); + _t.chartDPI = newValue; + if (oldValue !== newValue) { + for (id in smarthome.dataModel) { + smarthome.dataModel[id].applyLocalSettings(); + } + } + } + }; + function replaceContent(xmlResponse) { var page = xmlResponse.documentElement, @@ -2492,6 +2850,8 @@ appendControl(new ControlSlider(e)); break; case "chart": + appendControl(new ControlChart(e)); + break; case "image": appendControl(new ControlImage(e, true)); break; @@ -2547,6 +2907,10 @@ _t.header.classList.add("navigation-page"); } + document.querySelector(o.settingsButton).addEventListener("click", function() { + location.href = location.href.replace("\/basicui\/app", "/basicui/app/settings"); + }); + document.querySelector(o.backButton).addEventListener("click", function() { if (historyStack.level > 0) { history.back(); @@ -3011,61 +3375,47 @@ }); } - function PlayAudioUrlListener() { - var - _t = this; - - _t.source = new EventSource("/rest/events?topics=openhab/webaudio/playurl"); - _t.source.addEventListener("message", function(event) { - var context; - try { - window.AudioContext = window.AudioContext || window.webkitAudioContext; - if (typeof (window.AudioContext) !== "undefined") { - context = new AudioContext(); - } - - var data = JSON.parse(event.data); - var audioUrl = JSON.parse(data.payload); - - ajax({ - url: audioUrl, - type: "GET", - reponseType: "arraybuffer", - callback: function(request) { - context.decodeAudioData(request.response, function(buffer) { - var source = context.createBufferSource(); - source.buffer = buffer; - source.connect(context.destination); - source.onended = function () { - context.close(); - }; - source.start(0); - }); - } - }); - } - catch (e) { - if (context) { - context.close(); - } - } - }); - } - document.addEventListener("DOMContentLoaded", function() { smarthome.UI = new UI(document); + smarthome.UI.updateLocalSetting(null); smarthome.UI.layoutChangeProxy = new VisibilityChangeProxy(100, 50); smarthome.eventMapper = new EventMapper(); smarthome.UI.initControls(); smarthome.changeListener = new ChangeListener(); - if (JSON.parse(document.getElementById("config").text).webAudio) { - smarthome.playAudioUrlListener = new PlayAudioUrlListener(); + function updateTheme() { + smarthome.UI.updateLocalSetting("openhab.ui:theme.dark"); } + function handleStorageEvent(event) { + smarthome.UI.updateLocalSetting(event.key); + } + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.addEventListener("change", updateTheme); + } + + window.addEventListener("storage", handleStorageEvent); + window.addEventListener("beforeunload", function() { smarthome.changeListener.suppressErrors(); smarthome.changeListener.closeConnection(); + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.removeEventListener("change", updateTheme); + } + + window.removeEventListener("storage", handleStorageEvent); + + if (smarthome.UI.webAudioEnabled) { + smarthome.playAudioUrlListener.source.close(); + } }); }); })({ @@ -3083,6 +3433,8 @@ secondaryColorAttribute: "data-secondary-color", controlButton: "button", buttonActiveClass: "mdl-button--accent", + buttonIcon: ".mdl-button-icon", + buttonIconText: ".mdl-button-icon-text", modal: ".mdl-modal", modalContainer: ".mdl-modal__content", selectionRows: ".mdl-form__selection-rows", @@ -3091,6 +3443,7 @@ formHidden: "mdl-form--hidden", formControls: ".mdl-form__control", formRowHidden: "mdl-form__row--hidden", + cell12Col: "mdl-cell--12-col", formValue: ".mdl-form__value", formRadio: ".mdl-radio", formRadioControl: ".mdl-radio__button", @@ -3104,6 +3457,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", diff --git a/bundles/org.openhab.ui.basic/web-src/static.js b/bundles/org.openhab.ui.basic/web-src/static.js new file mode 100644 index 0000000000..2faa8d8829 --- /dev/null +++ b/bundles/org.openhab.ui.basic/web-src/static.js @@ -0,0 +1,75 @@ +/** + * openHAB BasicUI javascript for the static page (page listing all sitemaps) + * + * @author Laurent Garnier — initial version + */ + +/*eslint-env browser */ +/*eslint no-undef:2*/ +/*eslint no-new:0 */ +/*eslint no-underscore-dangle:0*/ + +(function() { + "use strict"; + + var + smarthome = {}; + + function UI(root) { + var + _t = this; + + _t.root = root; + + _t.updateTheme = function() { + var + oldValue, + newValue; + + oldValue = _t.theme; + newValue = window.localStorage.getItem("openhab.ui:theme.dark"); + if (newValue !== "light" && newValue !== "dark") { + newValue = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light"; + } + _t.theme = newValue; + if (oldValue !== newValue) { + _t.root.body.setAttribute("data-theme", newValue); + } + }; + } + + document.addEventListener("DOMContentLoaded", function() { + smarthome.UI = new UI(document); + smarthome.UI.updateTheme(); + + document.querySelector(".navigation__button-settings").addEventListener("click", function() { + location.href = location.href.replace("\/basicui\/app", "/basicui/app/settings"); + }); + + function handleStorageEvent(event) { + if (event.key === "openhab.ui:theme.dark") { + smarthome.UI.updateTheme(); + } + } + + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.addEventListener("change", smarthome.UI.updateTheme); + } + + window.addEventListener("storage", handleStorageEvent); + + window.addEventListener("beforeunload", function() { + if (window.matchMedia) { + var + colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + colorSchemeQuery.removeEventListener("change", smarthome.UI.updateTheme); + } + + window.removeEventListener("storage", handleStorageEvent); + }); + }); +})(); diff --git a/features/openhab-ui-external/src/main/resources/conf/basicui.cfg b/features/openhab-ui-external/src/main/resources/conf/basicui.cfg index 6b690db5e2..42639eca0f 100644 --- a/features/openhab-ui-external/src/main/resources/conf/basicui.cfg +++ b/features/openhab-ui-external/src/main/resources/conf/basicui.cfg @@ -1,11 +1,3 @@ -# Defines the UI theme. -# -#theme=bright - -# Defines whether UI renders icons for the widgets or not. -# -#enableIcons=true - # If enabled, any SVG icon provided by the openHAB icon server will automatically be converted to an # inline SVG in the WEB page, allowing control of its color with the sitemap widget property "iconcolor" # in the case where the SVG icon sets "currentColor" as the fill color. Note that this will work with @@ -16,27 +8,6 @@ # openHAB icons from the classic icon set. #inlineSvg=false -# If enabled, the UI will render iconify icons directly by downloading them from the Internet and -# caching them in the WEB browser. If disabled, the UI will use the standard method by requesting the -# server icon proxy and assuming iconify icons are installed on the server. Default is disabled -#enableIconify=false - -# When enabled, changes the layout so that more widgets can fit on the screen. -# -#condensedLayout=false - -# The number of columns to consider to fill the grid in large screen width (desktop) and medium -# screen width (tablet). -#nbColumns=3-2 - -# Displays all widget states in uppercase. -# -#capitalizeValues=false - -# Play audio sent to the web audio sink. -# -#webAudio=false - # The sitemap to show if no parameter is passed. # #defaultSitemap=