v4.2.0

.vscode/tasks.json

@@ -18,6 +18,12 @@
 			],
 			"label": "npm: test:unit",
 			"detail": "vitest"
+		},
+		{
+			"label": "Copy Build to FHEM appache",
+			"type": "shell",
+			"command": "rsync -rv --stats www/fhemapp4 [email protected]:/var/www/html",
+			"problemMatcher": []
 		}
 	]
 }

README.md

@@ -493,7 +493,7 @@ Zeigt einen Button an, der beim Klicken ein DropDown-Menü öffnet. Wenn dieses
 ### Level Element Menu menu
 Definiert die Menüeinträge, die beim Öffnen des DropDown-Menü angezeigt werden. Bei Klick auf einen Menüpunkt wird der hinterlegte Befehl an FHEM gesendet. Im Gegensatz zu normalen Definitionen, werden zur Anzeige der Menüpunkte **alle** Definitionen verwendet, deren Bedingungen zutreffen.
 
-Menüeinträge können auch dynamisch von FHEM übergeben werden. Der Rückgabewert vom FHEM Befehl *get* bzw. dem *reading* oder *attribute* muss dabei durch einen der folgenden Zeichen (`,` `|` `\n`) getrennt werden. Bei dynamisch erzeugten Menüeinträgen muss der FHEM *get-Befehl* oder *%s* bei Verwendung eines *reading* bzw. *attribute* in den Parameter `name` eingetragen werden. Im Parameter `cmd` kann dann die Ersetzung **%v** verwendet werden um den aktuellen Menüeinträge über einen *set-Befehl* an FHEM zu übergeben.
+Menüeinträge können auch dynamisch von FHEM übergeben werden. Der Rückgabewert vom FHEM Befehl *get* bzw. dem *reading* oder *attribute* muss dabei durch eines der folgenden Zeichen (`,` `|` `\n`) getrennt werden. Bei dynamisch erzeugten Menüeinträgen muss der FHEM *get-Befehl* oder *%s* bei Verwendung eines *reading* bzw. *attribute* in den Parameter `name` eingetragen werden. Im Parameter `cmd` kann dann die Ersetzung **%v** verwendet werden, um die aktuellen Menüeinträge über einen *set-Befehl* an FHEM zu übergeben.
 
 |Parameter|Default|Beschreibung|
 |---|---|---|
@@ -607,6 +607,7 @@ Parameter|Default|Beschreibung|
 |value||siehe Parameter [value](#konfiguration-der-elemente)|
 |cmd||FHEM Kommando. Die Ersetzung **%v** repräsentiert den aktuellen Wert des Colorpickers. (siehe auch [Ersetzungen](#ersetzungen)) [string]|
 |current||aktueller Wert des Colorpickers [string]|
+|type|hex|Typ des RGB-Wertes *hex* oder *hue* [string]|
 ## Bereich Info
 Der Infobereich befindet sich im unteren Teil. Er dient dazu, weitere Werte des Sonsors oder Aktors in Form von Icons oder Text darzustellen. Es können bis zu 6 Spalten für die Anzeige von Icons bzw. Texten verwendet werden.
 ### Element info

public/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.2.0 (28.05.2024)
+## Panel Colorpicker
+- handling for hue values implemented
+## Default Templates
+- add menu for favourites at sonosplayer
+## Core
+- Optimization reconnect to FHEM Server
+## Panel
+- bugfix for vertical dividers in mainlevels
+- bugfix for replacing devicekeys in FHEM set commands
+## Settings
+- bugfix for saving large configurations
 # v4.1.4 (20.05.2024)
 ## App
 - correct translations for settings

public/templates/sonosplayer.json

@@ -101,7 +101,7 @@
 			"level": {
 				"left1": "btn",
 				"mid": "slider",
-				"right2": "info"
+				"right2": "menu"
 			},
 			"left1": {
 				"btn": [
@@ -111,19 +111,17 @@
 				"click": [
 					"player-GroupMute:1:set player mute 0",
 					"player-GroupMute:0:set player Mute 1"
-				],
-				"size": [
-					"::2"
 				]
 			},
 			"mid": {
 				"slider": [
-					"player-GroupVolume::set player GroupVolume %v:%n(0):on:0:40:1"
-				]
+					"player-GroupVolume::set player GroupVolume %v:%n(0):on:0:60:1"
+				],
+				"size": ["::8"]
 			},
 			"right2": {
-				"size": [
-					"::1"
+				"menu": [
+					"player-FavouritesListAlias::%s:set player StartFavourite %v:regExp"
 				]
 			}
 		},

src/App.vue

@@ -43,7 +43,7 @@
 
 <template>
   <v-app class="noselect">
-    <v-layout v-show="fhem.app.configLoaded">
+    <v-layout>
       <v-overlay
         :model-value="fhem.app.threads.length > 0"
         class="align-center justify-center">
@@ -77,7 +77,7 @@
         <v-divider/>
       </v-navigation-drawer>
 
-      <v-app-bar :order="mobile ? 0 : -1" :color="fhem.app.settings.loglevel > 6 ? 'error' : 'primary'">
+      <v-app-bar v-if="fhem.app.isLoaded" :order="mobile ? 0 : -1" :color="fhem.app.settings.loglevel > 6 ? 'error' : 'primary'">
         <template v-if="fhem.app.header.imageUrl && fhem.app.settings.loglevel < 7" v-slot:image>
           <v-img :src="fhem.app.header.imageUrl" cover :gradient="fhem.app.header.imageGradient"></v-img>        
         </template>
@@ -98,7 +98,7 @@
 
       <v-main>
         <v-container fluid class="pa-2">
-          <v-alert v-if="fhem.app.message"
+          <v-alert v-if="fhem.app.message && fhem.app.message.type"
             closable            
             :type="fhem.app.message.type"
             :title="$t(fhem.app.message.title)"

src/components/AppNavigation.vue

@@ -23,7 +23,7 @@
 <template>
   <template v-for="(item, idx) of items">
     <v-list-item
-      v-if="(!item.group || item.group.length < 1) && !isChip"
+      v-if="(!item.group || item.group.length < 1) && !isChip"      
       :title="fhem.replacer(item.title, '') || item.name"
       :prepend-icon="item.icon"
       rounded="pill"

src/components/PanelCard.vue

@@ -146,7 +146,7 @@
 </script>
 
 <template>
-    <v-card variant="tonal" v-if="fhem.app.isReady">
+    <v-card variant="tonal">
         <v-row no-gutters>
             <v-col v-if="panel.status.bar">
                 <v-progress-linear

src/components/PanelMainBtn.vue

@@ -34,14 +34,13 @@
     }
 
     function doCmd(obj) {
-        let cmdList
+        let cmdList = []
 
         if(obj.cmd) {
             if(obj.type === 'cmd') {
                 cmdList = obj.cmd.split(';')
-                for(const [idx, cmd] of Object.entries(cmdList)) {
-                    cmdList[idx] = cmd
-                    for(const device of props.devices) cmdList[idx] = cmdList[idx].replace(device.split(':')[0], device.split(':')[1])
+                for(const [idx] of Object.entries(cmdList)) {
+                    for(const device of props.devices) cmdList[idx] = cmdList[idx].replace(' ' + device.split(':')[0] + ' ', ' ' + device.split(':')[1] + ' ')
                 } 
 
                 fhem.request('text', cmdList.join(';'))

src/components/PanelMainColorpicker.vue

@@ -14,25 +14,28 @@
     const fhem = useFhemStore()
 
     const color = computed(() => {
-        return fhem.handleDefs(props.el.picker, ['cmd', 'current'],['', false])
+        return fhem.handleDefs(props.el.picker, ['cmd', 'current', 'type'],['', false, 'hex'])
     })
 
-    function doCmd(val) {
-        let hex = hslToHex(val, 50, 100),
-            cmd = color.value.cmd,
-            defParts = []
+    function getCurrentVal(obj) {
+        let res = { hue: 0, saturation: 100, luminosity: 50 }
 
-        cmd = cmd.replace('%v', hex)
+        if(obj.type === 'hex') res = hexToHSL(obj.current)
+        if(obj.type === 'hue') res.hue = obj.current || 0
 
-        for(const device of props.devices) {
-            defParts = device.split(':')
-            if(RegExp(defParts[0]).test(cmd)) cmd = cmd.replace(defParts[0], defParts[1])
-        }
+        return res
+    }
+
+    function doCmd(val) {
+        let hex = hslToHex(val, 100, 50),
+            cmd = color.value.cmd.replace('%v', color.value.type === 'hex' ? hex : Math.round(val))
+
+        for(const device of props.devices) cmd = cmd.replace(' ' + device.split(':')[0] + ' ', ' ' + device.split(':')[1] + ' ')
 
         fhem.request('text', cmd)
     }
 
-    function hslToHex(h, l, s) {
+    function hslToHex(h, s, l) {
         l /= 100
         const a = s * Math.min(l, 1 - l) / 100
         const f = n => {
@@ -45,9 +48,9 @@
     }
 
     function hexToHSL(hex) {
-        if(hex.split(' ').length > 1) hex = hex.split(' ').slice(-1)[0]        
+        if(hex && hex.split(' ').length > 1) hex = hex.split(' ').slice(-1)[0]        
 
-        hex = hex.replace(/^#/, '')
+        hex = hex ? hex.replace(/^#/, '') : 0
 
         let bigint = parseInt(hex, 16),
             r = (bigint >> 16) & 255,
@@ -97,7 +100,7 @@
     <v-row>
         <v-spacer></v-spacer>
         <v-col class="ma-4">
-            <ColorPicker v-bind="hexToHSL(color.current)" variant="persistent" @change="doCmd($event)" :style="getSize()"></ColorPicker>
+            <ColorPicker v-bind="getCurrentVal(color)" variant="persistent" @change="doCmd($event)" :style="getSize()"></ColorPicker>
         </v-col>
         <v-spacer></v-spacer>
     </v-row>

src/components/PanelMainMenu.vue

@@ -51,14 +51,15 @@
     }
 
     async function doCmd(cmd) {
-        let defParts = []
+        let cmdList = []
 
-        for(const device of props.devices) {
-            defParts = device.split(':')
-            if(RegExp(defParts[0]).test(cmd)) cmd = cmd.replace(defParts[0], defParts[1])
-        }
+        cmdList = cmd.split(';')
+
+        for(const [idx] of Object.entries(cmdList)) {
+            for(const device of props.devices) cmdList[idx] = cmdList[idx].replace(' ' + device.split(':')[0] + ' ', ' ' + device.split(':')[1] + ' ')
+        } 
 
-        return fhem.request('text', cmd)
+        return fhem.request('text', cmdList.join(';'))
     }
 
     loadMenu()

src/components/PanelMainSlider.vue

@@ -38,10 +38,7 @@
 
         cmd = cmd.replace('%v', newVal.toFixed(decimals))
 
-        for(const device of props.devices) {
-            defParts = device.split(':')
-            if(RegExp(defParts[0]).test(cmd)) cmd = cmd.replace(defParts[0], defParts[1])
-        }
+        for(const device of props.devices) cmd = cmd.replace(' ' + device.split(':')[0] + ' ', ' ' + device.split(':')[1] + ' ')
 
         clearTimeout(timer)
 

src/components/SettingsNavigation.vue

@@ -106,7 +106,7 @@
             :label="$t(preLang + 'title1')"
             v-model="item.title"/>
         </v-col>
-        <v-col cols="12" lg="3" class="pt-3 pr-3">
+        <v-col cols="12" lg="2" class="pt-3 pr-3">
           <v-text-field 
             density="compact" 
             variant="outlined"
@@ -117,13 +117,13 @@
             :append-inner-icon="item.icon"
             v-model="item.icon"/>
         </v-col>
-        <v-col :cols="4" lg="" class="pt-1">
+        <v-col cols="4" lg="" class="pt-1">
           <v-checkbox               
           :hint="$t(preLang + 'groupAsChipsHint')"
             :label="$t(preLang + 'groupAsChips')"
             v-model="item.groupAsChips"/>
         </v-col>
-        <v-col :cols="4" lg="" class="pt-1">
+        <v-col cols="4" lg="" class="pt-1">
           <v-checkbox               
           :hint="$t(preLang + 'sortHint')"
             :label="$t(preLang + 'sort')"
@@ -171,7 +171,7 @@
               :label="$t(preLang + 'title1')"
               v-model="navSettings.newItem.title"/>
           </v-col>
-          <v-col cols="12" lg="3" class="pt-3 pr-3">
+          <v-col cols="12" lg="2" class="pt-3 pr-3">
             <v-text-field 
               density="compact" 
               variant="outlined"

src/components/SettingsPropsMain.vue

@@ -91,7 +91,7 @@
             { type: 'defs', required: false, prop: 'size', def: 'reading:value:size', help: 'level-element-size', assist: 'props' }
         ],
         colorpicker: [
-            { type: 'defs', required: false, prop: 'picker', def: 'reading:value:cmd:current', help: 'level-element-colorpicker-picker', assist: 'props' },
+            { type: 'defs', required: false, prop: 'picker', def: 'reading:value:cmd:current:type', help: 'level-element-colorpicker-picker', assist: 'props' },
             { type: 'defs', required: false, prop: 'divider', def: 'reading:value:divider', help: 'level-element-divider', assist: 'props' },
             { type: 'defs', required: false, prop: 'size', def: 'reading:value:size', help: 'level-element-size', assist: 'props' }
         ]