From 0ee7c2772c0c6c9c9b088d21d479c1cfdda3b093 Mon Sep 17 00:00:00 2001 From: jemu75 Date: Wed, 10 Apr 2024 22:00:02 +0200 Subject: [PATCH] v4.0.35-beta --- README.md | 26 +++- public/CHANGELOG.md | 6 + src/components/OptionsMenu.vue | 19 ++- src/components/PanelCard.vue | 8 +- src/components/SettingsHeader.vue | 34 +++++ src/locales/de.json | 9 +- src/locales/en.json | 9 +- src/stores/fhem.js | 73 ++++++++--- src/views/SettingsView.vue | 18 +-- www/fhemapp4/CHANGELOG.md | 8 +- ...ew-0bba875a.js => DevicesView-da3ae322.js} | 2 +- ...-e53fbc35.js => InternalsView-dc29562a.js} | 2 +- www/fhemapp4/assets/PanelCard-4d67dc5e.js | 17 --- www/fhemapp4/assets/PanelCard-c745d8b0.js | 17 +++ www/fhemapp4/assets/SettingsView-bce63ac5.js | 23 ++++ www/fhemapp4/assets/SettingsView-d657d312.js | 23 ---- .../{index-617f058f.js => index-7769f5f8.js} | 2 +- www/fhemapp4/assets/index-8e61831a.js | 120 ------------------ www/fhemapp4/assets/index-cea5b6ce.js | 120 ++++++++++++++++++ www/fhemapp4/index.html | 2 +- 20 files changed, 331 insertions(+), 207 deletions(-) rename www/fhemapp4/assets/{DevicesView-0bba875a.js => DevicesView-da3ae322.js} (86%) rename www/fhemapp4/assets/{InternalsView-e53fbc35.js => InternalsView-dc29562a.js} (90%) delete mode 100644 www/fhemapp4/assets/PanelCard-4d67dc5e.js create mode 100644 www/fhemapp4/assets/PanelCard-c745d8b0.js create mode 100644 www/fhemapp4/assets/SettingsView-bce63ac5.js delete mode 100644 www/fhemapp4/assets/SettingsView-d657d312.js rename www/fhemapp4/assets/{index-617f058f.js => index-7769f5f8.js} (98%) delete mode 100644 www/fhemapp4/assets/index-8e61831a.js create mode 100644 www/fhemapp4/assets/index-cea5b6ce.js diff --git a/README.md b/README.md index 3c42ae3f..015e318c 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ Diese sind u.a. beim Betrieb von **FHEMApp** auf einem separaten Web-Server nöt |server|url bzw. IP-Adresse unter der FHEM erreichbar ist|fhem| |port|Port über den FHEM erreichbar ist|8083| |path|Pfad der FHEM Installation|fhem| -|dark|Festlegen ob **FHEMApp** im dunklen Farbschema geöffnet wird|1 +|dark|Festlegen ob **FHEMApp** im dunklen Farbschema geöffnet wird (siehe auch [Farbschema](#farbschema))|1 |lang|Sprache in der **FHEMApp** geöffnet wird|de, en, ...| |xhr|Umschaltung auf Longpoll wenn Browser kein websocket unterstützt|1| |loglevel|Detailgrad der Protokollierung für Fehleranalyse über die Browserkonsole. Ab dem loglevel 7 wird die Kopfzeile von **FHEMApp** umgeschaltet und ein Infosymbol angzeigt. Bei Klick auf das Infosymbol werden weitere Systeminformationen von **FHEMApp** angezeigt. (*1=status, 2=error, 3=warnings, 4=infos, 5=all request to fhem, 6=received events from fhem, 7=details, 8=all received events from FHEM*)|1...8| @@ -76,10 +76,30 @@ Nachdem du Einstellungen in **FHEMApp** angepasst hast, müssen diese gespeicher ![](./docs/media/example_settings_4.png)*Beispiel für Einstellungen* -# Kopfzeile +# Allgemeine Einstellungen + +## Kopfzeile In den Einstellungen für die Kopfzeile kann die Anzeige für das aktuelle Datum, die Uhrzeit und die aktuelle Navigationauswahl aktiviert werden. Die Anzeige für Datum und Uhrzeit erfolgt nur in der Desktopansicht. In der mobilen Ansicht werden Datum und Uhrzeit nicht angezeigt. Die Anzeige für die Navigationsauswahl erfolgt nur in der mobilen Ansicht. Weiterhin kann ein Hintergrundbild für die Kopfzeile festgelegt werden. Die Verwendung des Farbfilters mit einer [CSS Linear Gradient Definition](https://www.w3schools.com/css/css3_gradients.asp) ermöglicht ein Anpassung des Hintergrundbildes an das festgelegte Farbschema. + +## Farbschema +In **FHEMApp** werden zwei Farbschemen (dunkel und hell) unterstützt. Die einzelnen Farben können für beide Farbschemen wie im Abschnitt [Farben](#farben) beschrieben, angepasst werden. Beim Öffnen von **FHEMApp** wird das Farbschema (dunkel bzw. hell) aus den Einstellungen des Browsers bzw. des Betriebssystems verwendet. Zusätzlich kann das Farbschema wie folgt gesteuert werden. +1. über den URL-Parameter `dark` (siehe auch [zusätzliche URL-Parameter](#zusätzliche-url-parameter)) +2. über ein FHEM Reading +3. über das Optionsmenü (siehe auch [Optionsmenü](#optionsmenü)) + +Wenn das Farbschema über den **URL-Parameter** `dark` festgelegt wird, dann wird **FHEMApp** in diesem geöffnet und die Browsereinstellung bzw. Betriebssystemeinstellung ignoriert. + +Wenn das Farbschema über ein **FHEM Reading** gesteuert wird, dann wird die Browerseinstellung bzw. Betriebssystemeinstellung und (sofern festgelegt) der URL-Parameter `dark` ignoriert. Jede Änderung des FHEM Reading hat dann eine Umschaltung aller gerade geöffneten **FHEMApp's** zur Folge. Das festgelegte FHEM Reading wird auf seinen Wahrheitswert geprüft. Wenn dieses zutrifft, dann wird **FHEMApp** in das dunkle Farbschema geschaltet. Ansonsten wird **FHEMApp** in das helle Farbschema geschaltet. + +|Parameter|Beschreibung| +|---|---| +|reading|siehe Parameter [reading](#konfiguration-der-elemente)| +|value|siehe Parameter [value](#konfiguration-der-elemente)| + +Die Umschaltung des Farbschema über das **Optionsmenü** kann zur Laufzeit immer erfolgen, wird jedoch nicht gespeichert. + ## Optionsmenü Durch Aktivierung der folgenden Optionen wird das Optionsmenü oben rechts in der Kopfleiste eingeblendet. ![](./docs/media/example_option_menu.png) @@ -608,7 +628,7 @@ Die alternativen Beschriftungen können somit auch für die Erstellung mehrsprac ![](./docs/media/example_settings_5.png)
*Beispiel für ein angepasstes Navigationsmenü* # Farben -In **FHEMApp** können altrnativ zu hexadezimalen Farbangaben auch Farbvariablen eingesetzt werden. Damit können Themen erstellt und Farben schnell angepasst werden. Grundsätzlich steht ein helles und ein dunkles Farbschema für jede Instanz von **FHEMApp** zur Verfügung. +In **FHEMApp** können altrnativ zu hexadezimalen Farbangaben auch Farbvariablen eingesetzt werden. Damit können Themen erstellt und Farben schnell angepasst werden. Grundsätzlich steht ein helles und ein dunkles Farbschema für jede Instanz von **FHEMApp** zur Verfügung. (siehe auch [Farbschema](#farbschema)) Neben frei definierbaren Farbvariablen, die Elementdefinitionen zur Angabe von Farbwerten eingesetzt werden können, gibt es feste Farbvariablen. diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md index 5c2481ad..d057af58 100644 --- a/public/CHANGELOG.md +++ b/public/CHANGELOG.md @@ -1,3 +1,9 @@ +# v4.0.35-beta (10.04.2024) +## OptionsMenu +- App Update Function +## Core +- Changing DarkMode over FHEM reading +- Solving unicode problem https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem # v4.0.34-beta (29.03.2024) ## Panel Button - When selecting the type "route" on click/longClick/longRelease, individual panels can now also be addressed diff --git a/src/components/OptionsMenu.vue b/src/components/OptionsMenu.vue index 77a14071..2d4b0ad5 100644 --- a/src/components/OptionsMenu.vue +++ b/src/components/OptionsMenu.vue @@ -14,12 +14,14 @@ presets = { darkMode: { name: 'darkMode', title: "%t(_app.options.darkMode)" ,icon: 'mdi-theme-light-dark' }, reloadPage: { name: 'reloadPage', title: "%t(_app.options.reload)", icon: 'mdi-reload' }, - settings: { name:'settings', title: "%t(_app.options.settings)", icon: 'mdi-cogs' } + settings: { name:'settings', title: "%t(_app.options.settings)", icon: 'mdi-cogs' }, + update: { name: 'update', title: "%t(_app.options.update)", icon: 'mdi-cloud-download-outline' } } if(opts.showDarkMode) res.push(presets.darkMode) if(opts.showReloadPage) res.push(presets.reloadPage) if(opts.showSettings) res.push(presets.settings) + if(opts.showUpdate && fhem.app.updateAvailable) res.push(presets.update) res.push(...opts.commands) @@ -38,6 +40,8 @@ if(option.name === 'settings') router.push({ name: 'settings', query: router.currentRoute.value.query }) if(option.name === 'darkMode') fhem.changeDarkMode() + + if(option.name === 'update') fhem.appUpdate() if(option.cmd) fhem.request('text', option.cmd) } @@ -46,17 +50,22 @@