ioBroker.nspanel-lovelace-ui

Tests:

nspanel-lovelace-ui adapter for ioBroker

NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of Lovelace UI Design.

Entwickleränderungen / Erklärung

Nicht installieren wenn da oben bei Tests failed steht

Immer wenn ich Zeit und lust habe Dokumentiere ich hier Sachen.

Gab lange nix, daher ist der alte Kram nicht unbedingt stimming. Solange das hier einfach nur Fortschritte aufzählt, ist oben neuer als unten

Fragen gerne im Forum

Hab die Möglichkeit eingefügt die Bildschirmschoner roation über States zu aktiviern. 0=off, min=3s, max=3600s Damit kann man aktuell überall mehr Items hinzufügen und die werden dann rotiert.

---

Der Adapter reagiert in 0_userdata.0 und alias.0 auf jede Änderung ack=true oder ack=false eines abonnierten Datenpunktes. Ansonsten gilt nachfolgendes:

• Auserhalb vom Adapter namespace(nspanel-lovelace-ui.0) reagiert dieser Adapter auf ack=true und setzt Datenpunkte mit ack=false
• Innerhalb des Adapter namespace reagiert dieser Adapter auf ack=false und setzt Datenpunkte mit ack=true

Beim Farbscalieren colorScale gibt es die unteren Zusatzoptionen

/**
* The color mix mode. Default is 'mixed'.
* ‘mixed’: the target colour is achieved by scaling between the two RGB colours.
* 'cie': the target colour is achieved by mixing according to the CIE colour table. 
* 'hue': the target colour is calculated by scaling via colour, saturation and brightness.
*/
mode?: 'mixed' | 'hue' | 'cie';
/**
* The logarithm scaling to max, min or leave undefined for linear scaling.
*/
log10?: 'max' | 'min';

---

Mit der aktuellen Version 0.1.0 sind schon ein paar Test möglich.

Ablauf:

• Installieren
• Im Admin Mqtt einstellen und speichern
• Im Admin unter Overview in der Tabelle einen neu Zeile einfügen und dort den Mqtt Topic unter dem das panel lauscht und einen Namen vergeben. Anschließend Geräte aktualisieren. Wenn alles bis hin hin richtig ist, erscheint nun einen MAC Adresse mit _ im ID Feld. Speichern und beenden

Nächster Schritt:

• Dieses Skript als RAW downloaden und ein neues TS-Skript im Javascript-Adapter anlegen Beispiel Konfigurationsskript
• Anschauen und die Konfiguration aus einem vorhandenen aktuellen Nspanel-Skript hinein kopieren. Alle Servicepages aus dem alten Skript nicht übernehmen.
• Der Topic hier muß identisch sein mit einem der Topics aus dem Admin.
• Jede Seite braucht eine Eigenschaft uniqueName

z.B.

const main: PageType = {
    'type': 'cardGrid',
    uniqueName:'main',
    'heading': 'Wohnzimmer',
    'useColor': true,
    'items': [
        { navigate: true, id: 'alias.0.NSPanel.1.usr.Temperatur.M.Wohnzimmer', targetPage: 'this_Thermostat',name: 'Wohnzimmer', onColor: MSRed, offColor: Blue, useValue: true, colorScale: {'val_min': -20, 'val_max': 40, 'val_best': 19} },
        { id: 'alias.0.NSPanel.1.usr.Fenster.Obergeschoss.Wohnzimmer.room', onColor: MSRed, offColor: MSGreen},
        //{ navigate: true, id: '', targetPage: 'Alexa_Schlafzimmer', onColor: White},
        { navigate: true, icon:'home', name:'Haus', targetPage: 'MenuGrid', onColor: White},
    ]};

• Die Hauptseite muß main heißen
• next, prev, home, parent müssen Strings sein die auf einen der uniqueName verweist.
• Seiten die in pages eingetragen werden, werden im Kreis miteinander verlinkt, alle anderen Seiten die verwendet werden sollen müssen in subPages aufgeführt sein
• button1 und button2 müssen aktuell noch da sein, werden aber nicht verwendet
• useValue wird nicht verwendet.

