Sonoff NSPanel

Atifan

Hallo Leute, ich hänge mich hier mal dran. Hab seit kurzem auch ein NSPanel und habe bereits folgendes gemacht:

nach der Anleitung auf Youtube das Panel mit Tasmota geflasht (https://www.youtube.com/watch?v=ZPLJk2ZLo_8)
diese custom-Firmware für das Display geflasht
außerdem habe ich bereits die Screensaver Seite konfiguriert und die Uhrzeit und Wetterdaten werden bereits angezeigt

Jetzt komme ich aber schon nicht mehr weiter Ich möchte mir gerne eine eigene Seite erstellen auf der ich die aktuelle PV-Leistung meines Balkonkraftwerks angezeigt bekomme. D.h. ich will kein Icon oder sowas angezeigt bekommen, sondern einfach nur den Text "aktuelle PV-Leistung" und dahinter dann den Wert in Watt.
Ich blicke aber leider im NS-Panel Typescript nicht durch, welche vorgefertigte "Seiten-Ansichten" oder "Popup-Pages" ich da nehmen könnte um das so zu realisieren.
Hat da jemand nen Tipp?
Danke schon mal

Armilar

@atifan sagte in Sonoff NSPanel:

Hallo Leute, ich hänge mich hier mal dran. Hab seit kurzem auch ein NSPanel und habe bereits folgendes gemacht:

nach der Anleitung auf Youtube das Panel mit Tasmota geflasht (https://www.youtube.com/watch?v=ZPLJk2ZLo_8)

diese custom-Firmware für das Display geflasht

außerdem habe ich bereits die Screensaver Seite konfiguriert und die Uhrzeit und Wetterdaten werden bereits angezeigt

Jetzt komme ich aber schon nicht mehr weiter Ich möchte mir gerne eine eigene Seite erstellen auf der ich die aktuelle PV-Leistung meines Balkonkraftwerks angezeigt bekomme. D.h. ich will kein Icon oder sowas angezeigt bekommen, sondern einfach nur den Text "aktuelle PV-Leistung" und dahinter dann den Wert in kWh.
Ich blicke aber leider im NS-Panel Typescript nicht durch, welche vorgefertigte "Seiten-Ansichten" oder "Popup-Pages" ich da nehmen könnte um das so zu realisieren.
Hat da jemand nen Tipp?
Danke schon mal

Zunächst einmal herzlich Willkommen

Die Werte, die du Anzeigen möchtest, sind in einem Alias vom Typ info:

Die Seiten in dem Skript sind alles nur Beispiele. Die kannst du auch alle rauslöschen und von vorne beginnen, die Seiten zu gestalten.

Zunächst brauchst du eine Seitendefinition. Werte einer PV-Anlage lassen sich z.B. so darstellen:

Du erstellst einen Alias vom Typ "info" mit dem "Geräte verwalten"-Adapter

Jetzt wechseln wir in das TS-Script und bauen die erste Seite:

Da was da so aussieht wie das nachfolgende kannst du auch aus dem Skript löschen. Sind nur Beispiele...

Alles was du zum Start benötigst ist deine erste Seite:

var PV_Anlage: PageEntities =
{
    "type": "cardEntities",
    "heading": "PV Anlage",
    "useColor": true,
    "subPage": false,
    "parent": undefined,
    "items": [
        <PageItem>{ id: "alias.0.NSPanel_1.ErsterWertderPVAnlage", name: "aktuelle PV-Leistung", unit: "kWh"},
        <PageItem>{ id: "alias.0.NSPanel_1.ZweiterWertderPVAnlage"},
        <PageItem>{ id: "alias.0.NSPanel_1.DritterWertderPVAnlage"},
        <PageItem>{ id: "alias.0.NSPanel_1.VierterWertderPVAnlage", name: "Mein PV Wert", icon: "solar-power", unit: "W", offColor: MSYellow, onColor: MSYellow, useColor: true}
    ]
};

Dann die ganzen Beispielseiten aus der "export const config" rauswerfen und die neue Seite PV_Anlage einbinden...

export const config: Config = {
    panelRecvTopic: 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT',       // anpassen
    panelSendTopic: 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend',   // anpassen
    firstScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.RelativeHumidity", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
    secondScreensaverEntity: { ScreensaverEntity: "accuweather.0.Daily.Day1.Day.PrecipitationProbability", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" },
    thirdScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.WindSpeed", ScreensaverEntityIcon: "weather-windy", ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: "km/h" },
    fourthScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.UVIndex", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "UV", ScreensaverEntityUnitText: "" },
    timeoutScreensaver: 15,
    dimmode: 8,
    active: 100, //Standard-Brightness TFT
    screenSaverDoubleClick: false,
    locale: 'de-DE',                    // en-US, de-DE, nl-NL, da-DK, es-ES, fr-FR, it-IT, ru-RU, etc.
    timeFormat: '%H:%M',                // currently not used 
    dateFormat: '%A, %d. %B %Y',        // currently not used 
    weatherEntity: 'alias.0.Wetter',
    defaultOffColor: Off,
    defaultOnColor: On,
    defaultColor: Off,
    temperatureUnit: '°C',
    pages: [
        PV_Anlage
    ],
    subPages: [
               
    ],
    button1Page: null,
    button2Page: null
};

Habe den vierten Wert zur Verdeutlichung der möglichen Parameter mal erweitert

Der erste Wert sollte jetzt deiner Anforderung entsprechen:

Kein icon,
Bezeichnung: aktuelle PV-Leistung
Einheit: kWh

Der hier benutzte Alias "ErsterWertderPVAnlage" kann natürlich auch "PV_Leistung" heißen.

Sag mal bescheid, ob es klappt...

VG

Atifan

@armilar super vielen Dank! Habe es hinbekommen! Jetzt kann ich rumspielen und mir alles schön anpassen, geil 🤪

Armilar

@atifan sagte in Sonoff NSPanel:

@armilar super vielen Dank! Habe es hinbekommen! Jetzt kann ich rumspielen und mir alles schön anpassen, geil 🤪

Cool

Der Anfang ist meist ein wenig holperig. Wenn man aber verstanden hat wie es funktioniert, dann geht es eigentlich ganz fix. Und eigentlich kann das Ding ne ganze Menge...

Hier im Thread kann eigentlich immer jemand unterstützen... und das funktioniert auch echt schnell

Atifan

@armilar Jo vielen Dank Sau geil. Werde mir jetzt paar Infoseiten basteln Mit dem Panel beginnt ein neues Level des Smarthome Erlebnisses

Atifan

So, hab schon einige Seiten erstellt
Jetzt wollte ich die beiden Buttons unten so konfigurieren, dass man über die nach links und rechts Scrollen kann, aber leider funktionieren sie nicht. Weiß einer woran es liegt?

Habe im Script folgenden Code:

],
button1Page: button1Page,
button2Page: button2Page
};

Und habe im Tasmota die Rule2 aktiviert
Rule2 on Button1#state do Publish %topic%/%prefix%/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish %topic%/%prefix%/RESULT {"CustomRecv":"event,button2"} endon

Aber es funktioniert nicht Wenn ich die Buttons drücke passiert nix.

Armilar

@atifan sagte in Sonoff NSPanel:

So, hab schon einige Seiten erstellt
Jetzt wollte ich die beiden Buttons unten so konfigurieren, dass man über die nach links und rechts Scrollen kann, aber leider funktionieren sie nicht. Weiß einer woran es liegt?

Habe im Script folgenden Code:

],
button1Page: button1Page,
button2Page: button2Page
};

