V3.7.0

README.md

@@ -702,12 +702,18 @@ attr overview_light appOptions { "panel": { "status": ["state:off:aus:0:success"
 #### Definition
 Im FHEM-Device muss im Attribut `appOptions` folgendes eingetragen werden.
 ```
-{ "template": "chart", "chartDef": ["<def1>", "<def2>", ...] }
+{ "template": "chart", "chartDef": ["<def1>", "<def2>", ...], "setup": { } }
 ```
+
 ### Konfiguration von Charts
-Über den Parameter `chartDef` legt ihr fest, welche Daten im Chart angezeigt werden. Jede Linie entspricht dabei einer Definition. Folgende Eigenschaften stehen zur Verfügung:
+Da *Chart* kein Standard-Template ist, könnt ihr nur ausgewählte Eigenschaften über den Parameter `setup` in `appOptions` anpassen. Über den Paramter `size` kann die Templatebreite [siehe](#breite-von-templates) verändert werden. Der Parameter `daysAgo` legt ihr fest, wieviele Tage das Chart beim Laden zurückschaut. Als Standard werden die Daten der letzten 7 Tage `"daysAgo": -7` geladen. Über den Parameter `lineWidth` könnt ihr die Linienbreite der Chartlinien verändern. Als Standard ist `"lineWidth": 3` festgelegt. Über den Parameter `chartDef` legt ihr fest, welche Daten im Chart angezeigt werden. Jede Linie entspricht dabei einer Definition. 
 ```
 "chartDef": ["logsource:reading:text:präfix:axis"],
+"setup": {
+    "size": "string",
+    "daysAgo": number,
+    "lineWidth": number
+}
 ```
 1. **logsource** - dieser Parameter enthält entweder den Name des *FileLog-Devices* oder den Name eures *DbLog-Devices*.
 2. **reading** - wenn ihr auf ein *FileLog-Device* zugreift, genügt hier im Normalfall der Name des *Readings* welches dargestellt werden soll. Wenn euer *FileLog* Readings in mehreren Spalten enthält, dann müsst ihr den Parameter in runde Klammern setzen und *<spalte:reading>* angeben z.B. `(4:temperature)`. Wenn Daten von einem *DbLog-Device* anzeigen wollt, dann müsst ihr den Parameter in runde Klammern setzen und *<device>:<reading>* angeben z.B. `(myTempSensor:temperature)`

src/App.vue

@@ -194,7 +194,7 @@
           header: ''
         }
       },
-      version: 'v3.6.0',
+      version: 'v3.7.0',
       status: {
         color: 'secondary',
         icon: 'mdi-circle',

src/components/TemplChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-col :class="vals.gridSize">
+  <v-col :class="setup.size">
     <v-card
       :dark="this.$vuetify.theme.dark"
       color="secondary"
@@ -113,12 +113,16 @@
 
     data: () => ({
       name: 'chart',
+      setup: {
+        size: 'col-12 col-sm-12 col-md-6 col-lg-4',
+        daysAgo: -7,
+        daysTo: 1
+      },
       vals: {
         title: '',
         mainLevel: 0,
         mainColor: 'success',
         maxSize: false,
-        gridSize: 'col-12 col-sm-12 col-md-6 col-lg-4',
         linkIcon: 'mdi-arrow-expand',
         fromPicker: false,
         from: '',
@@ -140,7 +144,7 @@
             }
           },
           stroke: {
-            curve: 'smooth',
+            curve: 'smooth'
           },
           tooltip: {
             x: {
@@ -191,12 +195,13 @@
           this.vals.gridSize = 'col-12';
           this.vals.linkIcon = 'mdi-arrow-collapse';
         } else {
-          let size = this.$fhem.getEl(this.item, 'Options', 'setup', 'size');
-          if(size) this.vals.gridSize = size;
+          let setup = this.$fhem.getEl(this.item, 'Options', 'setup');
+          if(setup) Object.assign(this.setup, setup);
+          if (this.setup.lineWidth) this.chart.options.stroke.width = this.setup.lineWidth;
         }
 
-        this.vals.from = this.$fhem.getDate(-7);
-        this.vals.to = this.$fhem.getDate(1);
+        this.vals.from = this.$fhem.getDate(this.setup.daysAgo);
+        this.vals.to = this.$fhem.getDate(this.setup.daysTo);
 
         this.chart.options.chart.height = window.innerHeight > 600 && this.vals.maxSize ? parseInt((window.innerHeight - 320)) : 'auto';
         this.chart.options.theme.mode = this.$vuetify.theme.dark ? 'dark' : 'light';

src/components/TemplDefault.vue

@@ -38,8 +38,6 @@
               small
               icon
               :disabled="vals.main.leftBtnDisabled"
-              @mousedown="clickStart('left')"
-              @mouseup="clickEnd('left')"
               @touchstart="clickStart('left')"
               @touchend="clickEnd('left')"
             >
@@ -121,8 +119,6 @@
               small
               icon
               :disabled="vals.main.rightBtnDisabled"
-              @mousedown="clickStart('right')"
-              @mouseup="clickEnd('right')"
               @touchstart="clickStart('right')"
               @touchend="clickEnd('right')"
             >

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><link href="css/chunk-03454508.55c011d2.css" rel="prefetch"><link href="css/chunk-0458398b.c4749bc4.css" rel="prefetch"><link href="css/chunk-098d33d4.61e1e199.css" rel="prefetch"><link href="css/chunk-15fa718e.55c011d2.css" rel="prefetch"><link href="css/chunk-27250ed3.55c011d2.css" rel="prefetch"><link href="css/chunk-2c05d556.cb4d0868.css" rel="prefetch"><link href="css/chunk-57a6c555.611711b5.css" rel="prefetch"><link href="css/chunk-58038582.55c011d2.css" rel="prefetch"><link href="css/chunk-62d9ca09.792facbe.css" rel="prefetch"><link href="css/chunk-72c6e8d8.8d89ed40.css" rel="prefetch"><link href="css/chunk-83618c9a.3058ccc5.css" rel="prefetch"><link href="css/chunk-d584b056.4c33e4ab.css" rel="prefetch"><link href="css/chunk-f90907bc.01cf6fd8.css" rel="prefetch"><link href="js/chunk-03454508.84b6b243.js" rel="prefetch"><link href="js/chunk-0458398b.ff29fd68.js" rel="prefetch"><link href="js/chunk-098d33d4.466fafea.js" rel="prefetch"><link href="js/chunk-15fa718e.f3d4c9ba.js" rel="prefetch"><link href="js/chunk-27250ed3.cac11d8b.js" rel="prefetch"><link href="js/chunk-2c05d556.f53def44.js" rel="prefetch"><link href="js/chunk-2d212bf1.5c618452.js" rel="prefetch"><link href="js/chunk-57a6c555.979b66ca.js" rel="prefetch"><link href="js/chunk-58038582.48f0eca8.js" rel="prefetch"><link href="js/chunk-62d9ca09.da27c615.js" rel="prefetch"><link href="js/chunk-72c6e8d8.c00175b8.js" rel="prefetch"><link href="js/chunk-83618c9a.28a472c7.js" rel="prefetch"><link href="js/chunk-d584b056.39965145.js" rel="prefetch"><link href="js/chunk-f90907bc.7a5c4a6c.js" rel="prefetch"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.ebf1cd7a.js" rel="preload" as="script"><link href="js/chunk-vendors.aacf57ae.js" rel="preload" as="script"><link href="css/chunk-vendors.95431e8e.css" rel="stylesheet"></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><script src="js/chunk-vendors.aacf57ae.js"></script><script src="js/app.ebf1cd7a.js"></script></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><link href="css/chunk-03454508.55c011d2.css" rel="prefetch"><link href="css/chunk-0458398b.c4749bc4.css" rel="prefetch"><link href="css/chunk-098d33d4.61e1e199.css" rel="prefetch"><link href="css/chunk-15fa718e.55c011d2.css" rel="prefetch"><link href="css/chunk-27250ed3.55c011d2.css" rel="prefetch"><link href="css/chunk-2c05d556.cb4d0868.css" rel="prefetch"><link href="css/chunk-57a6c555.611711b5.css" rel="prefetch"><link href="css/chunk-58038582.55c011d2.css" rel="prefetch"><link href="css/chunk-62d9ca09.792facbe.css" rel="prefetch"><link href="css/chunk-72c6e8d8.8d89ed40.css" rel="prefetch"><link href="css/chunk-83618c9a.3058ccc5.css" rel="prefetch"><link href="css/chunk-d584b056.4c33e4ab.css" rel="prefetch"><link href="css/chunk-f90907bc.01cf6fd8.css" rel="prefetch"><link href="js/chunk-03454508.84b6b243.js" rel="prefetch"><link href="js/chunk-0458398b.ff29fd68.js" rel="prefetch"><link href="js/chunk-098d33d4.466fafea.js" rel="prefetch"><link href="js/chunk-15fa718e.f3d4c9ba.js" rel="prefetch"><link href="js/chunk-27250ed3.cac11d8b.js" rel="prefetch"><link href="js/chunk-2c05d556.f53def44.js" rel="prefetch"><link href="js/chunk-2d212bf1.5c618452.js" rel="prefetch"><link href="js/chunk-57a6c555.979b66ca.js" rel="prefetch"><link href="js/chunk-58038582.48f0eca8.js" rel="prefetch"><link href="js/chunk-62d9ca09.da27c615.js" rel="prefetch"><link href="js/chunk-72c6e8d8.c00175b8.js" rel="prefetch"><link href="js/chunk-83618c9a.ca2a0c78.js" rel="prefetch"><link href="js/chunk-d584b056.0ab1a6c1.js" rel="prefetch"><link href="js/chunk-f90907bc.7a5c4a6c.js" rel="prefetch"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.5e040ccb.js" rel="preload" as="script"><link href="js/chunk-vendors.aacf57ae.js" rel="preload" as="script"><link href="css/chunk-vendors.95431e8e.css" rel="stylesheet"></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><script src="js/chunk-vendors.aacf57ae.js"></script><script src="js/app.5e040ccb.js"></script></body></html>