Wenn alles eingestellt ist, skript starten und auf die Rückmeldung warten, dann beenden und in den Alias die gefunden Fehler beheben.

Dabei bedeutet die Phrase: not implemented yet! das wir es noch nicht eingebaut habe und not supported das wir das auch nicht werde :)

Bei Fragen fragen - discord, forum, hier, telegram, teams alles vorhanden :)

Alias Tabelle

Konvertierung der Skriptkonfiguration in Adapterkonfig

Cards

• cardChart
• cardLChart
• cardEntities
• cardGrid
• cardGrid2
• cardGrid3
• cardThermo
• cardMedia
• cardUnlock
• cardQR
• cardAlarm
• cardPower

PageItems

• light
• socket
• dimmer
• hue
• rgb
• rgbSingle
• ct
• blind
• door
• window
• volumeGroup
• volume
• info
• humidity
• temperature
• value.temperature
• value.humidity
• thermostat
• warning
• cie
• gate
• motion
• buttonSensor
• button
• value.time
• level.timer
• value.alarmtime
• level.mode.fan
• lock
• slider
• switch.mode.wlan
• media
• timeTable
• airCondition

PageItems Navigation

• light
• socket
• dimmer
• hue
• rgb
• rgbSingle
• ct
• blind
• door
• window
• volumeGroup
• volume
• info
• humidity
• temperature
• value.temperature
• value.humidity
• thermostat
• warning
• cie
• gate
• motion
• buttonSensor
• button
• value.time
• level.timer
• value.alarmtime
• level.mode.fan
• lock
• slider
• switch.mode.wlan
• media
• timeTable
• airCondition

Eingebaut:

• cardMedia
• cardGrid/2
• cardEntities
• cardPower
• cardThermo
• screensaver
• cardMedia
• alle Popups und PageItems

Erklärungen

Icons:

Dateneingang:

Zu Icon.x.color: (nix was mit Licht zu tun hat.) Eingabe geht über folgende common Eigenschaftenmöglichkeiten

• type: number
  • decimal
• type: string
  • stringify Json: {r:0,g:0,b:0} oder {red:0,green:0,blue:0}
  • hexcolor - 7 Stellen beginned mit #
  • css color names (role: level.color.name) https://www.tutorialrepublic.com/css-reference/css-color-names.php
  • hsl: "hsl(0, 50%, 50%)" (role: level.color.name)

Funktion

IconEntryType

Sollte alle Icons betreffen abgesehen vom Screensaver zum aktuellen Zeitpunkt.

• true: ist der default wert sollte immer angegeben werden
• false: optional der Wert für boolean false
• text: optional wird auf einer cardGrid/2 angezeigt anstelle des Icons
• scale: siehe unten

IconScaleElement

scale bekommt eine eigenen Punkt: das object besteht aus folgenden typen: {val_min: number, val_max: number, val_best?: number, log10?: 'max' | 'min';} um es zu verwenden muß icon.true.color und icon.false.color definiert sein. Value bezeichnet einen Wert der häufig von entity1 kommt.

• wenn nur val_min definiert ist bedeutet val_min >= Value das die Farbe bei true gewählt wird.
• wenn nur val_max definiert ist bedeutet val_max <= Value das die Farbe bei true gewählt wird.
• wenn val_max und val_min definiert sind, wird die Farbe von false (val_min) zu true (val_max) interpoliert
• val_max und val_min werden getauscht, ebenso die Farben für true und false, wenn max < min ist. Falls min und max gleich sind wird die Farbe von true zurückgegeben.
• wenn zusätzlich val_best definiert ist, ist val_best die Farbe von true und wird jeweils in die Richtungen von val_min/max zu false interpoliert
• wenn zusätzlich log10 definiert ist, wird bei max ein log10() 1 false, 10 true ausgeführt, bei min (10-value) -> 10 false, 1 true.

ValueEntryType

besteht aus diesen Typen: {value: string | number |boolean; decimal?: number;factor?: number; unit?: string; minScale?: number; maxScale?: number; set?: string | number |boolean; } | undefined;

Wenn *** verlangert wird

• boolean läd Value und doppelt verneint es.
• number wird als nummer geladen oder konvertiert dann * factor und mit minScale und maxScale auf 0-100 skaliert.
• string wird
  • mit type==number als nummer geladen und decimal angewendet
  • oder als String
  • unit wird in beiden Fällen hinzugefügt.

Beim Schreiben:

• erst wird setversucht, wenn negativ dann value

Sind natürlich alles Dataitems

PageItems

vormalig CreateEntity()

light

• entity1 ist der Schalter
• icon (entity1)
• iconColor: Leuchtmittelfarbe kommt von dem definierten RGB Wert oder von CT (kelvin/mired) oder von IconEntryType entweder scaliert mit dimmer oder entity1
• dimmer ist ein Zahlenwert
• colorMode kann die Eigenschaft undefined | 'hue' | 'ct' haben und bestimmt welcher Modus für das Icon verwendet werden soll.
• headline ist die Item Beschreibung

shutter

• entity1 ist das level muß eine Zahl sein 0-100
• icon & iconColor (IconEntryType)(entity1)
• headline ist die Item Beschreibung
• valueList ist ein array mit 3 oder 6 Einträgen die die Iconbezeichnung enthält - '' für disable. Felder werden ebenfalls disabled wenn keine Befehlsstate gefunden wird.

number

• entity1 ist das level muß eine Zahl sein 0-100
• text.true ist die Bezeichnung
• icon & iconColor wie shutter

text

• entity1 kann zahl,boolean sein. Falls es nicht klappt wird von true ausgegangen.
• entity2 oder text1 ist der text rechts in cardEntites
• text.true ist die Bezeichnung
• icon & iconColor wie shutter

button

• entity1 bestimmt den button Status oder true
• icon & iconColor wie shutter
• setValue1 schaltet den angegebenen State um (optional)
• setValue2 schaltet den angegebenen State auf false (optional)
• setNavi springt zur angegebenen NavigationsID

input_sel

• entityInSel als nummer oder boolean oder undefined
• Icon/Color wie gehabt
• headline ist die Beschreibung
• text ist der text rechts in entities

fan

• entity1 ist der Schalter
• icon...
• headline die Beschreibung

timer

• im moment nur die interne Version komplett eingebaut
• entity1 noch zu verstreichende Sekunden oder interner Zähler
• icon...
• text alternativer text für die anzeige rechts in entitiys standard ist Zeit.

Changelog

WORK IN PROGRESS

• (ticaki) fixes #131

0.1.3 (2025-03-02)

• (ticaki) fixes #130
• (ticaki) Data point generation changed
• (ticaki) Dimming mode (data points) completed
• (ticaki) Screensaver double-click added

0.1.2 (2025-02-27)

• (ticaki) fixed nav service right
• (ticaki) screensaver rotation time added
• (ticaki) grid scrolling improved
• (ticaki) Feedback from the script improved
• (Kuckuckmann:) new adapter logo

0.1.1 (2025-02-27)

• (ticaki) fixed color fading
• (ticaki) fixed config script
• (ticaki) added message for missing states

0.1.0 (2025-02-25)

• (ticaki) alot changes

0.1.0-preAlpha.0 (2024-03-09)

• (ticaki) alot :)

0.0.4-preAlpha.3 (2024-02-20)

• (ticaki) testversion

0.0.4-preAlpha.2 (2024-02-12)

• (ticaki) Add button flip to cardThermo

0.0.4-preAlpha.1 (2024-02-12)

• (ticaki) cardThermo, script config

0.0.4-preAlpha.0 (2024-02-01)

• (ticaki) admin save - still deep alpha

0.0.3-preAlpha.0 (2024-02-01)

• (ticaki) alot - still dont install this

0.0.2-JustPlaceholder.0 (2024-01-05)

• (ticaki) initial release

License

MIT License

Copyright (c) 2024-2025 ticaki github@renopoint.de

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.