Und habe im Tasmota die Rule2 aktiviert
Rule2 on Button1#state do Publish %topic%/%prefix%/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish %topic%/%prefix%/RESULT {"CustomRecv":"event,button2"} endon

Aber es funktioniert nicht Wenn ich die Buttons drücke passiert nix.

Zeige mir mal die beiden Zeilen aus deiner Config:

    panelRecvTopic: 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT',       // anpassen
    panelSendTopic: 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend',   // anpassen

wie sehen die bei dir aus?

Atifan

@armilar sagte in Sonoff NSPanel:

panelRecvTopic

 panelRecvTopic: 'mqtt.0.NsPanel.tele.RESULT',       // anpassen
 panelSendTopic: 'mqtt.0.NsPanel.cmnd.CustomSend',   // anpassen

Atifan

Ah habe es hinbekommen, hing mit der Rule2 und MQTT zusammen, die Daten kamen falsch an im MQTT.
Habs so geändert

Rule2 on Button1#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,button2"} endon

Jetzt funktionieren die Buttons, aber sie scrollen nicht nach rechts und links sondern nach oben und unten wie es aussieht.

Armilar

@atifan sagte in Sonoff NSPanel:

@armilar sagte in Sonoff NSPanel:

panelRecvTopic

 panelRecvTopic: 'mqtt.0.NsPanel.tele.RESULT',       // anpassen
 panelSendTopic: 'mqtt.0.NsPanel.cmnd.CustomSend',   // anpassen

Versuche mal direkt:

Rule2 on Button1#state do Publish NSPanel/tele/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish NSPanel/tele//RESULT {"CustomRecv":"event,button2"} endon
Rule2 On

Die Rule2 ist nicht zum Scrollen der links/rechts Seiten-Navigation gedacht, sondern zum visualisieren von Favoriten-Pages (Seite mit einem Klick aufrufen)
Man könnte das sicherlich über eine zusätzliche Funktion (existiert aktuell nicht) aufrufen.
Für die Navigation gibt es ja bereits die Pfeile innerhalb der Seiten

Atifan

@armilar Ahso ok Danke!

Hm ok, ich fände es von der Bedienung her halt bequem wenn man über die Buttons einfach links und rechts Scrollen könnte, so wie mit den Pfeilen.
Ist das großer Aufwand zu programmieren?

Armilar

@atifan sagte in Sonoff NSPanel:

Ah habe es hinbekommen, hing mit der Rule2 und MQTT zusammen, die Daten kamen falsch an im MQTT.
Habs so geändert

Rule2 on Button1#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,button2"} endon

Jetzt funktionieren die Buttons, aber sie scrollen nicht nach rechts und links sondern nach oben und unten wie es aussieht.

Nimm mal eine Definierte Seite und schreibe die in die Zeile:
button1Page: PV_Anlage, (also irgendeine neue Seite)
button2Page: Seite2

Armilar

@atifan sagte in Sonoff NSPanel:

@armilar Ahso ok Danke!

Hm ok, ich fände es von der Bedienung her halt bequem wenn man über die Buttons einfach links und rechts Scrollen könnte, so wie mit den Pfeilen.
Ist das großer Aufwand zu programmieren?

nicht wirklich

Die erforderlichen Ereignisse aus dem Panel sind

"event,buttonPress2,cardMedia,bPrev"
"event,buttonPress2,cardMedia,bNext"

Wenn die stattdessen in der HandleButtonEvent aufgerufen werden, dann machen die das auch.

Also:

HandleButtonEvent(event,buttonPress2,!!!cardMedia!!!,bPrev);

zum Beispiel

Ich denke einfacher wäre es über Rules:
Rule2 abschalten und auf Power reagieren (SetOption114 entkoppelt die Relais, sonst klickt es ja permanent)

Stelle mir das so vor

Rule4 ON Power1#state=1 DO !!!Hier das Event PREV übergeben!!! ENDON ON Power2#state=1 DO !!!Hier das Event NEXT übergeben!!! ENDON

Dann umgehst du lästige Latenzen. Wie das übergebene Event aussieht müsstest du dir aber selbst zurecht fummeln

EDIT: Ist doch komplexer, da auch die Seite übergeben werden muss - Habe da noch ein paar Ausrufungszeichen reingesetzt.

Würde ich eh nicht in den Code integrieren, da wie bereits gesagt eine Navigation existiert.

Darüber hinaus sind die Buttons eh schon schwer genug zu steuern, da sie extern sind und nicht viele Infos im Bauch haben.

Atifan

@armilar Ah ok, wenns nicht geht ist auch ok

Atifan

hier stand Müll

Atifan

Armilar

@atifan sagte in Sonoff NSPanel:

Flott - ich sehe es geht weiter

Falls du doch irgendwann spezielle Icons verwenden möchtest, die gibt es hier:
https://htmlpreview.github.io/?https://github.com/jobr99/Generate-HASP-Fonts/blob/master/cheatsheet.html

Einfach den Namen zum Symbol mit dem PageItem-Parameter , icon: "HierDerIconName", einfügen.

holgerwolf

@atifan Du kannst die Infos auch noch mit Icons, Farben und Einheiten versehen:

Atifan

@Armilar und @holgerwolf: Ja Danke für die Tipps, bin schon dabei mit Icons und Farben usw.

Armilar

Neues Update für das TS-Script verfügbar...

https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts

Achtung "Breaking Changes".
Es reicht dieses mal nicht aus nur den unteren Teil zu ersetzten (Daher besser Skript anlegen und von der alten Skriptversion in die neue Skriptversion kopieren). Es haben sich auch Änderungen im Config-Header ergeben. Dort sind eine Menge Variablen verändert oder gelöscht.
Insbesondere bei der Nutzung der cardMedia haben sich Änderungen ergeben. Der Alias hat jetzt weitere Parameter im PageItem:

Dafür lassen sich aber auch diverse Adapter-Player einbinden (Spotify-Premium, Sonos, Chromecast)

MEDIA ALIASE können auch per JS-Script erstellt werden:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#medien---cardmedia

Unterstützung zur cardMedia gibt es auch hier:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardmedia

Viel Spass damit

NEWS

Sonoff NSPanel

Support us

490
Online

31.7k
Users

79.7k
Topics

1.3m
Posts

NEWS

Sonoff NSPanel

Support us

490Online

31.7kUsers

79.7kTopics

1.3mPosts

490
Online

31.7k
Users

79.7k
Topics

1.3m
Posts