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..43e8d52dcf 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 9ca1d19c0f..6aac3c1bca 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 @@ -388,18 +388,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 +434,13 @@ public void setConfig(WebAppConfig config) { this.config = config; } - protected @Nullable String localizeText(String key) { - String result = ""; + protected String localizeText(String key) { + String result = null; 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..5561643712 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,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..22d8398cf1 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. @@ -91,16 +93,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 @@ -117,7 +112,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,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,116 @@ 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"), "enableIcons", + "openhab.ui.basic:enableIcons", "enabled", "disabled", true, sb); + // renderSwitchSetting(localizeText("@text/ui.config.basic.enableIconify.label"), + // localizeText("@text/ui.config.basic.enableIconify.description"), "enableIconify", + // "openhab.ui.basic:enableIconify", "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); + 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[] { "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("chartTextSize", localizeText("@text/ui.config.basic.chartTextSize.option.96"), "", rows, jsonObject); + for (String val : new String[] { "120", "144", "168", "192", "216", "240", "264", "288" }) { + buildRow("chartTextSize", localizeText("@text/ui.config.basic.chartTextSize.option." + val), val, rows, + jsonObject); } - listSnippet = listSnippet.replace("%items%", sb.toString()); + sb.append(getSnippet("setting_selection") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.chartTextSize.label"))) + .replace("%description%", escapeHtml(localizeText("@text/ui.config.basic.chartTextSize.description"))) + .replace("%key%", "openhab.ui.basic:chartTextSize").replace("%default%", "") + .replace("%value_map%", escapeHtml(jsonObject.toString())).replace("%rows%", rows.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 Settings") // + .replace("%htmlclass%", "") // + .replace("%relpath%", "../") // + .replace("%script%", "settings.js") // + .replace("%navigation%", "navigation-page") // + .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%", "")); + } + + 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..0dc5310683 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,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..4c4b4bb8f2 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml +++ b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml @@ -6,25 +6,6 @@ https://openhab.org/schemas/config-description-1.0.0.xsd"> - - - Defines the UI theme. - - - - - - bright - - - - Defines whether UI renders icons for the widgets or not. - - - - - true - If enabled, any SVG icon provided by the openHAB icon server will automatically be converted to an @@ -52,15 +33,6 @@ false - - - When enabled, changes the layout so that more widgets can fit on the screen. - - - - - false - The number of columns to consider to fill the grid in large screen width (desktop) and medium screen @@ -74,24 +46,6 @@ 3-2 - - - Displays all widget states in uppercase. - - - - - false - - - - Play audio sent to the web audio sink. - - - - - false - The sitemap to show if no parameter is passed. diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties index 779e09224a..5a79180670 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,26 @@ 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.chartSize.label = Chart Size +ui.config.basic.chartSize.description = Define the size of the chart. +ui.config.basic.chartSize.option.default = Default +ui.config.basic.chartSize.option.480x240 = 480 x 240 +ui.config.basic.chartSize.option.600x300 = 600 x 300 +ui.config.basic.chartSize.option.720x360 = 720 x 360 +ui.config.basic.chartSize.option.840x420 = 840 x 420 +ui.config.basic.chartSize.option.960x480 = 960 x 480 +ui.config.basic.chartTextSize.label = Text Size In Chart +ui.config.basic.chartTextSize.description = Adjusts the size of text in the charts. Default (96 DPI) is fine on a desktop but a greater value will be better on a phone with high resolution screen. +ui.config.basic.chartTextSize.option.96 = 1x = 96 DPI (default)) +ui.config.basic.chartTextSize.option.120 = 1.25x = 120 DPI +ui.config.basic.chartTextSize.option.144 = 1.5x = 144 DPI +ui.config.basic.chartTextSize.option.168 = 1.75x = 168 DPI +ui.config.basic.chartTextSize.option.192 = 2x = 192 DPI +ui.config.basic.chartTextSize.option.216 = 2.25x = 216 DPI +ui.config.basic.chartTextSize.option.240 = 2.5x = 240 DPI +ui.config.basic.chartTextSize.option.264 = 2.75x = 264 DPI +ui.config.basic.chartTextSize.option.288 = 3x = 288 DPI 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..2d12b14382 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 @@ -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..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_selection.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setting_selection.html new file mode 100644 index 0000000000..5772c7bc9b --- /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..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 0fceebb73d..0fb330f87c 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,10 +116,22 @@ padding-right: $mdl-grid-spacing + 16px; } } + &--setting { + height: $form-row-desktop-height-condensed; + border-bottom: none; + } &--hidden { display: 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; @@ -255,20 +272,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..ba3285ad84 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; @@ -82,14 +50,16 @@ body { color: var(--container-text-color, #616161) !important; } -.mdl-form__row { +.mdl-form__row, +.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..6e0796bba0 --- /dev/null +++ b/bundles/org.openhab.ui.basic/web-src/settings.js @@ -0,0 +1,448 @@ +/** + * 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 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..1d3c48125e 100644 --- a/bundles/org.openhab.ui.basic/web-src/smarthome.js +++ b/bundles/org.openhab.ui.basic/web-src/smarthome.js @@ -369,6 +369,9 @@ _t.iconContainer = _t.formRow.querySelector(o.formIcon); _t.label = _t.formRow.querySelector(o.formLabel); } + if (_t.iconContainer !== null && _t.iconContainer.style.color === "") { + _t.iconContainer.style.colorScheme = smarthome.UI.theme; + } _t.findIcon = function() { var @@ -629,9 +632,19 @@ _t.setIconColor = function(color) { if (_t.iconContainer !== null) { _t.iconContainer.style.color = color; + _t.iconContainer.style.colorScheme = ""; } }; + _t.applyLocalSettings = function() { + if (_t.iconContainer !== null && _t.iconContainer.style.color === "") { + _t.iconContainer.style.colorScheme = smarthome.UI.theme; + } + _t.applyLocalSettingsPrivate(); + }; + + _t.applyLocalSettingsPrivate = function() {}; + _t.destroy = function() { if (_t.icon !== null && _t.iconSource === "oh") { _t.icon.removeEventListener("load", _t.convertToInlineSVG); @@ -676,6 +689,7 @@ _t.setValueColor = function() {}; _t.setIconColor = function() {}; _t.suppressUpdate = function() {}; + _t.applyLocalSettings = function() {}; _t.destroy = function() {}; } @@ -707,27 +721,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 +797,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 +961,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.chartTextSize !== null) { + _t.url = _t.url + "&dpi=" + smarthome.UI.chartTextSize; + } - _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 +997,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 */ @@ -1077,6 +1140,17 @@ } }; + _t.applyLocalSettingsPrivate = function() { + var + buttons = [].slice.call(_t.parentNode.querySelectorAll(o.buttonIcon)); + + buttons.forEach(function(button) { + button.style.colorScheme = smarthome.UI.theme; + }); + }; + + _t.applyLocalSettingsPrivate(); + _t.buttons.forEach.call(_t.buttons, function(button) { var icon, @@ -2286,6 +2360,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 @@ -2332,6 +2447,88 @@ _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: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:chartTextSize") { + oldValue = _t.chartTextSize; + newValue = window.localStorage.getItem("openhab.ui.basic:chartTextSize"); + _t.chartTextSize = newValue; + if (oldValue !== newValue) { + for (id in smarthome.dataModel) { + smarthome.dataModel[id].applyLocalSettings(); + } + } + } + + 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:enableIcons") { + newValue = window.localStorage.getItem("openhab.ui.basic:enableIcons"); + _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: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: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"); + } + } + }; + function replaceContent(xmlResponse) { var page = xmlResponse.documentElement, @@ -2492,6 +2689,8 @@ appendControl(new ControlSlider(e)); break; case "chart": + appendControl(new ControlChart(e)); + break; case "image": appendControl(new ControlImage(e, true)); break; @@ -2547,6 +2746,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 +3214,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 +3272,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", @@ -3104,6 +3294,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..e62b97ce5a --- /dev/null +++ b/bundles/org.openhab.ui.basic/web-src/static.js @@ -0,0 +1,75 @@ +/** + * openHAB BasicUI javascript + * + * @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); + }); + }); +})();