Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Hardware
  4. SONOFF NSPanel mit Lovelace UI

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.7k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.1k

SONOFF NSPanel mit Lovelace UI

Geplant Angeheftet Gesperrt Verschoben Hardware
lovelace uinspanelsonoff
7.8k Beiträge 273 Kommentatoren 6.8m Aufrufe 256 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • ArmilarA Offline
    ArmilarA Offline
    Armilar
    Most Active Forum Testing
    schrieb am zuletzt editiert von Armilar
    #4085

    @kuckuckmann

    So kannst das ganze Haus mit nur einem "Lichtschalter" steuern...

    Die navigate: true sind schon okay, wie man auch in der Emulation sieht. Es ist ähnlich wie bei mir eine sehr komplexe Menüführung und tatsächlich nur an den Endpunkten dann zum Schalten, Steuern, Regeln oder zum Einsehen diverser Statistiken.

    Egal wo du dich befindest, du hast eigentlich über jedes NSPanel die Möglichkeit alle Zustände einzusehen oder irgendetwas zu schalten... Außerdem bekommst du in der gesamten Menüführung durch Indikatoren den Weg zum Problem angezeigt.

    Hier nur ein winzig kleiner Ausschnitt aus meiner Struktur (Level Tiefe 4)

    // **********************************************************
    // **          Navigationsstruktur für Gebäude             **
    // **********************************************************
    
    let Level_0_Grundstueck = <PageGrid>
    {
        'type': "cardGrid",
        'heading': "Grundstück",
        'useColor': true,
        'items': [
            <PageItem>{ navigate: true, id: 'alias.0.Haus.Indikator', targetPage: 'Level_1_Haus', name: 'Haus' ,icon: 'home', offColor: MenuHighInd, onColor: Menu},
            <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Gartenhaus', name: 'Gartenhaus' ,icon: 'storefront-outline', onColor: Menu},
            <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Aussen', name: 'Aussen' ,icon: 'tree-outline', onColor: Menu},
            <PageItem>{ navigate: true, id: 'alias.0.Garage.Indikator', targetPage: 'Level_1_Garage', name: 'Garage' ,icon: 'garage-variant', offColor: MenuHighInd, onColor: Menu},
            <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Fahrzeuge_1', name: 'Fahrzeuge' ,icon: 'car-info', offColor: Menu, onColor: Menu},
        ]
    };
    
            let Level_1_Haus = <PageGrid>
            {
                'type': 'cardGrid',
                'heading': 'Haus',
                'useColor': true,
                'subPage': true,
                'parent': Level_0_Grundstueck,
                'home': 'Level_0_Grundstueck', 
                'items': [
                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Indikator', targetPage: 'Level_2_Erdgeschoss_1', name: 'Erdgeschoss' , icon: 'home-floor-0', offColor: MenuHighInd, onColor: Menu},
                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Obergeschoss.Indikator', targetPage: 'Level_2_Obergeschoss_1', name: 'Obergeschoss' , icon: 'home-floor-1', offColor: MenuHighInd, onColor: Menu},
                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Dachgeschoss.Indikator', targetPage: 'Level_2_Dachgeschoss', name: 'Dachgeschoss' , icon: 'home-floor-2', offColor: MenuHighInd, onColor: Menu},
                ]
            };
    
                    let Level_2_Erdgeschoss_1 = <PageGrid>
                    {
                        'type': 'cardGrid',
                        'heading': 'Erdgeschoss (1)',
                        'useColor': true,
                        'subPage': true,
                        'parent': Level_1_Haus,
                        'next': 'Level_2_Erdgeschoss_2',
                        'home': 'Level_1_Haus',
                        'items': [
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Indikator', targetPage: 'Level_3_Wohnzimmer', name: 'Wohnzimmer' , icon: 'sofa-outline', offColor: MenuHighInd, onColor: Menu},
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Esszimmer.Indikator', targetPage: 'Level_3_Esszimmer', name: 'Esszimmer' , icon: 'table-chair', offColor: MenuHighInd, onColor: Menu},
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Buero.Indikator', targetPage: 'Level_3_Buero', name: 'Büro' , icon: 'desk', offColor: MenuHighInd, onColor: Menu},
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Kueche.Indikator', targetPage: 'Level_3_Kueche', name: 'Küche' , icon: 'silverware-variant', offColor: MenuHighInd, onColor: Menu},
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Bad.Indikator', targetPage: 'Level_3_EG_Bad', name: 'Bad' , icon: 'bathtub-outline', offColor: MenuHighInd, onColor: Menu},
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Kaminzimmer.Indikator', targetPage: 'Level_3_Kaminzimmer', name: "Kaminzimmer" , icon: "fireplace", offColor: MenuHighInd, onColor: Menu},
                        ]
                    };
    
                            let Level_3_Wohnzimmer = <PageGrid>
                            {
                                'type': 'cardGrid',
                                'heading': 'EG Wohnzimmer',
                                'useColor': true,
                                'subPage': true,
                                'parent': Level_2_Erdgeschoss_1,
                                'home': 'Level_1_Haus',
                                'items': [
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Indikator', targetPage: 'Level_4_Wohnzimmer_Licht_1', name: 'Licht' , icon: 'lightbulb', offColor: MenuHighInd, onColor: Menu},
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Sensoren.Indikator', targetPage: 'Level_4_Wohnzimmer_Sensoren_1', name: 'Sensoren' , icon: 'sync-alert', offColor: MenuHighInd, onColor: Menu},
                                    <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Aktoren', name: 'Aktoren' , icon: 'gesture-tap', onColor: Menu},
                                    <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Thermostat', name: 'Thermostat' , icon: 'thermostat', onColor: Menu},
                                    <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Charts_Temperatur', name: "Charts" , icon: "chart-line", onColor: Menu},
                                ]
                            };
    
                                    let Level_4_Wohnzimmer_Licht_1 = <PageEntities>
                                    {
                                        'type': 'cardEntities',
                                        'heading': 'WZ Licht (1)',
                                        'useColor': true,
                                        'subPage': true,
                                        'parent': Level_3_Wohnzimmer,
                                        'next': 'Level_4_Wohnzimmer_Licht_2',
                                        'home': 'Level_1_Haus',
                                        'items': [
                                            <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Couchtischlampe', name: 'Couchtisch', useColor: true},
                                            <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Deckenlampe_Esstisch', name: 'Esstisch', interpolateColor: true},
                                            <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Vitrine', name: 'Vitrine', interpolateColor: true},
                                            <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Stehlampe', name: 'Stehlampe', interpolateColor: true},
                                        ]
                                    };
    
                                    let Level_4_Wohnzimmer_Licht_2 = <PageEntities>
                                    {
                                        'type': 'cardEntities',
                                        'heading': 'WZ Licht (2)',
                                        'useColor': true,
                                        'subPage': true,
                                        'parent': Level_3_Wohnzimmer,
                                        'prev': 'Level_4_Wohnzimmer_Licht_1',
                                        'next': undefined,
                                        'home': 'Level_1_Haus',
                                        'items': [
                                            <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.WZ_E14_Fenster_mitte', name: 'Fenster mittig', interpolateColor: true},
                                            <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.WZ_E14_Fenster_rechts', name: 'Fenster rechts', interpolateColor: true},
                                        ]
                                    };
    

    Ich lege nur meine Alias-Namen so an, dass ich die Struktur auch außerhalb nachvollziehen kann...

    und die zugehörigen Subpages:

                    Level_1_Haus,
                        Level_2_Erdgeschoss_1,
                            Level_3_Wohnzimmer,
                                Level_4_Wohnzimmer_Licht_1,
                                Level_4_Wohnzimmer_Licht_2,
                                Level_4_Wohnzimmer_Sensoren_1,
                                Level_4_Wohnzimmer_Sensoren_2,
                                Level_4_Wohnzimmer_Aktoren,
                                Level_4_Wohnzimmer_Thermostat,
                                Level_4_Wohnzimmer_Charts_Temperatur,
                                Level_4_Wohnzimmer_Charts_Luftfeuchte,
                            Level_3_Esszimmer,
                                Level_4_Esszimmer_Licht_1,
                                Level_4_Esszimmer_Sensoren_1,
                                Level_4_Esszimmer_Thermostat,
                                Level_4_Esszimmer_Charts_Temperatur,
                                Level_4_Esszimmer_Charts_Luftfeuchte,
                            Level_3_Buero,
                                Level_4_Buero_Licht,
                                Level_4_Buero_Sensoren_1,
                                Level_4_Buero_Sensoren_2,
                                Level_4_Buero_Aktoren,
                                Level_4_Buero_Thermostat,
                                Level_4_Buero_Charts_Temperatur,
                                Level_4_Buero_Charts_Luftfeuchte,
                            Level_3_Kueche,
                                Level_4_Kueche_Licht_1,
                                Level_4_Kueche_Sensoren_1,
                                Level_4_Kueche_Aktoren,
                                Level_4_Kueche_Charts,
                            Level_3_EG_Bad,
                                Level_4_EG_Bad_Licht_1,
                                Level_4_EG_Bad_Licht_2,
                                Level_4_EG_Bad_Sensoren_1,
                                Level_4_EG_Bad_Sensoren_2,
                                Level_4_EG_Bad_Aktoren,
                                Level_4_EG_Bad_Thermostat,
                                Level_4_EG_Bad_Charts_Temperatur,
                                Level_4_EG_Bad_Charts_Luftfeuchte,
                            Level_3_Kaminzimmer,
                                Level_4_Kaminzimmer_Licht_1,
                                Level_4_Kaminzimmer_Sensoren_1,
                                Level_4_Kaminzimmer_Aktoren,
                                Level_4_Kaminzimmer_Thermostat,
                                Level_4_Kaminzimmer_Charts_Temperatur,
                                Level_4_Kaminzimmer_Charts_Luftfeuchte,                      
                        Level_2_Erdgeschoss_2,
                            Level_3_GaesteWC,
                                Level_4_GaesteWC_Licht_1,
                                Level_4_GaesteWC_Sensoren_1,
                                Level_4_GaesteWC_Thermostat,
                                Level_4_GaesteWC_Charts_Temperatur,
                                Level_4_GaesteWC_Charts_Luftfeuchte, 
                            Level_3_Hauswirtschaftsraum,
                                Level_4_Hauswirtschaftsraum_Licht_1,
                                Level_4_Hauswirtschaftsraum_Sensoren_1,
                                Level_4_Hauswirtschaftsraum_Sensoren_2,
                                Level_4_Hauswirtschaftsraum_Aktoren,
                                Level_4_Hauswirtschaftsraum_Charts_Temperatur,
                                Level_4_Hauswirtschaftsraum_Charts_Luftfeuchte,
                            Level_3_EG_FlurVorne,
                                Level_4_EG_FlurVorne_Licht_1,
                                Level_4_EG_FlurVorne_Sensoren_1,
                                Level_4_EG_FlurVorne_Thermostat,
                                Level_4_EG_FlurVorne_Charts_Temperatur,
                                Level_4_EG_FlurVorne_Charts_Luftfeuchte,
                            Level_3_EG_FlurHinten,
                                Level_4_EG_FlurHinten_Licht_1,
                                Level_4_EG_FlurHinten_Sensoren_1,
                                Level_4_EG_FlurHinten_Thermostat,
                                Level_4_EG_FlurHinten_Charts_Temperatur,
                                Level_4_EG_FlurHinten_Charts_Luftfeuchte,
                        Level_2_Obergeschoss_1,
                            Level_3_Schlafzimmer_1,
                                Level_4_OG_Schlafzimmer_1_Licht_1,
                                Level_4_OG_Schlafzimmer_1_Sensoren_1,
                                Level_4_OG_Schlafzimmer_1_Aktoren,
                                Level_4_OG_Schlafzimmer_1_Thermostat,
                                Level_4_OG_Schlafzimmer_1_Charts_Temperatur,
                                Level_4_OG_Schlafzimmer_1_Charts_Luftfeuchte,
                            Level_3_Schlafzimmer_2,
                                Level_4_OG_Schlafzimmer_2_Licht_1,
                                Level_4_OG_Schlafzimmer_2_Sensoren_1,
                                Level_4_OG_Schlafzimmer_2_Aktoren,
                                Level_4_OG_Schlafzimmer_2_Thermostat,    
                            Level_3_OG_Hobbyraum,
                                Level_4_OG_Hobbyraum_Licht_1,
                                Level_4_OG_Hobbyraum_Sensoren_1,
                                Level_4_OG_Hobbyraum_Aktoren,
                                Level_4_OG_Hobbyraum_Thermostat,
                                Level_4_OG_Hobbyraum_Charts_Temperatur,
                                Level_4_OG_Hobbyraum_Charts_Luftfeuchte,
                            Level_3_OG_Gaestezimmer,
                                Level_4_OG_Gaestezimmer_Licht_1,
                                Level_4_OG_Gaestezimmer_Sensoren_1,
                                Level_4_OG_Gaestezimmer_Aktoren,
                                Level_4_OG_Gaestezimmer_Thermostat,
                                Level_4_OG_Gaestezimmer_Charts_Temperatur,
                                Level_4_OG_Gaestezimmer_Charts_Luftfeuchte,
                            Level_3_OG_Bad,
                                Level_4_OG_Bad_Licht_1,
                            Level_3_OG_Flur,
                                Level_4_OG_Flur_Licht_1,
                                Level_4_OG_Flur_Sensoren_1,
                                Level_4_OG_Flur_Thermostat,
                        Level_2_Obergeschoss_2,
                            Level_3_NebenraumSZ_1,
                            Level_3_Abseite_Hobby,
                        Level_2_Dachgeschoss,
                    Level_1_Gartenhaus,
                        Level_2_GH_Licht,
                            Level_3_GH_Lampen_1,
                            Level_3_GH_Lampen_2,
                            Level_3_GH_Lampen_3,
                            Level_3_GH_Lampen_4,
                            Level_3_GH_LED_Stripes,
                            Level_3_GH_WLED,
                            Level_3_GH_Aussenlampen,
                        Level_2_GH_Sensoren_1,
                        Level_2_GH_Sensoren_2,
                        Level_2_GH_Aktoren_1,
                        Level_2_GH_Aktoren_2,
                        Level_2_GH_Heizkoerper,
                        Level_2_GH_Charts_Temperatur,
                        Level_2_GH_Charts_Luftfeuchte,
                    Level_1_Aussen,
                        Level_2_Hauseingang,
                        Level_2_Terrassen,
                            Level_3_Terrassen_American,
                            Level_3_Terrassen_Mediteran,
                            Level_3_Terrassen_Gartenhaus,
                            Level_3_Terrassen_Hinterhof,
                        Level_2_Auffahrt,
                        Level_2_Pool,
                        Level_2_Wetterstation,
                    Level_1_Garage,
                        Level_2_Garage_vorne,
                        Level_2_Garage_hinten,
                    Level_1_Fahrzeuge_1,
                        Level_2_Fahrzeug_1_Info_1,
                        Level_2_Fahrzeug_1_Reisedaten_1,
                        Level_2_Fahrzeug_1_Reisedaten_2,
                        Level_2_Fahrzeug_1_Standort_1,
                    Level_1_Fahrzeuge_2
    

    EDIT: Jedes NSPanel hat dann natürlich noch seine raumspezifischen Pages, die du schneller erreichen kannst...

    Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
    https://github.com/joBr99/nspanel-lovelace-ui/wiki

    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

    1 Antwort Letzte Antwort
    0
    • K Kuckuckmann

      @danny_v1

      Hi @danny_v1 ,

      was ich nicht verstehe ist, warum Du bei vielen Punkten ein navigate: true da drin hast. Die meisten der PageItems sind doch zum schalten und nicht noch um auf weitere Unterseiten zu navigieren, oder?

      Vlt. hilft Dir das ja.

      @Armilar man könnte meinen Du hast Langeweile? :-D

      LG

      ArmilarA Offline
      ArmilarA Offline
      Armilar
      Most Active Forum Testing
      schrieb am zuletzt editiert von
      #4086

      @kuckuckmann sagte in SONOFF NSPanel mit Lovelace UI:

      @Armilar man könnte meinen Du hast Langeweile?

      Ich nenne das mal: Die Ruhe vor dem Sturm nutzen ;-)

      Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
      https://github.com/joBr99/nspanel-lovelace-ui/wiki

      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

      1 Antwort Letzte Antwort
      0
      • X xelarep

        @armilar @Gargano

        Ja, es funktioniert alles. Ich hab in der Zwischenzeit auch mein Gesamtsystem mal aktualisiert https://forum.iobroker.net/topic/69067/neuer-befehl-iob-nodejs-update/72?_=1698741140337

        Ich konnte jetzt im Log nach Neustart nichts mehr finden.

        Danke für Eure Unterstützung!

        X Offline
        X Offline
        xelarep
        schrieb am zuletzt editiert von
        #4087

        @xelarep sagte in SONOFF NSPanel mit Lovelace UI:

        @armilar @Gargano

        Ja, es funktioniert alles. […]

        Kurze „Nachmeldung“ ich hab heute ein zweites Panel in Betrieb genommen. Das ganze ging im ersten Anlauf ohne irgendwelche Nebenwirkungen :blush:

        ArmilarA 1 Antwort Letzte Antwort
        1
        • X xelarep

          @xelarep sagte in SONOFF NSPanel mit Lovelace UI:

          @armilar @Gargano

          Ja, es funktioniert alles. […]

          Kurze „Nachmeldung“ ich hab heute ein zweites Panel in Betrieb genommen. Das ganze ging im ersten Anlauf ohne irgendwelche Nebenwirkungen :blush:

          ArmilarA Offline
          ArmilarA Offline
          Armilar
          Most Active Forum Testing
          schrieb am zuletzt editiert von
          #4088

          @xelarep

          ja perfekt - viel Spaß bei der Konfiguration :blush:

          Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
          https://github.com/joBr99/nspanel-lovelace-ui/wiki

          Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

          J 1 Antwort Letzte Antwort
          0
          • ArmilarA Armilar

            @xelarep

            ja perfekt - viel Spaß bei der Konfiguration :blush:

            J Offline
            J Offline
            jpw1000
            schrieb am zuletzt editiert von jpw1000
            #4089

            Hallo, ich habe meine beiden Panels auf den aktuellen Stand gebracht, nun aber eine frage? Wo kann ich im Skript einstellen das die Temperatur von meiner Wetterstation kommt, die 4 kleinen Symbole sind kein Problem, nur ich finde keine Zeile wo die Temperatur her kommt.

            Vielen Dank für eure hilfe.

            ArmilarA 1 Antwort Letzte Antwort
            0
            • J jpw1000

              Hallo, ich habe meine beiden Panels auf den aktuellen Stand gebracht, nun aber eine frage? Wo kann ich im Skript einstellen das die Temperatur von meiner Wetterstation kommt, die 4 kleinen Symbole sind kein Problem, nur ich finde keine Zeile wo die Temperatur her kommt.

              Vielen Dank für eure hilfe.

              ArmilarA Offline
              ArmilarA Offline
              Armilar
              Most Active Forum Testing
              schrieb am zuletzt editiert von
              #4090

              @jpw1000

              Das Script legt selbstständig einen Wetteralisas an. Dort kannst du die Temperatur ändern

              weatherEntity: 'alias.0.Wetter',
              

              Anstelle der Temperatur aus AccuWeather (alternativ Das Wetter) wählst du deinen eigenen Sensor unter TEMP...

              5a79ef5b-366a-46d1-9992-2329f19757aa-image.png

              Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
              https://github.com/joBr99/nspanel-lovelace-ui/wiki

              Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

              J D 2 Antworten Letzte Antwort
              0
              • ArmilarA Armilar

                @jpw1000

                Das Script legt selbstständig einen Wetteralisas an. Dort kannst du die Temperatur ändern

                weatherEntity: 'alias.0.Wetter',
                

                Anstelle der Temperatur aus AccuWeather (alternativ Das Wetter) wählst du deinen eigenen Sensor unter TEMP...

                5a79ef5b-366a-46d1-9992-2329f19757aa-image.png

                J Offline
                J Offline
                jpw1000
                schrieb am zuletzt editiert von
                #4091

                @armilar Vielen Dank! Funktioniert!

                1 Antwort Letzte Antwort
                1
                • ArmilarA Armilar

                  @jpw1000

                  Das Script legt selbstständig einen Wetteralisas an. Dort kannst du die Temperatur ändern

                  weatherEntity: 'alias.0.Wetter',
                  

                  Anstelle der Temperatur aus AccuWeather (alternativ Das Wetter) wählst du deinen eigenen Sensor unter TEMP...

                  5a79ef5b-366a-46d1-9992-2329f19757aa-image.png

                  D Offline
                  D Offline
                  DaPeace
                  schrieb am zuletzt editiert von
                  #4092

                  @armilar
                  Ich würde gerne Tagesstromverbrauch und Temperatur-Werte als Line oder Balken-Chart auf dem Panel ausgeben.
                  Ich hab bei mir Node-red laufen und die Daten landen hier eh in einer mysql-DB. Ich kriege diese Daten ziemlich einfach in einen json-string oder kann das soweit anpassen wie es für das Panel notwendig wäre aber die Beispiele sind alle für Blocky und ioBroker und ich seh nicht ganz durch was NSPanel jetzt genau in dem Alias erwartet. Kannst du mir da ein einfaches Beispiel zeigen?
                  Danke schonmal!

                  ArmilarA 2 Antworten Letzte Antwort
                  0
                  • D DaPeace

                    @armilar
                    Ich würde gerne Tagesstromverbrauch und Temperatur-Werte als Line oder Balken-Chart auf dem Panel ausgeben.
                    Ich hab bei mir Node-red laufen und die Daten landen hier eh in einer mysql-DB. Ich kriege diese Daten ziemlich einfach in einen json-string oder kann das soweit anpassen wie es für das Panel notwendig wäre aber die Beispiele sind alle für Blocky und ioBroker und ich seh nicht ganz durch was NSPanel jetzt genau in dem Alias erwartet. Kannst du mir da ein einfaches Beispiel zeigen?
                    Danke schonmal!

                    ArmilarA Offline
                    ArmilarA Offline
                    Armilar
                    Most Active Forum Testing
                    schrieb am zuletzt editiert von Armilar
                    #4093

                    @dapeace sagte in SONOFF NSPanel mit Lovelace UI:

                    Ich hab bei mir Node-red laufen und die Daten landen hier eh in einer mysql-DB...... aber die Beispiele sind alle für Blocky und ioBroker und ich seh nicht ganz durch was NSPanel jetzt genau in dem Alias erwartet.

                    Bei Node-Red kann ich dir leider keine Unterstützung geben, da ich es nicht nutze und auch keine Ahnung habe wie man es benutzt :grin: . Bei mySQL allerdings auch nicht, da bei mir vollständig auf InfluxDB2...

                    Evtl. gibt es aber User die Node-Red mit der cardChart oder cardLChart benutzen.
                    Evtl. mal @Kuckuckmann fragen. Er ist bei Blockly und SQL - weiß aber nicht, ob er Charts im Einsatz hat.

                    Was würde denn gegen ein Blockly oder gegen ein JavaScript sprechen? In den nachfolgenden Beispielen, sind auch Scripte für den History-Adapter enthalten.

                    https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardchart-ab-ts-script-v370

                    var historyInstance = 'history.0';
                    

                    habe mal gehört, dass man dann den history gegen sql austauschen kann:

                    var historyInstance = 'sql.0';
                    

                    und das die Daten dann auch kommen.

                    Die cardChart erwartet einen String und einen Alias Info. Der String sieht wie folgt aus:

                    16^12:00~37~17~13~18^16:00~21~17~22~18^20:00~17~17~16~11^0:00~5~5~5~5^4:00~5~4~4~15^8:00~22~13~10

                    Zunächst einmal sind im o.a. Beispiel alle 24 Werte der Stunden über den Tag mit einer Tilde ("~") getrennt. An den Punkten, an denen dann die X-Achsen Ticks gesetzt werden, wird hinter dem Wert dann die Uhrzeit der X-Achse gesetzt

                    d89af36d-bf3c-42a9-b88f-c8d1a60f2113-image.png

                    Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                    https://github.com/joBr99/nspanel-lovelace-ui/wiki

                    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                    D 1 Antwort Letzte Antwort
                    0
                    • ArmilarA Armilar

                      @dapeace sagte in SONOFF NSPanel mit Lovelace UI:

                      Ich hab bei mir Node-red laufen und die Daten landen hier eh in einer mysql-DB...... aber die Beispiele sind alle für Blocky und ioBroker und ich seh nicht ganz durch was NSPanel jetzt genau in dem Alias erwartet.

                      Bei Node-Red kann ich dir leider keine Unterstützung geben, da ich es nicht nutze und auch keine Ahnung habe wie man es benutzt :grin: . Bei mySQL allerdings auch nicht, da bei mir vollständig auf InfluxDB2...

                      Evtl. gibt es aber User die Node-Red mit der cardChart oder cardLChart benutzen.
                      Evtl. mal @Kuckuckmann fragen. Er ist bei Blockly und SQL - weiß aber nicht, ob er Charts im Einsatz hat.

                      Was würde denn gegen ein Blockly oder gegen ein JavaScript sprechen? In den nachfolgenden Beispielen, sind auch Scripte für den History-Adapter enthalten.

                      https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardchart-ab-ts-script-v370

                      var historyInstance = 'history.0';
                      

                      habe mal gehört, dass man dann den history gegen sql austauschen kann:

                      var historyInstance = 'sql.0';
                      

                      und das die Daten dann auch kommen.

                      Die cardChart erwartet einen String und einen Alias Info. Der String sieht wie folgt aus:

                      16^12:00~37~17~13~18^16:00~21~17~22~18^20:00~17~17~16~11^0:00~5~5~5~5^4:00~5~4~4~15^8:00~22~13~10

                      Zunächst einmal sind im o.a. Beispiel alle 24 Werte der Stunden über den Tag mit einer Tilde ("~") getrennt. An den Punkten, an denen dann die X-Achsen Ticks gesetzt werden, wird hinter dem Wert dann die Uhrzeit der X-Achse gesetzt

                      d89af36d-bf3c-42a9-b88f-c8d1a60f2113-image.png

                      D Offline
                      D Offline
                      DaPeace
                      schrieb am zuletzt editiert von
                      #4094

                      @armilar
                      Hi, wie ich mit Mysql und NodeRed an meine Daten komme weiß ich ja.
                      NodeRed ist direkt mit ioB verknüpft und kann hier einfach einen Datenpunkt beschreiben und auch lesen.
                      Ich würde also gerne aus NodeRed raus den Info-Datenpunkt vom Alias schreiben und brauche hier die Formatierung.
                      Frage ist eben was genau in dem Datenpunkt drin stehen muß der mit dem Info-Alias verknüpft ist. Den Rest sollte ja dann das Skript machen oder?

                      Das unten gelistete ist ja das, was dein Skript ans Panel via CustomSend schickt oder?

                      16^12:00~37~17~13~18^16:00~21~17~22~18^20:00~17~17~16~11^0:00~5~5~5~5^4:00~5~4~4~15^8:00~22~13~10

                      1 Antwort Letzte Antwort
                      0
                      • ArmilarA Offline
                        ArmilarA Offline
                        Armilar
                        Most Active Forum Testing
                        schrieb am zuletzt editiert von Armilar
                        #4095

                        @dapeace

                        Exakt, die cardChart legst du analog der Wiki an

                        Dein NodeRed befüllt einen Datenpunkt in der Art des Strings

                        16^12:00~37~17~13~18^16:00~21~17~22~18^20:00~17~17~16~11^0:00~5~5~5~5^4:00~5~4~4~15^8:00~22~13~10
                        

                        Dann legst du einen Alias vom Gerätetyp Info auf diesen Datenpunkt

                        damit würde sich also die cardChart schon als Seite testen lassen...

                        Die Seitendefinition der cardChart (Y-Achse wird hier definiert mit Faktor 10)

                        2 = 0,2; 4 = 0,4; etc...

                        let CardChartExample = <PageChart>
                        {
                            'type': 'cardChart',
                            'heading': 'Stromzähler L1+L2+L3',
                            'useColor': true,
                            'items': [<PageItem>{ 
                                        id: 'alias.0.NSPanel_1.cardChart', 
                                        yAxis: 'Leistung [kW]', 
                                        yAxisTicks: [2,4,6,8,10,2,4,6,8,20,2], 
                                        onColor: Yellow
                                     }]
                        };
                        

                        yAxisTicks: [10,20,30], würde demnach so aussehen:

                        246ccd57-c866-4797-9fa5-4d35d7936d9e-image.png

                        Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                        https://github.com/joBr99/nspanel-lovelace-ui/wiki

                        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                        D 1 Antwort Letzte Antwort
                        0
                        • ArmilarA Armilar

                          @dapeace

                          Exakt, die cardChart legst du analog der Wiki an

                          Dein NodeRed befüllt einen Datenpunkt in der Art des Strings

                          16^12:00~37~17~13~18^16:00~21~17~22~18^20:00~17~17~16~11^0:00~5~5~5~5^4:00~5~4~4~15^8:00~22~13~10
                          

                          Dann legst du einen Alias vom Gerätetyp Info auf diesen Datenpunkt

                          damit würde sich also die cardChart schon als Seite testen lassen...

                          Die Seitendefinition der cardChart (Y-Achse wird hier definiert mit Faktor 10)

                          2 = 0,2; 4 = 0,4; etc...

                          let CardChartExample = <PageChart>
                          {
                              'type': 'cardChart',
                              'heading': 'Stromzähler L1+L2+L3',
                              'useColor': true,
                              'items': [<PageItem>{ 
                                          id: 'alias.0.NSPanel_1.cardChart', 
                                          yAxis: 'Leistung [kW]', 
                                          yAxisTicks: [2,4,6,8,10,2,4,6,8,20,2], 
                                          onColor: Yellow
                                       }]
                          };
                          

                          yAxisTicks: [10,20,30], würde demnach so aussehen:

                          246ccd57-c866-4797-9fa5-4d35d7936d9e-image.png

                          D Offline
                          D Offline
                          DaPeace
                          schrieb am zuletzt editiert von
                          #4096

                          @armilar
                          Ok das klingt nicht so schwer.
                          Müssen es eine bestimmte Anzahl Werte sein?

                          ArmilarA 1 Antwort Letzte Antwort
                          0
                          • D DaPeace

                            @armilar
                            Ok das klingt nicht so schwer.
                            Müssen es eine bestimmte Anzahl Werte sein?

                            ArmilarA Offline
                            ArmilarA Offline
                            Armilar
                            Most Active Forum Testing
                            schrieb am zuletzt editiert von
                            #4097

                            @DaPeace

                            Nein da geht auch mehr... Ausprobieren, da irgendwann ein sehr, sehr, sehr langer String in der HMI überlaufen kann... Und Balken kannst du dann auch nicht mehr erkennen. Wenn du auf einen Balken klickst siehst du übrigens den Wert...

                            d46f8ab8-4de4-46e8-a594-51004492a284-image.png

                            Für Temperaturen verwende ich in der Regel aber die cardLChart, da diese die Koordinaten schöner visualisiert...

                            Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                            https://github.com/joBr99/nspanel-lovelace-ui/wiki

                            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                            1 Antwort Letzte Antwort
                            0
                            • D DaPeace

                              @armilar
                              Ich würde gerne Tagesstromverbrauch und Temperatur-Werte als Line oder Balken-Chart auf dem Panel ausgeben.
                              Ich hab bei mir Node-red laufen und die Daten landen hier eh in einer mysql-DB. Ich kriege diese Daten ziemlich einfach in einen json-string oder kann das soweit anpassen wie es für das Panel notwendig wäre aber die Beispiele sind alle für Blocky und ioBroker und ich seh nicht ganz durch was NSPanel jetzt genau in dem Alias erwartet. Kannst du mir da ein einfaches Beispiel zeigen?
                              Danke schonmal!

                              ArmilarA Offline
                              ArmilarA Offline
                              Armilar
                              Most Active Forum Testing
                              schrieb am zuletzt editiert von Armilar
                              #4098

                              @dapeace sagte in SONOFF NSPanel mit Lovelace UI:

                              Temperatur-Werte als Line

                              Meine Temperatur-Sensoren schiebe ich durch ein einziges JS-Script. Kannste evtl auch für Node-Red mit mySQL adaptieren...

                              const Debug = false;
                              
                              const NSPanel_Path = '0_userdata.0.NSPanel.';
                              const Path = NSPanel_Path + 'Influx2NSPanel.cardLChart.';
                              let   PathSensor = '';
                              
                              let SensorName = ['EG.Buero.Temperatur',
                                                'EG.Gaeste_WC.Temperatur',
                                                'EG.Wohnzimmer.Temperatur',
                                                'EG.Hauswirtschaftsraum.Temperatur',
                                                'EG.Flur_vorne.Temperatur',
                                                'EG.Flur_hinten.Temperatur',
                                                'EG.Esszimmer.Temperatur',
                                                'EG.Kaminzimmer.Temperatur',
                                                'EG.Badezimmer.Temperatur',
                                                'EG.Kueche.Temperatur',
                                                'OG.Schlafzimmer_1.Temperatur',
                                                'OG.Gaestezimmer.Temperatur',
                                                'OG.Hobbyraum.Temperatur',
                                                'Gartenhaus.Temperatur'];
                              
                              const Sensor = [].concat('deconz.0.Sensors.5.temperature')  // EG.Buero.Temperatur
                                               .concat('deconz.0.Sensors.12.temperature')  // EG.Gaeste_WC.Temperatur
                                               .concat('deconz.0.Sensors.53.temperature')  // EG.Wohnzimmer.Temperatur
                                               .concat('deconz.0.Sensors.19.temperature')  // EG.Hauswirtschaftsraum.Temperatur
                                               .concat('deconz.0.Sensors.9.temperature')   // EG.Flur_vorne.Temperatur
                                               .concat('deconz.0.Sensors.27.temperature')  // EG.Flur_hinten.Temperatur
                                               .concat('deconz.0.Sensors.40.temperature')  // EG.Esszimmer.Temperatur
                                               .concat('deconz.0.Sensors.37.temperature')  // EG.Kaminzimmer.Temperatur
                                               .concat('deconz.0.Sensors.45.temperature')  // EG.Badezimmer.Temperatur
                                               .concat('deconz.0.Sensors.25.temperature')  // EG.Kueche.Temperature
                                               .concat('deconz.0.Sensors.57.temperature')  // OG.Schlafzimmer_1.Temperatur
                                               .concat('deconz.0.Sensors.60.temperature')  // OG.Gaestezimmer.Temperatur
                                               .concat('deconz.0.Sensors.63.temperature')  // OG.Hobbyraum.Temperatur
                                               .concat('deconz.0.Sensors.30.temperature'); // Gartenhaus.Temperatur
                                               
                              let   triggeredSensor = 0;
                              
                              const numberOfHoursAgo = 24;
                              const xAxisTicksEveryM = 60;
                              const xAxisLabelEveryM = 240;
                              
                              const InfluxInstance = 'influxdb.1';
                              
                              // Ab hier keine Ändeungen
                              
                              let coordinates = ''; 
                              
                              on({ id: Sensor, change: 'any' }, async function (obj) {
                                  
                                  if (Debug) console.log(obj.id);
                                  if (Debug) console.log(Sensor.indexOf(obj.id));
                                  if (Debug) console.log(SensorName[Sensor.indexOf(obj.id)])
                              
                                  PathSensor = Path + SensorName[Sensor.indexOf(obj.id)]
                              
                                  if (existsObject(PathSensor) == false) {
                                      createState(PathSensor, 0, {
                                          name: 'SensorGrid',
                                          desc: 'Sensor Values [~<time>:<value>]*',
                                          type: 'string',
                                          role: 'value',
                                      });
                                  }
                              
                                  let query =[
                                      'from(bucket: "iobroker")',
                                      '|> range(start: -' + numberOfHoursAgo + 'h)',
                                      '|> filter(fn: (r) => r["_measurement"] == "' + obj.id + '")',
                                      '|> 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);
                              
                                  sendTo(InfluxInstance, 'query', query, function (result) {
                                      if (result.error) {
                                          console.error(result.error);
                                      } else {
                                          // show result
                                          if (Debug) console.log(result);
                                          let numResults = result.result.length;
                                          for (let r = 0; r < numResults; r++) 
                                          {
                                              let list = []
                                              let numValues = result.result[r].length;
                              
                                              for (let i = 0; i < numValues; i++) 
                                              {
                                                  let time = Math.round(result.result[r][i]._rtime/1000/1000/1000/60);
                                                  let value = Math.round(result.result[r][i]._value * 10);
                                                  list.push(time + ":" + value);
                                              }
                              
                                              coordinates = list.join("~");
                              
                                              if (Debug) console.log(coordinates);
                                          }
                                      }
                                  });
                              
                                  let timeOut = setTimeout (
                                      function () {
                                          let ticksAndLabelsList = []
                                          let date = new Date();
                                          date.setMinutes(0, 0, 0);
                                          let ts = Math.round(date.getTime() / 1000);
                                          let tsYesterday = ts - (numberOfHoursAgo * 3600);
                                          if (Debug) console.log('Iterate from ' + tsYesterday + ' to ' + ts + ' stepsize=' + (xAxisTicksEveryM * 60));
                                          for (let x = tsYesterday, i = 0; x < ts; x += (xAxisTicksEveryM * 60), i += xAxisTicksEveryM)
                                          {
                                              if ((i % xAxisLabelEveryM))
                                                  ticksAndLabelsList.push(i);
                                              else
                                              {
                                                  let currentDate = new Date(x * 1000);
                                                  // Hours part from the timestamp
                                                  let hours = '0' + String(currentDate.getHours());
                                                  // Minutes part from the timestamp
                                                  let minutes = '0' + String(currentDate.getMinutes());
                                                  let formattedTime = hours.slice(-2) + ':' + minutes.slice(-2);
                              
                                                  ticksAndLabelsList.push(String(i) + '^' + formattedTime);
                                              }
                                          }
                                          if (Debug) console.log('Ticks & Label: ' + ticksAndLabelsList);
                                          if (Debug) console.log('Coordinates: ' + coordinates);
                                          setState(PathSensor, ticksAndLabelsList.join('+') + '~' + coordinates, true);
                                      }, 
                                  1500
                                  ) ;
                              });
                              

                              5bb270b6-0966-4868-9967-48ee6bc6d93d-image.png

                              Die cardLChart arbeitet allerdings mit Koordinaten:

                              Der String weicht von der cardChart ab:
                              0^16:00+60+120+180+240^20:00+300+360+420+480^00:00+540+600+660+720^04:00+780+840+900+960^08:00+1020+1080+1140+1200^12:00+1260+1320+1380~58:212~118:211~178:212~238:212~298:213~358:211~418:209~478:209~538:209~598:208~658:202~718:201~778:199~838:198~898:197~958:196~1018:198~1078:200~1138:201~1198:203~1258:208~1318:209~1378:208~1438:209

                              im vorderen Teil (rot) wird die X-Achse konstruiert und mit "+" verknüpft. Im Anschluss werden dann die Koordinaten mit der Tilde "~" getrennt als "X:Y" angegeben...

                              50e923c1-bb54-4599-aeba-047215d8e5f7-image.png

                              EDIT: Falls das dann alles irgendwann im Node-Red funktioniert, könntest du es der Nachwelt für eine Wiki-Erweiterung zur Verfügung stellen? Bist sicherlich nicht der einzige mit Node-Red... :kissing_closed_eyes:

                              Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                              https://github.com/joBr99/nspanel-lovelace-ui/wiki

                              Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                              D 2 Antworten Letzte Antwort
                              0
                              • ArmilarA Armilar

                                @dapeace sagte in SONOFF NSPanel mit Lovelace UI:

                                Temperatur-Werte als Line

                                Meine Temperatur-Sensoren schiebe ich durch ein einziges JS-Script. Kannste evtl auch für Node-Red mit mySQL adaptieren...

                                const Debug = false;
                                
                                const NSPanel_Path = '0_userdata.0.NSPanel.';
                                const Path = NSPanel_Path + 'Influx2NSPanel.cardLChart.';
                                let   PathSensor = '';
                                
                                let SensorName = ['EG.Buero.Temperatur',
                                                  'EG.Gaeste_WC.Temperatur',
                                                  'EG.Wohnzimmer.Temperatur',
                                                  'EG.Hauswirtschaftsraum.Temperatur',
                                                  'EG.Flur_vorne.Temperatur',
                                                  'EG.Flur_hinten.Temperatur',
                                                  'EG.Esszimmer.Temperatur',
                                                  'EG.Kaminzimmer.Temperatur',
                                                  'EG.Badezimmer.Temperatur',
                                                  'EG.Kueche.Temperatur',
                                                  'OG.Schlafzimmer_1.Temperatur',
                                                  'OG.Gaestezimmer.Temperatur',
                                                  'OG.Hobbyraum.Temperatur',
                                                  'Gartenhaus.Temperatur'];
                                
                                const Sensor = [].concat('deconz.0.Sensors.5.temperature')  // EG.Buero.Temperatur
                                                 .concat('deconz.0.Sensors.12.temperature')  // EG.Gaeste_WC.Temperatur
                                                 .concat('deconz.0.Sensors.53.temperature')  // EG.Wohnzimmer.Temperatur
                                                 .concat('deconz.0.Sensors.19.temperature')  // EG.Hauswirtschaftsraum.Temperatur
                                                 .concat('deconz.0.Sensors.9.temperature')   // EG.Flur_vorne.Temperatur
                                                 .concat('deconz.0.Sensors.27.temperature')  // EG.Flur_hinten.Temperatur
                                                 .concat('deconz.0.Sensors.40.temperature')  // EG.Esszimmer.Temperatur
                                                 .concat('deconz.0.Sensors.37.temperature')  // EG.Kaminzimmer.Temperatur
                                                 .concat('deconz.0.Sensors.45.temperature')  // EG.Badezimmer.Temperatur
                                                 .concat('deconz.0.Sensors.25.temperature')  // EG.Kueche.Temperature
                                                 .concat('deconz.0.Sensors.57.temperature')  // OG.Schlafzimmer_1.Temperatur
                                                 .concat('deconz.0.Sensors.60.temperature')  // OG.Gaestezimmer.Temperatur
                                                 .concat('deconz.0.Sensors.63.temperature')  // OG.Hobbyraum.Temperatur
                                                 .concat('deconz.0.Sensors.30.temperature'); // Gartenhaus.Temperatur
                                                 
                                let   triggeredSensor = 0;
                                
                                const numberOfHoursAgo = 24;
                                const xAxisTicksEveryM = 60;
                                const xAxisLabelEveryM = 240;
                                
                                const InfluxInstance = 'influxdb.1';
                                
                                // Ab hier keine Ändeungen
                                
                                let coordinates = ''; 
                                
                                on({ id: Sensor, change: 'any' }, async function (obj) {
                                    
                                    if (Debug) console.log(obj.id);
                                    if (Debug) console.log(Sensor.indexOf(obj.id));
                                    if (Debug) console.log(SensorName[Sensor.indexOf(obj.id)])
                                
                                    PathSensor = Path + SensorName[Sensor.indexOf(obj.id)]
                                
                                    if (existsObject(PathSensor) == false) {
                                        createState(PathSensor, 0, {
                                            name: 'SensorGrid',
                                            desc: 'Sensor Values [~<time>:<value>]*',
                                            type: 'string',
                                            role: 'value',
                                        });
                                    }
                                
                                    let query =[
                                        'from(bucket: "iobroker")',
                                        '|> range(start: -' + numberOfHoursAgo + 'h)',
                                        '|> filter(fn: (r) => r["_measurement"] == "' + obj.id + '")',
                                        '|> 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);
                                
                                    sendTo(InfluxInstance, 'query', query, function (result) {
                                        if (result.error) {
                                            console.error(result.error);
                                        } else {
                                            // show result
                                            if (Debug) console.log(result);
                                            let numResults = result.result.length;
                                            for (let r = 0; r < numResults; r++) 
                                            {
                                                let list = []
                                                let numValues = result.result[r].length;
                                
                                                for (let i = 0; i < numValues; i++) 
                                                {
                                                    let time = Math.round(result.result[r][i]._rtime/1000/1000/1000/60);
                                                    let value = Math.round(result.result[r][i]._value * 10);
                                                    list.push(time + ":" + value);
                                                }
                                
                                                coordinates = list.join("~");
                                
                                                if (Debug) console.log(coordinates);
                                            }
                                        }
                                    });
                                
                                    let timeOut = setTimeout (
                                        function () {
                                            let ticksAndLabelsList = []
                                            let date = new Date();
                                            date.setMinutes(0, 0, 0);
                                            let ts = Math.round(date.getTime() / 1000);
                                            let tsYesterday = ts - (numberOfHoursAgo * 3600);
                                            if (Debug) console.log('Iterate from ' + tsYesterday + ' to ' + ts + ' stepsize=' + (xAxisTicksEveryM * 60));
                                            for (let x = tsYesterday, i = 0; x < ts; x += (xAxisTicksEveryM * 60), i += xAxisTicksEveryM)
                                            {
                                                if ((i % xAxisLabelEveryM))
                                                    ticksAndLabelsList.push(i);
                                                else
                                                {
                                                    let currentDate = new Date(x * 1000);
                                                    // Hours part from the timestamp
                                                    let hours = '0' + String(currentDate.getHours());
                                                    // Minutes part from the timestamp
                                                    let minutes = '0' + String(currentDate.getMinutes());
                                                    let formattedTime = hours.slice(-2) + ':' + minutes.slice(-2);
                                
                                                    ticksAndLabelsList.push(String(i) + '^' + formattedTime);
                                                }
                                            }
                                            if (Debug) console.log('Ticks & Label: ' + ticksAndLabelsList);
                                            if (Debug) console.log('Coordinates: ' + coordinates);
                                            setState(PathSensor, ticksAndLabelsList.join('+') + '~' + coordinates, true);
                                        }, 
                                    1500
                                    ) ;
                                });
                                

                                5bb270b6-0966-4868-9967-48ee6bc6d93d-image.png

                                Die cardLChart arbeitet allerdings mit Koordinaten:

                                Der String weicht von der cardChart ab:
                                0^16:00+60+120+180+240^20:00+300+360+420+480^00:00+540+600+660+720^04:00+780+840+900+960^08:00+1020+1080+1140+1200^12:00+1260+1320+1380~58:212~118:211~178:212~238:212~298:213~358:211~418:209~478:209~538:209~598:208~658:202~718:201~778:199~838:198~898:197~958:196~1018:198~1078:200~1138:201~1198:203~1258:208~1318:209~1378:208~1438:209

                                im vorderen Teil (rot) wird die X-Achse konstruiert und mit "+" verknüpft. Im Anschluss werden dann die Koordinaten mit der Tilde "~" getrennt als "X:Y" angegeben...

                                50e923c1-bb54-4599-aeba-047215d8e5f7-image.png

                                EDIT: Falls das dann alles irgendwann im Node-Red funktioniert, könntest du es der Nachwelt für eine Wiki-Erweiterung zur Verfügung stellen? Bist sicherlich nicht der einzige mit Node-Red... :kissing_closed_eyes:

                                D Offline
                                D Offline
                                DaPeace
                                schrieb am zuletzt editiert von DaPeace
                                #4099

                                @armilar Ja ich kann den Code dann posten. Kein Problem. Eine kurze Erklärung zu der Formatierung brauche ich aber noch und dann hab Ichs eigentlich auch gleich.

                                16^12:00~37~17~13~18^16:00~21~17~22~18^20:00~17~17~16~11^0:00~5~5~5~5^4:00~5~4~4~15^8:00~22~13~10
                                

                                Das sind ja Blöcke wenn ich das richtig sehe.
                                Ist die 16^ quasi der Befehl fürs Panel was da genau zu machen ist und der Rest sind dann die Daten? Oder lieg ich da falsch?
                                Ich glaube ich hab das etwas unterschätzt.
                                Sind die Werte nach der Uhrzeit die Zeichenkoordinaten wo er den Balken hinpinseln soll? Oder kannst du das näher erklären was genau der Block 12:00~37~17~13~18 z.B. darstellen würde? Ich bin jetzt davon ausgegangen das 12:00 die Zeit hinpinselt und 37 17 13 und 18 dann 4 Balken sind die das Panel automatisch zeichnet.. Warscheinlich bin ich da zu naiv.

                                ArmilarA 1 Antwort Letzte Antwort
                                0
                                • D DaPeace

                                  @armilar Ja ich kann den Code dann posten. Kein Problem. Eine kurze Erklärung zu der Formatierung brauche ich aber noch und dann hab Ichs eigentlich auch gleich.

                                  16^12:00~37~17~13~18^16:00~21~17~22~18^20:00~17~17~16~11^0:00~5~5~5~5^4:00~5~4~4~15^8:00~22~13~10
                                  

                                  Das sind ja Blöcke wenn ich das richtig sehe.
                                  Ist die 16^ quasi der Befehl fürs Panel was da genau zu machen ist und der Rest sind dann die Daten? Oder lieg ich da falsch?
                                  Ich glaube ich hab das etwas unterschätzt.
                                  Sind die Werte nach der Uhrzeit die Zeichenkoordinaten wo er den Balken hinpinseln soll? Oder kannst du das näher erklären was genau der Block 12:00~37~17~13~18 z.B. darstellen würde? Ich bin jetzt davon ausgegangen das 12:00 die Zeit hinpinselt und 37 17 13 und 18 dann 4 Balken sind die das Panel automatisch zeichnet.. Warscheinlich bin ich da zu naiv.

                                  ArmilarA Offline
                                  ArmilarA Offline
                                  Armilar
                                  Most Active Forum Testing
                                  schrieb am zuletzt editiert von Armilar
                                  #4100

                                  @dapeace

                                  Nein die 16 ist der erste Wert (Balken) und bekommt durch das ^12:00 Uhr die Uhrzeit an der X-Achse

                                  Du könntest auch hinter jedem Wert eine Uhrzeit setzen. Nur dann sieht es in der X-Achse unmöglich aus

                                  EDIT: Die "History"-Scripte können das auch wenn man die Instanz auf SQL stellt.

                                  PS: Nextion kennt keine Fließkommazahlen. In diesem Fall wären es 1,6 kWh * 10 = 16. Die cardChart baut daraus dann wieder eine 1,6

                                  Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                  https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                  D 1 Antwort Letzte Antwort
                                  0
                                  • ArmilarA Armilar

                                    @dapeace

                                    Nein die 16 ist der erste Wert (Balken) und bekommt durch das ^12:00 Uhr die Uhrzeit an der X-Achse

                                    Du könntest auch hinter jedem Wert eine Uhrzeit setzen. Nur dann sieht es in der X-Achse unmöglich aus

                                    EDIT: Die "History"-Scripte können das auch wenn man die Instanz auf SQL stellt.

                                    PS: Nextion kennt keine Fließkommazahlen. In diesem Fall wären es 1,6 kWh * 10 = 16. Die cardChart baut daraus dann wieder eine 1,6

                                    D Offline
                                    D Offline
                                    DaPeace
                                    schrieb am zuletzt editiert von
                                    #4101

                                    @Armilar
                                    Moin Armilar,
                                    danke schonmal für deine Hilfe. Ein Problem hab ich noch. Das Scaling passt für meinen Zweck nicht.
                                    Dein Beispiel hat ja einen Wertebereich von 0 - 4.
                                    Ich möchte aber Werte zwischen 0 - 30 darstellen (Tagesverbrauch vom Haus) und auch bei der Einspeisung wird es ungefähr solche Werte geben.
                                    Mit dem aktuellen Skript und "yAxisTicks: [100,200,300]," zeigt er mir vorne keine Legende an und die Skalierung scheint mir immer noch die gleiche zu sein. Kann man das irgendwie anpassen?

                                    Ansonsten bin ich doch nicht doof. Es funktioniert so relativ einfach mit einem 5-Zeiler das in den Datenpunkt zu schreiben.

                                    ArmilarA 1 Antwort Letzte Antwort
                                    0
                                    • D DaPeace

                                      @Armilar
                                      Moin Armilar,
                                      danke schonmal für deine Hilfe. Ein Problem hab ich noch. Das Scaling passt für meinen Zweck nicht.
                                      Dein Beispiel hat ja einen Wertebereich von 0 - 4.
                                      Ich möchte aber Werte zwischen 0 - 30 darstellen (Tagesverbrauch vom Haus) und auch bei der Einspeisung wird es ungefähr solche Werte geben.
                                      Mit dem aktuellen Skript und "yAxisTicks: [100,200,300]," zeigt er mir vorne keine Legende an und die Skalierung scheint mir immer noch die gleiche zu sein. Kann man das irgendwie anpassen?

                                      Ansonsten bin ich doch nicht doof. Es funktioniert so relativ einfach mit einem 5-Zeiler das in den Datenpunkt zu schreiben.

                                      ArmilarA Offline
                                      ArmilarA Offline
                                      Armilar
                                      Most Active Forum Testing
                                      schrieb am zuletzt editiert von
                                      #4102

                                      @dapeace

                                      sende mal kurz die Seitenvariable und den String

                                      Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                      https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                      ArmilarA 1 Antwort Letzte Antwort
                                      0
                                      • ArmilarA Armilar

                                        @dapeace

                                        sende mal kurz die Seitenvariable und den String

                                        ArmilarA Offline
                                        ArmilarA Offline
                                        Armilar
                                        Most Active Forum Testing
                                        schrieb am zuletzt editiert von Armilar
                                        #4103

                                        @DaPeace

                                        funktioniert bei mir auch nicht in dem Wertebereich in der cardChart... in der cardLChart allerdings wohl :thinking_face:

                                        https://github.com/joBr99/nspanel-lovelace-ui/issues/934
                                        https://github.com/joBr99/nspanel-lovelace-ui/issues/794

                                        Es gibt da noch 2 offene Issues im Github

                                        Denke mal das erste Issue dürfte sich auf deine Frage beziehen... Einfach an das Issue dran hängen... Versuche die Tage mal zu klären, ob die gelöst werden können.

                                        Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                        https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                        D 1 Antwort Letzte Antwort
                                        1
                                        • ArmilarA Armilar

                                          @DaPeace

                                          funktioniert bei mir auch nicht in dem Wertebereich in der cardChart... in der cardLChart allerdings wohl :thinking_face:

                                          https://github.com/joBr99/nspanel-lovelace-ui/issues/934
                                          https://github.com/joBr99/nspanel-lovelace-ui/issues/794

                                          Es gibt da noch 2 offene Issues im Github

                                          Denke mal das erste Issue dürfte sich auf deine Frage beziehen... Einfach an das Issue dran hängen... Versuche die Tage mal zu klären, ob die gelöst werden können.

                                          D Offline
                                          D Offline
                                          DaPeace
                                          schrieb am zuletzt editiert von
                                          #4104

                                          @armilar Ja genau das Phänomen hab ich auch. Danke für die Info. Ich schau mir das an und skaliere derweil die Werte erstmal / 10.

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          966

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe