From 3b46967f78760349e81cab3a80c2565981b6c5a1 Mon Sep 17 00:00:00 2001 From: tt-tom17 Date: Mon, 6 Jan 2025 17:04:23 +0100 Subject: [PATCH] seiten verschoben --- new/NSPanel-Service-Menü.md | 601 ++++++++ new/NSPanel-Starthilfe-FAQ.md | 179 +++ .../NSPanel-cardtypen.md | 0 _Sidebar copy.md => new/_Sidebar.md | 0 new/ioBroker---Basisinstallation.md | 367 +++++ new/ioBroker-ALIAS-Definitionen.md | 872 +++++++++++ new/ioBroker-ALIAS-Table.md | 1321 +++++++++++++++++ new/ioBroker-Card-Definitionen-(Seiten).md | 767 ++++++++++ new/ioBroker-Config-Screensaver.md | 833 +++++++++++ .../ioBroker-Grndlagen-Seitenconfig.md | 0 new/ioBroker-Navigation.md | 185 +++ 11 files changed, 5125 insertions(+) create mode 100644 new/NSPanel-Service-Menü.md create mode 100644 new/NSPanel-Starthilfe-FAQ.md rename NSPanel-cardtypen.md => new/NSPanel-cardtypen.md (100%) rename _Sidebar copy.md => new/_Sidebar.md (100%) create mode 100644 new/ioBroker---Basisinstallation.md create mode 100644 new/ioBroker-ALIAS-Definitionen.md create mode 100644 new/ioBroker-ALIAS-Table.md create mode 100644 new/ioBroker-Card-Definitionen-(Seiten).md create mode 100644 new/ioBroker-Config-Screensaver.md rename ioBroker-Grndlagen-Seitenconfig.md => new/ioBroker-Grndlagen-Seitenconfig.md (100%) create mode 100644 new/ioBroker-Navigation.md diff --git a/new/NSPanel-Service-Menü.md b/new/NSPanel-Service-Menü.md new file mode 100644 index 0000000..7cdbb68 --- /dev/null +++ b/new/NSPanel-Service-Menü.md @@ -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) + +![Nextion_Editor_4keKWucXc4](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/09eb0cca-5d15-48a5-a522-6d7eceaae42d) + +## Aufbau des Service-Menüs + +Matrix Serviceseiten + +## 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 + +![picture/servicemenu/colorscale.png](picture/servicemenu/colorscale.png) + +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 + ], + +``` \ No newline at end of file diff --git a/new/NSPanel-Starthilfe-FAQ.md b/new/NSPanel-Starthilfe-FAQ.md new file mode 100644 index 0000000..0f58546 --- /dev/null +++ b/new/NSPanel-Starthilfe-FAQ.md @@ -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 = { +``` + +in +``` +export const config: Config = { +``` +ändern + +10. Variablendeklaration im Vergleich +vorher: +```typescript +let Bad_Thermostat = +{ + 'type': 'cardThermo', + 'heading': 'Bad', + 'items': [{ + 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 ` = ` durch `: PageType =` ersetzt +* Das `` 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 + +Bildschirmfoto 2023-09-26 um 18 08 54 + +Bildschirmfoto 2023-09-26 um 18 09 05 + +Bildschirmfoto 2023-09-26 um 18 09 22 + +**** +Hier als Client + +Bildschirmfoto 2024-09-23 um 12 44 14 +Bildschirmfoto 2024-09-23 um 12 43 49 + +*** +## 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%** +Bildschirmfoto 2023-09-26 um 18 38 06 + +Hierarchie mit **Smarthome/%prefix%/%topic%** +Bildschirmfoto 2023-09-26 um 18 39 40 + +*** +## "CustomSend" fehlt +[In der Basisinstallation gibt es drei Möglichkeiten](ioBroker---Basisinstallation.md#7-customsend-anlegen) +*** \ No newline at end of file diff --git a/NSPanel-cardtypen.md b/new/NSPanel-cardtypen.md similarity index 100% rename from NSPanel-cardtypen.md rename to new/NSPanel-cardtypen.md diff --git a/_Sidebar copy.md b/new/_Sidebar.md similarity index 100% rename from _Sidebar copy.md rename to new/_Sidebar.md diff --git a/new/ioBroker---Basisinstallation.md b/new/ioBroker---Basisinstallation.md new file mode 100644 index 0000000..74f35a8 --- /dev/null +++ b/new/ioBroker---Basisinstallation.md @@ -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. + +![Screensaver Standard](picture/allgemein/screensaver.png) + + +# **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 +![MQTT Server / Client Adapter](picture/basisinstallation/mqtt-server-client-adapter.png) +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 +![Device Adpter](picture/basisinstallation/device-adapter.png) +Ü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 +![ACCUWEATHER Adapter](picture/basisinstallation/accuweather-adapter.png) +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 +![TASMOTA Sonstige Einstellungen]() + +b) Unter Logging fügst du die IP von deinem ioBroker unter Sys-Log Host () ein und klickst auf Speichern. +TASMOTA Logging + +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** + +Tasmota Dateisystem + +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. + +Tasmota Dateisystem + +*** + +## **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 + +Tasmota MQTT Einstellungen + +*** + +## **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 ` (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“ + +Waiting fpor Content + + +*** + +## **6.) MQTT (ioBroker) Config** + +### 6a) Standard-Variante mit MQTT Broker/Client Adapter +![image](https://github.com/user-attachments/assets/387f9866-924e-4294-b7ac-cf95360c1fd7) + + +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) +MQTT Server Verbindung +Einstellungen im Reiter Server-Einstellungen +f) States bei subscribe publizieren (angehakt) +g) Leere Session erzwingen: Client-Einstellungen verwenden +MQTT Server Settings +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) +MQTT Server MQTT Einstellungen + +> **!!! 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 +![MQTT Client Adapter](picture/basisinstallation/mqtt-client-adapter.png) + + +> [!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. +![MQTT Client Einstellungen](picture/basisinstallation/mqtt-client-einstellungen.png) + +Einstellungen für die Datenpunkte, hier am Beispiel von .../cmnd/CustomSend +![Einstellungen am Datenpunkt](picture/basisinstallation/mqtt-client-dp-einstellungen.png) + +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. +![MQTT Explorer CustomSend](picture/basisinstallation/mqtt-explorer-customsend.png) + +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` + +![JS-Adapter Einstellungen](picture/basisinstallation/js-adapter-einstellungen.png) + +*** + +## **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 +![image](https://user-images.githubusercontent.com/102996011/189372243-fceb8f9d-d020-4640-a064-3f8134fef24b.png) + +cardEntities mit RGB und HUE Aliasen (Color) +![image](https://user-images.githubusercontent.com/102996011/189372280-67b05750-2e2d-4093-b708-542363d8e56f.png) + +popupLight mit Farbtemperatur und Brightness +![image](https://user-images.githubusercontent.com/102996011/189372471-f0abcade-8c00-46fc-9aa3-f445ea4764b1.png) + +popupLight mit ColorWheel +![image](https://user-images.githubusercontent.com/102996011/189372558-cf411bba-5143-4c1f-b27c-4b64f22ca834.png) + +cardGrid mit Radiosendern/Playlists (Alias Taste) +![image](https://user-images.githubusercontent.com/102996011/189372592-de0962ee-9015-4ce8-80e9-126669c61d97.png) + +cardEntities mit Aliasen Lautstärke und Info +![image](https://user-images.githubusercontent.com/102996011/189372790-c6f1ea6f-1f24-4ba8-8bde-0459da1f2ab7.png) + +cardEntities mit Fenster, Tür, Jalousie und Verschluss +![image](https://user-images.githubusercontent.com/102996011/189372858-3232a079-e4f1-4077-b947-6ba50fdfeb09.png) + +cardEntities mit Abfallkalender +![image](https://user-images.githubusercontent.com/102996011/189372953-51ded00a-68ad-4cb8-b8c3-c85b0f8d3da5.png) + +cardMedia +![image](https://user-images.githubusercontent.com/102996011/189373030-31692512-f934-418a-9c2f-e7624c8cb09f.png) + +cardAlarm +![image](https://user-images.githubusercontent.com/102996011/189373105-e46f8872-3b3c-4365-8113-0a44570a03a7.png) + +cardGrid +![image](https://user-images.githubusercontent.com/102996011/189373286-c5ad72d0-5e10-4c59-b691-f4bfd1ba354f.png) + +cardEntities +![image](https://user-images.githubusercontent.com/102996011/189373401-42696c89-0d65-48f8-9cdf-a4c9a84073d6.png) + +cardEntities als Subpage unter cardEntities (verschachtelt) +![image](https://user-images.githubusercontent.com/102996011/189373454-c6aa9236-1fad-47ef-915f-fb6356a4a613.png) + +cardNotify +![image](https://user-images.githubusercontent.com/102996011/189373507-41a10711-afc0-4186-b94b-690bc1805a7f.png) + +Steuerung von Klimageräten/Klimaanlagen +![image](https://user-images.githubusercontent.com/102996011/189373662-1aade2a6-3ccd-4cff-831c-c6c0a90ce999.png) + +QR-Code für z.B. Gäste WLAN +![image](https://user-images.githubusercontent.com/102996011/189373730-1ceecc65-e503-47dc-8639-c29bb93b8eb1.png) + +Neues Design für Thermostate +![image](https://user-images.githubusercontent.com/102996011/189373785-6d1870ef-4544-4099-8fc5-fd4b7f546d74.png) + +*** \ No newline at end of file diff --git a/new/ioBroker-ALIAS-Definitionen.md b/new/ioBroker-ALIAS-Definitionen.md new file mode 100644 index 0000000..d7aecc6 --- /dev/null +++ b/new/ioBroker-ALIAS-Definitionen.md @@ -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: + +![image](https://user-images.githubusercontent.com/102996011/189475521-07d78146-e49d-406a-95bc-804b3302caa2.png) + +Der "Alias-Manager"-Adapter für spezielle Alias-Typen, wie dem Alias "Media": +![image](https://user-images.githubusercontent.com/102996011/189475471-26f0ed04-4715-4eed-8924-cf6d7be879a9.png) + +**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. +![image](https://user-images.githubusercontent.com/102996011/189476871-85b18ead-f032-4bd0-b8a4-310742b778fc.png) +![image](https://user-images.githubusercontent.com/102996011/189476923-59ef3397-543f-43ef-9ab9-e839b9eba9cb.png) + +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. +![image](https://user-images.githubusercontent.com/102996011/189477432-2c814d56-7c37-41c2-b371-31b06e6fe2aa.png) + +## 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: +![image](https://user-images.githubusercontent.com/102996011/189480182-02d50b01-53ba-4c83-baa6-9bd5f10bc671.png) +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)): + +![image](https://user-images.githubusercontent.com/102996011/189480322-0441c5b7-fc7e-4fd4-9920-72915753a802.png) + +> 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 + +![image](https://user-images.githubusercontent.com/102996011/189404542-81735372-7bbd-4c1a-8cad-73d1a62bd735.png) + +*** +### 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): +![image](https://user-images.githubusercontent.com/102996011/189492309-e678414a-21b9-417f-b6a5-bdd769db7fc4.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/189492261-48519b87-3210-4bb9-a039-489e57bc21de.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung. +![image](https://user-images.githubusercontent.com/102996011/189492446-1c530407-cac3-4f3e-ab06-258dcd88629c.png) + +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: + +![image](https://user-images.githubusercontent.com/102996011/189493396-b94fdccb-61ee-4c1d-97d2-8732e7c1d9ae.png) + +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): +![image](https://user-images.githubusercontent.com/102996011/189497667-0362a360-ef6b-4d7a-98ea-de55e6b42535.png) + +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: + +![image](https://user-images.githubusercontent.com/102996011/189498366-2d0d8e4c-e161-4f57-a084-c2377da001c3.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung. +![image](https://user-images.githubusercontent.com/102996011/189498497-989cc054-812a-4c58-8995-5c4ccf39f4b9.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/189497755-b3bbc89a-8b36-451e-add2-ba6c12e94330.png) + +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" +![image](https://user-images.githubusercontent.com/102996011/189404690-69e61c60-88f3-4ea7-b5ad-0c423094eb11.png) +Darstellung in einer "cardEntities" +![image](https://user-images.githubusercontent.com/102996011/189403796-ab118db1-fb38-49ae-bbdf-199717e77bbe.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/189498976-965bae49-3643-4c23-820f-e1540b3b28a2.png) +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/189499063-f0fa5d5a-4302-46ec-802c-0c99626f908a.png) + +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) + +![image](https://user-images.githubusercontent.com/102996011/189403392-4ba6c9b6-5d33-4bdb-abfb-36c85e99eebf.png) + +**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: +![image](https://user-images.githubusercontent.com/102996011/189499807-aba39d1c-5a83-4e50-ba04-8cc972f76208.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: + +![image](https://user-images.githubusercontent.com/102996011/189499784-2b3dc3c5-3196-4b8e-93d0-cf1c57452f8a.png) + +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) + +![image](https://user-images.githubusercontent.com/102996011/189403062-a5fed1f9-8c6b-49b5-ad94-82c344603d5a.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/189500932-7d2f043a-f279-4525-ba98-3fe11cece1d5.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/189500907-e527fc9b-b8d2-49d0-bc89-ba729cfe65b4.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/189402777-0937bfbf-6695-4768-9123-d61546175726.png) +![image](https://user-images.githubusercontent.com/102996011/189402911-7a9edf50-bb22-4211-9117-5b55e4ecba56.png) + +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) +![image](https://user-images.githubusercontent.com/102996011/189403645-a9511303-c873-469c-9e92-136809162728.png) +![image](https://user-images.githubusercontent.com/102996011/189404981-bbd544b0-1019-48d7-a5eb-8f38616bb8b4.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/191102534-cd77c638-a947-46b7-a2c4-dafd4ba1380a.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/191102721-3a6a5ab6-792c-4274-8ff3-227c61d4a949.png) + +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) +![image](https://user-images.githubusercontent.com/102996011/189403904-914ff6ad-a7df-4859-a523-ff5ec02f2381.png) + +Und die zugehörige Detailseite +![image](https://user-images.githubusercontent.com/102996011/194716743-81b81575-b7b6-475a-9cbf-5332561bec46.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/194716982-6470580e-b8eb-4be0-8c45-c60dd9220a9c.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/194716899-3064db6c-8516-46c0-857a-1126cae78783.png) + +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) +![image](https://user-images.githubusercontent.com/102996011/216003949-fe66b68d-5ede-4a1a-b0d9-440cd13c45e4.png) +*** + +### Lautstärke (channel volume) +![image](https://user-images.githubusercontent.com/102996011/189403220-a2540eb2-4b47-4947-9258-a7687403710c.png) + +> **Analog zum Alias "Lautstärkegruppe", jedoch mit dem Alias-Gerätetypen "Lautstärke**" + +*** + +### Lautstärke-Gruppe (channel volumeGroup) +![image](https://user-images.githubusercontent.com/102996011/189403220-a2540eb2-4b47-4947-9258-a7687403710c.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/190144094-a13df619-fe45-4c92-a43a-e6a4e653083e.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/190144755-8b2c2ae6-c9d4-4fa2-9139-c430b8385114.png) + +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) +![image](https://user-images.githubusercontent.com/102996011/191106464-5ce4597e-fa4b-4e48-89e0-40d1cd9653d2.png) +![image](https://user-images.githubusercontent.com/102996011/191106556-aa7dc0e8-00a5-4b09-90c5-9266e524567f.png) + +**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: +![image](https://user-images.githubusercontent.com/102996011/191105077-428ba7d0-f62f-43e4-a829-ba42f260d727.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/191105279-aae89e95-cb4f-46d1-91b9-0fcd7e1385c2.png) + +*** + +### 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!** + +![image](https://user-images.githubusercontent.com/102996011/189842715-75f9d554-3395-42f6-903b-b92b0828143c.png) +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 + +![image](https://user-images.githubusercontent.com/102996011/215999625-4a47c059-9752-46ee-a4c5-2f4b8f94cb59.png) + +> 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. + +![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png) + +#### Alexa2-Adapter + +![image](https://user-images.githubusercontent.com/102996011/215999962-3f225ef8-be5a-4a83-9ac7-5d71612c7d1e.png) + +> 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. + +![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png) + +#### 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) + +![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png) + + + +#### 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. + +![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png) + +#### 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. + +![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png) + +#### Logitech SqueezeBoxRPC-Adapter +**Skript zum Anlegen eines SqueezeBoxRPC - media-Alias (ab Version 3.4.0.6)** + +![image](https://user-images.githubusercontent.com/102996011/194286414-a1635626-d33b-4cc6-b8e6-1c1749636900.png) + +
+ Spoiler: JavaScript Code für Erstellung eines SqueezeBoxRPC -Alias + +``` +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'); +``` +
+ +> 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 +![image](https://user-images.githubusercontent.com/102996011/194288676-c329fa66-8a87-4d07-bc44-91367a334b5f.png) + +![image](https://user-images.githubusercontent.com/102996011/194288476-38251d04-3656-44bc-b4d3-bb43f42f4ae2.png) + +* unter Objekte zu den Aliasen (alias.0.) gehen: +![image](https://user-images.githubusercontent.com/102996011/194288944-f30822c7-c911-480d-a93a-8b9e8e71dbe0.png) +![image](https://user-images.githubusercontent.com/102996011/194289119-175acf67-4136-48ac-935c-984ce72e740b.png) +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): +![image](https://user-images.githubusercontent.com/102996011/194289939-8ae781cb-deb0-4205-9f7a-30f282ee1510.png) +![image](https://user-images.githubusercontent.com/102996011/194290059-fc28e452-fa49-47d3-9b4d-729ee48a66e7.png) + +Jetzt sollte der spueezeboxrpc korrekt arbeiten + +![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png) + + +### RGB-Licht (channel rgb) + +![image](https://user-images.githubusercontent.com/102996011/191094426-3c86ce5a-3d95-4e95-ba68-aefb09a6e9c3.png) + +> 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: +![image](https://user-images.githubusercontent.com/102996011/191094851-cbd29a38-1cb7-400f-89b4-c647ca1f03eb.png) +![image](https://user-images.githubusercontent.com/102996011/191094933-317204e0-01ab-43eb-83ab-c2efce8bbb91.png) +> 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: +![image](https://user-images.githubusercontent.com/102996011/191095305-86bbdbdd-220d-4f9a-a85f-b74cf934f422.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/191096635-91bdab6c-e88f-459a-9699-9d2e6804c86a.png) + +![image](https://user-images.githubusercontent.com/102996011/191096702-a0b2c5a2-f19e-4e61-9831-09b88b589332.png) + +*** + +### RGB-Licht-einzeln (channel rgbSingle) + +![image](https://user-images.githubusercontent.com/102996011/191097789-1ffe592e-6316-4311-87cc-e0f0ed41a8ef.png) + +> 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 + +![image](https://user-images.githubusercontent.com/102996011/191098059-280232ca-5d69-432e-a32d-f85984ce68f7.png) +> 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: +![image](https://user-images.githubusercontent.com/102996011/191099845-2d9364a1-52db-40c1-9e83-876a1a251e41.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/191097931-113a507e-e52a-4a6f-a695-6e5eedb2d383.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/191096635-91bdab6c-e88f-459a-9699-9d2e6804c86a.png) + +![image](https://user-images.githubusercontent.com/102996011/191096702-a0b2c5a2-f19e-4e61-9831-09b88b589332.png) + +*** + +### Schieberegler (channel slider) +![image](https://user-images.githubusercontent.com/102996011/191107077-4ad6e4e8-7b59-4427-9a69-25a4ef3c755d.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/191345106-68981bc1-f083-4a35-b0b9-3fc46fe459b5.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/191345261-2f138190-2de3-4bef-80ba-d1c24833619b.png) + +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) + +![image](https://user-images.githubusercontent.com/102996011/191107198-298d0b94-dcc2-49f9-bcbb-92b926c7ae3a.png) + +> 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: +![image](https://user-images.githubusercontent.com/102996011/191347586-e04414dd-7a87-4821-9c31-913874f9a5c3.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/191347855-92667d50-93ce-46fe-9d4a-3fb26bc99db2.png) + +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) + +![image](https://user-images.githubusercontent.com/102996011/189404781-7fe9c2b0-e81d-446f-9aab-50865cc39a40.png) + +> 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 + +![image](https://user-images.githubusercontent.com/102996011/209156239-7978d5d4-e0c4-4507-a249-1879f9fe674b.png) + +**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). +![image](https://user-images.githubusercontent.com/102996011/209159430-864ab683-9a9d-4e6c-bbdf-b26091279afe.png) + +**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) + +![image](https://user-images.githubusercontent.com/102996011/189403527-4a94e690-9a5d-4121-8dcb-5636951a7df6.png) + +> Beschreibung für den Alias Temperatur folgt... + +*** + +### Thermostat - cardThermo - (channel thermostat) +![image](https://user-images.githubusercontent.com/102996011/191052850-06276337-1000-4eb6-b010-5f6d49fd0e24.png) + +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: + +![image](https://user-images.githubusercontent.com/102996011/191053643-75545e7e-995e-4a28-88c3-87268dcbb44d.png) + +Im unteren Teil können ebenfalls Indikatoren eingeblendet werden: +![image](https://user-images.githubusercontent.com/102996011/191338688-e5cf4b91-2385-4f09-8523-e52ed797b9be.png) +z.B. +![image](https://user-images.githubusercontent.com/102996011/191054046-4d3279f1-6dc8-484d-b70f-9dd65ae9929b.png) +oder +![image](https://user-images.githubusercontent.com/102996011/191054242-dc679425-592e-490a-9383-73030a9e20e5.png) +etc. + +Wenn der Thermostat über Mode verfügt und dieser auch genutzt werden soll: +![image](https://user-images.githubusercontent.com/102996011/191054557-89060dca-825a-4d38-b756-c67eb2fbe7ea.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/191055917-bf05d8a1-fc3f-4c4e-a4a8-da5aafcf1317.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/191056534-c33656e6-178c-4f95-a47a-4c609f5236f1.png) + +Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung: +![image](https://user-images.githubusercontent.com/102996011/191056980-98c196cf-7991-4d33-978b-b19b31403477.png) + +> 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 + +![image](https://user-images.githubusercontent.com/102996011/208918067-65174b22-a7b6-4a81-a11b-cdca44c947e2.png) + +![Nextion_Editor_DyyGoz044r](https://user-images.githubusercontent.com/102996011/208929333-0be6783c-aca8-453c-92fb-5d83861da21a.gif) + + +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 +![image](https://user-images.githubusercontent.com/102996011/208917886-2c84cb2c-dee6-456d-8222-1a76f0cb3782.png) + +Direkt unter Objekte --> alias.0. mit dem "+" die gewünschte Verzeichnisstruktur erzeugen + +Dann mit dem "+" in der Menüleiste den Channel erzeugen: +![image](https://user-images.githubusercontent.com/102996011/208925037-79f14c3d-d660-4ac0-b08a-3639416484d6.png) + +Dann die States für ACTUAL dazu anlegen: +![image](https://user-images.githubusercontent.com/102996011/208925276-5b7bd82a-e864-4a16-a8f7-667f02ea7018.png) +![image](https://user-images.githubusercontent.com/102996011/208925413-da9c47be-5166-42f6-9f9b-a2cdea0c2d94.png) + +und die States für STATE anlegen: +![image](https://user-images.githubusercontent.com/102996011/208925774-f156de0b-82b3-4603-95f9-328fe650c02d.png) +![image](https://user-images.githubusercontent.com/102996011/208925863-93b631b9-abd6-45ee-b488-d33a2291b4a1.png) + +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 +![image](https://user-images.githubusercontent.com/102996011/208922045-9bd46a61-4c8a-490b-b999-5e12dc911854.png) +[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/PopupTimer.xml) + +*** + +### Tür (channel door) +![image](https://user-images.githubusercontent.com/102996011/189403985-7eed8829-ea85-4785-88f9-610edaeb9485.png) + +> 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 + +![image](https://user-images.githubusercontent.com/102996011/208997021-c2d73a14-0590-4992-922d-92ff14f83b94.png) +![image](https://user-images.githubusercontent.com/102996011/208997301-6b625a45-a977-4343-8689-5daab04963c1.png) + +**Alias erstellen: ** +Direkt im Objektverzeichnis unter alias.0. (ggfs. noch Verzeichnisse anlegen) einen Kanal anlegen ("+" in der Menüleiste): +![image](https://user-images.githubusercontent.com/102996011/208997977-3cd0f99d-81e5-414d-b2d3-de0d17cfc737.png) +und die Rolle **level.mode.fan** zuweisen: +![image](https://user-images.githubusercontent.com/102996011/208998518-13f71962-59af-43e8-bfdf-7b60e6ffeabc.png) + +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. + +![image](https://user-images.githubusercontent.com/102996011/209000232-4f326a18-3b8f-4129-a9fa-4b338b32561a.png) + +**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) + +![image](https://user-images.githubusercontent.com/102996011/189404088-9a2cd3ea-5c43-4c3f-9bd9-e58eac2e6fd6.png) + +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: + +![Bildschirmfoto 2023-08-29 um 20 37 25](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/75928732-021e-4e61-9269-8360daa251d6) + +.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 + +![image](https://user-images.githubusercontent.com/102996011/189405183-22b51c18-3b92-44e3-bd84-c23359f2783d.png) + +*** + +### Wettervorhersage + +![image](https://user-images.githubusercontent.com/102996011/189405373-8ea44dd3-a073-40e8-8379-faab8a836d12.png) + +![image](https://user-images.githubusercontent.com/102996011/189480728-116bd2fb-f23a-4158-85cc-0a9bed85024c.png) +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. +![image](https://user-images.githubusercontent.com/102996011/189480739-3d10df44-c7dc-43d2-af0d-58e492579d32.png) +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.** + +*** diff --git a/new/ioBroker-ALIAS-Table.md b/new/ioBroker-ALIAS-Table.md new file mode 100644 index 0000000..191dfbc --- /dev/null +++ b/new/ioBroker-ALIAS-Table.md @@ -0,0 +1,1321 @@ +**Tabelle nach rechts scrollen!!!** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nr.Alias-Type (german)Rolle (channel)Alias DatenpunktrequiredDatentypRolle (state)Datenpunkt (typisch)On-IconOff-IconUsericon
1BewegungmotionACTUALXbooleansensor.motionOpenmotion-sensor X
2CIE FarblichtcieCIEXnumberlevel.color.cie lightbulb  
DIMMERXbooleanlevel.dimmer 
ONXbooleanswitch.light 
ON_ACTUALXbooleanstate.light 
TEMPERATUREXnumberlevel.color.temperature 
3DimmerdimmerSETXnumberlevel.dimmerLevel/Brightnesslightbulb  
ACTUALXnumbervalue.dimmerLevel/Brightness
ON_SETXbooleanswitch.lightOn/Switch/Power (Tasmota)
ON_ACTUALXbooleanswitch.lightOn/Switch/Power (Tasmota)
4FahrplantimeTableACTUALXstringstate    
VEHICLEXstringstate 
DIRECTIONXstringstate 
DELAYXbooleanstate 
5FarbtemperaturctDIMMERXnumberlevel.dimmerLevel/Brightnesslightbulb  
ONXboolean On/Switch/Power (Tasmota)
TEMPERATUREXnumberlevel.color.temperatureLevel/Color
6FensterwindowACTUALXbooleansensor.windowOpeninformation-outline X
7FeuchtigkeithumidityACTUALXnumbervalue.humidityHumidityinformation-outline X
8HUE-LichthueDIMMERXnumberlevel.dimmerLevel/Brightnesslightbulb  
HUE numberlevel.color.hueHue
ONXbooleanswitch.lightOn/Switch/Power (Tasmota)
ON_ACTUALXbooleanstate.lightOn/Switch/Power (Tasmota)
TEMPERATUREXnumberlevel.color.temperatureLevel/Color
9InfoinfoACTUALXstringstateAlle Werteinformation-outline X
10JalousienblindACTUALXnumbervalue.blind window-open  
CLOSEXbooleanbutton.close.blind 
OPENXbooleanbutton.open.blind 
SETXnumberlevel.blind 
STOPXbooleanbutton.stop.blind 
TILT_ACTUALnumbervalue.blind 
TILT_CLOSEbooleanbutton.close.blind 
TILT_OPENbooleanbutton.open.blind 
TILT_SETnumberlevel.blind 
TILT_STOPbooleanbutton.stop.blind 
11KlimaanlageairConditionACTUALXnumbervalue.temperature    
AUTO booleanstate    
BOOST booleanswitch.boost    
COOL booleanstate    
ERROR booleanindicator.error    
HEAT booleanstate    
HUMIDITY numbervalue.humidity    
MAINTAIN booleanindicator.maintainance    
MODEXnumberlevel.mode.aircondition    
OFFXbooleanstate    
POWERXbooleanstate    
SETXnumberlevel.temperatur    
SPEED numberlevel.mode.fan    
SWING booleansitch.mode.swing    
UNREACH booleanindicator.maintainance    
12LautstärkevolumeACTUALXnumbervalue.volumealexa2.0.Player.volumevolume-low/
volume-medium/
volume-high/volume-mute		  
MUTEXbooleanmedia.mutealexa2.0.Player.muted
SETXnumberlevel.volumealexa2.0.Player.volume
13LautstärkegruppevolumeGroupACTUALXnumbervalue.volume volume-low/
volume-medium/
volume-high/volume-mute		  
MUTEXbooleanmedia.mute 
SETXnumberlevel.volume 
14LichtlightSETXbooleanswitch.lightOn/Switch/Power (Tasmota)lightbulblightbulb 
15MedienmediaACTUALXnumbervalue.volume +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
ALBUMXstringmedia.album +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
ARTISTXstringmedia.artist +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
CONTENT_DESCRIPTIONXstringmedia.station +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
NEXTXbooleanbutton.next +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
PAUSEXbooleanbutton.pause +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
PLAYXbooleanbutton.play +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
PREVXbooleanbutton.prev +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
SHUFFLEXbooleanmedia.mode.shuffle +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
REPEATXbooleanmedia.mode.repeat +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
STATEXbooleanmedia.state +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
statusXstringmedia.state +
    +
  • volumio
    • +
+ 		   
STOPXbooleanbutton.stop +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
TITLEXstringmedia.title +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
VOLUMEXnumberlevel.volume +
    +
  • alexa2
    • +
  • spotify-premium
    • +
  • sonos
    • +
  • squeezeboxrpc
    • +
  • volumio
    • +
+ 		   
VOLUME_ACTUALXnumbervalue.volume +
    +
  • squeezeboxrpc
    • +
+ 		   
16RGB-LichtrgbBLUEXnumberlevel.color.blue lightbulb  
DIMMERXnumberlevel.dimmer 
GREENXnumberlevel.color.green 
ONXbooleanswitch.light 
ON_ACTUALXbooleanstate.light 
REDXnumberlevel.color.red 
TEMPERATUREXnumberlevel.color.temperature 
WHITE numberlevel.color.white 
17RGB-Licht-einzelnrgbSingleDIMMERXnumberlevel.dimmer lightbulb  
ONXbooleanswitch.light 
ON_ACTUALXbooleanstate.light 
RGBXstringlevel.color.rgbHEX Color like #da43ff
TEMPERATUREXnumberlevel.color.temperature 
18SchiebereglersliderACTUALXnumbervalue plus-minus-variant  
SETXnumberlevel 
19SteckdosesocketACTUALXbooleanswitch power-socket-depower-socket-de 
SETXbooleanswitch 
20TastebuttonSETXbooleanbutton    
21TastensensorbuttonSensorACTUALXbooleanstate gesture-tap-button  
22Temperaturtemperature oder value.temperatureACTUALXnumbervalue.temperature information-outline  
SECOND numbervalue.humidity 
23ThermostatthermostatACTUALXnumbervalue.temperature thermometer X
AUTOMATICXbooleanstate 
BOOST booleanstate 
ERROR booleanstate 
HUMIDITY numbervalue.humidity 
LOWBAT booleanindicator.maintainance 
MANUAL booleanstate 
MAINTAIN booleanindicator.maintainance 
MODEXnumberlevel.mode.thermostat 
PARTY booleanstate 
POWER booleanstate 
SETXnumberlevel.temperature 
UNREACH booleanindicator.maintainance 
VACATION booleanstate 
WINDOWOPEN booleanstate 
WORKING booleanstate 
24Timerlevel.timerACTUALXnumbertimestamp    
STATEXstringstate 
25TorgateACTUALXbooleanswitch.gate garagegarage-open 
SETXbooleanswitch.gate 
STOPXbooleanbutton.stop 
26TürdoorACTUALXbooleansensor.doorOpendoor-opendoor-closed 
27Ventilatorlevel.mode.fanACTUALXbooleanstate fan  
MODEXnumberstate 
SETXbooleanstate 
SPEEDXnumberstate 
28VerschlusslockACTUALXbooleanstate locklock-open-variant 
OPENXbooleanbutton 
SETXbooleanswitch.lock 
29WarnungwarningINFOXstringweather.title    
LEVELXnumbervalue.warning 
TITLEXstringweather.title.short 
30WettervorhersageweatherforecastICONXnumberweather.icon.forecast.0accuweather.0.Current.WeatherIcon   
TEMPXnumbervalue.temperature.forecast.0accuweather.0.Current.Temperature   
31WifiinfoACTUALXstringstateExample 0_userdata.0.Datapoint:
+ "WIFI:T:WPA;S:Test-SSID-Guest;P:guestaccess;H:;"		   
diff --git a/new/ioBroker-Card-Definitionen-(Seiten).md b/new/ioBroker-Card-Definitionen-(Seiten).md new file mode 100644 index 0000000..92e1c2e --- /dev/null +++ b/new/ioBroker-Card-Definitionen-(Seiten).md @@ -0,0 +1,767 @@ +# cardEntities +![image](https://user-images.githubusercontent.com/102996011/190120141-13da0024-261d-4cd9-a104-13416c224004.png) + +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 +![image](https://user-images.githubusercontent.com/102996011/216006497-24b09a3c-28a9-41f0-b822-2b8e56491703.png) + +![image](https://user-images.githubusercontent.com/102996011/216006611-32155c9c-84ba-48eb-8b07-2485d80eb99b.png) + +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: +![image](https://user-images.githubusercontent.com/102996011/221621287-55987efd-143b-4ad0-b7bb-d35d58436b12.png) + +> 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: +![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/46f63c7c-154e-4c47-8caa-41bed30bcf70) +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: +![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/39313dbb-3561-4f73-8352-63995ae7b8be) + +**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 +![image](https://user-images.githubusercontent.com/102996011/190120272-82c6b418-c9dc-4338-a0a3-53da8bec0bac.png) + +(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) +![image](https://user-images.githubusercontent.com/102996011/209344233-c7d700c4-eb87-4c51-9441-b51368c88096.png) + +**Neue Elemente** +* Shuffle (nach verfügbarkeit des Adapters) + ![image](https://user-images.githubusercontent.com/102996011/209348879-59575912-b9c6-452f-885c-0cbb2791f750.png) + +* Neue Auswahl für Speakerauswahl/-wechsel + ![image](https://user-images.githubusercontent.com/102996011/209346590-f265353e-a35a-42d4-9d1f-48426e47eb44.png) + +* Playlist + ![image](https://user-images.githubusercontent.com/102996011/209347004-5d20ac06-b5c2-472e-aeb8-4e9bbb0082e9.png) + +* Tracklist (Bei Playlist und falls verfügbar) + ![image](https://user-images.githubusercontent.com/102996011/209347405-f33dbd6d-ce7d-4dba-9744-73835f7c1c81.png) + +* Equalizer-Profile + ![image](https://user-images.githubusercontent.com/102996011/209347576-809eaabe-c853-476f-82f8-6536694ba404.png) + [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) + ![image](https://user-images.githubusercontent.com/102996011/209348242-264737e4-7b31-488e-a4db-10e0f6bd6e08.png) + +(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 +![image](https://user-images.githubusercontent.com/102996011/190121115-436dc34d-3a89-4809-a3c6-2c6132938fd1.png) + + 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) + +![image](https://user-images.githubusercontent.com/102996011/204626750-bbeffe48-c9cd-44bf-8dfd-b90c6c3b7422.png) + + +![image](https://user-images.githubusercontent.com/102996011/204623942-ca5a1e74-23f7-4b10-a65a-d2397ab67c72.png) + +![image](https://user-images.githubusercontent.com/102996011/204626323-a5df2e57-378f-4939-8a45-1a83277e23a2.png) + +![image](https://user-images.githubusercontent.com/102996011/204627014-03173d87-22ba-44fb-b07c-40b7be6366ac.png) + +```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) + +![Nextion_Editor_9AYbpowjZS](https://user-images.githubusercontent.com/102996011/194641145-660e1218-f559-4f25-83ca-984cc677e0d8.gif) + +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: +![image](https://user-images.githubusercontent.com/102996011/194373014-3dfc240c-ce7a-42ca-8d95-925b0a01b19f.png) + +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. + +![image](https://user-images.githubusercontent.com/102996011/194373795-e3d5e889-10fd-48e6-8a51-cc56c9eadc35.png) + +**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 + +![image](https://user-images.githubusercontent.com/102996011/204631969-dfd8b8e9-09d0-45c2-a243-5e047f09ab05.png) + +> 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: +![image](https://user-images.githubusercontent.com/102996011/209008594-36da27fb-cde2-4964-bcd8-3b406f4656cb.png) + +**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 + }] +}; +``` + +![image](https://user-images.githubusercontent.com/102996011/209009144-1b82e7df-1a58-412a-a304-14a5cf987a4c.png) + +## **Blockly für Influx 2.0** +![image](https://user-images.githubusercontent.com/102996011/209006326-c8036709-2235-4ef8-aa14-00798e09fce7.png) + +[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 + +![image](https://user-images.githubusercontent.com/102996011/212094993-b78f6a38-aab7-43fd-a6c7-fa4add274b75.png) + +**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 = {}; +/* ↓ 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 [~