mirror of
https://github.com/joBr99/nspanel-lovelace-ui.git
synced 2026-03-07 11:39:40 +01:00
seiten verschoben
tt-tom17
601
new/NSPanel-Service-Menü.md
Normal file
601
new/NSPanel-Service-Menü.md
Normal file
@@ -0,0 +1,601 @@
|
||||
# Servicemenü
|
||||
|
||||
> ab v3.9.0
|
||||
|
||||
**Das Menü ist in den Variablendefinitionen des TS-Script v3.9.0 enthalten, dient als Beispiel für eine Subpage-Gestaltung und kann beliebig angepasst werden. Die Aliase für dieses Beispiel legt das TS-Script, sofern setOption in der JavaScript-Adapter-Instanz angehakt ist, automatisch an.**
|
||||
Im Zuge der weiteren Releases wird es sukzessive um künftige Funktionalitäten erweitert
|
||||
|
||||
## Service-Menü-Beispiel aus dem TypeScript (NSPanelTs.ts)
|
||||
|
||||
|
||||
|
||||
## Aufbau des Service-Menüs
|
||||
|
||||
<img width="763" alt="Matrix Serviceseiten" src="picture/servicemenu/matrixServiceseiten.png">
|
||||
|
||||
## TypeScript (NSPanel.ts) Konstanten
|
||||
|
||||
nachfolgende Konstante ist für die Menüfarbe reserviert und kann individuell durch eigene RGB-Farbwerte angepasst werden.
|
||||
```typescript
|
||||
//Menu Icon Colors
|
||||
const Menu: RGB = { red: 150, green: 150, blue: 100 };
|
||||
```
|
||||
|
||||
## PageItem - Parameter
|
||||
### colorScale
|
||||
|
||||
|
||||
|
||||
innerhalb des PageItems kann das Icon im Alias des Gerätetypen "info" ebenfalls einen Indikatorwert annehmen:
|
||||
> _**Wenn colorScale im PageItem vorhanden ist, werden gesetzte `offColor` und `onColor` dabei ignoriert. Es wird dann auschließlich der Parameter colorScale ausgewertet.**_
|
||||
```typescript
|
||||
colorScale: {'val_min': 0, 'val_max': 100, 'val_best': 50 }
|
||||
```
|
||||
> _**val_best ist hierbei Optional und stellt den Idealwert dar!**_
|
||||
|
||||
weiter Beispiele:
|
||||
```typescript
|
||||
{ id: AliasPath + 'Tasmota.Wifi.RSSI', name: 'RSSI', icon: 'signal', unit: '%', colorScale: {'val_min': 100, 'val_max': 0} },
|
||||
{ id: AliasPath + 'Tasmota.Wifi.Signal', name: 'Wifi-Signal', icon: 'signal-distance-variant', unit: 'dBm', colorScale: {'val_min': 0, 'val_max': -100} },
|
||||
{ id: AliasPath + 'Sensor.ANALOG.Temperature', name: 'Raum Temperatur', icon: 'home-thermometer-outline', unit: '°C', colorScale: {'val_min': 0, 'val_max': 40, 'val_best': 22 } },
|
||||
{ id: AliasPath + 'Sensor.ESP32.Temperature', name: 'ESP Temperatur', icon: 'thermometer', unit: '°C', colorScale: {'val_min': 0, 'val_max': 100, 'val_best': 50 } },
|
||||
```
|
||||
|
||||
## TypeScript (NSPanel.ts) Variablendefinition
|
||||
|
||||
nachfolgend die Seiten- und Menüdefinition aus dem TS-Script ab v4.3.3
|
||||
```typescript
|
||||
/***********************************************************************************************
|
||||
** Service Pages mit Auto-Alias (Nachfolgende Seiten werden mit Alias automatisch angelegt) **
|
||||
** https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC **
|
||||
***********************************************************************************************/
|
||||
|
||||
/* DE: German
|
||||
Wenn das Service Menü abgesichert werden soll, kann eine cardUnlock vorgeschaltet werden.
|
||||
Für diesen Fall ist folgende Vorgehensweise erforderlich:
|
||||
- cardUnlock Seite "Unlock_Service" in der Config unter pages auskommentieren ("//" entfernen)
|
||||
- Servicemenü aus pages "NSPanel_Service" unter pages kommentieren ("//" hinzufügen)
|
||||
*/
|
||||
|
||||
/*************************************************************************************************
|
||||
** Service pages with auto alias (subsequent pages are automatically created with alias) **
|
||||
** https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC **
|
||||
************************************************************************************************/
|
||||
|
||||
/* EN: English
|
||||
If the service menu needs to be secured, a cardUnlock can be installed upstream.
|
||||
In this case, the following procedure is required:
|
||||
- comment out cardUnlock page "Unlock_Service" in the config under pages (remove "//")
|
||||
- Comment service menu from pages "NSPanel_Service" under pages (add "//")
|
||||
*/
|
||||
|
||||
//Level 0 (if service pages are used with cardUnlock)
|
||||
let Unlock_Service: PageType = {
|
||||
type: 'cardUnlock',
|
||||
heading: findLocaleServMenu('service_pages'),
|
||||
useColor: true,
|
||||
items: [{ id: 'alias.0.NSPanel.Unlock', targetPage: 'NSPanel_Service_SubPage', autoCreateALias: true }],
|
||||
};
|
||||
|
||||
//Level_0 (if service pages are used without cardUnlock)
|
||||
let NSPanel_Service: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('service_menu'),
|
||||
useColor: true,
|
||||
items: [
|
||||
{ navigate: true, id: 'NSPanel_Infos', icon: 'information-outline', offColor: Menu, onColor: Menu, name: findLocaleServMenu('infos'), buttonText: findLocaleServMenu('more') },
|
||||
{ navigate: true, id: 'NSPanel_Einstellungen', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: findLocaleServMenu('settings'), buttonText: findLocaleServMenu('more') },
|
||||
{ navigate: true, id: 'NSPanel_Firmware', icon: 'update', offColor: Menu, onColor: Menu, name: findLocaleServMenu('firmware'), buttonText: findLocaleServMenu('more') },
|
||||
{ id: AliasPath + 'Config.rebootNSPanel', name: findLocaleServMenu('reboot'), icon: 'refresh', offColor: MSRed, onColor: MSGreen, buttonText: findLocaleServMenu('start') },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_0 (if service pages are used with cardUnlock)
|
||||
let NSPanel_Service_SubPage: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('service_menu'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: Unlock_Service,
|
||||
home: 'Unlock_Service',
|
||||
items: [
|
||||
{ navigate: true, id: 'NSPanel_Infos', icon: 'information-outline', offColor: Menu, onColor: Menu, name: findLocaleServMenu('infos'), buttonText: findLocaleServMenu('more') },
|
||||
{ navigate: true, id: 'NSPanel_Einstellungen', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: findLocaleServMenu('settings'), buttonText: findLocaleServMenu('more') },
|
||||
{ navigate: true, id: 'NSPanel_Firmware', icon: 'update', offColor: Menu, onColor: Menu, name: findLocaleServMenu('firmware'), buttonText: findLocaleServMenu('more') },
|
||||
{ id: AliasPath + 'Config.rebootNSPanel', name: findLocaleServMenu('reboot'), icon: 'refresh', offColor: MSRed, onColor: MSGreen, buttonText: findLocaleServMenu('start') },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_1
|
||||
let NSPanel_Infos: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('nspanel_infos'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Service,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ navigate: true, id: 'NSPanel_Wifi_Info_1', icon: 'wifi', offColor: Menu, onColor: Menu, name: findLocaleServMenu('wifi'), buttonText: findLocaleServMenu('more') },
|
||||
{ navigate: true, id: 'NSPanel_Sensoren', icon: 'memory', offColor: Menu, onColor: Menu, name: findLocaleServMenu('sensors_hardware'), buttonText: findLocaleServMenu('more') },
|
||||
{
|
||||
navigate: true,
|
||||
id: 'NSPanel_IoBroker',
|
||||
icon: 'information-outline',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
name: findLocaleServMenu('info_iobroker'),
|
||||
buttonText: findLocaleServMenu('more'),
|
||||
},
|
||||
{ id: AliasPath + 'Config.Update.UpdateMessage', name: findLocaleServMenu('update_message'), icon: 'message-alert-outline', offColor: HMIOff, onColor: MSGreen },
|
||||
],
|
||||
};
|
||||
//Level_2
|
||||
let NSPanel_Wifi_Info_1: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('nspanel_wifi1'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Infos,
|
||||
next: 'NSPanel_Wifi_Info_2',
|
||||
items: [
|
||||
{ id: AliasPath + 'ipAddress', name: findLocaleServMenu('ip_address'), icon: 'ip-network-outline', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota.Wifi.BSSId', name: findLocaleServMenu('mac_address'), icon: 'check-network', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota.Wifi.RSSI', name: findLocaleServMenu('rssi'), icon: 'signal', unit: '%', colorScale: { val_min: 100, val_max: 0 } },
|
||||
{ id: AliasPath + 'Tasmota.Wifi.Signal', name: findLocaleServMenu('wifi_signal'), icon: 'signal-distance-variant', unit: 'dBm', colorScale: { val_min: 0, val_max: -100 } },
|
||||
],
|
||||
};
|
||||
|
||||
let NSPanel_Wifi_Info_2: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('nspanel_wifi2'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
prev: 'NSPanel_Wifi_Info_1',
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Tasmota.Wifi.SSId', name: findLocaleServMenu('ssid'), icon: 'signal-distance-variant', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota.Wifi.Mode', name: findLocaleServMenu('mode'), icon: 'signal-distance-variant', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota.Wifi.Channel', name: findLocaleServMenu('channel'), icon: 'timeline-clock-outline', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota.Wifi.AP', name: findLocaleServMenu('accesspoint'), icon: 'router-wireless-settings', offColor: Menu, onColor: Menu },
|
||||
],
|
||||
};
|
||||
|
||||
let NSPanel_Sensoren: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('sensors1'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Infos,
|
||||
next: 'NSPanel_Hardware',
|
||||
items: [
|
||||
{
|
||||
id: AliasPath + 'Sensor.ANALOG.Temperature',
|
||||
name: findLocaleServMenu('room_temperature'),
|
||||
icon: 'home-thermometer-outline',
|
||||
unit: '°C',
|
||||
colorScale: { val_min: 0, val_max: 40, val_best: 22 },
|
||||
},
|
||||
{
|
||||
id: AliasPath + 'Sensor.ESP32.Temperature',
|
||||
name: findLocaleServMenu('esp_temperature'),
|
||||
icon: 'thermometer',
|
||||
unit: '°C',
|
||||
colorScale: { val_min: 0, val_max: 100, val_best: 50 },
|
||||
},
|
||||
{ id: AliasPath + 'Sensor.TempUnit', name: findLocaleServMenu('temperature_unit'), icon: 'temperature-celsius', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Sensor.Time', name: findLocaleServMenu('refresh'), icon: 'clock-check-outline', offColor: Menu, onColor: Menu },
|
||||
],
|
||||
};
|
||||
|
||||
let NSPanel_Hardware: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('hardware2'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
prev: 'NSPanel_Sensoren',
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Tasmota.Product', name: findLocaleServMenu('product'), icon: 'devices', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota.Hardware', name: findLocaleServMenu('esp32_hardware'), icon: 'memory', offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Display.Model', name: findLocaleServMenu('nspanel_version'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota.Uptime', name: findLocaleServMenu('operating_time'), icon: 'timeline-clock-outline', offColor: Menu, onColor: Menu },
|
||||
],
|
||||
};
|
||||
|
||||
let NSPanel_IoBroker: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('info_iobroker'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Infos,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'IoBroker.ScriptVersion', name: findLocaleServMenu('script_version_nspanelts'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'IoBroker.NodeJSVersion', name: findLocaleServMenu('nodejs_version'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'IoBroker.JavaScriptVersion', name: findLocaleServMenu('instance_javascript'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'IoBroker.ScriptName', name: findLocaleServMenu('scriptname'), offColor: Menu, onColor: Menu },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_1
|
||||
let NSPanel_Einstellungen: PageType = {
|
||||
type: 'cardGrid',
|
||||
heading: findLocaleServMenu('settings'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Service,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{
|
||||
navigate: true,
|
||||
id: 'NSPanel_Screensaver',
|
||||
icon: 'monitor-dashboard',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
name: findLocaleServMenu('screensaver'),
|
||||
buttonText: findLocaleServMenu('more'),
|
||||
},
|
||||
{ navigate: true, id: 'NSPanel_Relays', icon: 'electric-switch', offColor: Menu, onColor: Menu, name: findLocaleServMenu('relays'), buttonText: findLocaleServMenu('more') },
|
||||
{ id: AliasPath + 'Config.temperatureUnitNumber', icon: 'gesture-double-tap', name: findLocaleServMenu('temp_unit'), offColor: Menu, onColor: Menu, modeList: ['°C', '°F', 'K'] },
|
||||
{
|
||||
id: AliasPath + 'Config.localeNumber',
|
||||
icon: 'select-place',
|
||||
name: findLocaleServMenu('language'),
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
modeList: [
|
||||
'en-US',
|
||||
'de-DE',
|
||||
'nl-NL',
|
||||
'da-DK',
|
||||
'es-ES',
|
||||
'fr-FR',
|
||||
'it-IT',
|
||||
'ru-RU',
|
||||
'nb-NO',
|
||||
'nn-NO',
|
||||
'pl-PL',
|
||||
'pt-PT',
|
||||
'af-ZA',
|
||||
'ar-SY',
|
||||
'bg-BG',
|
||||
'ca-ES',
|
||||
'cs-CZ',
|
||||
'el-GR',
|
||||
'et-EE',
|
||||
'fa-IR',
|
||||
'fi-FI',
|
||||
'he-IL',
|
||||
'hr-xx',
|
||||
'hu-HU',
|
||||
'hy-AM',
|
||||
'id-ID',
|
||||
'is-IS',
|
||||
'lb-xx',
|
||||
'lt-LT',
|
||||
'ro-RO',
|
||||
'sk-SK',
|
||||
'sl-SI',
|
||||
'sv-SE',
|
||||
'th-TH',
|
||||
'tr-TR',
|
||||
'uk-UA',
|
||||
'vi-VN',
|
||||
'zh-CN',
|
||||
'zh-TW',
|
||||
],
|
||||
},
|
||||
{ navigate: true, id: 'NSPanel_Script', icon: 'code-json', offColor: Menu, onColor: Menu, name: findLocaleServMenu('script'), buttonText: findLocaleServMenu('more') },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_2
|
||||
let NSPanel_Screensaver: PageType = {
|
||||
type: 'cardGrid',
|
||||
heading: findLocaleServMenu('screensaver'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Einstellungen,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ navigate: true, id: 'NSPanel_ScreensaverDimmode', icon: 'sun-clock', offColor: Menu, onColor: Menu, name: findLocaleServMenu('dimmode') },
|
||||
{ navigate: true, id: 'NSPanel_ScreensaverBrightness', icon: 'brightness-5', offColor: Menu, onColor: Menu, name: findLocaleServMenu('brightness') },
|
||||
{ navigate: true, id: 'NSPanel_ScreensaverLayout', icon: 'page-next-outline', offColor: Menu, onColor: Menu, name: findLocaleServMenu('layout') },
|
||||
{ navigate: true, id: 'NSPanel_ScreensaverWeather', icon: 'weather-partly-rainy', offColor: Menu, onColor: Menu, name: findLocaleServMenu('weather') },
|
||||
{ navigate: true, id: 'NSPanel_ScreensaverDateformat', icon: 'calendar-expand-horizontal', offColor: Menu, onColor: Menu, name: findLocaleServMenu('date_format') },
|
||||
{ navigate: true, id: 'NSPanel_ScreensaverIndicators', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: findLocaleServMenu('indicators') },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_3
|
||||
let NSPanel_ScreensaverDimmode: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('dimmode'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Screensaver,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Dimmode.brightnessDay', name: findLocaleServMenu('brightness_day'), icon: 'brightness-5', offColor: Menu, onColor: Menu, minValue: 5, maxValue: 10 },
|
||||
{ id: AliasPath + 'Dimmode.brightnessNight', name: findLocaleServMenu('brightness_night'), icon: 'brightness-4', offColor: Menu, onColor: Menu, minValue: 0, maxValue: 4 },
|
||||
{ id: AliasPath + 'Dimmode.hourDay', name: findLocaleServMenu('hour_day'), icon: 'sun-clock', offColor: Menu, onColor: Menu, minValue: 0, maxValue: 23 },
|
||||
{ id: AliasPath + 'Dimmode.hourNight', name: findLocaleServMenu('hour_night'), icon: 'sun-clock-outline', offColor: Menu, onColor: Menu, minValue: 0, maxValue: 23 },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_3
|
||||
let NSPanel_ScreensaverBrightness: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('brightness'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Screensaver,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{
|
||||
id: AliasPath + 'ScreensaverInfo.activeBrightness',
|
||||
name: findLocaleServMenu('brightness_activ'),
|
||||
icon: 'brightness-5',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
minValue: 20,
|
||||
maxValue: 100,
|
||||
},
|
||||
{
|
||||
id: AliasPath + 'Config.Screensaver.timeoutScreensaver',
|
||||
name: findLocaleServMenu('screensaver_timeout'),
|
||||
icon: 'clock-end',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
minValue: 0,
|
||||
maxValue: 60,
|
||||
},
|
||||
{ id: AliasPath + 'Config.Screensaver.screenSaverDoubleClick', name: findLocaleServMenu('wakeup_doublecklick'), icon: 'gesture-two-double-tap', offColor: HMIOff, onColor: HMIOn },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_3
|
||||
let NSPanel_ScreensaverLayout: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('layout'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Screensaver,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{
|
||||
id: AliasPath + 'Config.Screensaver.alternativeScreensaverLayout',
|
||||
name: findLocaleServMenu('alternative_layout'),
|
||||
icon: 'page-previous-outline',
|
||||
offColor: HMIOff,
|
||||
onColor: HMIOn,
|
||||
},
|
||||
{ id: AliasPath + 'Config.Screensaver.ScreensaverAdvanced', name: findLocaleServMenu('advanced_layout'), icon: 'page-next-outline', offColor: HMIOff, onColor: HMIOn },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_3
|
||||
let NSPanel_ScreensaverWeather: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('weather_parameters'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Screensaver,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'ScreensaverInfo.weatherForecast', name: findLocaleServMenu('weather_forecast_offon'), icon: 'weather-sunny-off', offColor: HMIOff, onColor: HMIOn },
|
||||
{ id: AliasPath + 'ScreensaverInfo.weatherForecastTimer', name: findLocaleServMenu('weather_forecast_change_switch'), icon: 'devices', offColor: HMIOff, onColor: HMIOn },
|
||||
{
|
||||
id: AliasPath + 'ScreensaverInfo.entityChangeTime',
|
||||
name: findLocaleServMenu('weather_forecast_change_time'),
|
||||
icon: 'cog-sync',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
minValue: 15,
|
||||
maxValue: 60,
|
||||
},
|
||||
{
|
||||
id: AliasPath + 'Config.Screensaver.autoWeatherColorScreensaverLayout',
|
||||
name: findLocaleServMenu('weather_forecast_icon_colors'),
|
||||
icon: 'format-color-fill',
|
||||
offColor: HMIOff,
|
||||
onColor: HMIOn,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
//Level_3
|
||||
let NSPanel_ScreensaverDateformat: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('date_format'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Screensaver,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Config.Dateformat.Switch.weekday', name: findLocaleServMenu('weekday_large'), icon: 'calendar-expand-horizontal', offColor: HMIOff, onColor: HMIOn },
|
||||
{ id: AliasPath + 'Config.Dateformat.Switch.month', name: findLocaleServMenu('month_large'), icon: 'calendar-expand-horizontal', offColor: HMIOff, onColor: HMIOn },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_3
|
||||
let NSPanel_ScreensaverIndicators: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('indicators'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Screensaver,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Config.MRIcons.alternateMRIconSize.1', name: findLocaleServMenu('mr_icon1_size'), icon: 'format-size', offColor: HMIOff, onColor: HMIOn },
|
||||
{ id: AliasPath + 'Config.MRIcons.alternateMRIconSize.2', name: findLocaleServMenu('mr_icon2_size'), icon: 'format-size', offColor: HMIOff, onColor: HMIOn },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_2
|
||||
let NSPanel_Relays: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('relays'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Einstellungen,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Relay.1', name: findLocaleServMenu('relay1_onoff'), icon: 'power', offColor: HMIOff, onColor: HMIOn },
|
||||
{ id: AliasPath + 'Relay.2', name: findLocaleServMenu('relay2_onoff'), icon: 'power', offColor: HMIOff, onColor: HMIOn },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_2
|
||||
let NSPanel_Script: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('script'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Einstellungen,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Config.ScripgtDebugStatus', name: findLocaleServMenu('debugmode_offon'), icon: 'code-tags-check', offColor: HMIOff, onColor: HMIOn },
|
||||
{ id: AliasPath + 'Config.MQTT.portCheck', name: findLocaleServMenu('port_check_offon'), icon: 'check-network', offColor: HMIOff, onColor: HMIOn },
|
||||
{ id: AliasPath + 'Config.hiddenCards', name: findLocaleServMenu('hiddencards_offon'), icon: 'check-network', offColor: HMIOff, onColor: HMIOn },
|
||||
],
|
||||
};
|
||||
|
||||
//Level_1
|
||||
let NSPanel_Firmware: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('firmware'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Service,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'autoUpdate', name: findLocaleServMenu('automatically_updates'), icon: 'power', offColor: HMIOff, onColor: HMIOn },
|
||||
{
|
||||
navigate: true,
|
||||
id: 'NSPanel_FirmwareTasmota',
|
||||
icon: 'usb-flash-drive',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
name: findLocaleServMenu('tasmota_firmware'),
|
||||
buttonText: findLocaleServMenu('more'),
|
||||
},
|
||||
{
|
||||
navigate: true,
|
||||
id: 'NSPanel_FirmwareBerry',
|
||||
icon: 'usb-flash-drive',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
name: findLocaleServMenu('berry_driver'),
|
||||
buttonText: findLocaleServMenu('more'),
|
||||
},
|
||||
{
|
||||
navigate: true,
|
||||
id: 'NSPanel_FirmwareNextion',
|
||||
icon: 'cellphone-cog',
|
||||
offColor: Menu,
|
||||
onColor: Menu,
|
||||
name: findLocaleServMenu('nextion_tft_firmware'),
|
||||
buttonText: findLocaleServMenu('more'),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
let NSPanel_FirmwareTasmota: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('tasmota'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Firmware,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Tasmota.Version', name: findLocaleServMenu('installed_release'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Tasmota_Firmware.onlineVersion', name: findLocaleServMenu('available_release'), offColor: Menu, onColor: Menu },
|
||||
{ id: 'Divider' },
|
||||
{
|
||||
id: AliasPath + 'Config.Update.UpdateTasmota',
|
||||
name: findLocaleServMenu('update_tasmota'),
|
||||
icon: 'refresh',
|
||||
offColor: HMIOff,
|
||||
onColor: MSGreen,
|
||||
buttonText: findLocaleServMenu('start'),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
let NSPanel_FirmwareBerry: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('berry_driver'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Firmware,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Display.BerryDriver', name: findLocaleServMenu('installed_release'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Berry_Driver.onlineVersion', name: findLocaleServMenu('available_release'), offColor: Menu, onColor: Menu },
|
||||
{ id: 'Divider' },
|
||||
{
|
||||
id: AliasPath + 'Config.Update.UpdateBerry',
|
||||
name: findLocaleServMenu('update_berry_driver'),
|
||||
icon: 'refresh',
|
||||
offColor: HMIOff,
|
||||
onColor: MSGreen,
|
||||
buttonText: findLocaleServMenu('start'),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
let NSPanel_FirmwareNextion: PageType = {
|
||||
type: 'cardEntities',
|
||||
heading: findLocaleServMenu('nextion_tft'),
|
||||
useColor: true,
|
||||
subPage: true,
|
||||
parent: NSPanel_Firmware,
|
||||
home: 'NSPanel_Service',
|
||||
items: [
|
||||
{ id: AliasPath + 'Display_Firmware.TFT.currentVersion', name: findLocaleServMenu('installed_release'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Display_Firmware.TFT.desiredVersion', name: findLocaleServMenu('desired_release'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Display.Model', name: findLocaleServMenu('nspanel_model'), offColor: Menu, onColor: Menu },
|
||||
{ id: AliasPath + 'Config.Update.UpdateNextion', name: 'Nextion TFT Update', icon: 'refresh', offColor: HMIOff, onColor: MSGreen, buttonText: findLocaleServMenu('start') },
|
||||
],
|
||||
};
|
||||
|
||||
// End of Service Pages
|
||||
|
||||
```
|
||||
|
||||
## TypeScript (NSPanel.ts) Config
|
||||
```typescript
|
||||
export const config: Config = {
|
||||
// Seiteneinteilung / Page division
|
||||
// Hauptseiten / Mainpages
|
||||
pages: [
|
||||
NSPanel_Service, //Auto-Alias Service Page
|
||||
//Unlock_Service, //Auto-Alias Service Page (Service Pages used with cardUnlock)
|
||||
],
|
||||
// Unterseiten / Subpages
|
||||
subPages: [
|
||||
//NSPanel_Service_SubPage, //Auto-Alias Service Page (only used with cardUnlock)
|
||||
NSPanel_Infos, //Auto-Alias Service Page
|
||||
NSPanel_Wifi_Info_1, //Auto-Alias Service Page
|
||||
NSPanel_Wifi_Info_2, //Auto-Alias Service Page
|
||||
NSPanel_Sensoren, //Auto-Alias Service Page
|
||||
NSPanel_Hardware, //Auto-Alias Service Page
|
||||
NSPanel_IoBroker, //Auot-Alias Service Page
|
||||
NSPanel_Einstellungen, //Auto-Alias Service Page
|
||||
NSPanel_Screensaver, //Auto-Alias Service Page
|
||||
NSPanel_ScreensaverDimmode, //Auto-Alias Service Page
|
||||
NSPanel_ScreensaverBrightness, //Auto-Alias Service Page
|
||||
NSPanel_ScreensaverLayout, //Auto-Alias Service Page
|
||||
NSPanel_ScreensaverWeather, //Auto-Alias Service Page
|
||||
NSPanel_ScreensaverDateformat, //Auto-Alias Service Page
|
||||
NSPanel_ScreensaverIndicators, //Auto-Alias Service Page
|
||||
NSPanel_Relays, //Auto-Alias Service Page
|
||||
NSPanel_Script, //Auto-Alias Service Page
|
||||
NSPanel_Firmware, //Auto-Alias Service Page
|
||||
NSPanel_FirmwareTasmota, //Auto-Alias Service Page
|
||||
NSPanel_FirmwareBerry, //Auto-Alias Service Page
|
||||
NSPanel_FirmwareNextion, //Auto-Alias Service Page
|
||||
],
|
||||
|
||||
```
|
||||
179
new/NSPanel-Starthilfe-FAQ.md
Normal file
179
new/NSPanel-Starthilfe-FAQ.md
Normal file
@@ -0,0 +1,179 @@
|
||||
Starthilfe - Die häufigsten User-Fehler
|
||||
|
||||
# **Index**
|
||||
|
||||
**1.)** [Anleitung Update/Upgarde](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#hilfe-bei-update--upgrade)
|
||||
**2.)** [Achtung!! Ändrungen bei Variablen und Konstanten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#type-änderungen)
|
||||
**3.)** ["Waiting for Content" -> es geht nicht weiter](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#waiting-for-content---es-geht-nicht-weiter)
|
||||
**4.)** [Berry-Driver nicht oder falsch installiert](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#berry-driver-nicht-oder-falsch-installiert)
|
||||
**5.)** [MQTT Adaptereinstellungen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#mqtt-adapter-einstellungen)
|
||||
**6.)** [Tasmota - MQTT Einstellungen ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#mqtt-tasmota-einstellungen)
|
||||
**7.)** [der Datenpunkt "CustomSend" fehlt](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#customsend-fehlt)
|
||||
|
||||
## Hilfe bei Update / Upgrade
|
||||
|
||||
Variante für ein Update der NSPanelTS.ts
|
||||
|
||||
1. aktuelle Script anhalten
|
||||
2. unter [diesen Link](https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts) das aktuelle Script kopieren
|
||||
3. ein neues TS Script anlegen, als Name nutze ich immer NSPanel_Version z.B. NSPanel_43310
|
||||
4. diese Parameter müssen als erstes angepasst werden
|
||||
```typescript
|
||||
/***** 1. Tasmota-Config *****/
|
||||
|
||||
// DE: Anpassen an die Verzeichnisse der MQTT-Adapter-Instanz
|
||||
// EN: Adapt to the MQTT adapter instance directories
|
||||
const NSPanelReceiveTopic: string = 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT';
|
||||
const NSPanelSendTopic: string = 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend';
|
||||
|
||||
/***** 2. Directories in 0_userdata.0... *****/
|
||||
|
||||
// DE: Anpassen an das jeweilige NSPanel
|
||||
// EN: Adapt to the respective NSPanel
|
||||
const NSPanel_Path = '0_userdata.0.NSPanel.1.';
|
||||
```
|
||||
|
||||
5. jetzt starten wir zum erstenmal die neue Script Version, sie sollte ohne Fehlermeldung starten.
|
||||
6. jetzt kopieren wir die eigenen Seiten aus den alten Script, vorher wird das neue Script gestoppt
|
||||
Die eigenen Seiten werden zwischen diesen zwei Zeilen eingefügt.
|
||||
```typescript
|
||||
//-- Anfang für eigene Seiten -- z.T. selbstdefinierte Aliase erforderlich ----------------
|
||||
//-- Start for your own pages -- some self-defined aliases required ----------------
|
||||
|
||||
//-- https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele
|
||||
|
||||
//-- ENDE für eigene Seiten -- z.T. selbstdefinierte Aliase erforderlich -------------------------
|
||||
//-- END for your own pages -- some self-defined aliases required ------------------------
|
||||
```
|
||||
|
||||
dann müssen die Pages auch in diesen Bereich eingefügt werden. Hauptseiten kommen zu den pages und die Unterseiten zu den subPages
|
||||
|
||||
```typescript
|
||||
// Seiteneinteilung / Page division
|
||||
// Hauptseiten / Mainpages
|
||||
pages: [
|
||||
|
||||
NSPanel_Service //Auto-Alias Service Page
|
||||
//Unlock_Service //Auto-Alias Service Page (Service Pages used with cardUnlock)
|
||||
],
|
||||
|
||||
// Unterseiten / Subpages
|
||||
subPages: [
|
||||
|
||||
NSPanel_Service_SubPage, //Auto-Alias Service Page (only used with cardUnlock)
|
||||
NSPanel_Infos, //Auto-Alias Service Page
|
||||
```
|
||||
|
||||
7. das Script starten und prüfen auf Fehlermeldungen, danach wird es wieder gestop.
|
||||
8. jetzt kopieren wir noch die ScreensaverEntity, die Einstellungen für die Hardwarebutton und erstezen die im neuen Script
|
||||
```typescript
|
||||
/***********************************************************************
|
||||
** **
|
||||
** Screensaver Configuration **
|
||||
** **
|
||||
***********************************************************************/
|
||||
|
||||
```
|
||||
|
||||
### Type-Änderungen
|
||||
mit der v4.3.3.30 gibt es Änderungen in der Syntax der Variablen und Konstanten im oberen Teil. Auch wenn die alte Nomenklatur nicht zu Fehlern führt, wird dennoch empfohlen nachfolgende Schritte durchzuführen:
|
||||
|
||||
9. Änderung der Config-Zeile
|
||||
```
|
||||
export const config = <Config> {
|
||||
```
|
||||
|
||||
in
|
||||
```
|
||||
export const config: Config = {
|
||||
```
|
||||
ändern
|
||||
|
||||
10. Variablendeklaration im Vergleich
|
||||
vorher:
|
||||
```typescript
|
||||
let Bad_Thermostat = <PageThermo>
|
||||
{
|
||||
'type': 'cardThermo',
|
||||
'heading': 'Bad',
|
||||
'items': [<PageItem>{
|
||||
id: 'alias.0.NSPanel_1.Thermostat_Buero',
|
||||
minValue: 50,
|
||||
maxValue: 300,
|
||||
stepValue: 5
|
||||
}]
|
||||
};
|
||||
```
|
||||
nachher:
|
||||
```typescript
|
||||
let Bad_Thermostat: PageType =
|
||||
{
|
||||
'type': 'cardThermo',
|
||||
'heading': 'Bad',
|
||||
'items': [{
|
||||
id: 'alias.0.Haus.Erdgeschoss.Buero.Thermostate.Thermostat',
|
||||
minValue: 50,
|
||||
maxValue: 300,
|
||||
stepValue: 5
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
* In der oberen Zeile wird ` = <PageXYZ>` durch `: PageType =` ersetzt
|
||||
* Das `<PageItem>` entfällt
|
||||
|
||||
****
|
||||
|
||||
Seht in den [Changelogs](https://github.com/joBr99/nspanel-lovelace-ui/wiki/Changelog) nach, ob es Änderungen im Config-Teil gegeben hat, ggf. müsst ihr eure Pages oder sonstigen Einstellungen anpassen. Prüft, ob das neue Script eine andere TFT-Firmware benötig bzw. einen anderen Berry-Treiber. Diese Info findet ihr in der zweiten Zeile des Scripts.
|
||||
Wenn es zu diesen Änderungen kommt, weisen wir im Forum auch explizit darauf hin.
|
||||
|
||||
Deaktiviert das alte Script und behaltet es als Fallback.
|
||||
|
||||
Beim Start des neuen Script kann es eventuell zu Warnungen im Log kommen, wenn neue Datenpunkte angelegt werden. Startet das Script nochmal neu, dann sollte es ohne Warnungen starten.
|
||||
|
||||
## "Waiting for Content" - es geht nicht weiter
|
||||
|
||||
Hier liegt der Fehler sehr oft in den Einstellungen zur MQTT - Verbindung.
|
||||
* Prüft als erstes die Einstellungen im MQTT - Adapter, vor allem der Port, dieser darf nicht doppelt genutzt werden, z.B. durch einen zweiten Adapter. Dazu gibt es im Script auch eine Funktion, die ein Portscan durchführt und das Ergebnis im Log ausgibt. Diesen Scan könnt ihr über das Servicemenü am Panel aktivieren (Einstellungen -> Script -> Port-Check) oder direkt im ioBroker unter 0_userdata.0.NSPanel.X.Config.MQTT.portCheck auf True setzen. Danach das Script neu starten und das Log auswerten.
|
||||
* Vergleicht die Pfade im ioBroker vom MQTT - Adapter mit den Einstellungen im Script unter.
|
||||
```typescript
|
||||
const NSPanelReceiveTopic: string = 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT';
|
||||
const NSPanelSendTopic: string = 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend';
|
||||
```
|
||||
Weiter unten findet ihr nochmal die Einstellung vom MQTT-Adapter und Tasmota.
|
||||
|
||||
## Berry-Driver nicht oder falsch installiert
|
||||
|
||||
## MQTT-Adapter Einstellungen
|
||||
Bilder sagen meistens mehr als Worte. Wichtig ist, wenn User und Passwort vergeben worden sind, diese auch in Tasmota eingetragen werden müssen.
|
||||
Hier wenn der Adapter als Server läuft
|
||||
|
||||
<img width="1186" alt="Bildschirmfoto 2023-09-26 um 18 08 54" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/70d8d600-d385-412d-8db2-17206509be55">
|
||||
|
||||
<img width="1186" alt="Bildschirmfoto 2023-09-26 um 18 09 05" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/bdc61937-2ea8-4dbf-9fad-472c893c0a77">
|
||||
|
||||
<img width="1186" alt="Bildschirmfoto 2023-09-26 um 18 09 22" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f2c4e065-8c46-44d5-9aa7-a79096a3fc15">
|
||||
|
||||
****
|
||||
Hier als Client
|
||||
|
||||
<img width="952" alt="Bildschirmfoto 2024-09-23 um 12 44 14" src="https://github.com/user-attachments/assets/39c29087-b56a-48e1-a8c6-608b1d375507">
|
||||
<img width="952" alt="Bildschirmfoto 2024-09-23 um 12 43 49" src="https://github.com/user-attachments/assets/e8af9684-78bc-49e8-a2bb-608205887275">
|
||||
|
||||
***
|
||||
## MQTT-Tasmota Einstellungen
|
||||
|
||||
* FULL TOPIC -> für eine sinnvolle Hierarchie sollte nicht die Vorgabe %prefix%/%topic% genutzt werden, sondern umgekehrt. Seht euch die beiden Bilder unten an und entscheidet selber.
|
||||
[zurück zur Installtionsanleitung](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---Basisinstallation#4-mqtt-tasmota-config)
|
||||
***
|
||||
|
||||
Hierarchie mit **Smarthome/%topic%/%prefix%**
|
||||
<img width="402" alt="Bildschirmfoto 2023-09-26 um 18 38 06" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/7597c582-200f-4ace-baca-4acc5eff53cd">
|
||||
|
||||
Hierarchie mit **Smarthome/%prefix%/%topic%**
|
||||
<img width="414" alt="Bildschirmfoto 2023-09-26 um 18 39 40" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/213d3d4a-0f72-423e-b5ff-273ed85d220a">
|
||||
|
||||
***
|
||||
## "CustomSend" fehlt
|
||||
[In der Basisinstallation gibt es drei Möglichkeiten](ioBroker---Basisinstallation.md#7-customsend-anlegen)
|
||||
***
|
||||
367
new/ioBroker---Basisinstallation.md
Normal file
367
new/ioBroker---Basisinstallation.md
Normal file
@@ -0,0 +1,367 @@
|
||||
|
||||
|
||||
## Step für Step - Anleitung zur Installation
|
||||
Anleitung zur Einrichtung eines Sonoff NSPanel mit Lovelace UI unter ioBroker
|
||||
Am Ende dieses Leitfaden sollte auf eurem Panel der Bildschirmschoner zu sehen sein.
|
||||
|
||||
|
||||
|
||||
|
||||
# **Index**
|
||||
|
||||
**1.)** [ioBroker Voraussetzungen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#1-ioBroker-Voraussetzungen)
|
||||
**2.)** [NSPanel mit Tasmota flashen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#2-panel-mit-tasmota-flashen)
|
||||
**3.)** [Berry-Treiber installieren](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#3-berry-treiber-installieren)
|
||||
**4.)** [MQTT (Tasmota) Config](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#4-mqtt-tasmota-config)
|
||||
**5.)** [TFT-Firmware flashen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#5-tft-firmware-flashen)
|
||||
**6.)** [MQTT (ioBroker) Config](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#6-mqtt-iobroker-config)
|
||||
- 6a) [Standard-Variante mit MQTT Broker/Client Adapter](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#6a-standard-variante-mit-mqtt-brokerclient-adapter)
|
||||
- 6b) [Abweichende Variante **mit** extern betriebenem Mosquitto MQTT-Broker --> mit MQTT-Client Adapter](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#6b-abweichende-variante-mit-extern-betriebenem-mosquitto-mqtt-broker----mit-mqtt-client-adapter)
|
||||
|
||||
**7.)** [CustomSend anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#7-customsend-anlegen)
|
||||
**8.)** [Einstellungen in JS-Adapter Instanz](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#8--einstellungen-in-js-adapter-instanz)
|
||||
**9.)** [Icon "TypeScript" anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#8--icon-typescript-anlegen)
|
||||
**10.)** [„NSPanelTs.ts“ anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#9--nspaneltsts-anlegen)
|
||||
**11.)** [„NSPanelTs.ts“ konfigurieren](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#9--nspaneltsts-konfigurieren)
|
||||
**12.)** [Aliase anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#11--aliase-anlegen)
|
||||
**13.)** [Seitengestaltung](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#12--seitengestaltung)
|
||||
|
||||
## **1.) ioBroker Voraussetzungen**
|
||||
|
||||
Für den Betrieb wird „kein“ ioBroker-lovelace-Adapter benötigt. Die komplette lovelace-Integration erfolgt über die TFT-Firmware und die nachfolgenden ioBroker-Adapter.
|
||||
* ### MQTT - Adapter
|
||||
|
||||
Die Kommunikation zwischen dem NSPanel und ioBroker erfolgt mittels MQTT über Tasmota. Es besteht auch die Möglichkeit einen externen MQTT-Server zu nutzen. Dazu mehr im Punkt MQTT Config.
|
||||
* ### Javascript-Adapter
|
||||
Es werden zwei Type-Skripte (TS = das etwas mächtigere Javascript) benötigt. Zum Einen ein Icon-Skript, da alle verwendeten Icons nicht als „echte Grafiken“ im Panel hinterlegt sind, sondern als Schriftzeichen-Symbole. Des Weiteren ein TS-Skript mit dem eigentlichen Laufzeit-Code, welches für jedes eingesetzte NSPanel vorhanden und konfiguriert sein muss.
|
||||
* ### Geräte verwalten (Device) - Adapter
|
||||
|
||||
Über diesen Adapter sollen die Aliase später (mit Ausnahme des Media-Alias für Alexa & Co.) erstellt werden. Mehr infos dazu dann im Abschnitt Alias erstellen
|
||||
* ### Accu-Weather-Adapter
|
||||
|
||||
Spielt in erster Linie eine Rolle beim Screensaver-Wetter, da zum Ersten die Icons und die Temperatur-Informationen für den Forecast ausgelesen werden und zum Zweiten das aktuelle Wettericon für den Screensaver benötigt wird.
|
||||
|
||||
als Alternative kann auch der `DAS WETTER` Adapter genutzt werden. In dem Fall muss im Script unter Punkt 3 die Konfiguration angepasst werden.
|
||||
|
||||
***
|
||||
|
||||
## **2.) Panel mit Tasmota flashen**
|
||||
|
||||
**Sollte das NSPanel bereits vor der Bereitstellung der Tasmota v13.0.X initial geflashed worden sein, kann es zu Partitionierungs-Problemen mit einer Version >= 13.0.X kommen. In diesem Fall muss das Partitionsschema geändert werden. Ein neues NSPanel kann mit der neuesten Tasmota-Version geflashed werden.
|
||||
Dazu gibt es eine Anleitung hier im Wiki unter [Tasmota FAQ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ).
|
||||
Danach kann man auf Version 13.0 und höher updaten.**
|
||||
|
||||
|
||||
Matthias Kleine hat ein neues Video zum ganzen Installationsprozzes, vom flashen bis zum Anpassen der NSPanel-Script Datei, erstellt.
|
||||
|
||||
**Neues Video Tutorial** von [haus-automatisierung.com](http://haus-automatisierung.com/)
|
||||
https://www.youtube.com/watch?v=ZPLJk2ZLo_8 - NSPanel mit Lovelace UI - so habe ich mir das vorgestellt!
|
||||
|
||||
|
||||
Als Alternative zu den von Matthias gezeigten Tools zum Flashen des ESP32 kann man mittlerweile auch den [Tasmota WebInstaller](https://tasmota.github.io/install/) nutzen. Die Nutzung ist relativ selbsterklärend.
|
||||
|
||||
|
||||
Nach dem Flashen solltest du bereits die grundsätzliche Tasmota Konfiguration vornehmen:
|
||||
|
||||
a) Unter „Sonstige Einstellungen“ trägst du im Feld Vorlage
|
||||
```json
|
||||
{"NAME":"NSPanel","GPIO":[0,0,0,0,3872,0,0,0,0,0,32,0,0,0,0,225,0,480,224,1,0,0,0,33,0,0,0,0,0,0,0,0,0,0,4736,0],"FLAG":0,"BASE":1}
|
||||
```
|
||||
ein, hakst Aktivieren "an" und klickst auf Speichern. Du kannst natürlich auch noch Device und Friendly Name vergeben
|
||||
|
||||
|
||||
b) Unter Logging fügst du die IP von deinem ioBroker unter Sys-Log Host () ein und klickst auf Speichern.
|
||||
<img src="picture/basisinstallation/tasmota-logging-einstellungen.png" alt="TASMOTA Logging" width="350"/>
|
||||
|
||||
c) **Hinweis**: Unter Umständen macht es Sinn, die NSPanel Temperatursensoren noch zu konfiguirieren / kalibrieren. Wir haben dies in der [Tasmota FAQ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ#2-sensoren) erklärt.
|
||||
|
||||
***
|
||||
|
||||
## **3.) Berry-Treiber installieren**
|
||||
Im Tasmota findest du unter „Konsolen“ den Button „Verwalte Dateisystem“. Wenn du diesen anklickst, siehst du einen weiteren Button „Datei erstellen und bearbeiten“. Du änderst den Dateinamen „neue-datei.txt“ in „autoexec.be“ und fügst den Inhalt aus dem folgenden Link ein:
|
||||
**https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be**
|
||||
|
||||
<img src="picture/basisinstallation/tasmota-autoexec.png" alt="Tasmota Dateisystem" width="700"/>
|
||||
|
||||
Danach klickst du auf „Speichern“ und dann solltest du Tasmota rebooten.
|
||||
|
||||
Wenn das Panel bereits unter einer anderen Variante installiert war, dann bitte alle Dateien (insbesondere autoexec.be und autoexec.bec) vorher über das Flammensymbol hinter dem Dateinamen löschen. Und von vorne mit dem Punkt 3 beginnen.
|
||||
|
||||
<img src="picture/basisinstallation/tasmota-dateisystem.png" alt="Tasmota Dateisystem" width="500"/>
|
||||
|
||||
***
|
||||
|
||||
## **4.) MQTT (Tasmota) Config**
|
||||
|
||||
Im Tasmota unter „Einstellungen/MQTT konfigurieren“:
|
||||
|
||||
**Host** -> die IP deines ioBrokers / MQTT-Server
|
||||
**Port** deiner ioBroker-MQTT-Adapter-Instanz eingeben (für mqtt.0.). Wenn du noch keinen MQTT-Adapter installiert hast, dann verwende bitte nicht unbedingt den Standard-Port 1883. Dieser Port wird auch von anderen Pseudo-MQTT-Adaptern (Sonoff/Shelly/etc.) ebenfalls verwendet und führt im parallelen Betrieb mit anderen MQTT-Devices später unweigerlich zu Komplikationen. Verwende für die MQTT-Instanzen einen Port ab 1886 oder 1887 oder 1888 oder höher. Das Problem zeigt sich in der Regel ab dem Zeitpunkt, an dem der Topic „CustomSend“ nicht von deiner MQTT-Instanz abonniert wird.
|
||||
**Client** Name der in der Connect Meldung vom MQTT-Adapter angezeigt werden soll (mqtt.0.info.connection)
|
||||
**Benutzer** und **Passwort** Wenn in der ioBroker-MQTT-Instanz vergeben wurde, hier auch eintagen
|
||||
**Topic** Name für die Variable `%topic%` , diese wird für die Hierarchie im MQTT genutzt
|
||||
**Full Topic** verwende in der Regel „SmartHome/%topic%/%prefix%/“. Eine Erklärung dazu, warum es anders sein soll als wie in der Tasmota vorgeschlagen, [findest du hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#mqtt-tasmota-einstellungen).
|
||||
|
||||
Speichern klicken und Einstellungen verlassen
|
||||
|
||||
<img src="picture/basisinstallation/tasmota-mqtt.png" alt="Tasmota MQTT Einstellungen" width="350"/>
|
||||
|
||||
***
|
||||
|
||||
## **5.) TFT-Firmware flashen**
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Es gab Probleme mit der Tasmota-Version 14.2.X beim Flashen. Daher bitte vor dem Flashen des Displays (TFT) auf die Tasmota-Version >= 14.3.0 upgraden. Ansonsten kann es zu Fehlern beim FlashNextion kommen!
|
||||
|
||||
> **Achtung !!!**
|
||||
>Zum Flashen ist es wichtig, dass Ihr die aktuelle TFT-Firmware-Version nutzt, sonst kann es zu ungewollten Fehlern kommen und ggf. müsst Ihr den Flashvorgang dann wiederholen. Ihr findet die aktuelle Version immer im aktuellen [NsPanelTS.ts-Skript](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts) am Ende des ioBroker TypeScript Header:**
|
||||
|
||||
```json
|
||||
|
||||
Upgrades in Konsole:
|
||||
Tasmota BerryDriver : Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
|
||||
>> TFT EU STABLE Version : FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v4.4.0.tft <<
|
||||
---------------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
/******************************* Begin CONFIG Parameter *******************************/
|
||||
```
|
||||
|
||||
Zum Flashen müsst Ihr dann die Tasmota Konsole öffnen und in die Kommandozeile
|
||||
`FlashNextion <Hier den Link aus dem NsPanelTS.ts-Skript einfügen>` (siehe oben)
|
||||
eingeben und mit Enter bestätigen. Das Panel installiert jetzt die TFT-Firmware (Kann beim ersten Mal ein paar Minuten dauern – Fortschritt beobachten – am Ende erfolgt ein Reboot und das Panel wechselt in einen Screen – „Waiting for Content“
|
||||
|
||||
<img src="picture/basisinstallation/panel-waiting-for-content.png" alt="Waiting fpor Content" width="500"/>
|
||||
|
||||
|
||||
***
|
||||
|
||||
## **6.) MQTT (ioBroker) Config**
|
||||
|
||||
### 6a) Standard-Variante mit MQTT Broker/Client Adapter
|
||||
|
||||
|
||||
|
||||
Wenn du bereits eine Instanz des MQTT-Adapters (z.B. mqtt.0.) nutzt, dann bitte den Port der MQTT-Adapter-Instanz auch im Tasmota-MQTT verwenden. Bitte auch hier den Hinweis aus Punkt 4b beachten und ggf. einen anderen Port für die Kommunikation eintragen.
|
||||
Ansonsten wählst du im ioBroker-Menü unter „Adapter“ den mqtt-Adapter aus und erstellst wie gewohnt eine Instanz des Adapters. Du kannst dir natürlich auch eine zusätzliche Instanz (z.B. mqtt.1. oder mqtt.2. etc.) erstellen.
|
||||
|
||||
Einstellungen im Reiter Verbindung
|
||||
a) IP = Server/Broker
|
||||
b) Zugriff von allen IPs zulassen auswählen
|
||||
c) Port 1886 (analog Port aus Tasmota/MQTT)
|
||||
d) Benutzer (analog Benutzer aus Tasmota/MQTT)
|
||||
e) Kennwort + Kennwort wiederholen (analog Passwort aus Tasmota/MQTT)
|
||||
<img width="1186" alt="MQTT Server Verbindung" src="picture/basisinstallation/mqtt-server-verbindung.png">
|
||||
Einstellungen im Reiter Server-Einstellungen
|
||||
f) States bei subscribe publizieren (angehakt)
|
||||
g) Leere Session erzwingen: Client-Einstellungen verwenden
|
||||
<img width="1186" alt="MQTT Server Settings" src="picture/basisinstallation/mqtt-server-settings.png">
|
||||
Einstellungen im Reiter MQTT-Einstellungen
|
||||
h) Maske zum Bekanntgeben eigener States: **mqtt.0.*** (Bei zusätzlicher Instanz entsprechend höher (mqtt.1.* etc.)
|
||||
i) Eigene States beim Verbinden publizieren (angehakt)
|
||||
<img width="1186" alt="MQTT Server MQTT Einstellungen" src="picture/basisinstallation/mqtt-server-mqtt-einstellungen.png">
|
||||
|
||||
> **!!! ACHTUNG: !!!**
|
||||
> Der haken bei "**Nur bei Änderungen publizieren**" darf nicht aktiv sein, da es sonst zu Problemen in der Navigation kommen kann!
|
||||
> Es wird oft das Sternchen * hinter der Zahl vergessen mqtt.0.*
|
||||
|
||||
______
|
||||
|
||||
|
||||
### 6b) Abweichende Variante **mit** extern betriebenem Mosquitto MQTT-Broker --> mit MQTT-Client Adapter
|
||||
|
||||
|
||||
|
||||
> [!NOTE]
|
||||
> Nur befolgen, wenn ein **externer MQTT-Broker** "außerhalb der ioBroker-Umgebung" betriebsbereit installiert wurde!
|
||||
|
||||
**Wichtig** ist bei `Zusätzliche subscriptions` das Topic einzutragen.
|
||||
|
||||
|
||||
Einstellungen für die Datenpunkte, hier am Beispiel von .../cmnd/CustomSend
|
||||
|
||||
|
||||
Kurzanleitung mit dem MQTT-Client Adapter unter:
|
||||
https://forum.iobroker.net/post/1204391
|
||||
|
||||
***
|
||||
|
||||
## **7.) CustomSend anlegen**
|
||||
|
||||
Der MQTT Datenpunkt wird benötigt und muss vom MQTT-Adapter angelegt werden.
|
||||
|
||||
**Es gibt drei Varianten um diesen Datenpunkt zu erzeugen:**
|
||||
|
||||
Variante 1:
|
||||
Gehe in das Objeckt-Verzeichnis "**mqtt.0.SmartHome.NSPanel_1.cmnd**" und legst in diesem Verzeichnis mit Hilfe des "Expertenmodus" einen Datenpunkt **CustomSend** (Achtung auf korrekte Schreibweise achten) an. Nachdem der Datenpunkt angelegt wurde, sollte der Expertenmodus wieder deaktiviert werden.
|
||||
|
||||
> Im Video wird die Variante 1 direkt in den Objekten des mqtt.0. gezeigt!
|
||||
|
||||
Variante 2:
|
||||
Um den Datenpunkt zu erzeugen, öffnest du im Tasmota die Konsole und gibst
|
||||
`CustomSend time~12:00`
|
||||
ein.
|
||||
|
||||
Variante 3:
|
||||
Alternativ kann auch der MQTT-Explorer (http://mqtt-explorer.com/) genutzt werden und ein payload unter .../cmnd abgesendet werden.
|
||||
im Feld Topic wird er koplette Topic eingetragen.
|
||||
`SmartHome/NSPanel_1/cmnd/CustomSend`
|
||||
den Punkt `raw` auswählen und als Wert `time~12:00` eintragen. Zum Schluß den Button `PUBLISH` drücken.
|
||||
|
||||
|
||||
Danach sollte im MQTT-Adapter unter Objekte ein Datenpunkt: „SmartHome/NSPanel_1/cmnd/CustomSend“ erscheinen. Falls nicht, solange wiederholen bis dieser Datenpunkt abonniert wurde, oder ggfs. Nochmals die MQTT-Einstellungen überprüfen.
|
||||
|
||||
**Achtung:** Wenn man den MQTT-Client Adapter einsetzt, wird der Wert '12:00' **NICHT** im ioBroker gesetzt - dh. der MQTT-Pfad wird erzeugt, aber der Wert steht auf (null) und nicht auf '12:00'. Es muss zuerst für 'CustomSend' die Publish-Funktion aktiviert werden (Zahnrad rechte Seite) - erst jetzt kann man nochmal den Wert mit dem MQTT-Explorer publischen oder den Wert '12:00' direkt im ioBroker unter 'CustomSend' eingeben.
|
||||
|
||||
***
|
||||
|
||||
## **8.) Einstellungen in JS-Adapter Instanz**
|
||||
|
||||
Für den erfolgreichen Start des NSPanelTs.ts (siehe Punkt 10) TypeScript sind noch nachfolgende Einstellungen in der JavaScript-Adapter-Instanz erforderlich:
|
||||
|
||||
* Hinzufügen der npm Module: `moment` und `moment-parseformat`
|
||||
* Aktivierung der Option `Kommando "setObject" erlauben`
|
||||
* Aktivierung der Option `Kommando "exec" erlauben`
|
||||
|
||||
|
||||
|
||||
***
|
||||
|
||||
## **9.) Icon „TypeScript“ anlegen**
|
||||
|
||||
Wie bereits in der Einleitung erwähnt, werden zwei TypeScripts (TS) benötigt. Das erste ist das Icon-Skript. Das Icon-Skript dient zur Übersetzung von Schriftzeichensymbolen zwischen dem Skript und der TFT-Firmware.
|
||||
Unter dem grünen Vezeichnisbaum „global“ im ioBroker-Menüpunkt Skripte erzeugst du ein Skript mit dem Namen „IconsSelector“ vom Typ: TypeScript (TS). Dort fügst du den Inhalt der Datei:
|
||||
**https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/icon_mapping.ts**
|
||||
ein und startest das Skript.
|
||||
|
||||
**Nur zur Info:**
|
||||
Du kannst die einzelnen Icon-Symbolnamen (aktuell 6896 unterschiedliche Icon-Symbole) auf
|
||||
**https://htmlpreview.github.io/?https://github.com/jobr99/Generate-HASP-Fonts/blob/master/cheatsheet.html**
|
||||
einsehen und später (kommen wir bei der Alias-Erstellung noch zu) auch jedes Icon in deinem Panel an entsprechender Stelle verwenden. Für die Einbindung sind die „Namen“ der Icons wichtig.
|
||||
|
||||
***
|
||||
|
||||
## **10.) „NSPanelTs.ts“ anlegen**
|
||||
Unter dem regulären Vezeichnisbaum „common“ im ioBroker-Menüpunkt Skripte erzeugst du (gerne auch in weiteren Unterverzeichnissen) ein weiteres TypeScript mit dem Inhalt:
|
||||
**https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts**
|
||||
|
||||
Dieses Script enthält nur die Grundstruktur und ist nach der Parametereinstellung lauffähig.
|
||||
|
||||
Für jedes einzelne NSPanel das du konfigurieren möchtest, musst du dieses Skript anlegen und speziell für dieses jeweilige NSPanel entsprechende Einstellungen vornehmen. Für den Skriptnamen verwende in der Regel eine Kombination aus Panel und Skriptversion, wie z.B.: NSPANEL_1_3.9.0
|
||||
|
||||
(Es kommen in regelmäßigen Abständen weitere NSPanel-Features und Bug-Fixes in das GitHub-Skript in denen dann nur noch der untere Teil `(--- ab hier keine Konfiguration mehr ---)` ausgetauscht werden muss und die NSPanel-Parameter erhalten bleiben)
|
||||
|
||||
Im oberen Teil des Skripts sind die grundsätzlichen Teile der zu erstellenden Aliase, Konstanten und Variablen (auch Seiten) enthalten. An dieser Stelle ist zunächst wichtig, die Kommunikationsparameter für die MQTT-Kommunikation anzupassen, beginnend mit
|
||||
|
||||
```typescript
|
||||
/***** 1. Tasmota-Config *****/
|
||||
|
||||
// DE: Anpassen an die Verzeichnisse der MQTT-Adapter-Instanz
|
||||
// EN: Adapt to the MQTT adapter instance directories
|
||||
const NSPanelReceiveTopic: string = 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT';
|
||||
const NSPanelSendTopic: string = 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend';
|
||||
|
||||
....
|
||||
|
||||
/***** 2. Directories in 0_userdata.0... *****/
|
||||
|
||||
// DE: Anpassen an das jeweilige NSPanel
|
||||
// EN: Adapt to the respective NSPanel
|
||||
const NSPanel_Path = '0_userdata.0.NSPanel.1.';
|
||||
```
|
||||
|
||||
Bitte starte das Skript. Alle weiteren Parameter stellen wir später ein. Ab jetzt sollte der Startup-Screen „Waiting for Connection“ in den Sreensaver wechseln und minütlich die Uhrzeit an den Screensaver übertragen und das Datum aktualisiert werden.
|
||||
|
||||
***
|
||||
|
||||
## **11.) „NSPanelTs.ts“ konfigurieren**
|
||||
|
||||
Im Punkt 9 haben wir zunächst die nur Kommunikation zwischen Panel und Skript über MQTT hergestellt. Jetzt kommen wir zum Inhalt des Panels:
|
||||
|
||||
**a) Screensaver einstellen**
|
||||
|
||||
das Aussehen des Screensaver kannst du ganz nach deinen Wüschen gestallten. Dafür haben wir im Wiki ein eigenes Thema erstellt, da sich im Laufe der Zeit die Möglichkeiten immer erweitert haben. [Hier lang zu den Einstellungen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver)
|
||||
|
||||
|
||||
**b) Diverse Datenpunkte**
|
||||
Beim ersten Start des Scripts erzeugt das Skript unter 0_userdata diverse Datenpunkte für Screensaver Dimmode, interne Sensoren, Tasmota-Statuswerte, etc.
|
||||
Der Pfad kann im Skript unter „NSPanel_Path“ angepasst werden.
|
||||
|
||||
> **Achtung!**
|
||||
> Ab TS-Script-Version 3.5.0.5 und mit installiertem JavaScript-Adapter ab Version v6.1.3 können auch weitere Alias automatisch erzeugt werden, wenn die Konstante **autoCreateAlias** auf **true** steht.
|
||||
|
||||
***
|
||||
|
||||
## **12.) Aliase Anlegen**
|
||||
Jetzt kommt der eigentliche Teil der Seitengestaltung. Es werden keine Datenpunkte benötigt, sondern Aliase.
|
||||
Ein Alias ist „kein“ Datenpunkt, sondern ein Objekt mit mehreren Datenpunkten.
|
||||
Das Skript setzt entsprechende Trigger auf die Alias-Datenpunkte .SET, .GET, .ACTUAL usw. Deshalb werden deine Steuerelemente im Panel nicht greifen, wenn du mit einzelnen Datenpunkten aus den verschiedenen Adaptern arbeitest.
|
||||
Eine genaue Beschreibung für die diversen Alias-Typen findest du [hier.](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen)
|
||||
|
||||
|
||||
***
|
||||
|
||||
## **13.) Seitengestaltung**
|
||||
Die Seitengestaltung ist nun in einen eigenen Bereich hier in der Wiki gewandert.
|
||||
Die unten aufgeführten Beispiele sind **nicht** mehr im Skript enthalten.
|
||||
|
||||
[Bitte hier klicken](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele)
|
||||
|
||||
|
||||
***
|
||||
**Der Folgende bereich stammt aus einer früheren Version der Wiki, bitte den Link oben beachten!**
|
||||
Am Besten benutzt ihr die Beispiele im Skript und legt entsprechende Aliase hierzu an, die auch in diesem ioBroker-Community-Topic innerhalb der letzten Wochen beschrieben wurden.
|
||||
|
||||
cardEntities mit Alias Lampe/Dimmer/Switch
|
||||
|
||||
|
||||
cardEntities mit RGB und HUE Aliasen (Color)
|
||||
|
||||
|
||||
popupLight mit Farbtemperatur und Brightness
|
||||
|
||||
|
||||
popupLight mit ColorWheel
|
||||
|
||||
|
||||
cardGrid mit Radiosendern/Playlists (Alias Taste)
|
||||
|
||||
|
||||
cardEntities mit Aliasen Lautstärke und Info
|
||||
|
||||
|
||||
cardEntities mit Fenster, Tür, Jalousie und Verschluss
|
||||
|
||||
|
||||
cardEntities mit Abfallkalender
|
||||
|
||||
|
||||
cardMedia
|
||||
|
||||
|
||||
cardAlarm
|
||||
|
||||
|
||||
cardGrid
|
||||
|
||||
|
||||
cardEntities
|
||||
|
||||
|
||||
cardEntities als Subpage unter cardEntities (verschachtelt)
|
||||
|
||||
|
||||
cardNotify
|
||||
|
||||
|
||||
Steuerung von Klimageräten/Klimaanlagen
|
||||
|
||||
|
||||
QR-Code für z.B. Gäste WLAN
|
||||
|
||||
|
||||
Neues Design für Thermostate
|
||||
|
||||
|
||||
***
|
||||
872
new/ioBroker-ALIAS-Definitionen.md
Normal file
872
new/ioBroker-ALIAS-Definitionen.md
Normal file
@@ -0,0 +1,872 @@
|
||||
> **Seite befindet sich noch im Aufbau
|
||||
> Sollte aktuell ein Alias nicht vollständig beschrieben werden, dann gerne eine Frage am Ende des nachfolgenden Thread stellen:**
|
||||
> https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui
|
||||
|
||||
# Einleitung:
|
||||
|
||||
## Alias-Hilfsmittel
|
||||
**Welche Hilfsmittel werden zur Erstellung eines Alias benötigt?:**
|
||||
|
||||
Der "Geräte verwalten"-Adapter für die meisten Alias-Typen:
|
||||
|
||||
|
||||
|
||||
Der "Alias-Manager"-Adapter für spezielle Alias-Typen, wie dem Alias "Media":
|
||||
|
||||
|
||||
**Ich habe die zwei Adapter installiert. Wie bekomme ich die in das ioBroker-Menü:**
|
||||
Über das Stift-Symbol im ioBroker-Hauptmenü lassen sich die Adapter individuell für jeden Benutzer ein- oder ausschalten.
|
||||
|
||||
|
||||
|
||||
Es sollte ein Haken bei Geräte und Alias-Manager gesetzt sein.
|
||||
|
||||
**Was sind Aliase:**
|
||||
Aliase (Pseudonyme) sind die virtuellen Zustandsobjekte, die mit realen Zuständen (Datenpunkten) verknüpft sind.
|
||||
|
||||
**Warum benötige ich im TS-Skript überhaupt Aliase und keine Datenpunkte?**
|
||||
Das TS-Script für das Sonoff NSPanel ist so aufgebaut, dass eigentlich jeder Adapter zur Steuerung benutzt werden kann. Hierbei haben die Entwickler von Adaptern für gleiche Funktionen unterschiedliche Namen verwendet:
|
||||
|
||||
Beispiel:
|
||||
* Sonoff-Adapter: **.power** (aus Tasmota übertragen)
|
||||
* MQTT-Adapter: **.power** (aus Tasmota übertragen)
|
||||
* Shelly-Adapter: **.switch**
|
||||
* KNX-Adapter: **.switch**
|
||||
* Deconz-Adapter: **.on**
|
||||
* etc.
|
||||
|
||||
Also immer der Wunsch, einen Zustand eines Aktors mit true/false zu verändern.
|
||||
|
||||
> Innerhalb der Licht-Adapter wird das später noch deutlicher
|
||||
|
||||
Der Alias benötigt also anstatt **.Power** oder **.Switch** oder **.On** immer nur ein **.SET**, damit der Zustand des Schalt-Aktor's unabhängig vom installierten Adapter geschaltet werden kann. In diesem Fall meldet der im Skript eingebundene Alias ein true oder false in den Alias-Datenpunkt .SET und reicht den Zustandswert an den zugewiesenen spezifischen Adapter-Datenpunkt (ganz egal welcher Typ erwartet wird) weiter.
|
||||
|
||||
# "Geräte verwalten"-Adapter
|
||||
|
||||
|
||||
Zunächst sollt man sich überlegen, welche Aliase nur für ein bestimmtes NSPanel gelten sollen oder für mehrere NSPanels oder sogar innerhalb anderer Visualisierungsarten z.B. ioBroker VIS mitverwendet werden sollen. Dann kann man die Alias Struktur entsprechend mit Ordnern und Unterordnern verfeinern. Das Bürolicht soll z.B. nur über NSPanel_1 geschaltet werden, aber nicht über NS_Panel_2. Das Wetter hingegen ist für alle NSPanel gleich.
|
||||
|
||||
|
||||
## Alias erzeugen - Schritt 1 - Tab "Allgemein"
|
||||
Der erste Schritt in der Alias Erstellung mit dem "Geräte verwalten"-Adapter ist fast immer der gleiche.
|
||||
|
||||
Es wird über die "+" Schaltfläche folgender Dialog aufgeschaltet:
|
||||
|
||||
Jetzt gibst vergibst du einen "sprechenden Namen" für den Alias in der Zeile "Gerätename" und wählst einen der nachfolgenden "Alias-Typen" unter Gerätetyp aus (Auswahlliste wird aufgeschaltet und beinhaltet auch noch weitere Typen als im Bild gezeigt (Momentaufnahme)):
|
||||
|
||||
|
||||
|
||||
> Achtung:
|
||||
> Nicht jeder Gerätetyp (Alias-Typ) funktioniert mit dem NSPanel, sondern nur die, die entweder im weiteren Verlauf benannt sin, oder die im Header des TypeScript definiert sind.
|
||||
|
||||
Die Zeilen Funktion und Raum können ebenfalls ausgewählt werden, haben jedoch keinen Einfluss auf die Funktionalität des NSPAnel's
|
||||
|
||||
## Alias erzeugen - Schritt 2 - Tab "Zustände"
|
||||
|
||||
**Index**
|
||||
|
||||
[Dimmer (channel-dimmer)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#dimmer-channel-dimmer)
|
||||
[Farbtemperatur (channel ct)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#farbtemperatur-channel-ct)
|
||||
[Fenster (channel window)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#fenster-channel-window)
|
||||
[Feuchtigkeit (channel humidity)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#feuchtigkeit-channel-humidity)
|
||||
[HUE Licht (channel hue)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#hue-licht-channel-hue)
|
||||
[Info (channel info)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#info-channel-info)
|
||||
[Jalousien / Rollo / Markisen (channel blind)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#jalousien-channel-blind)
|
||||
[Lautstärke (channel volume)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#lautstärke-channel-volume)
|
||||
[Lautstärke Gruppe (channel volumegrouup)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#lautstärke-gruppe-channel-volumegroup)
|
||||
[Licht (channel light)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#licht-channel-light)
|
||||
[Licht RGB (channel rgb)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#rgb-licht-channel-rgb)
|
||||
[Licht RGB seperat (channel rgbsingle) ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#rgb-licht-einzeln-channel-rgbsingle)
|
||||
[Schieberegler (channel slider)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#schieberegler-channel-slider)
|
||||
[Steckdose (channel socket)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#steckdose-channel-socket)
|
||||
[Taster (channel buttonsensor)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#tastensensor----popupinsel-channel-buttonsensor)
|
||||
[Temperatur (channel temperature)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#temperatur-channel-temperature)
|
||||
[Timer (channel timer.level)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#timer---popuptimer---leveltimer)
|
||||
[Tür (channel door)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#tür-channel-door)
|
||||
[Ventilator (channel level.mode.fan)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#ventilator---fan---channel-levelmodefan)
|
||||
[Schloss / Verschluss (channel lock)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#verschluss-channel-lock)
|
||||
[Warnungen (channel warning)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#warnung-channel-warning)
|
||||
[Wettervorhersage](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#wettervorhersage)
|
||||
|
||||
|
||||
### Alarm - cardAlarm
|
||||
|
||||
siehe auch das Beispiel zur vollständigen Integration der cardAlarm in den ioBroker:
|
||||
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#2-alarm-page
|
||||
|
||||
|
||||
|
||||
***
|
||||
### Dimmer (channel dimmer)
|
||||
|
||||
Der Alias "Dimmer" hat 2 relevante Eigenschaften.
|
||||
* Schalter (an/aus) über Adapter-Datenpunkte on, switch, power, etc.
|
||||
* Helligkeit (dunkel/hell) über Adapter-Datenpunkte level, brightness, bri, etc.
|
||||
|
||||
**Im Beispiel ist eine dimmbare Deckenbeleuchtung über den DeConz-Adapter (Zigbee)**
|
||||
|
||||
Der Schalter im DeConz wird über den Datenpunkt "on" (true/false), d.h Datentyp "boolean" gesteuert.
|
||||
Die Helligkeit wird im Deconz-Adapter über "level" 0-100 oder "bri" 0-255 gesteuert. Für uns bietet sich also der Datenpunkt **level** an, da dieser bereits die Helligkeit in % von 0% bis 100% beinhaltet. Jedoch könnten wir auch mit dem Datentyp **bri** arbeiten und im TypeScript die Umrechnung von 255 (absolut) auf 100 (%) parametrieren.
|
||||
|
||||
Der Dimmer kann in einer cardEntities oder in einer cardGrid platziert werden. (Nachfolgende Abb. cardEntities):
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ Dimmer an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des DeConz-Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung.
|
||||
|
||||
|
||||
Der Schaltzustand (Lampe an/aus) kann direkt aus der cardEntities oder carGrid erfolgen. Für die Regelung der Helligkeit hat der Alias-Gerätetyp "Dimmer" bereits eine Unterseite (siehe nachfolgende Abb.). Diese kann über einen Klick auf den Dimmer-Bezeichner (in diesem Fall "Deckenbeleuchtung") aufgeschaltet werden:
|
||||
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typescript
|
||||
{id: 'alias.0.NSPanel.Licht.WZ', interpolateColor: true}
|
||||
```
|
||||
Mit dem Parameter "name" legen wir den Anzeigenamen fest.
|
||||
Mit dem Parameter "interpolateColor" (optional), soll die abgebildete Lampe (Icon) den An/Aus und die Helligkeit emulieren.
|
||||
|
||||
Es können noch weitere Parameter übergeben werden:
|
||||
* icon
|
||||
* onColor
|
||||
* offColor
|
||||
* minValueBrightness (Default = 0)
|
||||
* maxValueBrightness (Default = 100; im Beispiel mit dem Datenpunkt "bri" also 255)
|
||||
|
||||
***
|
||||
|
||||
### Farbtemperatur (channel ct)
|
||||
|
||||
Der Alias "Farbtemperatur" hat 3 relevante Eigenschaften.
|
||||
* Schalter (an/aus) über Adapter-Datenpunkte on, switch, power, etc.
|
||||
* Helligkeit (dunkel/hell) über Adapter-Datenpunkte level, brightness, bri, etc.
|
||||
* Farbtemperatur (K = Kelvin) über Adapter-Datenpunkte ct, colortemp, etc.
|
||||
|
||||
Der Alias "Farbtemperatur" kann in einer cardEntities oder in einer cardGrid platziert werden. (Nachfolgende Abb. cardEntities):
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Farbtemperatur** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung.
|
||||
|
||||
|
||||
Der Schaltzustand (Lampe an/aus) kann direkt aus der cardEntities oder carGrid erfolgen. Für die Regelung der Helligkeit und CT hat der Alias-Gerätetyp "Farbtemperatur" bereits eine Unterseite (siehe nachfolgende Abb.). Diese kann über einen Klick auf den Bezeichner (in diesem Fall "Farbtemperatur") aufgeschaltet werden:
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typescipt
|
||||
{id: 'alias.0.NSPanel.testFarbtemperatur', name: 'lampe', interpolateColor: true}
|
||||
```
|
||||
Mit dem Parameter "name" legen wir den Anzeigenamen fest.
|
||||
Mit dem Parameter "interpolateColor" (optional), soll die abgebildete Lampe (Icon) den An/Aus und die Helligkeit emulieren.
|
||||
|
||||
Es können noch weitere Parameter übergeben werden:
|
||||
* icon
|
||||
* onColor
|
||||
* offColor
|
||||
* minValueBrightness (Default = 0)
|
||||
* maxValueBrightness (Default = 100; im Beispiel mit dem Datenpunkt "bri" also 255)
|
||||
* minValueColorTemp (z.B. 500 - in Abhängigkeit des jeweiligen Adapters)
|
||||
* maxValueColorTemp: (z.B. 6500 - in Abhängigkeit des jeweiligen Adapters)
|
||||
|
||||
> Hinweis: Es kann auch der HUE-CT verwendet werden
|
||||
|
||||
***
|
||||
|
||||
### Fenster (channel window)
|
||||
|
||||
Der Alias "Fenster" hat 1 relevante Eigenschaft.
|
||||
* Zustand (offen/geschlossen) über Adapter-Datenpunkte open, etc.
|
||||
|
||||
Darstellung in einer "cardGrid"
|
||||
|
||||
Darstellung in einer "cardEntities"
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Fenster** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt den Datenpunkt des Adapters zu:
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typesript
|
||||
{id: 'alias.0.NSPanel.Fenster', onColor: MSGreen, offColor: MSRed, name: 'Fenster Büro'}
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### Feuchtigkeit (channel humidity)
|
||||
|
||||
Der Alias "Feuchtigkeit" hat 1 relevante Eigenschaft.
|
||||
* Zustand (Sensorwert)
|
||||
|
||||
|
||||
|
||||
**Im Beispiel ist ein Homatic IP Sensor über den hmip-Adapter (Funk).** Es kann aber auch jeder andere Sensor (z.B. Zigbee oder WLAN) oder ein Datenpunkt aus einem Wetter-Adapter verwendet werden.
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Feuchtigkeit** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typescript
|
||||
{ id: "alias.0.NSPanel_1.TestFeuchtigkeit", name: "Luftfeuchte außen", icon: "water-percent", unit: "%H", onColor: White},
|
||||
```
|
||||
|
||||
Folgende Parameter können verwendet werden:
|
||||
* name: legt den Anzeigenamen fest
|
||||
* icon: Symbol
|
||||
* unit: Einheit der Luftfeuchte
|
||||
* onColor: Farbe des Icons
|
||||
|
||||
|
||||
> **Hinweis**
|
||||
> **Alternativ kann auch der Alias-Typ "Info" verwendet werden.**
|
||||
|
||||
***
|
||||
|
||||
### HUE-Licht (channel hue)
|
||||
|
||||
> Der Alias Geräte-Typ **HUE-Licht** funktioniert **mit und ohne** dem Wert **"HUE"**. Wenn der Datenpunkt **.HUE** nicht vorhanden ist, wird durch das TypeScript automatisch eine CT (ColorTemperature-Steuerung emuliert)
|
||||
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **HUE-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Der Schaltzustand (Lampe an/aus) kann direkt aus der cardEntities oder carGrid erfolgen. Für die Regelung der Helligkeit, Farbtemperatur und (wenn vorhanden) Farbe hat der Alias-Gerätetyp "HUE-Licht" bereits eine Unterseite (siehe nachfolgende Abb.). Diese kann über einen Klick auf den Bezeichner aufgeschaltet werden:
|
||||
|
||||
|
||||
|
||||
Es können noch weitere Parameter übergeben werden:
|
||||
* icon
|
||||
* onColor
|
||||
* offColor
|
||||
* minValueBrightness (Default = 0)
|
||||
* maxValueBrightness (Default = 100; im Beispiel mit dem Datenpunkt "bri" also 255)
|
||||
* minValueColorTemp (z.B. 500 - in Abhängigkeit des jeweiligen Adapters)
|
||||
* maxValueColorTemp: (z.B. 6500 - in Abhängigkeit des jeweiligen Adapters)
|
||||
|
||||
|
||||
***
|
||||
|
||||
### Info (channel info)
|
||||
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Info** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Beispiel für das PageItem
|
||||
```
|
||||
{ id: "alias.0.NSPanel_1.TestInfo", name: "Windstärke", icon: "wind-power-outline", offColor: MSRed, onColor: MSGreen, unit: "bft", minValue: 0, maxValue: 12, interpolateColor: true, useColor: true }
|
||||
```
|
||||
|
||||
**Parameter**
|
||||
* name:
|
||||
* icon:
|
||||
* offcolor:
|
||||
* oncolor:
|
||||
* unit:
|
||||
* minValue:
|
||||
* maxValue:
|
||||
* interpolateColor:
|
||||
* colorScale:
|
||||
* useValue:
|
||||
* useColor:
|
||||
|
||||
***
|
||||
|
||||
### Jalousien (channel blind)
|
||||
|
||||
|
||||
Und die zugehörige Detailseite
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Jalousie** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Die Konfiguration für Rollo / Jalousie / Markise wurde um die Parameter minValueLevel, maxValueLevel, minValueTilt und maxValueTilt erweitert. Damit können jetzt die Standardwerte überschrieben werden.
|
||||
Es muss immer min und max angegeben werden.
|
||||
|
||||
**Parameter**
|
||||
* name:
|
||||
* icon:
|
||||
* minValueLevel: -> Postion unten -> Standard 0%
|
||||
* maxValueLevel: -> Position oben -> Standard 100%
|
||||
* minValueTilt: -> verdrehen der Lamellen linksrum -> Standard 0%
|
||||
* maxValueTilt: ->verdrehen der Lamellen rechtsrum -> Standard 100%
|
||||
* secondRow: im Detailbild die Zeile unter dem Namen
|
||||
|
||||
Beispiel für das PageItem:
|
||||
```
|
||||
{ id: 'alias.0.NSPanel.allgemein.Rollo', name: "Test Rollo", secondRow: "Hier Text für 2. Zeile", minValueLevel: 100, maxValueLevel: 0, minValueTilt: 100, maxValueTilt: 0},
|
||||
```
|
||||
|
||||
> Wenn die Steuererung nur über die Position möglich ist, gibt es hier eine Beschreibung: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#8-rolladen--jalousie--shutter
|
||||
|
||||
***
|
||||
|
||||
### Klimaanlage - cardThermo - (channel airCondition)
|
||||
|
||||
***
|
||||
|
||||
### Lautstärke (channel volume)
|
||||
|
||||
|
||||
> **Analog zum Alias "Lautstärkegruppe", jedoch mit dem Alias-Gerätetypen "Lautstärke**"
|
||||
|
||||
***
|
||||
|
||||
### Lautstärke-Gruppe (channel volumeGroup)
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **HUE-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typescript
|
||||
{id: 'alias.0.NSPanel_1.Testlautstärke', onColor: MSGreen, offColor:MSRed, minValue: 0, maxValue: 100, name: 'Echo Spot Küche'}
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
name: Vom Alias abweichender Name
|
||||
offColor: wenn Muted
|
||||
onColor: wenn nicht Muted
|
||||
minValue: Minimale Lautstärkewert (Default 0)
|
||||
maxValue: Minimale Lautstärkewert (Default 100)
|
||||
|
||||
***
|
||||
|
||||
### Licht (channel light)
|
||||
|
||||
|
||||
|
||||
**Zur Steuerung von Leuchtmitteln ohne Farbtemperatur oder Farbeffekten (Alternativ kann auch Socket verwendet werden)**.
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
***
|
||||
|
||||
### Medien - cardMedia
|
||||
|
||||
Der Alias-Medien für die cardMedia lässt sich mit dem Geräte-Manager nicht erstellen. Auch mit dem Alias-Manager unter "Automatisch erstellen" aus einem Player-Pfad ist das je nach Adapter eher eine Zufallsproduktion.
|
||||
> Es gibt von britzelpuf bereits einen noch offenen github-Issue: https://github.com/ioBroker/ioBroker.devices/issues/152 seit dem 17.03.2022
|
||||
|
||||
Der Alias gibt aktuell nur einen .ACTUAL her. Das ist jedoch für einen Media-Player definitiv zu wenig.
|
||||
|
||||
> **Es wird bis auf die Aliase für die Squeezebox kein manuell erstellter Alias mehr benötigt. In der Javascript Instanz muss "Kommando SetObject erlauben" aktiviert werden!**
|
||||
|
||||
|
||||
Obwohl das alles Aliase vom Typ Medien sind, sehen bis auf zwei alle anderen nicht korrekt aus, sind aber in der Objektstruktur korrekt und funktionieren auch mit dem NSPanel
|
||||
|
||||
|
||||
#### Spotify-Premium-Adapter
|
||||
|
||||
|
||||
|
||||
> Anleitung:
|
||||
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
|
||||
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
|
||||
|
||||
|
||||
|
||||
#### Alexa2-Adapter
|
||||
|
||||
|
||||
|
||||
> Anleitung:
|
||||
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
|
||||
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
|
||||
|
||||
|
||||
|
||||
#### Sonos-Adapter
|
||||
|
||||
> Anleitung:
|
||||
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
|
||||
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
|
||||
|
||||
[weitere Beschreibung hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-‐-cardMedia-‐-Der-SONOS-Player)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### Volumio-Player
|
||||
|
||||
> Anleitung:
|
||||
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
|
||||
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
|
||||
|
||||
|
||||
|
||||
#### Chromecast-Adpter (Google home)
|
||||
|
||||
> Anleitung:
|
||||
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
|
||||
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
|
||||
|
||||
|
||||
|
||||
#### Logitech SqueezeBoxRPC-Adapter
|
||||
**Skript zum Anlegen eines SqueezeBoxRPC - media-Alias (ab Version 3.4.0.6)**
|
||||
|
||||
|
||||
|
||||
<details>
|
||||
<summary><b>Spoiler:</b> JavaScript Code für Erstellung eines SqueezeBoxRPC -Alias</summary>
|
||||
|
||||
```
|
||||
const aliasPath = 'alias.0.Media.LMS'; // ggfs. Anpassen
|
||||
const aliasDevice = 'SqueezePlay'; // ggfs. Anpassen
|
||||
//Ergibt alias.0.NSPanel_1.Media.SqueezeBoxRPC
|
||||
|
||||
const squeezeBoxInstanz = 'squeezeboxrpc.0.Players.'; // Anpasssen, wenn nicht Instanz 0
|
||||
const squeezeBoxDevice = 'SqueezePlay'; // Anpassen an dein eigenes Device
|
||||
|
||||
var typeAlias, read, write, nameAlias, role, desc, min, max, unit, states, custom;
|
||||
|
||||
function createAlias(idDst, idName,idSrc, idRd, idType, idRole, idAliasType) {
|
||||
if(existsState(idDst)) log(idDst + ' schon vorhanden !', 'warn');
|
||||
else {
|
||||
var obj = {};
|
||||
obj.type = idType;
|
||||
obj.common = getObject(idSrc).common
|
||||
obj.common.alias = {};
|
||||
if(idRd) {
|
||||
obj.common.alias.id = {};
|
||||
obj.common.alias.id.read = idRd;
|
||||
obj.common.alias.id.write = idSrc;
|
||||
obj.common.read = true;
|
||||
} else {
|
||||
obj.common.alias.id = idSrc;
|
||||
}
|
||||
obj.common.type = idAliasType;
|
||||
if(obj.common.read !== false && read) obj.common.alias.read = read;
|
||||
if(obj.common.write !== false && write) obj.common.alias.write = write;
|
||||
obj.common.name = idName;
|
||||
obj.common.role = idRole;
|
||||
obj.common.desc = idDst;
|
||||
if(min !== undefined) obj.common.min = min;
|
||||
if(max !== undefined) obj.common.max = max;
|
||||
if(unit) obj.common.unit = unit;
|
||||
obj.common.states = states;
|
||||
if(custom && obj.common.custom) obj.common.custom = custom;
|
||||
obj.native = {};
|
||||
setObject(idDst, obj);
|
||||
}
|
||||
}
|
||||
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.ALBUM', 'ALBUM', squeezeBoxInstanz + squeezeBoxDevice + '.Album', '', 'state', 'media.album', 'string');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.ARTIST', 'ARTIST', squeezeBoxInstanz + squeezeBoxDevice + '.Artist', '', 'state', 'media.artist', 'string');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.TITLE', 'TITLE', squeezeBoxInstanz + squeezeBoxDevice + '.Title', '', 'state', 'media.title', 'string');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.NEXT', 'NEXT', squeezeBoxInstanz + squeezeBoxDevice + '.btnForward', '', 'state', 'button.forward', 'boolean');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.PREV', 'PREV', squeezeBoxInstanz + squeezeBoxDevice + '.btnRewind', '', 'state', 'button.reverse', 'boolean');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.PLAY', 'PLAY', squeezeBoxInstanz + squeezeBoxDevice + '.state', '', 'state', 'media.state', 'boolean');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.PAUSE', 'PAUSE', squeezeBoxInstanz + squeezeBoxDevice + '.state', '', 'state', 'media.state', 'boolean');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.STOP', 'STOP', squeezeBoxInstanz + squeezeBoxDevice + '.state', '', 'state', 'media.state', 'boolean');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.STATE', 'STATE', squeezeBoxInstanz + squeezeBoxDevice + '.Power', '', 'state', 'switch', 'number');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.VOLUME', 'VOLUME', squeezeBoxInstanz + squeezeBoxDevice + '.Volume', '', 'state', 'level.volume', 'number');
|
||||
createAlias(aliasPath + '.' + aliasDevice + '.VOLUME_ACTUAL', 'VOLUME_ACTUAL', squeezeBoxInstanz + squeezeBoxDevice + '.Volume', '', 'state', 'value.volume', 'number');
|
||||
```
|
||||
</details>
|
||||
|
||||
> Anleitung:
|
||||
> * Neues Skript (JavaScript JS) anlegen
|
||||
> * Code kopieren und einfügen
|
||||
> * Skript aktivieren und ausführen
|
||||
> * Danach wieder Deaktivieren
|
||||
|
||||
Jetzt kommt der spezielle Teil für diesen Adapter. Hierfür sind noch weitere Einstellungen erforderlich:
|
||||
* Alias Manager öffnen, den neu erstellten Alias auswählen und unter "common.role" **media** eingeben
|
||||
|
||||
|
||||
|
||||
|
||||
* unter Objekte zu den Aliasen (alias.0.) gehen:
|
||||
|
||||
|
||||
Bei **PAUSE **und **PLAY **mit dem Stiftsymbol am Ende der Zeile den Dialog aufschalten und 3. Tab Alias die Konvertierungsfunktionen einschalten und analog der nachfolgenden Bilder anpassen (Konverter beim Lesen):
|
||||
|
||||
|
||||
|
||||
Jetzt sollte der spueezeboxrpc korrekt arbeiten
|
||||
|
||||
|
||||
|
||||
|
||||
### RGB-Licht (channel rgb)
|
||||
|
||||
|
||||
|
||||
> Der Alias RGB-Licht wird verwendet, wenn als Color Datenpunkte **RED, GREEN, BLUE und WHITE** vorliegen
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **RGB-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
> Für das Beispiel standen leider keine echten Adapter-Datenpunkte zur Verfügung, daher die Darstellung in 0_userdata.0...
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typescript
|
||||
{id:'alias.0.NSPAnel_1.TestRGBLicht', name:'RGB Licht', minValueBrightness: 0, maxValueBrightness: 100, interpolateColor: true}
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
* name: Vom Alias abweichender Name
|
||||
* offColor: abweichende Farbe für aus
|
||||
* onColor: abweichende Farbe für an
|
||||
* minValueBrightness: Minimale Helligkeit (Default 0)
|
||||
* maxValueBrightness: Minimale Maxiamale Helligkeit (Default 100)
|
||||
* minValueColorTemp: Minimale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 500K)
|
||||
* maxValueColorTemp: Maximale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 6500K)
|
||||
* interpolateColor: Errechnet den Farbton und weist diesen dem Icon zu (Beispiel Pink)
|
||||
|
||||
Mit klick auf den Bezeichner wird das popUpLight aufgeschaltet:
|
||||
|
||||
|
||||
|
||||
|
||||
***
|
||||
|
||||
### RGB-Licht-einzeln (channel rgbSingle)
|
||||
|
||||
|
||||
|
||||
> Der Alias RGB-Licht wird verwendet, wenn als **Color Datenpunkt (RGB) im Hexadezimal-Format (z.B. #7dff7e)** vorliegt.
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **RGB-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
Der Datenpunkt **TEMPERATURE** ist nicht mehr zwingen erforderlich ab Version 4.0.4.5
|
||||
|
||||
|
||||
> Für das Beispiel standen leider keine echten Adapter-Datenpunkte zur Verfügung, daher die Darstellung in 0_userdata.0...
|
||||
|
||||
Alternativ kann dieser Alias auch via CIE, d.h über den XY Parameter (z.B. beim deConz-Adapter) gesteuert werden:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typescript
|
||||
{id. 'alias.0.NSPanel_1.TestRGBEinzeln', name:'RGB-Licht HEX-Color', interpolatecolor: true}
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
name: Vom Alias abweichender Name
|
||||
offColor: abweichende Farbe für aus
|
||||
onColor: abweichende Farbe für an
|
||||
minValueBrightness: Minimale Helligkeit (Default 0)
|
||||
maxValueBrightness: Minimale Maxiamale Helligkeit (Default 100)
|
||||
minValueColorTemp: Minimale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 500K)
|
||||
maxValueColorTemp: Maximale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 6500K)
|
||||
interpolateColor: Errechnet den Farbton und weist diesen dem Icon zu (Beispiel Grün)
|
||||
colormode: "xy" oder "rgb" (default) zur Steuerung der CIE XY Color-Datenpunkte
|
||||
|
||||
Mit klick auf den Bezeichner wird das popUpLight aufgeschaltet:
|
||||
|
||||
|
||||
|
||||
|
||||
***
|
||||
|
||||
### Schieberegler (channel slider)
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Schieberegler** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```
|
||||
{ id: "alias.0.NSPanel_1.Dimmode_BrightnessDay", name: "Brightness Tag", icon: "brightness-5", offColor: MSYellow, onColor: MSYellow, useColor: true, minValue: 5, maxValue: 10},
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
name: Vom Alias abweichender Name
|
||||
offColor: abweichende Farbe für aus
|
||||
onColor: abweichende Farbe für an
|
||||
icon: zu visualisierendes Icon
|
||||
minValue: Minimaler Sliderwert
|
||||
maxValue: Maximaler Sliderwert
|
||||
usecolor:
|
||||
|
||||
***
|
||||
|
||||
### Steckdose (channel socket)
|
||||
|
||||
|
||||
|
||||
> Alternativ kann der Alias Licht verwendet werden!
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Steckdose** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```
|
||||
{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power", icon2: "power",offColor: MSRed, onColor: MSGreen},
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
name: Vom Alias abweichender Name
|
||||
offColor: abweichende Farbe für aus
|
||||
onColor: abweichende Farbe für an
|
||||
icon: zu visualisierendes Icon für On
|
||||
icon2: zu visualisierendes Icon für Off
|
||||
|
||||
|
||||
***
|
||||
|
||||
### Taste (channel button)
|
||||
|
||||
|
||||
|
||||
> Beschreibung für den Alias Taste folgt...
|
||||
|
||||
***
|
||||
|
||||
### Tastensensor --> popupInSel (channel buttonSensor)
|
||||
|
||||
> ab Release 3.7.0
|
||||
|
||||
Das **popupInSel** dient der Auswahl von Werten in einer Aufzählung (Liste/Array) und wird in einer **cardGrid** platziert
|
||||
|
||||
|
||||
|
||||
**ALIAS:**
|
||||
über das '+' Icon im Gerätemanager wird ein DP ".VALUE" angelegt. Dieser verweist auf eine numerische-Aufzählung oder einen numerischen Datenpunkt zur Weiterverarbeitung. Zurückgegeben wird der Wert aus dem Parameter "modeList" beginnend mit 0 (analog Array).
|
||||
|
||||
|
||||
**PageItem:**
|
||||
```
|
||||
{ id: 'alias.0.NSPanel_EMU.TestButtonSensor',
|
||||
icon: 'select-color',
|
||||
name: 'WLED Effekte',
|
||||
onColor: White,
|
||||
modeList: [ 'Solid', 'Android', 'Aurora', 'Blends', 'Blink', 'Bpm', 'Breathe',
|
||||
'Candle', 'Candle Multi', 'Candy Cane', 'Chase', 'Chase 1', 'Chase 2', 'usw.']},
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
### Temperatur (channel temperature)
|
||||
|
||||
|
||||
|
||||
> Beschreibung für den Alias Temperatur folgt...
|
||||
|
||||
***
|
||||
|
||||
### Thermostat - cardThermo - (channel thermostat)
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Thermostat** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
|
||||
Im unteren Teil können ebenfalls Indikatoren eingeblendet werden:
|
||||
|
||||
z.B.
|
||||
|
||||
oder
|
||||
|
||||
etc.
|
||||
|
||||
Wenn der Thermostat über Mode verfügt und dieser auch genutzt werden soll:
|
||||
|
||||
|
||||
Mode wird über externe Datenpunkte gesteuert. Hierzu legst du dir unter 0_userdate.0. einen Ordner deiner Wahl an. In diesem Ordner können jetzt bis zu 5 Datenpunkte (Alle vom Typ boolean (true/false)) angelegt werden:
|
||||
* AUTOMATIC
|
||||
* MANUAL
|
||||
* PARTY
|
||||
* VACATION
|
||||
* BOOST
|
||||
|
||||
Im Alias können "BOOST" und "PARTY" (sofern gewünscht) bereits den neu erstellten Datenpunkten zugewiesen werden:
|
||||
|
||||
|
||||
Die Datenpunkte AUTOMATIC, MANUAL und VACATION können nicht sofort zugewiesen werden, da die ALIAS-Definition diese Objekte nicht vorsieht. In diesem Fall kannst du diese selbst hinzufügen und im Anschluss deine erstellten Datenpunkten zuordnen:
|
||||
|
||||
|
||||
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
|
||||
|
||||
|
||||
> Es müssen nicht alle 5 Modi vorhanden sein. Das Skript liest die vorhandenen Modi ein und verarbeitet auch nur diese
|
||||
|
||||
> Insgesamt stehen Icons im unteren Bereich zur Verfügung. Somit ist es nicht möglich 5 Modi-Icons und 7 Indikatoren-Icons gleichzeitig zu visualisieren. Die Modi (falls im Alias definiert) werden zuerst visualisiert (vorne) und dann, falls verfügbar mit Indikatoren (sofern im Alias definiert) auf insgesamt 8 Icons aufgefüllt.
|
||||
|
||||
Das zugehörige PageItem im TypeScript:
|
||||
```typescript
|
||||
let Bad_Thermostat: PageType =
|
||||
{
|
||||
'type': 'cardThermo',
|
||||
'heading': 'Bad',
|
||||
'subPage': true,
|
||||
'parent': Startseite,
|
||||
'items': [/*PageItem*/{
|
||||
id: 'alias.0.NSPanel.Thermostat',
|
||||
minValue: 100,
|
||||
maxValue: 300,
|
||||
stepValue: 5
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
name: Vom Alias abweichender Name
|
||||
minValue: Minimaltemperatur Beispiel 5°C = 50
|
||||
maxValue: Minimaltemperatur Beispiel 30°C = 300
|
||||
stepValue: Schrittweite Beispiel 0,5°C = 5
|
||||
|
||||
***
|
||||
|
||||
### Timer - popUpTimer - (level.timer)
|
||||
|
||||
> Ab Release 3.7.0
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Für den Timer (Stopp-Uhr) gibt es weder im Geräte-Manager, noch im Alias-Manager einen vorgefertigten ALIAS Gerätetypen. Daher muss dieser eigenhändig erstellt werden.
|
||||
|
||||
**Objekte**
|
||||
|
||||
Der Timer greift auf selbsterstellte Datenpunkte zurück, welche (analog Beispiel) wie folgt angelegt werden müssen.
|
||||
|
||||
* 0_userdata.0.Timer.NSPanel.1Countdown.Sekunden --> number --> Nimmt die eingestellte Zeit aus dem NSPanel in Sekunden auf und wird bei Ausführung durch das externe Script dekrementiert.
|
||||
* 0_userdata.0.Timer.NSPanel.1Countdown.Zustand --> string --> Erhält den Status vom Blockly und vom NSPanel
|
||||
|
||||
Korrekte Erstellung des ALIAS level.timer
|
||||
|
||||
|
||||
Direkt unter Objekte --> alias.0. mit dem "+" die gewünschte Verzeichnisstruktur erzeugen
|
||||
|
||||
Dann mit dem "+" in der Menüleiste den Channel erzeugen:
|
||||
|
||||
|
||||
Dann die States für ACTUAL dazu anlegen:
|
||||
|
||||
|
||||
|
||||
und die States für STATE anlegen:
|
||||
|
||||
|
||||
|
||||
PageItem zum Beispiel:
|
||||
```
|
||||
{ id: "alias.0.NSPanel_1.Countdown", icon: "timer-outline", name: "Timer", onColor: White},
|
||||
```
|
||||
|
||||
|
||||
**Blockly**
|
||||
Der Timer wird über dieses Script-Beispiel (separates und Blockly) gesteuert
|
||||
|
||||
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/PopupTimer.xml)
|
||||
|
||||
***
|
||||
|
||||
### Tür (channel door)
|
||||
|
||||
|
||||
> Analog Alias Fenster. Im "Schritt 1" wird jedoch der Alias-Gerätetyp Tür gewählt
|
||||
|
||||
***
|
||||
|
||||
### Ventilator - Fan - (channel level.mode.fan)
|
||||
|
||||
> ab Release 3.7.0
|
||||
|
||||
|
||||
|
||||
|
||||
**Alias erstellen: **
|
||||
Direkt im Objektverzeichnis unter alias.0. (ggfs. noch Verzeichnisse anlegen) einen Kanal anlegen ("+" in der Menüleiste):
|
||||
|
||||
und die Rolle **level.mode.fan** zuweisen:
|
||||
|
||||
|
||||
Danach folgende States unter dem Kanal (channel) anlegen:
|
||||
* .SET --> Verweist auf An/Aus Datenpunkt des Ventilators (true/false)
|
||||
* .ACTUAL --> Verweist ebenfalls auf An/Aus Datenpunkt des Ventilators (true/false)
|
||||
* .SPEED --> Verweist auf Geschwindigkeit des Vetilators (Default 100%. und kann über maxValue im pageItem begrenzt werden)
|
||||
* .MODE --> Falls der Ventilator über unterschiedliche Modes zur Einstellung verfügt. Ansonsten kann der auch über einen Datenpunkt unter 0_userdata erstellt werden und mittels Blockly Modes erzeugen bzw. steuern.
|
||||
|
||||
|
||||
|
||||
**Das PageItem:**
|
||||
```
|
||||
{ id: "alias.0.NSPanel_1.Ventilator.Fan_1",name: "Ventilator", icon: "fan", onColor: On, offColor: HMIOff, modeList: ['Low', 'Medium', 'High', 'Move', 'Sleep', 'Auto', 'Manual']},
|
||||
```
|
||||
|
||||
modeList enthält die Werte des Datenpunktes (im Beispiel nur exemplarisch) zum Schalten der Modes.
|
||||
|
||||
***
|
||||
|
||||
### Verschluss (channel lock)
|
||||
|
||||
|
||||
|
||||
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ Steckdose an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
|
||||
|
||||
|
||||
|
||||
.SET steuert das Schloss auf/zu mittels true/false ggf. muss im Alias die Schreibkonvertirung genutzt werden. val ? open : close
|
||||
.ACTUAL Rückmeldung des Schlosses
|
||||
|
||||
***
|
||||
|
||||
### Warnung (channel warning)
|
||||
|
||||
Dieser Alias dient nur der Einbindung des dynamischen Abfallkalenders. Dieser ist hier ausführlich beschrieben:
|
||||
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#4-abfallkalender
|
||||
|
||||
|
||||
|
||||
***
|
||||
|
||||
### Wettervorhersage
|
||||
|
||||
|
||||
|
||||
|
||||
und die Temperatur (etwas tiefer). Weitere Datenpunkte, wie z.B. Min- und Max-Temperatur können ebenfalls verknüpft werden, finden jedoch im TypeScript keine Berücksichtigung.
|
||||
|
||||
In diesem Fall wird die Temperatur aus einem Datenpunkt einer Wetterstation visualisiert. Es kann natürlich auch ein Datenpunkt mit der aktuellen Außentemperatur aus einem anderen Adapter daswetter.0.xxxxx, accuweather.0.xxxxx, openweathermap.0.xxxxx, etc. ausgewählt werden.
|
||||
|
||||
> **Achtung:**
|
||||
> **Dieser Alias muss erstellt werden, damit die 4 kleineren Icons (Weather-Forecast und/oder 4 Sensordatenpunkte) im unteren Screensaver visualisiert werden können.**
|
||||
|
||||
***
|
||||
1321
new/ioBroker-ALIAS-Table.md
Normal file
1321
new/ioBroker-ALIAS-Table.md
Normal file
File diff suppressed because it is too large
Load Diff
767
new/ioBroker-Card-Definitionen-(Seiten).md
Normal file
767
new/ioBroker-Card-Definitionen-(Seiten).md
Normal file
@@ -0,0 +1,767 @@
|
||||
# cardEntities
|
||||
|
||||
|
||||
4 vertikal angeordnete Steuerelemente (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
||||
|
||||
```typescript
|
||||
let Seitenname: PageType =
|
||||
{
|
||||
"type": "cardEntities",
|
||||
"heading": "Deine Überschrift",
|
||||
"useColor": true,
|
||||
"subPage": false,
|
||||
"parent": undefined,
|
||||
"items": [
|
||||
{ id: "Dein_Erstellter_Alias_1", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_2", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_3", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_4", Weitere Parameter siehe Alias Definition }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
# cardGrid
|
||||
|
||||
|
||||
|
||||
|
||||
6 horizontal angeordnete Steuerelemente (in 2 Reihen je 3 Steuerelemente) (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
||||
|
||||
```typescript
|
||||
let Seitenname: PageType =
|
||||
{
|
||||
"type": "cardGrid",
|
||||
"heading": "Deine Überschrift",
|
||||
"useColor": true,
|
||||
"subPage": false,
|
||||
"parent": undefined,
|
||||
"items": [
|
||||
{ id: "Dein_Erstellter_Alias_1", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_2", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_3", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_4", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_5", Weitere Parameter siehe Alias Definition },
|
||||
{ id: "Dein_Erstellter_Alias_6", Weitere Parameter siehe Alias Definition }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
# cardUnlock (ab v4.3.3)
|
||||
|
||||
Die cardUnlock dient der Absicherung spezieller Seiten, die vor unbefugtem Zugriff (ggfs. Service Pages) geschützt werden sollen:
|
||||
|
||||
|
||||
> Bei Benutzung der cardUnlock wird die Zielseite aus dem Page-Array herausgenommen. Die Target-Page sollte nicht als Top-Level-Page, sondern als Subpage definiert sein.
|
||||
|
||||
im Datenpunkt **0_userdata.0.NSPanel.Unlock.UnlockPin** kann eine PIN vergeben werden. Default wird diese PIN als **0000** definiert.
|
||||
|
||||
Erstellung des Alias:
|
||||
Die cardUnlock wird ab Version `4.3.3.3` mit einem Alias vom Gerätetyp `Feueralarm` automatisch erstellt. Die Erstellung des Alias und der zugehörigen Datenpunkte erfolgt, `sobald die cardUnlock erstmals eingebunden und aufgerufen` wird.
|
||||
|
||||
Unter 0_userdata.0... werden folgende Datenpunkte automatisch angelegt:
|
||||
|
||||
Die angelegte PIN-Nummer lässt sich unter "Wert" von "0000" in (siehe Beispiel) z.B. "1234" ändern.
|
||||
|
||||
Unter alias.0... wird folgender Alias automatisch angelegt:
|
||||
|
||||
|
||||
**Beispiel der Seitenerstellung:** (im Service-Menü enthalten)
|
||||
```typescript
|
||||
//Level 0 (if service pages are used with cardUnlock)
|
||||
let Unlock_Service: PageType =
|
||||
{
|
||||
'type': 'cardUnlock',
|
||||
'heading': 'Service Pages',
|
||||
'useColor': true,
|
||||
'items': [{ id: 'alias.0.NSPanel.Unlock',
|
||||
targetPage: 'NSPanel_Service_SubPage',
|
||||
autoCreateALias: true }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
siehe auch:
|
||||
* https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC und
|
||||
* https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#page-beispiele
|
||||
|
||||
Da die cardUnlock innerhalb eines "Smart Home" nur einmal erforderlich sein sollte, teilt sie die Datenpunkte mit allen weiteren NSPanels im Haus. Es ist darüber hinaus jedoch auch möglich, `weitere Seiten` über die `cardUnlock` nach dem gleichen Schema vor unbefugten Zugriffen mit dem vergebenen `PIN` zu schützen.
|
||||
|
||||
Hierzu muss lediglich eine weitere `Page` vom Typ `cardUnlock` definiert werden und das Ziel `targetPage` auf eine `vorhandene subPage` zeigen:
|
||||
```
|
||||
let Unlock_PageXYZ: PageType =
|
||||
{
|
||||
'type': 'cardUnlock',
|
||||
'heading': 'Titel der Page',
|
||||
'useColor': true,
|
||||
'items': [{ id: 'alias.0.NSPanel.Unlock',
|
||||
targetPage: 'Eine_weitere_Subpage',
|
||||
autoCreateALias: true }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
# cardAlarm
|
||||
|
||||
|
||||
(Erstellung des cardAlarm siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#2-alarm-page))
|
||||
|
||||
```typescript
|
||||
let Alarmseite: PageType =
|
||||
{
|
||||
"type": "cardAlarm",
|
||||
"heading": "Alarm",
|
||||
"useColor": true,
|
||||
"subPage": false,
|
||||
"items": [
|
||||
{ id: 'alias.0.NSPanel.Alarm' }
|
||||
actionStringArray: ['Vollschhutz','Zuhause','Nacht','Besuch','Ausschalten'], // Optional - ansonsten aus Sprachdatei
|
||||
autoCreateALias: true }
|
||||
]
|
||||
};
|
||||
```
|
||||
# cardMedia v2.0 (ab Release v3.9.0)
|
||||
|
||||
|
||||
**Neue Elemente**
|
||||
* Shuffle (nach verfügbarkeit des Adapters)
|
||||
|
||||
|
||||
* Neue Auswahl für Speakerauswahl/-wechsel
|
||||
|
||||
|
||||
* Playlist
|
||||
|
||||
|
||||
* Tracklist (Bei Playlist und falls verfügbar)
|
||||
|
||||
|
||||
* Equalizer-Profile
|
||||
|
||||
[Link: Blockly für Klangsteuerung in der cardMedia](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#12-equalizer-f%C3%BCr-cardmedia)
|
||||
|
||||
* Repeat (nach Verfügbarkeit des Adapters)
|
||||
|
||||
|
||||
(Erstellung des "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
||||
|
||||
> **Definition ab TS-Version 3.9.0** (Breaking Changes)
|
||||
|
||||
**alexa2-Adapter**
|
||||
```typescript
|
||||
let Alexa: PageType =
|
||||
{
|
||||
'type': 'cardMedia',
|
||||
'heading': 'Alexa',
|
||||
'items': [{
|
||||
id: AliasPath + 'Media.PlayerAlexa',
|
||||
adapterPlayerInstance: 'alexa2.0.',
|
||||
mediaDevice: 'G0XXXXXXXXXXXXXX', // Eigene Seriennummer des primären Device einstellen
|
||||
speakerList: ['Überall','Gartenhaus','Esszimmer','Heimkino','Echo Dot Küche','Echo Spot Buero'],
|
||||
//analog alexa2 Music-Provider
|
||||
//Mögliche Playlists:
|
||||
playList: ['Spotify-Playlist.Party Playlist',
|
||||
'Amazon-Music-Playlist.Mein Discovery Mix',
|
||||
'My-Library-Playlist.2020',
|
||||
'My-Library-Playlist.2021',
|
||||
'TuneIn.Radio Bob Rock',
|
||||
'TuneIn.NDR2',
|
||||
'Spotify-Playlist.Sabaton Radio',
|
||||
'Spotify-Playlist.Rock Party',
|
||||
'Spotify-Playlist.This Is Nightwish',
|
||||
'Spotify-Playlist.Metal Christmas'],
|
||||
equalizerList: ['Bassboost','Klassik','Dance', 'Deep', 'Electronic', 'Flat', 'Hip-Hop', 'Rock',
|
||||
'Metal', 'Jazz', 'Latin', 'Tonstärke', 'Lounge', 'Piano'],
|
||||
colorMediaIcon: colorAlexa,
|
||||
colorMediaArtist: Yellow,
|
||||
colorMediaTitle: Yellow,
|
||||
alwaysOnDisplay: true,
|
||||
autoCreateALias: true
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
**spotify-premium Adapter**
|
||||
```typescript
|
||||
let SpotifyPremium: PageType =
|
||||
{
|
||||
"type": "cardMedia",
|
||||
"heading": "Spotify-Premium",
|
||||
"subPage": false,
|
||||
"parent": undefined,
|
||||
"items": [{
|
||||
id: AliasPath + 'Media.PlayerSpotifyPremium',
|
||||
adapterPlayerInstance: "spotify-premium.0.",
|
||||
speakerList: ['LENOVO-W11-01','Terrasse','Überall','Gartenhaus','Esszimmer','Heimkino','Echo Dot Küche',
|
||||
'Echo Spot Buero'],
|
||||
//Favoriten Playlists aus Spotify in Liste eintragen
|
||||
playList: ['Party Playlist','Sabaton Radio','Rock Party','This Is Nightwish','Metal Christmas'],
|
||||
repeatList: ['off','context','track'],
|
||||
equalizerList: ['Bassboost','Klassik','Dance', 'Deep', 'Electronic', 'Flat', 'Hip-Hop', 'Rock',
|
||||
'Metal', 'Jazz', 'Latin', 'Tonstärke', 'Lounge', 'Piano'],
|
||||
colorMediaIcon: colorSpotify,
|
||||
colorMediaArtist: Yellow,
|
||||
colorMediaTitle: Yellow,
|
||||
alwaysOnDisplay: true,
|
||||
autoCreateALias: true
|
||||
}]
|
||||
};
|
||||
```
|
||||
**Volumio-Player**
|
||||
|
||||
```typescript
|
||||
let VolumioBoss: PageType =
|
||||
{
|
||||
'type': 'cardMedia',
|
||||
'heading': 'Volumio-Büro',
|
||||
'subPage': false,
|
||||
'parent': undefined,
|
||||
'items': [{
|
||||
id: 'alias.0.NSPanel.Volumio-Boss',
|
||||
adapterPlayerInstance: 'volumio.0.',
|
||||
speakerList: [], /* this must, no function */
|
||||
playList: [], /* empty for dynamic reading */
|
||||
colorMediaIcon: colorSpotify,
|
||||
colorMediaTitle: colorSpotify,
|
||||
colorMediaArtist: Yellow,
|
||||
alwaysOnDisplay: true,
|
||||
autoCreateALias: true
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
### Parameter
|
||||
|
||||
**adapterPlayerInstance:** "alexa.0." oder "spotify-premium.0." oder "sonos.0." oder "chromecast.0." oder "squeezeboxrpc.0.Players.DeinPlayer.
|
||||
|
||||
**mediaDevice:**
|
||||
* für "alexa.0.": Seriennummer oder Gruppennummer des primären Alexa-Device
|
||||
* für "sonos.0.": IP-Adresse des Sonsos primären Sonos-Device (getrennt mit "_") --> Beispiel: 192_168_1_250
|
||||
* für "spotify-premium.0.": Zeile kann gelöscht werden, da Spotify immer nur einen Speaker oder Gruppe steuern kann (automatische Ermittlung)
|
||||
* für "chromecast.0.": Zeile kann gelöscht werden, da GoogleHome keine Funktionalitäten zum Wechseln von Lautsprechern zur Verfügung stellt
|
||||
* für "squeezeboxrpc.0.": Zeile kann gelöscht werden, da squeezeboxrpc keine Funktionalitäten zum Wechseln von Lautsprechern zur Verfügung stellt
|
||||
|
||||
**speakerList:** (Namen und Reihenfolge der Speaker selbst bestimmen)
|
||||
* für "alexa.0.": Device-Namen aus alexa2 möglich. Wenn leer [] , dann alle Devices des alexa2-Adapter
|
||||
* für "sonos.0.": Zeile kann gelöscht werden, da Funktionalität zum schieben auf andere Devices im Sonos-Adapter nicht möglich
|
||||
* für "spotify-premium.0.": Alle SmartDevice-Namen aus Spotify möglich (Im Gegensatz zu Alexa auch Smartphones und Rechner)
|
||||
* für "chromecast.0.": Zeile kann gelöscht werden, da GoogleHome keine Funktionalitäten zum Wechseln von Lautsprechern zur Verfügung stellt
|
||||
* für "squeezeboxrpc.0.": "Bekannte Player unter Players (aktuell keine Funktion)
|
||||
|
||||
# cardQR
|
||||
|
||||
|
||||
Erstellung der cardQR siehe (https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#5-qr-code-page) by Kuckuckmann
|
||||
|
||||
```typescript
|
||||
let Seitenname: PageType =
|
||||
{
|
||||
"type": "cardQR",
|
||||
"heading": "Deine Überschrift",
|
||||
"useColor": true,
|
||||
"subPage": false,
|
||||
"parent": undefined,
|
||||
"items": [{ id: "alias.0.NSPanel.Guest_Wifi" }] // Beispiel
|
||||
};
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
```typescript
|
||||
hidePassword: true,
|
||||
autoCreateALias: true
|
||||
```
|
||||
|
||||
# cardThermo
|
||||
|
||||
(Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
||||
|
||||
> Für Thermostat und Klimaanlage (Unterschied im zu erstellenden Alias)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```typescript
|
||||
let Seitenname: PageType =
|
||||
{
|
||||
"type": "cardThermo",
|
||||
"heading": "Test Klimaanlage",
|
||||
"useColor": true,
|
||||
"subPage": false,
|
||||
"parent": undefined,
|
||||
"items": [{
|
||||
id: "alias.0.NSPanel_1.TestKlimaanlage",
|
||||
minValue: 50,
|
||||
maxValue: 250,
|
||||
stepValue: 5,
|
||||
popupThermoMode1: ['Auto','0','1','2','3'],
|
||||
popupThermoMode2: ['Auto','0','1','2','3','4','5'],
|
||||
popupThermoMode3: ['Auto','Manual','Boost',],
|
||||
popUpThermoName: ["Schwenk-Modus", 'Speed', 'Temperatur'],
|
||||
icon: 'fan',
|
||||
setThermoAlias: ['MODE1','MODE2','MODE3'],
|
||||
setThermoDestTemp2: 'ACTUAL2'
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
**Parameter:**
|
||||
minValue: Minimale einzustellende Temperatur (Beispiel: 17°C entspricht 170)
|
||||
maxValue: Maximale einzustellende Temperatur (Beispiel: 30,5°C entspricht 305)
|
||||
stepValue: Schrittgröße der Temperaturänderungen (Beispiel: 0,5°C Schritte entspricht 5)
|
||||
|
||||
# cardPower (ab TS-Script v.3.4.1)
|
||||
|
||||
|
||||
|
||||
Beispiel: Erstellung des "PageItem" und Alias vom Typ "Info"
|
||||
|
||||
ohne `alwaysOnDisplay` Parameter (Nach dem Öffnen wird der Screensaver nach eingestellter Zeit aufgeschaltet):
|
||||
```typescript
|
||||
let CardPower: PageType =
|
||||
{
|
||||
'type': 'cardPower',
|
||||
'heading': 'Energiefluss',
|
||||
'items': [
|
||||
{ id: 'alias.0.NSPanel.cardPower' }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
mit `alwaysOnDisplay` Parameter (Die Seite fällt nicht in den Screensaver-Mode, bis auf eine andere Seite navigiert wird)
|
||||
```typescript
|
||||
let CardPower: PageType =
|
||||
{
|
||||
'type': 'cardPower',
|
||||
'heading': 'Energiefluss',
|
||||
'items': [
|
||||
{ id: 'alias.0.NSPanel.cardPower',
|
||||
alwaysOnDisplay: true }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
Oder im Demo-Modus ohne Alias
|
||||
```typescript
|
||||
let CardPowerExample: PageType =
|
||||
{
|
||||
'type': 'cardPower',
|
||||
'heading': 'Energiefluss',
|
||||
'items': [
|
||||
{ }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
**Parameter:**
|
||||
Es gibt nur einen einzigen externen Datenpunkt (anzulegen in **0_userdata.0.**), auf den ein Alias vom Typ "**Info**" zugreift. Dieser muss mit einem JSON-Objekt in nachfolgender Struktur befüllt werden. Der Alias-Datenpunkt "**ACTUAL**" sollte hierbei auf diesen neuen Datenpunkt in "**0_userdata.0.**) gebunden sein.
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": 0,
|
||||
"value": 13,
|
||||
"unit": "kW",
|
||||
"icon": "emoticon-happy-outline",
|
||||
"iconColor": 0
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"value": 3,
|
||||
"unit": "kW",
|
||||
"icon": "battery-charging-60",
|
||||
"iconColor": 10,
|
||||
"speed": 30
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"value": 4.7,
|
||||
"unit": "kW",
|
||||
"icon": "solar-power-variant",
|
||||
"iconColor": 3,
|
||||
"speed": -20
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"value": 4.3,
|
||||
"unit": "kW",
|
||||
"icon": "wind-turbine",
|
||||
"iconColor": 1,
|
||||
"speed": -30
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"value": 3.4,
|
||||
"unit": "kW",
|
||||
"icon": "shape",
|
||||
"iconColor": 10,
|
||||
"speed": 30
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"value": 0.1,
|
||||
"unit": "kW",
|
||||
"icon": "transmission-tower",
|
||||
"iconColor": 0,
|
||||
"speed": 20
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"value": 2.5,
|
||||
"unit": "kW",
|
||||
"icon": "car",
|
||||
"iconColor": 5,
|
||||
"speed": 20
|
||||
}
|
||||
]
|
||||
```
|
||||
_iconColor_ kann einen Wert von 0-10 annehmen und entspricht der ColorScale Grün -> Gelb -> Rot
|
||||
_speed_ kann positive und negative Werte annehmen, wobei positive Werte den Punkt vom Haus weggehen lassen und negative Werte zum Haus
|
||||
**cardPower Emulator (Blockly)**
|
||||
|
||||
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardPower_Emulator_Skript.xml)
|
||||
|
||||
**Kurze Anleitung:**
|
||||
Der Code dient nur der Orientierung und stellt keine Lösung für die eigene Visualisierung dar. Somit soll z.B. der Aufbau des JSON-Objektes verdeutlicht werden.
|
||||
|
||||
Für dieses Beispiel sind in 0_userdata für die 6 Werte in der cardPower entsprechende Datenpunkte (number) manuell angelegt worden:
|
||||
|
||||
|
||||
Im oberen Teil des Blocklys wird lediglich eine Emulation auf 4 von 6 Datenpunkten je Minute erzeugt. Bei Produktivnutzung sollte dieses Codeobjekt gelöscht (deaktiviert) werden.
|
||||
|
||||
|
||||
|
||||
**Produktivnutzung:**
|
||||
|
||||
Die Datenpunkte zu den entsprechenden Piktogrammen (id's) sollten mit den jeweiligen eigenen Adapter-Datenpunkten ersetzt werden. Im Beispiel werden folgende Datenpunkte zugewiesen:
|
||||
|
||||
1 - Batteriespeicher (Einspeisung/Bezug)
|
||||
2 - Photovoltaik Ertrag
|
||||
3 - Windenergieanlage Ertrag
|
||||
4 - Sämtliche aktiven Verbraucher des Hauses
|
||||
5 - Energielieferant (Netz-Einspeisung/Netz-Bezug)
|
||||
6 - Ladestation Verbrauch (E-Car)
|
||||
|
||||
Für eine abweichende Darstellung ist das JSON entsprechend zu befüllen. Wenn eine Entität nicht visualisiert werden soll, so sollte in allen Werten zur id ein leerer String **""** übergeben werden. Beispiel:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 3,
|
||||
"value": "",
|
||||
"unit": "",
|
||||
"icon": "",
|
||||
"iconColor": "",
|
||||
"speed": ""
|
||||
},
|
||||
```
|
||||
|
||||
> Das Skript stellt nur eine exemplarische Möglichkeit der Befüllung dar. Es kann frei definiert und auf eigene Bedürfnisse angepasst werden, soll aber keine finale Lösung für jede Smart Home Situation abbilden!
|
||||
> Ebenso kann die Erstellung des JSON natürlich auch über JavaScript oder TypeScript erfolgen.
|
||||
|
||||
Ein kleines einfaches Javascript von @l4rs, für die erzeugung des JSON-String.
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* generate an JSON for display Power-Card on NSPanel
|
||||
* Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
|
||||
* Version: 0.1 - L4rs
|
||||
*/
|
||||
schedule("* * * * *", function () {
|
||||
|
||||
// Definition der Datenpunkte für das JSON der POWER-Card und der anzuzeigenden Leistungswerte
|
||||
var powerCardJson = "0_userdata.0.NSPanel.Energie.PowerCard",
|
||||
pwr1 = "", // Batterie
|
||||
pwr2 = Math.round(getState("mqtt.0.SmartHome.Energie.PV.openDTU.114180710360.0.power").val), // Solar
|
||||
pwr3 = "", // Wind
|
||||
pwr4 = "", // Verbraucher
|
||||
pwr5 = Math.round(getState("hm-rpc.0.MEQ0706303.1.POWER").val), // Stromnetz
|
||||
pwr6 = 0, // Auto
|
||||
pwrHome = Math.round(pwr5 - pwr2); // Berechnung des Energiefluss anstelle eines Datenpunktes
|
||||
|
||||
// Definition der Keys im JSON
|
||||
var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
|
||||
|
||||
// Definition der "Kacheln", inkl. StandardIcon. Es können alle Icon aus dem Iconmapping genutzt werden.
|
||||
// Kacheln die nicht genutzt werden sollen, müssen wie z.b. item1 formatiert sein
|
||||
var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0]; // Icon home
|
||||
var item1 = [1, pwr1, "", "", 0, ""]; // Icon battery-charging-60
|
||||
var item2 = [2, pwr2, "W", "solar-power-variant-outline", 3, pwr2 > 0 ? -2 : 0]; // Icon solar-power-variant
|
||||
var item3 = [3, pwr3, "", "", 0, ""]; // Icon wind-turbine
|
||||
var item4 = [4, pwr4, "", "", 0, ""]; // Icon shape
|
||||
var item5 = [5, pwr5, "W", "transmission-tower", 10, 10]; // Icon transmission-tower
|
||||
var item6 = [6, pwr6, "kW", "car-electric-outline", 5, 0]; // Icon car
|
||||
|
||||
```
|
||||
[Zum Script CardPower.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardPower.js)
|
||||
|
||||
**Hinweis:** Aktuell erfolgt die Animation gleicher Speed Werte bei der US-P Firmware durch die geänderte Orientierung in umgekehrter Reihenfolge.
|
||||
|
||||
# cardChart (ab TS-Script v.3.7.0)
|
||||
|
||||
> ab Release v3.7.0
|
||||
|
||||
|
||||
|
||||
> Für das unten abgebildete Blockly-Script wurden die Werte eines Datenpunktes "sonoff.0.DZG_DWSB20_2H.DZG_Leistung_Aktuell" in einer Influx 2.0 Datenbank gespeichert.
|
||||
|
||||
Es wird für das Skript ein Datenpunkt (hier im Beispiel "0_userdata.0.Test.cardChart.txt") benötigt, um das Chart für die cardChart aufzubereiten.
|
||||
|
||||
**Alias-Erstellung:**
|
||||
Es wird lediglich ein Alias vom Gerätetyp "Info" benötigt:
|
||||
|
||||
|
||||
**PageItem Beispiel:**
|
||||
```typescript
|
||||
let CardChartExample: PageType =
|
||||
{
|
||||
"type": "cardChart",
|
||||
"heading": "Stromzähler L1+L2+L3",
|
||||
"useColor": true,
|
||||
"subPage": false,
|
||||
"parent": undefined,
|
||||
"items": [{
|
||||
id: 'alias.0.NSPanel_1.cardChart',
|
||||
yAxis: 'Leistung [kW]',
|
||||
yAxisTicks: [2,4,6,8,10,2,4,6,8,20,2], // leave empty for automatic calculation of the y-axis
|
||||
onColor: Yellow
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
|
||||
## **Blockly für Influx 2.0**
|
||||
|
||||
|
||||
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart.xml)
|
||||
|
||||
## **Javascript für History Adapter**
|
||||
```typescript
|
||||
var sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
|
||||
var targetDP = '0_userdata.0.Test.chartTest';
|
||||
var rangeHours = 24;
|
||||
var maxXAchsisTicks = 6;
|
||||
var historyInstance = 'history.0';
|
||||
|
||||
on({id: sourceDP, change: "any"}, async function (obj) {
|
||||
sendTo(historyInstance, 'getHistory', {
|
||||
id: sourceDP,
|
||||
options: {
|
||||
start: Date.now() - (60 * 60 * 1000 * rangeHours),
|
||||
end: Date.now(),
|
||||
count: rangeHours,
|
||||
limit: rangeHours,
|
||||
aggregate: 'average'
|
||||
}
|
||||
}, function (result) {
|
||||
...
|
||||
|
||||
```
|
||||
|
||||
[Link zum Script CardChart_History.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart_History.js)
|
||||
|
||||
# cardLChart (Line Charts ab TS-Script v.3.9.0)
|
||||
|
||||
> ab TS-Script Release v3.9.0
|
||||
|
||||
|
||||
|
||||
**Seitendefinition**
|
||||
|
||||
> Der Alias unter der PageItem.id ist ein Alias vom Gerätetyp: **Info**
|
||||
|
||||
* type: Für Liniendiagramme muss der Seiten-Typ "cardLChart" sein.
|
||||
* id: Es wird ein Alias vom Gerätetyp "Info" erstellt, der auf den erzeugenden Datenpunkt des unten aufgeführten Beispiel-Scriptes zeigt.
|
||||
* yAxis: Bezeichner der Y-Achse
|
||||
* onColor: Farbe des Graphen
|
||||
|
||||
```typescript
|
||||
let CardLChartExample: PageType =
|
||||
{
|
||||
"type": "cardLChart",
|
||||
"heading": "Büro Temperatur",
|
||||
"useColor": true,
|
||||
'items': [{
|
||||
id: 'alias.0.Haus.Erdgeschoss.Buero.Charts.Temperatur',
|
||||
yAxis: 'Temperatur [°C]',
|
||||
onColor: Yellow
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
Erklärung zum nachfolgenden Beispiel-TS-Script:
|
||||
|
||||
> **Wichtiger Hinweis und Voraussetzungen:**
|
||||
>Für das Beispiel muss der InfluxDB Adapter installiert sein. Ebenfalls sollte über einen Zeitraum X bereits Sensordaten an eine Infux 2.X DB übertragen worden sein, welche jetzt zum Abruf bereit stehen!
|
||||
|
||||
Zu definieren ist der Pfad für den Datenpunkt (im Beispiel 0.userdata.0.NSPanel.Influx2NSPanel.buero_temperature) in den das u.a. TS-Script die aufbereiteten Daten für das NSPanel schreiben kann. Für das Beispiel wurde ein Datenpunkt (deconz.0.Sensors.65.temperature) aus dem DeConz-Adapter mit einem Zigbee-Temperatursensor gewählt.
|
||||
|
||||
**Bei Bedarf kann das Query angepasst werden:**
|
||||
Es ist darauf zu achten, die Anzahl an Werten aus der Datenbank möglichst gering zu halten. Im nachfolgenden Beispiel wurden diese nochmals aggregiert. Die Summe an Zeichen für das Payload an die HMI des NSPanels ist begrenzt. Falls zu viele Werte verarbeitet werden, wird der Payload von der HMI gekürzt und die folge wäre eine schwarze Seite resultierend aus einem Fehlerzustand.
|
||||
|
||||
## **TypeScript für Influx2**
|
||||
```typescript
|
||||
const Debug = false;
|
||||
|
||||
const NSPanel_Path = '0_userdata.0.NSPanel.1.';
|
||||
const Path = NSPanel_Path + 'Influx2NSPanel.cardLChart.';
|
||||
const InfluxInstance = 'influxdb.1';
|
||||
const influxDbBucket = 'iobroker';
|
||||
const numberOfHoursAgo = 24;
|
||||
const xAxisTicksEveryM = 60;
|
||||
const xAxisLabelEveryM = 240;
|
||||
|
||||
// this records holds all sensors and their corresponding states which act as the data source for the charts
|
||||
// add all sensors which are to be displayed in this script, there is no need to use multiple scripts
|
||||
const sensors : Record<string, string> = {};
|
||||
/* ↓ Id of the sensor ↓ Id of the data source for the charts */
|
||||
sensors['deconz.0.Sensors.65.temperature'] = Path + 'buero_temperature';
|
||||
sensors['deconz.0.Sensors.65.humidity'] = Path + 'buero_luftfeuchte';
|
||||
|
||||
// create data source for NsPanel on script startup
|
||||
Object.keys(sensors).forEach(async x => {
|
||||
await generateDateAsync(x, sensors[x]);
|
||||
});
|
||||
|
||||
// then listen to the sensors and update the data source states accordingly
|
||||
on({ id: Object.keys(sensors), change: 'any' }, async function (obj) {
|
||||
if (!obj.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
await generateDateAsync(obj.id, sensors[obj.id]);
|
||||
});
|
||||
|
||||
async function generateDateAsync(sensorId: string, dataPointId: string) {
|
||||
const query =[
|
||||
'from(bucket: "' + influxDbBucket + '")',
|
||||
'|> range(start: -' + numberOfHoursAgo + 'h)',
|
||||
'|> filter(fn: (r) => r["_measurement"] == "' + sensorId + '")',
|
||||
'|> filter(fn: (r) => r["_field"] == "value")',
|
||||
'|> drop(columns: ["from", "ack", "q"])',
|
||||
'|> aggregateWindow(every: 1h, fn: last, createEmpty: false)',
|
||||
'|> map(fn: (r) => ({ r with _rtime: int(v: r._time) - int(v: r._start)}))',
|
||||
'|> yield(name: "_result")'].join('');
|
||||
|
||||
if (Debug) console.log('Query: ' + query);
|
||||
|
||||
const result : any = await sendToAsync(InfluxInstance, 'query', query);
|
||||
if (result.error) {
|
||||
console.error(result.error);
|
||||
return;
|
||||
}
|
||||
...
|
||||
|
||||
```
|
||||
|
||||
[Link zum Script CardLChart_Influx2.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CradLChart_Influx2.js)
|
||||
|
||||
## **Javascript für History adapter**
|
||||
```javascript
|
||||
const sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
|
||||
const targetDP = '0_userdata.0.Test.chartTest';
|
||||
const numberOfHoursAgo = 24; // Period of time in hours which shall be visualized
|
||||
const xAxisTicksEveryM = 60; // Time after x axis gets a tick in minutes
|
||||
const xAxisLabelEveryM = 240; // Time after x axis is labeled in minutes
|
||||
const historyInstance = 'history.0';
|
||||
|
||||
const Debug = false;
|
||||
const maxX = 1420;
|
||||
const limitMeasurements = 35;
|
||||
|
||||
createState(targetDP, "", {
|
||||
name: 'SensorGrid',
|
||||
desc: 'Sensor Values [~<time>:<value>]*',
|
||||
type: 'string',
|
||||
role: 'value',
|
||||
});
|
||||
|
||||
on({id: sourceDP, change: "any"}, async function (obj) {
|
||||
sendTo(historyInstance, 'getHistory', {
|
||||
id: sourceDP,
|
||||
options: {
|
||||
start: Date.now() - (numberOfHoursAgo * 60 * 60 * 1000 ), //Time in ms: hours * 60m * 60s * 1000ms
|
||||
end: Date.now(),
|
||||
count: limitMeasurements,
|
||||
limit: limitMeasurements,
|
||||
aggregate: 'average'
|
||||
}
|
||||
}, function (result) {
|
||||
...
|
||||
|
||||
```
|
||||
[Link zum Script CardLChart_History.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardLChart_History.js)
|
||||
|
||||
***
|
||||
|
||||
# popUpNotify
|
||||
|
||||
Status: in Erstellung:
|
||||
|
||||
Das ganze LUI Thema ist am Wachsen. Nun gibt es von der popUpNotify Page schon zwei verschiedene Varianten.
|
||||
Diese wollen wir hier beschreiben:
|
||||
|
||||
## popUpNotify - alte Variante
|
||||
|
||||
**Beschreibung**:
|
||||
Die alte Variante kennt man am ehesten von Info-Popus zur Tasmota oder TFT Version.
|
||||
|
||||
|
||||
|
||||
**Datenpunkte**:
|
||||
* popupNotifyHeading
|
||||
* popupNotifyText
|
||||
* popupNotifyInternalName
|
||||
* popupNotifyButton1Text
|
||||
* popupNotifyButton2Text
|
||||
* popupNotifySleepTimeout
|
||||
* popupNotifyAction
|
||||
|
||||
**Zuordnung Datenpunkte**:
|
||||
|
||||
|
||||
|
||||
**Nutzung**:
|
||||
Vor der Version **v3.5.0** per Default nutzbar. Ab der Version **v3.5.0** bleibt die alte Version erstmal per Default nutzbar. Stellt man den Datenpunkt **popupNotifyLayout** auf 2 erhält man das neue popUpNotify, zur Nutzung des alten muss man dann den Wert 1 hinterlegen.
|
||||
|
||||
**Beispiel**:
|
||||
|
||||
Bei der [Anleitung der AlarmCard](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#2-alarm-page) gibt es zwei verschiedene Beispiele für die Nutzung der popUpNotify Page.
|
||||
|
||||
|
||||
## popUpNotify - Layout 2
|
||||
|
||||
**Beschreibung**:
|
||||
Ab Version **v3.5.0** verfügbar.
|
||||
Layout 2 bringt neue Funktionen mit sich wie Schriftgröße, Schriftfarbe, ein Icon mit definierbarer Farbe, etc.
|
||||
|
||||
|
||||
|
||||
**Neue Datenpunkte**:
|
||||
Die neuen Datenpunkte werden automatisch beim Starten des Skriptes angelegt. Zur Übersicht hier die neuen Datenpunkte aufgelistet:
|
||||
|
||||
* popupNotifyHeadingColor
|
||||
* popupNotifyTextColor
|
||||
* popupNotifyButton1TextColor
|
||||
* popupNotifyButton2TextColor
|
||||
* popupNotifyLayout
|
||||
* popupNotifyFontIdText (Schriftgröße)
|
||||
* popupNotifyIcon
|
||||
* popupNotifyIconColor
|
||||
|
||||
**Zuordnung Datenpunkte**:
|
||||
|
||||
|
||||
|
||||
|
||||
**Nutzung**:
|
||||
Ab der Version **v3.5.0** bleibt die alte Version erstmal per Default nutzbar. Stellt man den Datenpunkt **popupNotifyLayout** auf 2 erhält man das neue popUpNotify, zur Nutzung des alten muss man dann den Wert 1 hinterlegen.
|
||||
|
||||
**Emulator (Layout 2)**:
|
||||
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/PopupNotify_layout2_Emulator.xml)
|
||||
833
new/ioBroker-Config-Screensaver.md
Normal file
833
new/ioBroker-Config-Screensaver.md
Normal file
@@ -0,0 +1,833 @@
|
||||
# **Index**
|
||||
|
||||
**1.)** [Screensaver 1 Layout (Standard)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-1-Layout-(Standard))
|
||||
**2.)** [Screensaver 1 Layout (Alternativ)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-1-Layout-(Alternativ))
|
||||
**3.)** [Screensaver 2 Layout (Advanced)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-2-Layout-(Alternativ))
|
||||
**4.)** [Screensaver Colors](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-Colors)
|
||||
**5.)** [Screensaver Icons](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-Icons)
|
||||
**5.2)** [Relais Status Icons](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Relais-Status-Icons)
|
||||
**5.3)** [Erweiterung der Relay/Status Icons (ab v3.9.0)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Erweiterung-der-Relay/Status-Icons-(ab-v3.9.0))
|
||||
**5.4)** [Entity Status Icons (ab v4.0.0)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Entity-Status-Icons-(ab-v4.0.0))
|
||||
**6.)** [Entity Status Icons und WeatherForecast](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Entity-Status-Icons-und-WeatherForecast)
|
||||
**7.)** [Screensaver Dimmode](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-Dimmode)
|
||||
**8.)** [PopupNotify im Screensaver](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#PopupNotify-im-Screensaver)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Der überarbeitete Screensaver **ab v3.4.0**
|
||||
|
||||
<img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/ae62f7fc-9c99-4495-a078-28557bd0935d" width="60%" height="60%">
|
||||
|
||||
# Screensaver 1 Layout (Standard)
|
||||
|
||||
Ansicht Weather-Forecast:
|
||||
|
||||
|
||||
Ansicht Screensaver-Entities:
|
||||
|
||||
|
||||
# Screensaver 1 Layout (Alternativ)
|
||||
|
||||
Ansicht Weather-Forecast:
|
||||
|
||||
|
||||
Ansicht Screensaver-Entities:
|
||||
|
||||
|
||||
# Screensaver 2 Layout (Advanced)
|
||||
|
||||
> ab v4.0.0
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Das Screensaver-Layout lässt sich im Servicemenü Einstellungen -> Screensaver -> Layout aktivieren.
|
||||
Es darf nur ein Layout aktiviert sein, sonst kommt es zu unerwünschten Effekten.
|
||||
Wenn kein Layout aktiv ist, wird das Layout 1 Standard genutzt.
|
||||
|
||||
# Screensaver Colors
|
||||
```typescript
|
||||
//Screensaver Default Theme Colors
|
||||
const scbackground: RGB = { red: 0, green: 0, blue: 0};
|
||||
const sctime: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctimeAMPM: RGB = { red: 255, green: 255, blue: 255};
|
||||
const scdate: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctMainIcon: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctMainText: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctForecast1: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctForecast2: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctForecast3: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctForecast4: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctF1Icon: RGB = { red: 255, green: 235, blue: 156};
|
||||
const sctF2Icon: RGB = { red: 255, green: 235, blue: 156};
|
||||
const sctF3Icon: RGB = { red: 255, green: 235, blue: 156};
|
||||
const sctF4Icon: RGB = { red: 255, green: 235, blue: 156};
|
||||
const sctForecast1Val: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctForecast2Val: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctForecast3Val: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctForecast4Val: RGB = { red: 255, green: 255, blue: 255};
|
||||
const scbar: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctMainIconAlt: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctMainTextAlt: RGB = { red: 255, green: 255, blue: 255};
|
||||
const sctTimeAdd: RGB = { red: 255, green: 255, blue: 255};
|
||||
```
|
||||
|
||||
# Screensaver Icons
|
||||
|
||||
## Großes Wetter Icon
|
||||
|
||||
|
||||
|
||||
siehe https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#wettervorhersage
|
||||
|
||||
> **Achtung:**
|
||||
> **Dieser Alias "muss" korrekt erstellt werden, damit die 4 kleineren Entity-Status-Icons (Weather-Forecast und/oder 4 Sensordatenpunkte) im unteren Screensaver visualisiert werden können.**
|
||||
|
||||
> Ab TS-Script-Version 3.5.0.5 und mit installiertem JavaScript-Adapter ab Version v6.1.3 kann dieser Alias u.a. automatisch erzeugt werden, wenn die Konstante **autoCreateAlias** auf **true** steht.
|
||||
|
||||
Die Dargestellten Wetter-Icons (groß und klein) werden im NSPanel TS-Script ermittelt. Daher ist die Installation von Accuweather zwingend erforderlich. Weitere Hinweise zur Installation des Accuweather Adapters hier: https://github.com/iobroker-community-adapters/ioBroker.accuweather
|
||||
|
||||
## Relais Status Icons
|
||||
|
||||
|
||||
|
||||
**Folgende 4 Einstellungs-Varianten sind möglich:**
|
||||
|
||||
**1. Die Icons visualisieren den Relais-Zustand der Hardware-Buttons:**
|
||||
```typescript
|
||||
mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER1', ScreensaverEntityIcon: 'light-switch', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
|
||||
mrIcon2ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER2', ScreensaverEntityIcon: 'lightbulb', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
|
||||
```
|
||||
Die mqtt.0. Datenpunkte entsprechend deiner mqtt-Komfiguration anpassen
|
||||
|
||||
**2. Die Icons sind nicht sichtbar:**
|
||||
```typescript
|
||||
mrIcon1ScreensaverEntity: { ScreensaverEntity: null, ScreensaverEntityIcon: null, ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
|
||||
mrIcon2ScreensaverEntity: { ScreensaverEntity: null, ScreensaverEntityIcon: null, ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
|
||||
```
|
||||
|
||||
|
||||
**3. Die Icons werden mit anderen Datenpunkten vom Typ "boolean" (true/false) belegt:**
|
||||
```typescript
|
||||
mrIcon1ScreensaverEntity: { ScreensaverEntity: "0_userdata.0.NSPanel.1.Buttons.MRHWBTN1", ScreensaverEntityIcon: "light-switch", ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
|
||||
mrIcon2ScreensaverEntity: { ScreensaverEntity: "0_userdata.0.NSPanel.1.Buttons.MRHWBTN2", ScreensaverEntityIcon: "lightbulb", ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
|
||||
```
|
||||
|
||||
**4. Beliebig im Mix der 3 Varianten**
|
||||
> ScreensaverEntityIcon kann für alle 3 Varianten frei gewählt werden: siehe https://htmlpreview.github.io/?https://github.com/jobr99/Generate-HASP-Fonts/blob/master/cheatsheet.html
|
||||
---
|
||||
|
||||
## Erweiterung der Relay/Status Icons (ab v3.9.0)
|
||||
|
||||
|
||||
|
||||
Ab v3.9.0 ist es möglich auch Werte (z.B. Temoperatur-Sensor) in den Status-Icons anzuzeigen Nachfolgende Beispiele zeigen:
|
||||
1. Icon (mrIcon1ScreensaverEntity) eine Einstellung zur Nutzung der Relais
|
||||
2. Icon (mrIcon2ScreensaverEntity) eine Einstellung zur Nutzung individueller Datenpunkte mit Nachkommastelle und Einheit des Wertes
|
||||
|
||||
```typescript
|
||||
// Indikator Icons im oberen Teil des Screensavers
|
||||
// Mit 3.9.0 neue Parameter - Bitte anpassen - siehe auch Wiki
|
||||
mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER1',
|
||||
ScreensaverEntityIconOn: 'lightbulb', //Rename
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityValue: null, //New
|
||||
ScreensaverEntityValueDecimalPlace : 0, //New
|
||||
ScreensaverEntityValueUnit: null, //New
|
||||
ScreensaverEntityOnColor: On,
|
||||
ScreensaverEntityOffColor: HMIOff },
|
||||
mrIcon2ScreensaverEntity: { ScreensaverEntity: 'deconz.0.Sensors.5.open',
|
||||
ScreensaverEntityIconOn: 'heat-wave',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityValue: 'deconz.0.Sensors.65.temperature',
|
||||
ScreensaverEntityValueDecimalPlace : 1,
|
||||
ScreensaverEntityValueUnit: '°',
|
||||
ScreensaverEntityOnColor: MSRed,
|
||||
ScreensaverEntityOffColor: Yellow },
|
||||
```
|
||||
In Beispiel 2 wird statt des Relais, ein Fenstersensor (open = true/false) als Indikator verwendet. Der Wert kann über `ScreensaverEntityValue` eingeblendet werden. Darüber hinaus ist es möglich, die Nachkommastelle mit `ScreensaverEntityValueDecimalPlace` anzugeben und eine Einheit des Wertes mit `ScreensaverEntityValueUnit` zu visualisieren.
|
||||
|
||||
**Erweiterung ab Version 4.0.5**
|
||||
es besteht jetzt die Möglichkeit bis zu 10 Zeichen zu visualisieren und auch die Steuerung der Visualisierung hat sich erweitert.
|
||||
Die 10 Zeichen werden über `ScreensaverEntityValue` übergeben. Wenn der Datenpunkt von `ScreensaverEntity` vom Typ _**String**_ ist, dann besteht die Möglichkeit mit einem "Leerstring" den Zustand _OFF_ und mit "Text" den Zustand _ON_ zu erzeugen. Dadurch wird das entsprechende **ICON** für ON oder OFF gesetzt, wenn sie definiert sind. Zusätzlich kann man mit dem Text "ON" die Farbe der Visualisierung von `ScreensaverEntityOffColor` auf `ScreensaverEntityOnColor` wechseln.
|
||||
`ScreensaverEntityValue` und `ScreensaverEntity` müssen nicht der selbe Datenpunkt sein.
|
||||
|
||||
Des Weiteren gibt es noch die Variante `ScreensaverEntity` vom Typ _**boolean**_ (True/False).
|
||||
Es ist auch möglich `ScreensaverEntity` auf null zu setzen, dann wird nur `ScreensaverEntityValue` ausgewertet. Wenn `ScreensaverEntityOnColor` und `ScreensaverEntityIconOn` definiert sind, werden diese mit visualisiert.
|
||||
|
||||
|
||||
## Entity Status Icons (ab v4.0.0)
|
||||
|
||||
### Einfacher Screensaver:
|
||||
|
||||
|
||||
### Alternativ Screensaver
|
||||
|
||||
|
||||
|
||||
**Beispiel:**
|
||||
```typescript
|
||||
export const config: Config = {
|
||||
...
|
||||
leftScreensaverEntity:
|
||||
[],
|
||||
|
||||
bottomScreensaverEntity :
|
||||
[
|
||||
// bottomScreensaverEntity 1
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Daily.Day1.Sunrise',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityDateFormat: { hour: '2-digit', minute: '2-digit' }, // Description at Wiki-Pages
|
||||
ScreensaverEntityIconOn: 'weather-sunset-up',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Sonne',
|
||||
ScreensaverEntityIconColor: MSYellow
|
||||
},
|
||||
// bottomScreensaverEntity 2
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Current.WindSpeed',
|
||||
ScreensaverEntityFactor: (1000/3600),
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'weather-windy',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: "Wind",
|
||||
ScreensaverEntityUnitText: 'm/s',
|
||||
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
|
||||
},
|
||||
// bottomScreensaverEntity 3
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Current.WindGust',
|
||||
ScreensaverEntityFactor: (1000/3600),
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'weather-tornado',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Böen',
|
||||
ScreensaverEntityUnitText: 'm/s',
|
||||
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
|
||||
},
|
||||
// bottomScreensaverEntity 4
|
||||
{
|
||||
ScreensaverEntity: '0_userdata.0.wetter.Windrichtung',
|
||||
ScreensaverEntityFactor: 0,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'windsock',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Windr.',
|
||||
ScreensaverEntityUnitText: '°',
|
||||
ScreensaverEntityIconColor: White
|
||||
}
|
||||
// bottomScreensaverEntity 5 (only Alternative and Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Current.RelativeHumidity',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'water-percent',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Feuchte',
|
||||
ScreensaverEntityUnitText: '%',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 65}
|
||||
},
|
||||
],
|
||||
|
||||
indicatorScreensaverEntity:
|
||||
[],
|
||||
```
|
||||
|
||||
**Wie kann ich das Format eines Datums oder einer Uhrzeit ändern? (ab v4.3.2)**
|
||||
|
||||
Es wird **ab der v4.3.2.** jetzt die toLocalString() Methode im TS-Script verwendet. **Folgende Parameter sind möglich:**
|
||||
|
||||
In der nachfolgenden Tabelle exemplarisch für den 04.08.2023 05:09:02 Uhr.
|
||||
|
||||
<table>
|
||||
<thead align="center">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>narrow</th>
|
||||
<th>numeric</th>
|
||||
<th>2-digit</th>
|
||||
<th>short</th>
|
||||
<th>long</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody align="center">
|
||||
<tr>
|
||||
<td align="left"><b>weekday</b></td>
|
||||
<td>M</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Mo</td>
|
||||
<td>Montag</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>era</b></td>
|
||||
<td>n. Chr.</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>n. Chr.</td>
|
||||
<td>n. Chr.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>year</b></td>
|
||||
<td></td>
|
||||
<td>2023</td>
|
||||
<td>23</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>month</b></td>
|
||||
<td>A</td>
|
||||
<td>8</td>
|
||||
<td>08</td>
|
||||
<td>Aug.</td>
|
||||
<td>August</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>day</b></td>
|
||||
<td></td>
|
||||
<td>4</td>
|
||||
<td>04</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>hour</b></td>
|
||||
<td></td>
|
||||
<td>5</td>
|
||||
<td>05</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>minute</b></td>
|
||||
<td></td>
|
||||
<td>9</td>
|
||||
<td>09</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>second</b></td>
|
||||
<td></td>
|
||||
<td>2</td>
|
||||
<td>02</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left"><b>timeZoneName</b></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>MESZ</td>
|
||||
<td>Mitteleuropäische <br>Sommerzeit</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Beispiel 1: Uhrzeit
|
||||
```typescript
|
||||
ScreensaverEntityDateFormat: { hour: '2-digit', minute: '2-digit' },
|
||||
```
|
||||
|
||||
Beispiel 2: Datum
|
||||
```typescript
|
||||
ScreensaverEntityDateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },
|
||||
```
|
||||
|
||||
Beispiel 3: Datum/Uhrzeit
|
||||
```typescript
|
||||
ScreensaverEntityDateFormat: { weekday: 'long', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' },
|
||||
```
|
||||
|
||||
Beispiel 4: Alle Parameter in langer Variante
|
||||
```typescript
|
||||
ScreensaverEntityDateFormat: { weekday: 'long', era: 'long', year: 'numeric', month: 'long', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'long' },
|
||||
```
|
||||
Output: `Mittwoch, 04. August 2023 n. Chr. um 05:09:02 Mitteleuropäische Sommerzeit`
|
||||
|
||||
### Erweiterter Screensaver:
|
||||
|
||||
|
||||
**Beispiel:**
|
||||
```typescript
|
||||
export const config: Config = {
|
||||
...
|
||||
leftScreensaverEntity:
|
||||
[
|
||||
// leftScreensaverEntity 1 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: NSPanel_Path + 'Sensor.ANALOG.Temperature',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'thermometer',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Temperatur',
|
||||
ScreensaverEntityUnitText: '°C',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 35, 'val_best': 22}
|
||||
},
|
||||
// leftScreensaverEntity 2 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: 'sonoff.0.DZG_DWSB20_2H.DZG_Leistung_Aktuell',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'counter',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'L1-L3',
|
||||
ScreensaverEntityUnitText: ' W',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 5000}
|
||||
},
|
||||
// leftScreensaverEntity 3 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: '0_userdata.0.Abfallkalender.1.date',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'trash-can',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Abfall',
|
||||
ScreensaverEntityUnitText: '',
|
||||
ScreensaverEntityIconColor: '0_userdata.0.Abfallkalender.1.color'
|
||||
},
|
||||
],
|
||||
|
||||
bottomScreensaverEntity :
|
||||
[
|
||||
// bottomScreensaverEntity 1
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Hourly.h0.PrecipitationProbability',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'weather-pouring',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Regen',
|
||||
ScreensaverEntityUnitText: '%',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100}
|
||||
},
|
||||
// bottomScreensaverEntity 2
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Current.WindSpeed',
|
||||
ScreensaverEntityFactor: (1000/3600),
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'weather-windy',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: "Wind",
|
||||
ScreensaverEntityUnitText: 'm/s',
|
||||
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
|
||||
},
|
||||
// bottomScreensaverEntity 3
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Current.WindGust',
|
||||
ScreensaverEntityFactor: (1000/3600),
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'weather-tornado',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Böen',
|
||||
ScreensaverEntityUnitText: 'm/s',
|
||||
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
|
||||
},
|
||||
// bottomScreensaverEntity 4
|
||||
{
|
||||
ScreensaverEntity: '0_userdata.0.wetter.Windrichtung',
|
||||
ScreensaverEntityFactor: 0,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'windsock',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Windr.',
|
||||
ScreensaverEntityUnitText: '°',
|
||||
ScreensaverEntityIconColor: White
|
||||
},
|
||||
// bottomScreensaverEntity 5 (only alternative and Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Current.RelativeHumidity',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'water-percent',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Feuchte',
|
||||
ScreensaverEntityUnitText: '%',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 65}
|
||||
},
|
||||
// bottomScreensaverEntity 6 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: 'accuweather.0.Current.UVIndex',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'solar-power',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'UV',
|
||||
ScreensaverEntityUnitText: '',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 9}
|
||||
}
|
||||
],
|
||||
|
||||
indicatorScreensaverEntity:
|
||||
[
|
||||
// indicatorScreensaverEntity 1 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: '0_userdata.0.NSPanel.Indicators.Haus',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'window-closed-variant',
|
||||
ScreensaverEntityIconOff: 'window-open-variant',
|
||||
ScreensaverEntityText: 'Fenster',
|
||||
ScreensaverEntityUnitText: '%',
|
||||
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 1 }
|
||||
},
|
||||
// indicatorScreensaverEntity 2 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: 'alias.0.Haus.Erdgeschoss.Buero.Sensoren.Bewegung.ACTUAL',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'motion-sensor',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Bewegung',
|
||||
ScreensaverEntityUnitText: '',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 1}
|
||||
},
|
||||
// indicatorScreensaverEntity 3 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: '0_userdata.0.NSPanel.Indicators.Garage',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'garage-variant-lock',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Garage',
|
||||
ScreensaverEntityUnitText: '',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 1}
|
||||
},
|
||||
// indicatorScreensaverEntity 4 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: 'worx.0.202130267302000866BF.mower.state',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 0,
|
||||
ScreensaverEntityIconOn: 'robot-mower-outline',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Mäher',
|
||||
ScreensaverEntityUnitText: '%',
|
||||
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 1 }
|
||||
},
|
||||
// indicatorScreensaverEntity 5 (only Advanced Screensaver)
|
||||
{
|
||||
ScreensaverEntity: '0_userdata.0.Wasserstand.KNOCK.Wert',
|
||||
ScreensaverEntityFactor: 1,
|
||||
ScreensaverEntityDecimalPlaces: 1,
|
||||
ScreensaverEntityIconOn: 'waves-arrow-up',
|
||||
ScreensaverEntityIconOff: null,
|
||||
ScreensaverEntityText: 'Feuchte',
|
||||
ScreensaverEntityUnitText: '%',
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 985, 'val_best': 500}
|
||||
}
|
||||
],
|
||||
```
|
||||
|
||||
Der letzte Parameter **ScreensaverEntityIconColor** der first- fourthScreensaverEntity
|
||||
|
||||
**Wie kann ich die Farben definieren?**
|
||||
Folgende Varianten stehen zur Verfügung:
|
||||
|
||||
```
|
||||
ScreensaverEntityIconColor: undefined
|
||||
//Die Default-Farbe wird gewählt.
|
||||
```
|
||||
|
||||
```
|
||||
ScreensaverEntityIconColor: MSGreen
|
||||
//Eine definierte Farbe wird gewählt.
|
||||
```
|
||||
|
||||
```
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100}
|
||||
//Berechnung einer Farbe über über Skala z.B. Regenwahrscheinlichkeit
|
||||
```
|
||||
|
||||
```
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 9}
|
||||
//Berechnung einer Farbe über über Skala z.B. UV-Skala
|
||||
```
|
||||
|
||||
```
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 65}
|
||||
//Berechnung einer Farbe über über Skala mit Idealwert
|
||||
```
|
||||
z.B. für Luftfeuchte: Der Idealwert liegt zwischen 0 und 100 hier im Beispiel bei 65% (also grün). Die Abschwächung geht zu beiden Seiten (65 zu 0) und (65 zu 100) über gelb nach rot.
|
||||
|
||||
```
|
||||
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 1, 'val_best': 1}
|
||||
// bei einem Boolean Wert kann mit val_best: 1 das Icon bei 'true' au grün gesetzt werden, Standard ist 'true' rot
|
||||
```
|
||||
|
||||
```typescript
|
||||
//Dynamische Indikatoren (Abstufung grün nach gelb nach rot)
|
||||
const colorScale0: RGB = { red: 99, green: 190, blue: 123 };
|
||||
const colorScale1: RGB = { red: 129, green: 199, blue: 126 };
|
||||
const colorScale2: RGB = { red: 161, green: 208, blue: 127 };
|
||||
const colorScale3: RGB = { red: 129, green: 217, blue: 126 };
|
||||
const colorScale4: RGB = { red: 222, green: 226, blue: 131 };
|
||||
const colorScale5: RGB = { red: 254, green: 235, blue: 132 };
|
||||
const colorScale6: RGB = { red: 255, green: 210, blue: 129 };
|
||||
const colorScale7: RGB = { red: 251, green: 185, blue: 124 };
|
||||
const colorScale8: RGB = { red: 251, green: 158, blue: 117 };
|
||||
const colorScale9: RGB = { red: 248, green: 131, blue: 111 };
|
||||
const colorScale10: RGB = { red: 248, green: 105, blue: 107 };
|
||||
```
|
||||
|
||||
|
||||
> **Im Alternativen Layout können nur 3 Entities visualisiert werden. Für die Darstellung der Luftfeuchte wird die fourthScreensaverEntity verwendet!**
|
||||
|
||||
## Entity Status Icons und WeatherForecast
|
||||
|
||||
Es lässt sich über Datenpunkte in 0_userdata.0. steuern ob:
|
||||
* nur die Entity-Status-Icons visualisiert wird
|
||||
* nur die Wettervorhersage visualisiert wird
|
||||
* die Entity-Status-Icons und die Wettervorhersage abwechselnd visualisiert wird und in welcher Zeit der Wechsel stattfinden soll
|
||||
|
||||
Wenn die **Wetter Icons** sichtbar sein sollen (Timer für Wechsel deaktiviert)
|
||||
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecast** den Wert **true** haben
|
||||
|
||||
Wenn die **Entity Icons** sichtbar sein sollen (Timer für Wechsel deaktiviert)
|
||||
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecast** den Wert **false** haben
|
||||
|
||||
Wenn ein Wechsel stattfinden soll, dann muss:
|
||||
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecastTimer** den Wert **true** haben
|
||||
|
||||
Wenn kein Wechsel stattfinden soll, dann muss:
|
||||
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecastTimer** den Wert **false** haben
|
||||
|
||||
In wieviel **Sekunden** soll der Wechsel stattfinden
|
||||
**0_userdata.0.NSPanel.Büro.ScreensaverInfo.entityChangeTime** ein Wert zwischen **15 - 60** Sekunden
|
||||
|
||||
Wenn die automatischen Farben der Weather-Forcast **nicht** verwendet werden sollen:
|
||||
**0_userdata.0.NSPanel.1.Config.Screensaver.autoWeatherColorScreensaverLayout** den Wert **false** haben
|
||||
|
||||
Die Einstellungen lassen sich auch am Panel einstellen unter "Einstellungen -> Screensaver -> Wetter"
|
||||
|
||||
|
||||
|
||||
### Weather-Forcast-Farben
|
||||
|
||||
|
||||
|
||||
```typescript
|
||||
//Auto-Weather-Colors
|
||||
const swClearNight: RGB = { red: 150, green: 150, blue: 100};
|
||||
const swCloudy: RGB = { red: 75, green: 75, blue: 75};
|
||||
const swExceptional: RGB = { red: 255, green: 50, blue: 50};
|
||||
const swFog: RGB = { red: 150, green: 150, blue: 150};
|
||||
const swHail: RGB = { red: 200, green: 200, blue: 200};
|
||||
const swLightning: RGB = { red: 200, green: 200, blue: 0};
|
||||
const swLightningRainy: RGB = { red: 200, green: 200, blue: 150};
|
||||
const swPartlycloudy: RGB = { red: 150, green: 150, blue: 150};
|
||||
const swPouring: RGB = { red: 50, green: 50, blue: 255};
|
||||
const swRainy: RGB = { red: 100, green: 100, blue: 255};
|
||||
const swSnowy: RGB = { red: 150, green: 150, blue: 150};
|
||||
const swSnowyRainy: RGB = { red: 150, green: 150, blue: 255};
|
||||
const swSunny: RGB = { red: 255, green: 255, blue: 0};
|
||||
const swWindy: RGB = { red: 150, green: 150, blue: 150};
|
||||
```
|
||||
|
||||
|
||||
# Screensaver Dimmode
|
||||
|
||||
## Automatischer Dimmode:
|
||||
|
||||
Über die Parameter (auch im Servicemenü verfügbar), lassen sich die Helligkeit des Screensavers zur Uhrzeit einstellen.
|
||||
|
||||
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_brightnessDay - Die Helligkeit (0-100) in der der Screensaver tagsüber gedimmt wird (im Menü 0-10)
|
||||
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_brightnessNight - Die Helligkeit (0-100) in der der Screensaver nachts gedimmt wird (im Menü 0-10)
|
||||
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_hourDay - Die Stunde in der der Tag Dimm-Modus aktiv werden soll
|
||||
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_hourNight - Die Stunde in der der Nacht Dimm-Modus aktiv werden soll
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Manueller Dimmode:
|
||||
|
||||
0_userdata.0.NSPanel.1.ScreensaverInfo.activeDimmodeBrightness
|
||||
|
||||
* -1 = automatischer Dimmode aktiv
|
||||
* 0-100 = manuelle Dimmstufe (automatischer Dimmode inaktiv)
|
||||
|
||||
|
||||
## bestimme Seite nach den Aufwecken
|
||||
unter 0_userdata.0.NSPanel.ScreensaverInfo.bExitPage könnt ihr eine Seite festlegen die nach dem tippen auf das Panel geöffnet werden soll.
|
||||
Der Wert **-1** öffnet wieder die letzte offene Seite. Wenn ihr eine Bestimmte Seite öffnen wollt, müsst ihr den Index der Seite eingeben ( Beginn bei 0). Diesen bekommt ihr aus der Pageauflistung in der Config raus.
|
||||
|
||||
|
||||
## Individuelles Datumsformat im Screensaver:
|
||||
|
||||
|
||||
Das Script legt automatisch einen Datenpunkt unter 0_userdata.0. an:
|
||||
|
||||
|
||||
Dieser Datenpunkt ist unter: `0_userdata.0.<Dein NSPanel>.Config.Dateformat.customFormat` zu finden und ist per Default **nicht** gefüllt
|
||||
|
||||
Es kann ein abweichendes Format (wie im Beispiel: `dddd - MM/DD/YYYY`) für das Datum im Screensaver definiert werden.
|
||||
|
||||
Mögliche Formatierungsoptionen (Link: [siehe auch dayjs](https://day.js.org/docs/en/display/format)):
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Format</th>
|
||||
<th>Output</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>YY</code></td>
|
||||
<td>18</td>
|
||||
<td>Two-digit year</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>YYYY</code></td>
|
||||
<td>2018</td>
|
||||
<td>Four-digit year</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>M</code></td>
|
||||
<td>1-12</td>
|
||||
<td>The month, beginning at 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>MM</code></td>
|
||||
<td>01-12</td>
|
||||
<td>The month, 2-digits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>MMM</code></td>
|
||||
<td>Jan-Dec</td>
|
||||
<td>The abbreviated month name</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>MMMM</code></td>
|
||||
<td>January-December</td>
|
||||
<td>The full month name</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>D</code></td>
|
||||
<td>1-31</td>
|
||||
<td>The day of the month</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>DD</code></td>
|
||||
<td>01-31</td>
|
||||
<td>The day of the month, 2-digits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>d</code></td>
|
||||
<td>0-6</td>
|
||||
<td>The day of the week, with Sunday as 0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>dd</code></td>
|
||||
<td>Su-Sa</td>
|
||||
<td>The min name of the day of the week</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ddd</code></td>
|
||||
<td>Sun-Sat</td>
|
||||
<td>The short name of the day of the week</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>dddd</code></td>
|
||||
<td>Sunday-Saturday</td>
|
||||
<td>The name of the day of the week</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>H</code></td>
|
||||
<td>0-23</td>
|
||||
<td>The hour</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>HH</code></td>
|
||||
<td>00-23</td>
|
||||
<td>The hour, 2-digits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>h</code></td>
|
||||
<td>1-12</td>
|
||||
<td>The hour, 12-hour clock</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>hh</code></td>
|
||||
<td>01-12</td>
|
||||
<td>The hour, 12-hour clock, 2-digits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>m</code></td>
|
||||
<td>0-59</td>
|
||||
<td>The minute</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mm</code></td>
|
||||
<td>00-59</td>
|
||||
<td>The minute, 2-digits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>s</code></td>
|
||||
<td>0-59</td>
|
||||
<td>The second</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ss</code></td>
|
||||
<td>00-59</td>
|
||||
<td>The second, 2-digits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>SSS</code></td>
|
||||
<td>000-999</td>
|
||||
<td>The millisecond, 3-digits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Z</code></td>
|
||||
<td>+05:00</td>
|
||||
<td>The offset from UTC, ±HH:mm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ZZ</code></td>
|
||||
<td>+0500</td>
|
||||
<td>The offset from UTC, ±HHmm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>A</code></td>
|
||||
<td>AM PM</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>a</code></td>
|
||||
<td>am pm</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>...</td>
|
||||
<td>...</td>
|
||||
<td>Other formats @>>AdvancedFormat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
# PopupNotify im Screensaver
|
||||
|
||||
|
||||
Standard
|
||||
|
||||
|
||||
Advanced
|
||||
|
||||
Um eine Meldung auf dem Screensaver zu erzeugen, müssen in diesen beiden Datenpunkten ein Text geschrieben werden.
|
||||
`0_userdata.0.NSPanelxxxx.ScreensaverInfo.popupNotifyHeading`
|
||||
`0_userdata.0.NSPanelxxxx.ScreensaverInfo.popupNotifyText`
|
||||
|
||||
Die Meldung kann durch tippen auf das Display bzw. durch schreiben einer Tilde `~` in einen der Datenpunkte wieder gelöscht werden.
|
||||
|
||||
185
new/ioBroker-Navigation.md
Normal file
185
new/ioBroker-Navigation.md
Normal file
@@ -0,0 +1,185 @@
|
||||
by TT-Tom
|
||||
|
||||
# Einleitung:
|
||||
|
||||
> **ab TS-Script v3.8.0**
|
||||
|
||||
**Es gibt zwei Möglichkeiten durch die Seiten des Panels zu navigieren. Zum einen gibt es die Navigation auf dem Panel mit den Symbolen Pfeil Rechts, Links und Pfeil nach oben und Haus-Symbol. Die Zweite und etwas schwierige Variante ist über die Tasten unter dem Panel, dazu aber später mehr. Zuerst sehen wir uns die Struktur der Seiten und ihre Aufteilung an.**
|
||||
|
||||
> ab TS-Script v4.3.3.30
|
||||
**Die Definition der Seiten hat sich geändert.**
|
||||
```typescript
|
||||
let Variablenname: PageType =
|
||||
```
|
||||
|
||||
Daraus ergeben sich folgende Vorteile:
|
||||
|
||||
Es müssen nicht mehr alle Seitenparameter angegeben werden, wie z.B
|
||||
```typescript
|
||||
let CardPowerExample: PageType =
|
||||
{
|
||||
'type': 'cardPower',
|
||||
'heading': 'cardPower Emulator',
|
||||
'items': [
|
||||
{ id: 'alias.0.NSPanel_1.Power.PowerCard' },
|
||||
]};
|
||||
```
|
||||
d.h. alle optionalen Seitenparameter mit undefined oder false können entfallen.
|
||||
Zusätzlich können weitere Typen verwendet werden, diese werden [hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation#subpages) beschrieben.
|
||||
|
||||
```typescript
|
||||
let CardExample: PageType =
|
||||
{
|
||||
'type': 'cardGrid',
|
||||
'heading': 'Testpage',
|
||||
'useColor': true oder false
|
||||
'subPage': true oder false
|
||||
//Navi Parameter für Subpages
|
||||
'parent': undefined oder Page
|
||||
'parentIcon': undefined oder Icon als String, z.B. 'alert'
|
||||
'parentIconColor': undefined oder Farbkonstante vom Script
|
||||
'prev': undefined oder 'Page'
|
||||
'prevIcon': undefined oder Icon als String
|
||||
'prevIconColor': undefined oder Farbkonstante vom Script
|
||||
'next': undefined oder 'Page'
|
||||
'nextIcon': undefined oder Icon als String
|
||||
'nextIconColor': undefined oder Farbkonstante vom Script
|
||||
'home': undefined oder 'Page'
|
||||
'homeIcon': undefined oder Icon als String
|
||||
'homeIconColor': undefined oder Farbkonstante vom Script
|
||||
'items': [
|
||||
{ id: 'alias.0.NSPanel_1.Power.PowerCard' },
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
## Navigation mit den TFT-Icons (Pfeil rechts, -links, -oben und Haus)
|
||||
|
||||
|
||||
|
||||
|
||||
### Vorbereitung und Gedanken zur Menüstruktur
|
||||
|
||||
|
||||
Bevor Ihr eure Seiten definiert, sollte ihr euch Gedanken über die Menüstruktur eures Panels machen. Hier ein Beispiel wie so etwas aussehen kann. Es ist auch nützlich, seine Alias Struktur genauso anzulegen mit Ordner und Unterordnern, wie sie im Panel existiert. So behaltet ihr den Überblick welcher Alias zu welcher Page gehört.
|
||||
|
||||
|
||||
|
||||
Es bewährt sich ebenfalls, dass Schema in einer Excel-Tabelle niederzuschreiben. Nachfolgend ein Beispiel:
|
||||
|
||||
|
||||
In der ersten Ebene befinden sich die Hauptseiten / Pages, welche im Skript im Bereich „export const config: Config = { -> Pages [...]“ deklariert werden. Hier werden die Namen der Seiten eingetragen, die Ihr an Anfang des Skripts definiert habt. Dabei ist die Reihenfolge zwischen den beiden eckigen Klammern wichtig, diese spiegelt auch die Reihenfolge auf dem Panel wider. Eine Besonderheit hat der erste Eintrag, dass ist die Startseite / Page 0. Diese hat auch den Status der Homeseite und wird aufgerufen, wenn ihr auf das Haus Symbol bei den Subpages drückt, wenn die Eigenschaft **'home': undefined** ist. Die Subpages könnt ihr von den Hauptseiten / Pages öffnen, wenn ihr die Eigenschaften **navigate:true** und **targetPage: <Seitenname>** in Kombination nutzt.
|
||||
|
||||
Wie so etwas in den Seiten definiert wird, steht im Abschnitt: [Icon für Subpages](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation#icons-f%C3%BCr-subpages-ab-v3732)
|
||||
|
||||
Um durch die Hauptseiten / Pages zu blättern, habt Ihr oben links und rechts jeweils ein Pfeil. Die Seiten sind als Endlosschleife angelegt, das heißt, wenn ihr bei der letzten Seite weiter nach rechts blättert, kommt ihr wieder zur ersten Seite und umgekehrt.
|
||||
|
||||
### Subpages
|
||||
|
||||
Subpages haben verschiedene Navigationsmöglichkeiten, diese definiert Ihr im Bereich der Page-Definition. Damit definiert ihr auch, welche der vier Navi-Symbole in den oberen Ecken angezeigt werden. Zusätzlich könnt ihr ab **Version 3.8.3** auch optional Icon definieren.
|
||||
|
||||
* **'subPage'**: true -> Seite wird als Unterseite definiert
|
||||
* **'parent'**: (Seitenname der übergeordneten Seite) -> definiert welche Seite aufgerufen wird beim Drücken auf den Pfeil nach oben
|
||||
* **'prev'**: (Seitenname der vorhergehenden Seite) -> definiert welche Seite aufgerufen wird beim Drücken auf den Pfeil nach links
|
||||
* **'next'**: (Seitenname der nächsten Seite) -> definiert welche Seite aufgerufen wird beim Drücken auf den Pfeil nach rechts
|
||||
* **'home'**: (Seitenname der Übersichtsseite) -> definiert welche Seite aufgerufen wird beim Drücken auf das Haus-Symbol
|
||||
|
||||
* **'parentIcon', 'prevIcon', 'nextIcon' und 'homeIcon'**: als Parameter gelten -> undefined oder Icon als String, z.B. 'alert'
|
||||
* **'parentIconColor', 'prevIconColor', 'nextIconColor', 'homeIconColor'**: -> undefined oder Farbkonstante vom Script z.B. Yellow
|
||||
|
||||
> **Wichtig!**
|
||||
> Wenn **'prev'** eine Seite zugewiesen wurde, wird **'parent'** nicht ausgewertet. Das gleiche gilt auch für **'next'** und **'home'**.
|
||||
|
||||
```typescript
|
||||
let Level_2_Erdgeschoss_2: PageType =
|
||||
{
|
||||
'type': 'cardGrid',
|
||||
'heading': 'Erdgeschoss (2)',
|
||||
'useColor': true,
|
||||
'subPage': true,
|
||||
'parent': Level_1_Haus,
|
||||
'prev': 'Level_2_Erdgeschoss_1',
|
||||
'prevIcon': 'home-group-minus',
|
||||
'home': 'Level_1_Haus',
|
||||
'homeIcon': 'play-pause',
|
||||
'items': [
|
||||
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Gaeste_WC.Indikator', targetPage: 'Level_3_GaesteWC', name: 'Gäste WC' , icon: 'toilet', offColor: MSGreen, onColor: MSRed},
|
||||
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Hauswirtschaftsraum.Indikator', targetPage: 'Level_3_Hauswirtschaftsraum', name: 'Hauswirtschaft' , icon: 'floor-plan', offColor: MSGreen, onColor: MSRed},
|
||||
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Flur_vorne.Indikator', targetPage: 'Level_3_EG_FlurVorne', name: 'Flur vorne' , icon: 'floor-plan', offColor: MSGreen, onColor: MSRed},
|
||||
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Flur_hinten.Indikator', targetPage: 'Level_3_EG_FlurHinten', name: 'Flur hinten' , icon: 'floor-plan', offColor: MSGreen, onColor: MSRed},
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### Icons für Subpages (ab v3.7.3.2)
|
||||
|
||||
Es gibt jetzt 3 Varianten, um ein Icon für Subpages anzulegen.
|
||||
|
||||
##### Variante 1 (ursprüngliche Notation)
|
||||
* Die ursprüngliche Variante mit festem Icon und fester Farbe:
|
||||
```typescript
|
||||
{ navigate: true, id: 'NSPanel_Einstellungen', icon: 'wrench-outline', onColor: White, name: 'Screensaver'}
|
||||
```
|
||||
Die Eigenschaft **navigate: true** macht aus einem normalen Steuerelement, ein Icon, um eine Subpage zu öffnen. Des Weiteren wird die Eigenschaft **id:** benötigt. Sie enthält den Namen der Subpage. Diese beiden Angaben **sind Pflicht**, mit **icon:** und **onColor:** kann man von dem Standardicon und Farbe abweichen und Eigene definieren.
|
||||
|
||||
##### Variante 2 (neue Notation)
|
||||
* Die neue Variante:
|
||||
```typescript
|
||||
{ navigate: true, id: null, targetPage: 'WlanDaten', onColor: White, name: 'Gäste WLAN Daten'}
|
||||
```
|
||||
Bei der neuen Schreibweise bleibt das Verhalten zu der Alten gleich. Hier ist nur die Schreibweise für das Ziel (Subpage) angepasst. Wobei meiner Meinung nach es die richtige Schreibweise ist. Pflicht sind folgende Eigenschaften: **naigate: true, id: null**, und (neu) **tagetPage:**. Hier kommt jetzt der Name der Subpage ran, der bei der alten Schreibweise hinter **id:** stand.
|
||||
|
||||
> Wichtiger Hinweis:
|
||||
> Ihr müsst euer Icon für die Subpage nicht umschreiben, es funktionieren beide Schreibweisen. Die User, die auch die Variante 3 (dynamische) einsetzen wollen, sollten auch die neue Schreibweise für die statischen Icon nutzen.
|
||||
|
||||
##### Variante 3 dynamische Icon (neue Notation)
|
||||
|
||||
**Was heißt dynamische Icon?**
|
||||
|
||||
Das Icon auf eurem Panel kann die Farbe und das Icon selbst ändern, je nach Status des Alias (ture/false).
|
||||
Ich nutze es für meine Fenster- und Türkontakte, die ich in Subpages gebündelt habe. Auf der Übersichtspage habe ich Icons für die einzelnen Subpages, diese Icon ändern ihr Aussehen, wenn auf der Subpage sich ein Kontakt ändert. Somit sehe ich auf der Übersichtseite, dass alle Fenster und Türen geschlossen sind. Sollte ein Fenster offen sein, ändert sich auf der Überichtseite das Icon auf "offenes Fenster und wird Rot". Jetzt kann ich auf das Icon drücken und sehe in der Subpage welches Fenster noch offen ist.
|
||||
|
||||
Um dieses Verhalten zu nutzen, benötigt ihr ein Alias vom **Typ "Info"**, einen Datenpunkt unter "0_userdata.0." welcher mit dem Alias verknüpft ist und ein kleines Skript, welches eure Kontakte überwacht und den Datenpunkt unter 0_userdata.0. auf true bzw. false setzt.
|
||||
|
||||
* Die neue Variante mit dynamischem Icon und dynamischer Farbe:
|
||||
```typescript
|
||||
{ navigate: true, id: alias.0.haus.fenster, targetPage: 'Fenster', onColor: MSGreen, offColor: MSRed, name: 'Fenster'}
|
||||
```
|
||||
|
||||
Hier ein Beispiel als Blockly, welches alle Fenster in einem Aliasordner überwacht und den Datenpunkt entsprechend setzt.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Wie Ihr den Datenpunkt unter 0_userdata.0. setzen wollt, könnt ihr selbst entscheiden und ist auch ganz von der Anzahl der Kontakte abhängig. Auf einer cardGrid könnt ihr maximal 8 Icon / Kontakte darstellen. Deshalb kann es notwendig sein, noch eine Subpage dazwischen zu setzen und diese nach Stockwerken aufzuteilen.
|
||||
|
||||
**Erweiterung ab Version 4.2**
|
||||
|
||||
die Flexibilität der Icon wurde um die Farbe und dem Buttontext(CardEntities) erweitert.
|
||||
Dazu müssen zwei Datenpunkte im Alias angelegt werden.
|
||||
**COLORDEC** (Typ Zahl) beinhaltet die Farbzahl entsprechend DEC565.
|
||||
[Hier gibt es ein Nextion-HMI-Color-Converter](https://nodtem66.github.io/nextion-hmi-color-convert/index.html)
|
||||
**BUTTONTEXT** (Typ String) statt PRESS kann der Text freigewählt werden.
|
||||
|
||||
<img width="331" alt="Bildschirmfoto 2023-08-21 um 16 10 40" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/5edbb8b0-ead3-4c69-9a9a-479eb2cb6e16">
|
||||
|
||||
Mindest Schreibweise, wenn DatenPunkte angelegt sind.
|
||||
```typescript
|
||||
{ navigate: true, id: AliasPath + 'Status_offene_Tuer', targetPage:'Tuer', name: 'Türen'},
|
||||
```
|
||||
|
||||
Wenn einer oder beide Datenpunkte nicht vorhanden sind, wird die altbekannt Schreibweise heran gezogen, wie z.B.
|
||||
```typescript
|
||||
{ navigate: true, id: AliasPath + 'Status_offene_Tuer', targetPage:'Tuer', useColor:true, onColor: Green, offColor: Red, name: 'Türen', buttonText: 'hier drücken'},
|
||||
```
|
||||
|
||||
## Navigation mit den Hardware-Buttons
|
||||
|
||||
Es gibt mehrere Möglichkeiten die Tasten mit Funktionen zur Steuerung des Panels zu belegen. Standardmäßig steuern diese Tasten die Relais im Panel. Durch Aktivierung einer Regel in der Tasmota Konsole können die Tasten von den Relais entkoppelt werden und softwareseitig genutzt werden. Wir haben die Einstellungen unter der Rubrik [NSPanel Tasmota FAQ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ) zusammengefasst.
|
||||
|
||||
Reference in New Issue
Block a user