Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Zeigt her eure Lovelace-Visualisierung

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Zeigt her eure Lovelace-Visualisierung

    This topic has been deleted. Only users with topic management privileges can see it.
    • David G.
      David G. @MCU last edited by

      @mcu

      Das ist die https://github.com/reptilex/tesla-style-solar-power-card

      1 Reply Last reply Reply Quote 2
      • Z
        Zeptran @Zeptran last edited by

        @zeptran

        So in meiner Vis hat sich in letzter Zeit Extrem viel getan, unteranderem sind zwei Tablets die die Vis darstellen dazugekommen.

        Deswegen gibt es hier jetzt ein Update zu meiner Vis

        Die Startseite hat sich in vielen Punkten geändert:
        Lovelace_Card_Mod_so_soll_es_richtig.png

        Der Garagen Öffnungsverlauf ist leider nicht unter dem Zustand Sichtbar da die Screenshots per Fullybrowser diesen aus Gründen nicht anzeigt.

        Diese ist genau so angepasst das auf der Ersten Seite nicht gescrollt werden kann.
        Hierzu habe ich mit der Card-Mod Karte den Rahmen der Markdown Elemente angepasst. Dafür braucht man folgenden Code:

        card_mod:
          style: |
            ha-markdown.no-header {
              padding-top: 10px !important;
            }
            ha-markdown {
              padding: 0px 16px 16px;
                padding-bottom: 10px !important;
            }
        

        Ab hier kommen die Screenshots jetzt vom PC da auf den Tablets auf diesen Seiten gescrollt werden muss.

        Die Seite der Bewässerung hat sich auch in einigen Punkten verändert
        54a6828d-7bfc-4419-8cef-4b54df70a206-image.png

        Neu dazu gekommen ist eine komplette Steuerung der Außen Verschattung, hierzu habe ich ebenfalls ein eignes Skript geschrieben das je nach Sonnenstand, Außentemperatur, Solarleistung im Durchschnitt der letzten 10 Minuten (Hab keinen Helligkeitssensor) die Verschattung verfährt.
        Ebenfalls musste ich die nicht eindeutigen Werte der Warema Steuerung Umrechnen und in eigene Datenpunkte für die Vis stecken.
        75ba63b7-1375-4638-be43-2088807fdc87-image.png

        Hier gibt es nun eine andere Wettervorhersage, den Pollenflug in Niedersachsen und den Verlauf der Innen und Außentemperatur:
        Lovelace_wetter_ansicht.png

        Eine eigene Solar Übersichtsseite ist ebenfalls aufgebaut worden:
        792033cc-c76d-4ed1-96d3-1590f978b543-image.png
        Es ist inzwischen unpraktisch geworden zwischen Grafana und Lovelace immerhin und her zu wechseln daher ist es letztendlich auch hier gelandet

        Auf dieser Seite gibt es einen Überblick über die Fußbodenheizung Vorlauf und Rücklauftemperaturen sowie das Warmwasser:
        a94ea288-5475-47ca-818a-a13ab3da9d5b-image.png

        Die Staubsauger Seite ist komplett rausgeflogen und hier wird nun einfach das Valetudo Interface angezeigt:
        10a691bd-b6e9-4a40-ad5c-902b6828c89c-image.png

        Falls Interesse besteht stelle ich gerne Configs zur Verfügung.

        XBiT G H 3 Replies Last reply Reply Quote 2
        • XBiT
          XBiT @Zeptran last edited by

          @zeptran

          gefällt mir, schaut gut aus

          1 Reply Last reply Reply Quote 1
          • G
            gyle @Zeptran last edited by

            @zeptran könntest du mir bitte die config der Solar-Ansicht zu Verfügung stellen?
            mich interessieren vor allem die Diagramme...

            Danke

            Z 1 Reply Last reply Reply Quote 0
            • Z
              Zeptran @gyle last edited by

              @gyle

              Moin,

              ich habe das ganze immer mit vertical-stack Karten in die Spalten so aufgeteilt das es eben gut aussieht und die gleichen Sachen immer untereinander sind.
              Für die Graphen verwende ich ApexCharts.

              Ich verwende hier den Kostal Adapter der mir mit Skripten Daten teilweise so umrechnet das man damit was anfangen kann. Wird bei dir wahrscheinlich anders ankommen, muss dann eben angepasst werden.

              Das hier ist einmal die Mittlere komplette Spalte:

              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: sensor
                      entity: sensor.PV_Anlage_EnergyHomePvDay
                      detail: 0
                      name: Eigenverbrauch
                    - type: sensor
                      entity: sensor.PV_Anlage_EnergyHomeGridDay
                      detail: 2
                      name: Netz Verbrauch
                - type: markdown
                  content: |
                    # <center>PV Leistung</center>
                  card_mod:
                    style: |
                      ha-markdown.no-header {
                        padding-top: 10px !important;
                      }
                      ha-markdown {
                        padding: 0px 16px 16px;
                          padding-bottom: 10px !important;
                      }
                - type: horizontal-stack
                  cards:
                    - type: custom:apexcharts-card
                      header:
                        show: true
                        title: ' '
                        show_states: true
                        colorize_states: true
                      apex_config:
                        chart:
                          height: 350
                          zoom:
                            type: x
                            enabled: true
                            autoScaleYaxis: false
                          toolbar:
                            show: true
                            autoSelected: zoom
                          xaxis.type: datetime
                        stroke:
                          width: 1
                          curve: smooth
                      series:
                        - entity: sensor.PV_Anlage_Pv_P
                          name: PV Leistung
                          group_by:
                            func: avg
                            duration: 5min
                        - entity: sensor.PV_Anlage_Leistung_Stromnetz
                          name: Netz Leistung
                          group_by:
                            func: avg
                            duration: 5min
                        - entity: sensor.PV_Anlage_Home_P
                          name: Haus Verbrauch
                          group_by:
                            func: avg
                            duration: 5min
                - type: markdown
                  content: |
                    # <center>Erträge</center>
                  card_mod:
                    style: |
                      ha-markdown.no-header {
                        padding-top: 10px !important;
                      }
                      ha-markdown {
                        padding: 0px 16px 16px;
                          padding-bottom: 10px !important;
                      }
                - type: horizontal-stack
                  cards:
                    - type: custom:apexcharts-card
                      header:
                        show: true
                        title: ' '
                        show_states: true
                        colorize_states: true
                      apex_config:
                        chart:
                          height: 350
                          zoom:
                            type: x
                            enabled: true
                            autoScaleYaxis: false
                          toolbar:
                            show: true
                            autoSelected: zoom
                          xaxis.type: datetime
                      series:
                        - entity: sensor.Pv_Anlage_PV_Ertrag_heute
                          name: PV Ertrag
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                        - entity: sensor.PV_Anlage_EnergyToGridDay
                          name: Einspeistung
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                        - entity: sensor.PV_Anlage_EnergyHomePvDay
                          name: Eigenverbrauch
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                        - entity: sensor.PV_Anlage_EnergyHomeGridDay
                          name: Netzbezug
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                      graph_span: 8d
                      span:
                        end: day
              

              Damit das ganze etwas einfach zu kopieren ist wenn du nur Interesse an den Diagrammen hast kommen die auch noch einmal alleine:
              Hier sind die Leistungsverläufe des Tages drinnen:

              type: custom:apexcharts-card
              header:
                show: true
                title: ' '
                show_states: true
                colorize_states: true
              apex_config:
                chart:
                  height: 350
                  zoom:
                    type: x
                    enabled: true
                    autoScaleYaxis: false
                  toolbar:
                    show: true
                    autoSelected: zoom
                  xaxis.type: datetime
                stroke:
                  width: 1
                  curve: smooth
              series:
                - entity: sensor.PV_Anlage_Pv_P
                  name: PV Leistung
                  group_by:
                    func: avg
                    duration: 5min
                - entity: sensor.PV_Anlage_Leistung_Stromnetz
                  name: Netz Leistung
                  group_by:
                    func: avg
                    duration: 5min
                - entity: sensor.PV_Anlage_Home_P
                  name: Haus Verbrauch
                  group_by:
                    func: avg
                    duration: 5min
              

              Hier ist dann einmal der Ertrag / Verbrauch der letzten acht Tage:

              type: custom:apexcharts-card
              header:
                show: true
                title: ' '
                show_states: true
                colorize_states: true
              apex_config:
                chart:
                  height: 350
                  zoom:
                    type: x
                    enabled: true
                    autoScaleYaxis: false
                  toolbar:
                    show: true
                    autoSelected: zoom
                  xaxis.type: datetime
              series:
                - entity: sensor.Pv_Anlage_PV_Ertrag_heute
                  name: PV Ertrag
                  type: column
                  group_by:
                    func: max
                    duration: 23.9h
                - entity: sensor.PV_Anlage_EnergyToGridDay
                  name: Einspeistung
                  type: column
                  group_by:
                    func: max
                    duration: 23.9h
                - entity: sensor.PV_Anlage_EnergyHomePvDay
                  name: Eigenverbrauch
                  type: column
                  group_by:
                    func: max
                    duration: 23.9h
                - entity: sensor.PV_Anlage_EnergyHomeGridDay
                  name: Netzbezug
                  type: column
                  group_by:
                    func: max
                    duration: 23.9h
              graph_span: 8d
              span:
                end: day
              

              Die 23,9 Stunden Dauer musste ich nehmen da die Tagesdaten die aus dem Adapter kommen erst um 0:05 wieder bei null anfangen.

              Und dann ist hier noch einmal der Batterie Verlauf:

              type: custom:apexcharts-card
              header:
                show: true
                title: ' '
                show_states: true
                colorize_states: true
              apex_config:
                chart:
                  height: 350
                  zoom:
                    type: x
                    enabled: true
                    autoScaleYaxis: false
                  toolbar:
                    show: true
                    autoSelected: zoom
                  xaxis.type: datetime
                stroke:
                  width: 1
                  curve: smooth
              yaxis:
                - id: first
                  decimals: 0
                  apex_config:
                    tickAmount: 4
                - id: second
                  opposite: true
                  decimals: 0
                  show: false
                  apex_config:
                    tickAmount: 4
              series:
                - entity: sensor.PV_Anlage_battery_P
                  name: Batterie Leistung
                  yaxis_id: first
                  group_by:
                    func: avg
                    duration: 2min
                - entity: sensor.PV_Anlage_HomeBat_P
                  name: Verbrauch aus Batterie
                  yaxis_id: first
                  group_by:
                    func: avg
                    duration: 2min
                - entity: sensor.PV_Anlage_battery_SoC
                  name: Batterie SoC
                  yaxis_id: second
                  group_by:
                    func: avg
                    duration: 2min
              

              Falls es noch mehr Interesse gibt an Configs gibt stelle ich die gerne zur Verfügung.
              Bin echt begeistert von Lovelace mir gehen aber langsam die Ideen aus was und wie ich Sachen noch visualisieren kann.

              Finde es leider schade das der Thread hier nicht so aktiv genutzt wird wie er es meiner Ansicht nach Verdient.

              G 2 Replies Last reply Reply Quote 0
              • G
                gyle @Zeptran last edited by gyle

                @zeptran danke
                gut: dann zeige ich auch mal was ich bisher habe....(teilweise noch experimentell)
                technik.png sauger.png rolladen.png pv.png home_LI.jpg eg.png außen.png

                Iccube W 2 Replies Last reply Reply Quote 0
                • G
                  gyle @Zeptran last edited by

                  @zeptran

                  hast du mit apex-chats zufällig auch mal ausprobiert ob man das in dieser Form hinbekommt?
                  3d4fb3c0-0f24-4716-bd23-c6519dbf3896-grafik.png

                  Z 1 Reply Last reply Reply Quote 0
                  • Iccube
                    Iccube @gyle last edited by

                    @gyle sieht gut aus

                    Wie hast du den die zusätzlichen Infos bzw. Schalter eingefügt ?

                    Screenshot 2022-10-19 152716.jpg

                    G 1 Reply Last reply Reply Quote 0
                    • Z
                      Zeptran @gyle last edited by Zeptran

                      @gyle

                      Das scheint einfach zu gehen in dem man am Anfang der Config für den Graphen das hier einfügt:

                      stacked: true
                      

                      Sieht dann am Ende so aus:
                      f2b25218-9030-4bc8-9b2f-0beadff09416-image.png

                      Hier dazu den die komplette config:

                      type: custom:apexcharts-card
                      stacked: true
                      header:
                       show: true
                       title: ' '
                       show_states: true
                       colorize_states: true
                      apex_config:
                       chart:
                         height: 350
                         zoom:
                           type: x
                           enabled: true
                           autoScaleYaxis: false
                         toolbar:
                           show: true
                           autoSelected: zoom
                         xaxis.type: datetime
                      series:
                       - entity: sensor.Pv_Anlage_PV_Ertrag_heute
                         name: PV Ertrag
                         type: column
                         group_by:
                           func: max
                           duration: 23.9h
                       - entity: sensor.PV_Anlage_EnergyToGridDay
                         name: Einspeistung
                         type: column
                         group_by:
                           func: max
                           duration: 23.9h
                       - entity: sensor.PV_Anlage_EnergyHomePvDay
                         name: Eigenverbrauch
                         type: column
                         group_by:
                           func: max
                           duration: 23.9h
                       - entity: sensor.PV_Anlage_EnergyHomeGridDay
                         name: Netzbezug
                         type: column
                         group_by:
                           func: max
                           duration: 23.9h
                      graph_span: 8d
                      span:
                       end: day
                      
                      

                      Finde das nur schwierig mit den Daten die da aktuell bei mir drinnen Stecken. Ergibt in Summe keinen Sinn wenn man beim PV Ertrag da den Netzbezug mit rein nimmt.
                      Bei der Anordnung würde ich den dann weg lassen damit man da nur hat was man halt vom Dach bekommt.

                      Edit:

                      Fand die Idee ganz gut das auch so darzustellen deswegen habe ich das ganze kurz einmal nachgebaut:
                      30d426dd-1e64-4eb3-b88a-b3bcdf4b48b1-image.png

                      type: custom:apexcharts-card
                      stacked: true
                      header:
                        show: true
                        title: ' '
                        show_states: true
                        colorize_states: true
                      apex_config:
                        chart:
                          height: 350
                          zoom:
                            type: x
                            enabled: true
                            autoScaleYaxis: false
                          toolbar:
                            show: true
                            autoSelected: zoom
                          xaxis.type: datetime
                      series:
                        - entity: sensor.PV_Anlage_EnergyHomePvDay
                          name: Solarverbrauch
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                        - entity: sensor.Pv_Anlage_EnergyHomeBatDay
                          name: Batterieverbrauch
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                        - entity: sensor.PV_Anlage_EnergyHomeGridDay
                          name: Netzverbrauch
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                        - entity: sensor.Pv_Anlage_EnergyHomeDay
                          name: Hausverbrauch
                          type: column
                          group_by:
                            func: max
                            duration: 23.9h
                          show:
                            in_chart: false
                      graph_span: 8d
                      span:
                        end: day
                      

                      G 1 Reply Last reply Reply Quote 0
                      • G
                        gyle @Zeptran last edited by gyle

                        @zeptran super dann schau ich mal ob ich das so bei mir reinbekomme....
                        Verständnisfrage noch zu den datenpunkten: ich brauche doch nur jeweils die historydaten für den zeitraum, oder muss ich vorher bereits irgendwas aggregieren?

                        also zb: Datenpunkt aktuelle Solarleistung (Watt)

                        Z 1 Reply Last reply Reply Quote 0
                        • G
                          gyle @Iccube last edited by

                          @iccube
                          das geht mit custom:multiple-entity-row

                          type: entities
                          show_header_toggle: false
                          title: Automatik
                          entities:
                            - entity: input_boolean.Holiday
                              type: custom:multiple-entity-row
                              secondary_info: aktiviert die Wochenend-Zeiten
                              toggle: true
                              state_color: true
                              icon: mdi:beach
                            - type: section
                            - entity: input_boolean.Auto_Manu_Living_Area
                              name: Wohnbereich
                              secondary_info: last-changed
                              type: custom:multiple-entity-row
                              toggle: true
                              state_color: true
                              icon: mdi:clock-check-outline
                              entities:
                                - entity: sensor.Up_Time_Living_Area
                                  name: Hoch
                                - entity: sensor.down_Time_Living_Area
                                  name: Runter
                            - entity: input_boolean.Auto_Manu_Children_Area
                              name: Kinderbereich
                              secondary_info: last-changed
                              type: custom:multiple-entity-row
                              toggle: true
                              state_color: true
                              icon: mdi:clock-check-outline
                              entities:
                                - entity: sensor.Up_Time_Children_Area
                                  name: Hoch
                                - entity: sensor.down_Time_Children_Area
                                  name: Runter
                            - entity: input_boolean.Auto_Manu_Sleep_Area
                              name: Schlafbereich
                              secondary_info: last-changed
                              type: custom:multiple-entity-row
                              toggle: true
                              state_color: true
                              icon: mdi:clock-check-outline
                              entities:
                                - entity: sensor.Up_Time_Sleep_Area
                                  name: Hoch
                                - entity: sensor.down_Time_Sleep_Area
                                  name: Runter
                          
                          
                          Iccube 1 Reply Last reply Reply Quote 0
                          • Z
                            Zeptran @gyle last edited by

                            @gyle

                            Genau die Datenpunkte stecken bei mir in SQL drinnen und da greift Lovelace drauf zurück.

                            Sonst musst du da nichts weiter mit machen, nur die richtige Instanz für Verlaufsdaten in den Lovelace Adpater Einstellungen auswählen.

                            1 Reply Last reply Reply Quote 0
                            • Iccube
                              Iccube @gyle last edited by

                              @gyle sagte in Zeigt her eure Lovelace-Visualisierung:

                              multiple-entity-row

                              die cutom karte habe ich auch schon gehabt funktioniert aber irgenwie nicht
                              Screenshot 2022-10-19 215931.jpg

                              Screenshot 2022-10-19 220330.jpg

                              XBiT 1 Reply Last reply Reply Quote 0
                              • XBiT
                                XBiT @Iccube last edited by

                                @iccube

                                Kommt mir bekannt vor ich habe am 29.09.2022 versucht die "custom:button-entity-row" Karte zu nutzen bei mir kommt auch die Meldung die Karte würde nicht existieren.
                                Kann es sein, dass bei der Änderung von @Garfonso mit den Unterordnern in den Instance Einstellungen was schief gelaufen ist?
                                Vielleicht kann ja mal jemand anderes mit aktueller Version einen custom Karte installieren und testen ob sie geht.
                                Kann natürlich auch an mir liegen habe das nicht weiter verfolgt Zeit ist gerade etwas knapp.

                                Garfonso 1 Reply Last reply Reply Quote 0
                                • Garfonso
                                  Garfonso Developer @XBiT last edited by

                                  @xbit said in Zeigt her eure Lovelace-Visualisierung:

                                  custom:button-entity-row

                                  Button entity-row scheint aktuell kaputt zu sein. Gibt es auch ein issue zu: https://github.com/custom-cards/button-entity-row/issues/30

                                  multiple-entity-row konnte ich aber installieren. Wichtig ist den Adapter neustarten und auch in lovelace mal F5 drücken.

                                  System-9 created this issue in custom-cards/button-entity-row

                                  open Uncaught TypeError: css is not a function #30

                                  1 Reply Last reply Reply Quote 0
                                  • U
                                    Ultor last edited by Ultor

                                    Hallo zusammen,

                                    meine Lovelace-VIS ist jetzt, denke ich, nach insgesamt 2 Jahren Arbeit am Smarthome auch vorzeigbereit.

                                    Mein System läuft auf einem Raspberry 4 mit 4 GByte Speicher.

                                    Ich habe meine VIS bewusst recht übersichtlich gehalten und auf grafische Spielereien usw. verzichtet. Einige Ideen habe ich noch, aber ich habe meiner Freundin versprochen, erst einmal an den noch vorhandenen Bugs zu arbeiten 😉

                                    Ich habe meine VIS in Geschosse eingeteilt:

                                    Global.jpg
                                    Das ist die Seite, in der globale Einstellungen, also für alle Ebenen, getätigt werden können.

                                    KG.jpg
                                    Hier wird die Beleuchtung im Keller geschaltet. Der Status der Waschmaschinen wird angezeigt. Außerdem habe ich Strom-, Wasser- und Gaszähler eingebunden.

                                    EG.jpg
                                    Erdgeschoss

                                    OG.jpg
                                    Obergeschoss

                                    DG.jpg
                                    Dachgeschoss

                                    Solaranlage.jpg
                                    Hier werden Informationen über die Solaranlage (Balkonkraftwerk) angezeigt.

                                    PKW.jpg
                                    Hier wird der Status meines Autos angezeigt und es können die Türen abgeschlossen werden. Es kann zusätzlich die Klimaanlage gesteuert werden, aber nur, wenn der Akku mindestens einen Füllstand von 20% hat, was derzeit nicht der Fall ist. Dann wird das Steuerelement ausgeblendet.

                                    System.jpg
                                    Hier werden Systeminformationen angezeigt.

                                    Für Anregungen bin ich natürlich offen. Mir gefällt z. B. apex-chats ganz gut, insbesondere die gestackten Charts. Das ist mit der mini-graph-card so nicht möglich.

                                    Gruß,
                                    Daniel

                                    G 1 Reply Last reply Reply Quote 4
                                    • P
                                      Plastikman @Tirador last edited by

                                      Hallo zusammen,

                                      hier meine aktuelle Lovelace VIS und dazu direkt noch ein paar Fragen... 🙂
                                      Ich habe meine VIS Zimmer bezogen aufgebaut. Dazu dann noch einzelne Tabs zur Konfig verschiedener variablen in der Automatisierung.

                                      Gesteuert wird übe 2 12" Tablets welche hochkant montiert sind. Deshalb ist meine ganze VIS auch darauf ausgerichtet.

                                      da6c80b3-3a69-4e8f-b5c0-4211e0677f39-image.png

                                      Home Screen:
                                      1.jpg

                                      Wohnzimmer:
                                      2.jpg

                                      Schlafzimmer:
                                      3.jpg

                                      Küche:
                                      4.jpg

                                      Bad:
                                      5.jpg

                                      Büro:
                                      6.jpg

                                      Server:
                                      7.jpg

                                      Wetter:
                                      8.jpg

                                      Wetter Fullscreen:
                                      9.jpg

                                      Server Steuerung:
                                      10.jpg

                                      Lichtkonfig:
                                      11.jpg

                                      Heizungkonfig:
                                      12.jpg

                                      Kamera Konfig:
                                      13.jpg

                                      Übersicht Energieverbrauch:
                                      14.jpg

                                      Übersicht der Kosten des Energieverbrauchs:
                                      15.jpg

                                      So nun zu meinen Fragen:

                                      • Ich möchte gerne noch die RTSP Streams meiner Kameras in die VIS integrieren. Wie kann man das machen?
                                      • Wie kann ich Spotify integrieren?

                                      Fragen zu euren views und generelles:
                                      @XBiT
                                      In euren Views sind die Karten immer schön zusammenhängend. Bei mir sind sie leider immer so getrennt:
                                      d79a6c1a-685d-4ff4-8f3c-2845c51e6189-image.png
                                      Wie kann man das schön zusammenhängend aufbauen so das es eine Karte ist. WIe zB. hier:
                                      9ab63ace-9b76-4919-8c09-fc446081258b-image.png

                                      @XBiT
                                      Wie kann man solche Karten wie für die CPU Auslastung machen und wo kommen die Status der Adapterzustände her?
                                      0274f496-02ae-4547-a89a-691e28c3dbc8-image.png

                                      Wie kann ich erreichen das Entitäten basierend auf Ihrem Zustand eingefärbt werden?

                                      Ansonsten bin ich auf Feedback gespannt ob und was man evtl. noch wie verbessern könnte.
                                      Besten Dan und liebe Grüße
                                      Sebastian

                                      David G. XBiT P 3 Replies Last reply Reply Quote 1
                                      • David G.
                                        David G. @Plastikman last edited by David G.

                                        @plastikman

                                        Hey,

                                        schöne Visualisierung.

                                        Zu deinen Fragen:

                                        Die zusammenhängenden Karten bekommst du mit der custom-vertical-stack hin.
                                        https://github.com/ofekashery/vertical-stack-in-card

                                        Ein flüssiger Stream wird schwierig, außer du bindest eine andere Website ein.
                                        Ich habe anders gelöst.
                                        Meine Kamera bietet einen Link an um Bilder abzurufen.

                                        http://benutzer:pw@192.168.22.215/IMAGE.JPG
                                        

                                        Diesen habe ich in der Bild-Entiät eingetragen.
                                        Das Bild aktualisiert sich dann alle X Sekunden.

                                        Die Tabelle mit den Adaptern kommt von mir. Schau dazu mal in meine Signatur.

                                        1 Reply Last reply Reply Quote 0
                                        • XBiT
                                          XBiT @Plastikman last edited by XBiT

                                          @plastikman

                                          Gefällt mir gut deine VIS..

                                          Zum Thema Adapterstatus siehe hier

                                          RTSP Streams gehen nicht direkt falls deine NAS eine Synology ist kann man da einen passenden Stream für die VIS erzeugen.

                                          Fritzbox: die Karte sieht so zusammenhängen aus wegen der Card "custom:vertical-stack-in-card"

                                          type: custom:vertical-stack-in-card
                                          cards:
                                           - type: markdown
                                             content: |
                                               # <center>FritzBox Status:</center>
                                           - type: picture-elements
                                             image: /cards/FritzBox_7490.png
                                             elements:
                                               - type: state-icon
                                                 entity: sensor.Home_FritzBox_status_on_offline
                                                 icon: mdi:lan-connect
                                                 style:
                                                   left: 15%
                                                   top: 10%
                                                   '--paper-item-icon-color': withe
                                               - type: state-label
                                                 entity: sensor.Home_FritzBox_status_on_offline
                                                 prefix: 'Status: '
                                                 style:
                                                   left: 15%
                                                   top: 20%
                                               - type: state-icon
                                                 entity: sensor.Home_FritzBox_max_sync_download
                                                 icon: mdi:arrow-collapse-down
                                                 style:
                                                   left: 48%
                                                   top: 10%
                                                   '--paper-item-icon-color': withe
                                               - type: state-label
                                                 entity: sensor.Home_FritzBox_max_sync_download
                                                 prefix: 'Down: '
                                                 style:
                                                   left: 48%
                                                   top: 20%
                                               - type: state-icon
                                                 entity: sensor.Home_FritzBox_max_sync_upload
                                                 icon: mdi:arrow-collapse-up
                                                 style:
                                                   left: 80%
                                                   top: 10%
                                                   '--paper-item-icon-color': withe
                                               - type: state-label
                                                 entity: sensor.Home_FritzBox_max_sync_upload
                                                 prefix: 'Up: '
                                                 style:
                                                   left: 80%
                                                   top: 20%
                                           - type: horizontal-stack
                                             cards:
                                               - type: custom:mini-graph-card
                                                 entities:
                                                   - sensor.Home_FritzBox_aktueller_download
                                                 name: Download
                                                 line_color: var(--accent-color)
                                                 line_width: 2
                                                 icon: mdi:arrow-collapse-down
                                                 show_points: false
                                                 show_state: true
                                                 hours_to_show: 24
                                                 update_interval: 0
                                                 points_per_hour: 6
                                                 align_state: center
                                                 aggregate_func: max
                                                 smoothing: false
                                                 hour24: true
                                                 show:
                                                   graph: line
                                                   icon: true
                                                   points: false
                                                   labels: false
                                                   fill: false
                                                   extrema: true
                                                   icon_adaptive_color: true
                                               - type: custom:mini-graph-card
                                                 entities:
                                                   - sensor.Home_FritzBox_aktueller_upload
                                                 name: Upload
                                                 line_color: var(--accent-color)
                                                 line_width: 2
                                                 icon: mdi:arrow-collapse-up
                                                 show_points: false
                                                 show_state: true
                                                 hours_to_show: 24
                                                 update_interval: 0
                                                 points_per_hour: 6
                                                 align_state: center
                                                 aggregate_func: max
                                                 smoothing: false
                                                 hour24: true
                                                 show:
                                                   graph: line
                                                   icon: true
                                                   points: false
                                                   labels: false
                                                   fill: false
                                                   extrema: true
                                                   icon_adaptive_color: true
                                           - type: horizontal-stack
                                             cards:
                                               - type: custom:button-card
                                                 entity: sensor.FritzBox_calllists_inbound_count
                                                 show_entity_picture: true
                                                 entity_picture: /cards/fritzbox_eingehender_anruf.png
                                                 show_state: false
                                                 name: eingehende Anrufe
                                                 aspect_ratio: 2/1
                                                 tap_action:
                                                   action: call-service
                                                   confirmation:
                                                     text: >-
                                                       [[[ return
                                                       states['sensor.Home_angepasste_Texte_und_Anzeigen_Lovelace_FritzBox_eingehende_Anrufe'].state
                                                       ]]]
                                                 hold_action:
                                                   action: call-service
                                                   service: input_select.select_option
                                                   service_data:
                                                     entity_id: sensor.FritzBox_calllists_inbound_count
                                                     option: 0
                                                 styles:
                                                   entity_picture:
                                                     - width: 25%
                                                   card:
                                                     - border-radius: 0px
                                                   name:
                                                     - font-size: 13px
                                                   grid:
                                                     - position: relative
                                                   custom_fields:
                                                     eingehende_anrufe:
                                                       - color: white
                                                       - border-radius: 50%
                                                       - position: absolute
                                                       - left: 70%
                                                       - top: 10%
                                                       - height: 30px
                                                       - width: 30px
                                                       - font-size: 10px
                                                       - line-height: 30px
                                                       - animation: blink 3s ease infinite
                                                 custom_fields:
                                                   eingehende_anrufe: |
                                                     [[[ 
                                                       if (states['sensor.FritzBox_calllists_inbound_count'].state == '0')
                                                       return ' ';
                                                       return states['sensor.FritzBox_calllists_inbound_count'].state; ]]]
                                               - type: custom:button-card
                                                 entity: sensor.FritzBox_calllists_outbound_count
                                                 show_entity_picture: true
                                                 entity_picture: /cards/fritzbox_ausgehender_anruf.png
                                                 show_state: false
                                                 name: ausgehende Anrufe
                                                 aspect_ratio: 2/1
                                                 tap_action:
                                                   action: call-service
                                                   confirmation:
                                                     text: >-
                                                       [[[ return
                                                       states['sensor.Home_angepasste_Texte_und_Anzeigen_Lovelace_FritzBox_ausgehende_Anrufe'].state
                                                       ]]]
                                                 hold_action:
                                                   action: call-service
                                                   service: input_select.select_option
                                                   service_data:
                                                     entity_id: sensor.FritzBox_calllists_outbound_count
                                                     option: 0
                                                 styles:
                                                   entity_picture:
                                                     - width: 25%
                                                   card:
                                                     - border-radius: 0px
                                                   name:
                                                     - font-size: 13px
                                                   grid:
                                                     - position: relative
                                                   custom_fields:
                                                     ausgehende_anrufe:
                                                       - color: withe
                                                       - border-radius: 50%
                                                       - position: absolute
                                                       - left: 70%
                                                       - top: 10%
                                                       - height: 30px
                                                       - width: 30px
                                                       - font-size: 10px
                                                       - line-height: 30px
                                                       - animation: blink 3s ease infinite
                                                 custom_fields:
                                                   ausgehende_anrufe: |
                                                     [[[ 
                                                       if (states['sensor.FritzBox_calllists_outbound_count'].state == '0')
                                                       return ' ';
                                                       return states['sensor.FritzBox_calllists_outbound_count'].state; ]]]
                                               - type: custom:button-card
                                                 entity: sensor.FritzBox_calllists_missed_count
                                                 show_entity_picture: true
                                                 entity_picture: /cards/fritzbox_unbeantworteter_anruf.png
                                                 show_state: false
                                                 name: verpasste Anrufe
                                                 aspect_ratio: 2/1
                                                 tap_action:
                                                   action: call-service
                                                   confirmation:
                                                     text: >-
                                                       [[[ return
                                                       states['sensor.Home_angepasste_Texte_und_Anzeigen_Lovelace_FritzBox_verpasste_Anrufe'].state
                                                       ]]]
                                                 hold_action:
                                                   action: call-service
                                                   service: input_select.select_option
                                                   service_data:
                                                     entity_id: sensor.FritzBox_calllists_missed_count
                                                     option: 0
                                                 styles:
                                                   entity_picture:
                                                     - width: 25%
                                                   card:
                                                     - border-radius: 0px
                                                   name:
                                                     - font-size: 13px
                                                   grid:
                                                     - position: relative
                                                   custom_fields:
                                                     ausgehende_anrufe:
                                                       - color: white
                                                       - border-radius: 50%
                                                       - position: absolute
                                                       - left: 70%
                                                       - top: 10%
                                                       - height: 30px
                                                       - width: 30px
                                                       - font-size: 10px
                                                       - line-height: 30px
                                                       - animation: blink 3s ease infinite
                                                 custom_fields:
                                                   ausgehende_anrufe: |
                                                     [[[ 
                                                       if (states['sensor.FritzBox_calllists_missed_count'].state == '0')
                                                       return ' ';
                                                       return states['sensor.FritzBox_calllists_missed_count'].state; ]]]
                                          

                                          Die CPU Auslastung ist die Card "custom:mini-graph-card"

                                          EDIT: @David-G war schneller 🙂

                                          P 1 Reply Last reply Reply Quote 0
                                          • P
                                            Plastikman @XBiT last edited by

                                            hey cool! Schon so fix Antworten!
                                            Vielen Dank für euer Feedback.

                                            Die Kameras sind von Arenti und ich glaube die haben keine Snapshot Adresse. Zumindest komme ich da nicht drann und finde auch keinen Link zur Snapshot Adresse.

                                            Einen Stream mit der Diskstation erzeugen wahrscheinlich über die Survailance Station oder? Das hatte ich früher auch schon mal in Verwendung. Konnte mir dann via Telegram Bilder senden lassen.

                                            Ich habe aber auch schon via ffmpeg auf dem Host der Ibrokers Video Streams erzeugen könne. Der kann ja auch Snapshots aus dem Kamera stream erstellen. Das wäre vermutlich die LÖsung um Snapshots zu bekommen.. Aber ob ich das wieder konfiguriert bekomme.. oha.. Das war ein ganz schönes gemache damals. Aber wurde direkt auf dem Host verarbeitet.

                                            Die Kameras sind ONVIF Kameras... Wisst Ihr dazu evtl. eine Snapshot URL?

                                            XBiT David G. 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            416
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            template vis
                                            32
                                            109
                                            31706
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo