Skip to content

Commit

Permalink
V3.5.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@jemu75
jemu75 committed Apr 2, 2021
1 parent 7b38aea commit 3d5cfc0
Show file tree
Hide file tree
Showing 9 changed files with 50 additions and 15 deletions.
18 changes: 14 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,14 @@ Wenn ihr in **FHEMApp** Daten aus FHEM-Logs in Charts darstellt, ist es ggf. sin
},
```

### Anzeigeeinstellungen fürFHEMApp (optional)
Wenn ihr in **FHEMApp** bei der mobilen Ansicht (1-spaltiges Layout) im Header sehen wollt, in welcher Bereich bzw. in welche Gruppe euch gerade befindet, dann könnt ihr unter Options den Paremeter `mobileHeader` setzen.
```
"options": {
"mobileHeader": true
},
```

### Themeneinstellungen für FHEMApp (optional)
Zusätzlich könnt ihr das Farbschema von **FHEMApp** individuell anpassen. Grundsätzlich könnt ihr zwischen einem *dunklen* und einem *hellen* Layout über den Parameter `dark` (`true` bzw. `false`) wechseln. Weiterhin könnt ihr die einzelnen Farben für die beiden Farbschemen unter dem Parameter `themes` individuell anpassen. Siehe dazu auch [(Vuetify Customizing)](https://vuetifyjs.com/en/features/theme/#customizing)
```
Expand All @@ -76,7 +84,7 @@ Zusätzlich könnt ihr das Farbschema von **FHEMApp** individuell anpassen. Grun
![](./docs/media/fhemapp_theme_teal_light.png)*Beispiel für helles Layout*

