v.3.33.0

README.md

@@ -211,8 +211,8 @@ In den Template-Dateien können folgende Eigenschaften definiert werden. Die Zuw
       "leftLong": ["reading:value:set_param"],
       "leftLongRelease": ["reading:value:set_param"],
       "leftMenu": ["text:set_param"],
-      "text": ["reading:value:text"],
-      "text2": ["reading:value:text"],
+      "text": ["reading:value:text:align"],
+      "text2": ["reading:value:text:align"],
       "slider": ["reading:value:set_param:current:min:max:steps"],
       "midBtn": ["reading:value:icon:disabled"],
       "midClick": ["reading:value:set_param"],
@@ -271,8 +271,8 @@ Es werden die Icons aus der [Material Designs Icon Bibliothek](https://materiald
 |main|leftLong|reading:wert:cmd|defniert welches FHEM-Kommando bei langem Halten der linken Taste abgesendet wird. [siehe auch](#hinweis-zur-definition-von-fhem-Kommandos)|
 |main|leftLongRelease|reading:wert:cmd|defniert welches FHEM-Kommando beim loslassen nach langem Halten der linken Taste abgesendet wird. [siehe auch](#hinweis-zur-definition-von-fhem-Kommandos)|
 |main|leftMenu|text:cmd|definiert für das **linke Menü** die Texte und FHEM-Kommandos. Wenn dieses Element zugewiesen wird, klappt bei Klick auf die linke Taste ein Menü auf. *Hinweis:* leftClick, leftLong und leftLongRelease stehen bei Zuweisung des Menüs nicht zur Verfügung.|
-|main|text|reading:wert:text|definiert den **ersten Text** der in der Mitte angezeigt wird|
-|main|text2|reading:wert:text|definiert den **zweiten Text** der in der Mitte angezeigt wird *Hinweis:* bei Verwendung von Tasten sollte auf die Anzeige eines zweiten Wertes verzichtet werden, da die Breite des Templates im Normalfall nicht ausreicht|
+|main|text|reading:wert:text:align|definiert den **ersten Text** der in der Mitte angezeigt wird. Der Text wird im Standard zentriert ausgegeben und kann mit `left` bzw. `right` unter *align* ausgerichtet werden.|
+|main|text2|reading:wert:text:align|definiert den **zweiten Text** der in der Mitte angezeigt wird. Der Text wird im Standard zentriert ausgegeben und kann mit `left` bzw. `right` unter *align* ausgerichtet werden. *Hinweis:* bei Verwendung von Tasten sollte auf die Anzeige eines zweiten Wertes verzichtet werden, da die Breite des Templates im Normalfall nicht ausreicht|
 |main|slider|reading:wert:cmd:current:min:max:steps|stellt einen **Slider** in der Mitte dar. Über das Element `text` kann der Slider mit einem zusätzlichen Label versehen werden. *Wichtig:* `cmd` muss die Ersetzung *%v* (den aktuellen Wert des Sliders) enthalten. `current` sollte nur die Ersetzung *%n* enthalten, damit der Slider den aktuellen Wert des Readings anzeigt. `min` und `max` begrenzen die Sliderwerte. `steps` definiert die Schritte in denen der Slider die Werte verändert. *Beispiel:* `["pct::pct %v:%n:0:100:1"]` verbindet das Reading `pct` mit einem Slider und begrenzt die Werte auf 0-100 und verändert die Werte jeweils um 1|
 |main|midtBtn|reading:wert:icon:disabled:color (alternativ: icon)|definiert welches *Icon* auf der mittlerren Taste angezeigt wird. Optional kann das Flag *disabled* und die Farbe des Icons gesetzt werden. Icon Bibliothek [siehe](https://materialdesignicons.com/)|
 |main|midClick|reading:wert:cmd|defniert welches FHEM-Kommando bei Klick auf die mittlere Taste abgesendet wird. [siehe auch](#hinweis-zur-definition-von-fhem-Kommandos)|
@@ -1018,7 +1018,7 @@ Da *sysmon* kein Standard-Template ist, könnt ihr nur ausgewählte Eigenschafte
   subTitle: ["reading:value:text"],
   "main": [
     {
-      "name": string,
+      "name": ["reading:value:text"],
       "bar": ["reading:value:level:color:min:max"],
       "subText": ["reading:value:text"]
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhemapp",
-  "version": "3.32.0",
+  "version": "3.33.0",
   "private": true,
   "author": "jemu75",
   "scripts": {

src/components/TemplDefault.vue

@@ -141,7 +141,7 @@
 
               <v-col
                 v-if="!level.midBtn && !level.slider"
-                align="center"
+                :align="level.textAlign"
               >
                 <div class="headline font-weight-bold">
                   {{ level.text }}
@@ -150,7 +150,7 @@
 
               <v-col
                 v-if="level.text2 && !level.midBtn && !level.slider"
-                align="center"
+                :align="level.text2Align"
               >
                 <div class="headline font-weight-bold">
                   {{ level.text2 }}
@@ -654,7 +654,9 @@
             leftMenu: [],
             leftMenuIdx: -1,
             text: '',
+            textAlign: '',
             text2: '',
+            text2Align: '',
             midBtn: '',
             midBtnDisabled: false,
             midBtnColor: '',
@@ -692,8 +694,10 @@
           let mainRightMenu = this.createMenu(this.item.Options.setup.main[idx].rightMenu);
 
           this.main[lvl].text = mainText[0] || '';
+          this.main[lvl].textAlign = mainText[1] || 'center';
           this.main[lvl].text2 = mainText2[0] || '';
-
+          this.main[lvl].text2Align = mainText2[1] || 'center';
+          
           this.main[lvl].leftBtn = mainLeftBtn[0] || '';
           this.main[lvl].midBtn = mainMidBtn[0] || '';
           this.main[lvl].rightBtn = mainRightBtn[0] || '';

src/components/TemplSysmon.vue

@@ -312,13 +312,13 @@
 
       doList() {
         for(var el of this.setup.main) {
-          let idx = this.vals.list.map((e) => e.name).indexOf(el.name);
-
+          let name = this.$fhem.handleVals(this.item, el.name); 
           let bar = this.$fhem.handleVals(this.item, el.bar);
           let subText = this.$fhem.handleVals(this.item, el.subText);
+          let idx = this.vals.list.map((e) => e.name).indexOf(name[0] || '');
 
           let listItem = {
-            name: el.name,
+            name: name[0] || '',
             isBar: bar.length > 0 ? true : false,
             value: bar[0] || 0,
             color: bar[1] || 'success',

www/fhemapp/index.html

@@ -1 +1 @@
-<!doctype html><html lang="de"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="icon" href="favicon.png"><link rel="apple-touch-icon" href="apple-touch-icon.png"><title>fhemapp</title><script defer="defer" type="module" src="js/chunk-vendors.38de9a7d.js"></script><script defer="defer" type="module" src="js/app.b53bd089.js"></script><link href="css/chunk-vendors.9d4b34aa.css" rel="stylesheet"><link href="css/app.0cad59f4.css" rel="stylesheet"><script defer="defer" src="js/chunk-vendors-legacy.bb1050dc.js" nomodule></script><script defer="defer" src="js/app-legacy.fa4741e6.js" nomodule></script></head><body><noscript><strong>We're sorry but fhemapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang="de"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="icon" href="favicon.png"><link rel="apple-touch-icon" href="apple-touch-icon.png"><title>fhemapp</title><script defer="defer" type="module" src="js/chunk-vendors.38de9a7d.js"></script><script defer="defer" type="module" src="js/app.7299ecff.js"></script><link href="css/chunk-vendors.9d4b34aa.css" rel="stylesheet"><link href="css/app.0cad59f4.css" rel="stylesheet"><script defer="defer" src="js/chunk-vendors-legacy.bb1050dc.js" nomodule></script><script defer="defer" src="js/app-legacy.ec76b355.js" nomodule></script></head><body><noscript><strong>We're sorry but fhemapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>