# Grundeinstellung in FHEM
Bevor ihr die gewünschten Geräte für die Anzeige in der **FHEMApp** konfiguriert sind zwei Grundeinstellungen in FHEM notwendig.
Bevor ihr die gewünschten Geräte für die Anzeige in der **FHEMApp** konfiguriert sind sind folgende Grundeinstellungen in FHEM notwendig.
1. Müsst ihr in eurem *FHEM-Device* `FHEMWEB` die beiden Attribute `CORS` auf `1` und `longpoll` auf `websocket` setzen. [(siehe auch)](https://fhem.de/commandref_DE.html#FHEMWEB) Das folgende Beispiel zeigt einen Auszug aus der Datei *fhem.cfg* nachdem die Grundeinstellung vorgenommen wurde.
```
define WEB FHEMWEB 8083 global
Expand Down Expand Up @@ -682,14 +690,16 @@ Im FHEM-Device muss im Attribut `appOptions` folgendes eingetragen werden.
### 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:
```
"chartDef": ["logfile:reading:text:präfix:axis"],
"chartDef": ["logsource:reading:text:präfix:axis"],
```
1. **logfile** - dieser Parameter kann freigelassen werden. Wenn ihr in eurem Chart jedoch Daten aus verschiedenen *FileLog-Devices* anzeigen wollt, dann könnt ihr hier den Name des jeweiligen *FileLog-Device* eintragen.
2. **reading** - bezeichnet das Reading aus dem *FileLog* welches ihr anzeigen wollt. (z.B. measured-temp)
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)`
3. **text** - hier tragt iht den gewünschten Achsenname ein. (z.B. Temperatur)
4. **präfix** - hier tragt ihr die Einheit der Werte ein. (z.B. °C)
5. **axis** - wenn dieser Parameter weggelassen wird, dann bezieht sich die Linie im Chart auf die linke Achse. Tragt ihr hier **secondary** ein, so bezieht sich die Linie im Chart auf die rechte Achse. Das ist z.B. sinnvoll, wenn ihr in einem Chart die Temperatur und die Luftfeuchte auf unterschiedlichen Skalen anzeigen wollt.

| Hinweis: Wenn ihr eure Daten über *DbLog* erfasst, dann habt ihr in FHEM dafür im Normalfall nur ein Device angelegt. Damit ihr verschiedene Charts in **FHEMApp** anzeigen könnt, empfielt es sich, je Chart ein *dummy* in FHEM anzulegen und hier die entsprechenden `appOptions` für das Chart zu hinterlegen. Wenn ihr eure Daten in einzelnen *FileLog-Dateien* erfasst, dann könnt ihr `appOptions` an dem jeweiligen *FileLog-Device* hinterlegen.

### Beispiel für eine Chartkonfiguration
Es wird ein Chart im Menüpunkt *Dashboard* angezeigt. Aus dem Logfile werden die Readings *humidity* (rechte Achse) und *measured-temp* (linke Achse) im Chart dargestellt.
```
Expand Down
11 changes: 8 additions & 3 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@
</div>
<h2 class="hidden-md-and-down">{{ app.options.clock }}</h2>
<v-spacer></v-spacer>
<div class="hidden-lg-and-up text-h5">
{{ app.data.header }}
</div>
<v-spacer></v-spacer>
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon small :color="status.color" v-text="status.icon" v-bind="attrs" v-on="on"></v-icon>
<v-icon class="ml-3" small :color="status.color" v-text="status.icon" v-bind="attrs" v-on="on"></v-icon>
</template>
<div v-text="status.text"></div>
<div v-text="status.time"></div>
Expand Down Expand Up @@ -111,10 +115,11 @@
},
data: {
roomList: [],
groupList: []
groupList: [],
header: ''
}
},
version: 'v3.4.0',
version: 'v3.5.0',
status: {
color: 'secondary',
icon: 'mdi-circle',
Expand Down
12 changes: 8 additions & 4 deletions src/plugins/fhem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,16 @@ export default class Fhem extends EventEmitter {
logBuffer: 500,
ignoreFhemRoom: false,
ignoreFhemGroup: false,
ignoreFhemSortby: false
ignoreFhemSortby: false,
mobileHeader: false
},
templates: [], // only the fallback for v3.1
componentMap: [],
data: {
roomList: [],
groupList: [],
deviceList: []
deviceList: [],
header: ''
}
}
}
Expand Down Expand Up @@ -199,13 +201,15 @@ export default class Fhem extends EventEmitter {
let idx = 0;

for(const def of obj.defs) {
let defPart = def.split(':'); // definiton [ file : regex : name : suffix : axis ]
let select = /\(.*\)/.exec(def);
if(select) def.replace(select[0],'_');

let defPart = def.split(':'); // definiton [ source : (regex) : name : suffix : axis ]
let cmd = 'get ';
cmd += defPart[0] ? defPart[0] : obj.deviceName;
cmd += obj.from ? ' - - ' + obj.from : '';
cmd += obj.to ? ' ' + obj.to : '';
cmd += defPart[1] ? ' 4:' + defPart[1] : '';
cmd += select ? ' ' + select[0].replace(/\(|\)/g,'') : ' 4:' + defPart[1];

this.request([{ param: 'cmd', value: cmd }, { param: 'XHR', value: '1' }],'text', { id: idx })
.then((res) => {
Expand Down
18 changes: 17 additions & 1 deletion src/views/Devices.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,12 @@ export default {
session: {
connect: false
},
options: {
mobileHeader: false
},
data: {
deviceList: []
deviceList: [],
header: ''
}
}
}),
Expand All @@ -38,6 +42,17 @@ export default {
},
methods: {
setHeader() {
if(this.app.options.mobileHeader) {
if(this.$route.name === 'Devices') {
let part = this.$route.params.filter.split('&')[0].split('=')[1];
this.app.data.header = part.replace(/\\s.\\s/g,' & ');
} else {
this.app.data.header = this.$route.name;
}
}
},
subscribe() {
if(!this.app.session.connect) return;
let fltr = 'appOptions!=:FILTER=';
Expand All @@ -56,6 +71,7 @@ export default {
if(this.$route.name == 'System') fltr = 'appOptions=.*system.:..true.*';
if(this.$route.name == 'Home') fltr = 'appOptions=.*home.:..true.*';
this.setHeader();
this.$fhem.getDevices(fltr);
}
},
Expand Down
2 changes: 1 addition & 1 deletion www/fhemapp/index.html
View file
Original file line number Diff line number Diff line change
@@ -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.432c8b15.js" rel="prefetch"><link href="js/chunk-0458398b.ff29fd68.js" rel="prefetch"><link href="js/chunk-098d33d4.bbdd65ab.js" rel="prefetch"><link href="js/chunk-15fa718e.820d5967.js" rel="prefetch"><link href="js/chunk-27250ed3.00eafedc.js" rel="prefetch"><link href="js/chunk-2c05d556.1084b9d2.js" rel="prefetch"><link href="js/chunk-2d212bf1.b3f4869b.js" rel="prefetch"><link href="js/chunk-57a6c555.7c0a36f4.js" rel="prefetch"><link href="js/chunk-58038582.a600d1fb.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.f88bebf6.js" rel="prefetch"><link href="js/chunk-d584b056.da659915.js" rel="prefetch"><link href="js/chunk-f90907bc.3ec9d165.js" rel="prefetch"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.bc387fd0.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.bc387fd0.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.432c8b15.js" rel="prefetch"><link href="js/chunk-0458398b.ff29fd68.js" rel="prefetch"><link href="js/chunk-098d33d4.bbdd65ab.js" rel="prefetch"><link href="js/chunk-15fa718e.820d5967.js" rel="prefetch"><link href="js/chunk-27250ed3.00eafedc.js" rel="prefetch"><link href="js/chunk-2c05d556.1084b9d2.js" rel="prefetch"><link href="js/chunk-2d212bf1.846db353.js" rel="prefetch"><link href="js/chunk-57a6c555.7c0a36f4.js" rel="prefetch"><link href="js/chunk-58038582.a600d1fb.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.f88bebf6.js" rel="prefetch"><link href="js/chunk-d584b056.da659915.js" rel="prefetch"><link href="js/chunk-f90907bc.3ec9d165.js" rel="prefetch"><link href="css/chunk-vendors.95431e8e.css" rel="preload" as="style"><link href="js/app.f4160953.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.f4160953.js"></script></body></html>
1 change: 0 additions & 1 deletion www/fhemapp/js/app.bc387fd0.js
View file

This file was deleted.

1 change: 1 addition & 0 deletions www/fhemapp/js/app.f4160953.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions www/fhemapp/js/chunk-2d212bf1.846db353.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion www/fhemapp/js/chunk-2d212bf1.b3f4869b.js
View file

This file was deleted.

0 comments on commit 3d5cfc0

Please sign in to comment.