Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Zeigt her eure Lovelace-Visualisierung

NEWS

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

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

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

Zeigt her eure Lovelace-Visualisierung

Zeigt her eure Lovelace-Visualisierung

Scheduled Pinned Locked Moved Visualisierung
templatevis
109 Posts 32 Posters 39.3k Views 47 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • G 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 Offline
    Z Offline
    Zeptran
    wrote on last edited by
    #44

    @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
    0
    • G gyle

      @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
      
      
      IccubeI Offline
      IccubeI Offline
      Iccube
      wrote on last edited by
      #45

      @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

      XBiTX 1 Reply Last reply
      0
      • IccubeI Iccube

        @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

        XBiTX Offline
        XBiTX Offline
        XBiT
        wrote on last edited by
        #46

        @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.

        GarfonsoG 1 Reply Last reply
        0
        • XBiTX XBiT

          @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.

          GarfonsoG Offline
          GarfonsoG Offline
          Garfonso
          Developer
          wrote on last edited by
          #47

          @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.

          Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

          Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

          1 Reply Last reply
          0
          • U Offline
            U Offline
            Ultor
            wrote on last edited by Ultor
            #48

            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
            4
            • T Tirador

              Hallo Community!

              Lovelace sieht auf den ersten Blick gleichartig aus, bietet aufgrund der Konfigurationstiefe aber zahlreiche Variationen.
              Dieser Thread dient dazu alle Lovelace Visualisierungen zu sammeln, die von euch erstellt wurden.
              Damit können wir wechselseitig von Erfahrungen und Erkenntnissen profitieren.

              Euer Beitrag sollte folgendes beinhalten

              • Screenshots eurer Karten/Ansichten
              • Annotation welche "Custom Cards" verwendet wurden
              • YAML-Code eurer Ansichten anbei.

              Ich hoffe auf einen regen Austausch und viele interessante Ideen.

              P Offline
              P Offline
              Plastikman
              wrote on last edited by
              #49

              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.D XBiTX P 3 Replies Last reply
              1
              • P Plastikman

                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.D Online
                David G.D Online
                David G.
                wrote on last edited by David G.
                #50

                @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.

                Zeigt eure Lovelace-Visualisierung klick
                (Auch ideal um sich Anregungen zu holen)

                Meine Tabellen für eure Visualisierung klick

                1 Reply Last reply
                0
                • P Plastikman

                  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

                  XBiTX Offline
                  XBiTX Offline
                  XBiT
                  wrote on last edited by XBiT
                  #51

                  @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
                  0
                  • XBiTX 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 Offline
                    P Offline
                    Plastikman
                    wrote on last edited by
                    #52

                    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?

                    XBiTX David G.D 2 Replies Last reply
                    0
                    • P Plastikman

                      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?

                      XBiTX Offline
                      XBiTX Offline
                      XBiT
                      wrote on last edited by
                      #53

                      @plastikman

                      über ONVIF sollte ein simpler Snapshot kein Problem sein.
                      Aber jeder Hersteller macht sein eigenen Pfad.
                      Bei meiner ONVIF Kamera ist es z.B.: http://192.168.XX.XX/action/snapshot
                      Kannst du ja mal Testen mit viel Glück ist es die gleiche URL

                      P 1 Reply Last reply
                      0
                      • P Plastikman

                        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?

                        David G.D Online
                        David G.D Online
                        David G.
                        wrote on last edited by David G.
                        #54

                        @plastikman

                        Ich hatte sbiser 2-3 Kameras.

                        Bisher konnte ich mir hier immer alle Infos holen:
                        https://www.ispyconnect.com/cameras

                        Arenti finde ich da aber nicht. Gibt es ggf. baugleiche Kameras anderer Hersteller?

                        Zeigt eure Lovelace-Visualisierung klick
                        (Auch ideal um sich Anregungen zu holen)

                        Meine Tabellen für eure Visualisierung klick

                        P 1 Reply Last reply
                        0
                        • David G.D David G.

                          @plastikman

                          Ich hatte sbiser 2-3 Kameras.

                          Bisher konnte ich mir hier immer alle Infos holen:
                          https://www.ispyconnect.com/cameras

                          Arenti finde ich da aber nicht. Gibt es ggf. baugleiche Kameras anderer Hersteller?

                          P Offline
                          P Offline
                          Plastikman
                          wrote on last edited by
                          #55

                          @david-g Doch da gibts auch arenti.
                          Arentit

                          1 Reply Last reply
                          0
                          • XBiTX XBiT

                            @plastikman

                            über ONVIF sollte ein simpler Snapshot kein Problem sein.
                            Aber jeder Hersteller macht sein eigenen Pfad.
                            Bei meiner ONVIF Kamera ist es z.B.: http://192.168.XX.XX/action/snapshot
                            Kannst du ja mal Testen mit viel Glück ist es die gleiche URL

                            P Offline
                            P Offline
                            Plastikman
                            wrote on last edited by
                            #56

                            @xbit danke Dir, hat aber leider auch nicht funktioniert.

                            1 Reply Last reply
                            0
                            • D Offline
                              D Offline
                              dalmabrain
                              wrote on last edited by
                              #57

                              Ich habe gesehen, dass einige die folgende Custom Cards installiert haben.
                              card-mod.js
                              fold-entity-row.js
                              layout-card.js

                              Ich habe die .js Dateien über Github runtergeladen und in den Adapter unter eigene Karten geladet. Nach einem Neustart taucht aber nichts auf.

                              Hat jemand eine Idee wie man diese installieren kann?

                              GarfonsoG 1 Reply Last reply
                              0
                              • D dalmabrain

                                Ich habe gesehen, dass einige die folgende Custom Cards installiert haben.
                                card-mod.js
                                fold-entity-row.js
                                layout-card.js

                                Ich habe die .js Dateien über Github runtergeladen und in den Adapter unter eigene Karten geladet. Nach einem Neustart taucht aber nichts auf.

                                Hat jemand eine Idee wie man diese installieren kann?

                                GarfonsoG Offline
                                GarfonsoG Offline
                                Garfonso
                                Developer
                                wrote on last edited by
                                #58

                                @dalmabrain said in Zeigt her eure Lovelace-Visualisierung:

                                Nach einem Neustart taucht aber nichts auf.

                                Was genau ist damit gemeint? Was erwartest du, was wo auftaucht?

                                Die meisten custom-Karten muss man im Code-Editor manuell verwenden (ggf, mit "Manueller Karte" starten).

                                Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                                Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                                D 1 Reply Last reply
                                0
                                • GarfonsoG Garfonso

                                  @dalmabrain said in Zeigt her eure Lovelace-Visualisierung:

                                  Nach einem Neustart taucht aber nichts auf.

                                  Was genau ist damit gemeint? Was erwartest du, was wo auftaucht?

                                  Die meisten custom-Karten muss man im Code-Editor manuell verwenden (ggf, mit "Manueller Karte" starten).

                                  D Offline
                                  D Offline
                                  dalmabrain
                                  wrote on last edited by dalmabrain
                                  #59

                                  @garfonso

                                  Layout hat schon mal funktioniert. Dort tauchen die Karten auf.

                                  Bei z.B. Fold-Entity-Row bekomme ich beim manuellen editieren die Fehlermeldung, dass die Karte nichts existiert.

                                  Ich lade die .js-Dateien nochmals hoch. Vielleicht hilft es 😊

                                  Bei entity-fold hat es immer noch nicht geklappt:
                                  bekomme leider immer noch die Fehlermeldung
                                  Screenshot 2023-01-11 at 21.15.54.png

                                  XBiTX 1 Reply Last reply
                                  0
                                  • D dalmabrain

                                    @garfonso

                                    Layout hat schon mal funktioniert. Dort tauchen die Karten auf.

                                    Bei z.B. Fold-Entity-Row bekomme ich beim manuellen editieren die Fehlermeldung, dass die Karte nichts existiert.

                                    Ich lade die .js-Dateien nochmals hoch. Vielleicht hilft es 😊

                                    Bei entity-fold hat es immer noch nicht geklappt:
                                    bekomme leider immer noch die Fehlermeldung
                                    Screenshot 2023-01-11 at 21.15.54.png

                                    XBiTX Offline
                                    XBiTX Offline
                                    XBiT
                                    wrote on last edited by
                                    #60

                                    @dalmabrain

                                    hier mal ein Code der gehen sollte:

                                    type: entities
                                    entities:
                                      - type: custom:fold-entity-row
                                        head:
                                          entity: null
                                          type: section
                                          label: ein Paar schöne Schalter
                                        entities:
                                          - switch.Waschmaschine_STATE
                                          - light.Licht_Haustuer
                                    

                                    Nur die entities ganz unten gegen deine tauschen.

                                    Hier meine js Datei die geht bei mir....
                                    fold-entity-row.js

                                    1 Reply Last reply
                                    1
                                    • D Offline
                                      D Offline
                                      dalmabrain
                                      wrote on last edited by
                                      #61

                                      @xbit
                                      Danke Dir. Mit Deiner js-Datei hat es funktioniert 😉

                                      Jetzt hänge ich schon am nächsten Punkt 😠 Wie bekommt Ihr denn eine simiple Uhrzeit hin. Ich habe mir mal die Simple-Clock-Card runtergeladet. Auch die geht nicht bei mir: Ausserdem finde ich keinen Datenpunkt mit der Uhrzeit. Erstellt ihr diese per Skript oder wie habt irh das gelöst?

                                      XBiTX 1 Reply Last reply
                                      0
                                      • D dalmabrain

                                        @xbit
                                        Danke Dir. Mit Deiner js-Datei hat es funktioniert 😉

                                        Jetzt hänge ich schon am nächsten Punkt 😠 Wie bekommt Ihr denn eine simiple Uhrzeit hin. Ich habe mir mal die Simple-Clock-Card runtergeladet. Auch die geht nicht bei mir: Ausserdem finde ich keinen Datenpunkt mit der Uhrzeit. Erstellt ihr diese per Skript oder wie habt irh das gelöst?

                                        XBiTX Offline
                                        XBiTX Offline
                                        XBiT
                                        wrote on last edited by XBiT
                                        #62

                                        @dalmabrain

                                        Mache ich auch mit der Karte

                                        type: custom:simple-clock-card
                                        use_military: true
                                        hide_seconds: false
                                        font_size: 5rem
                                        padding_size: 22px
                                        

                                        Hier die Karte
                                        simple-clock-card.js

                                        EDIT:
                                        Vielleicht schreibst du besser da weil hier soll man ja seine Ansichten vorstellen....

                                        1 Reply Last reply
                                        1
                                        • Z Zeptran

                                          @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.

                                          H Offline
                                          H Offline
                                          Henrik0476
                                          wrote on last edited by
                                          #63

                                          @zeptran ganz großes Kino. Sieht spitzenmäßig aus. Ich persönlich wäre sehr an der kompletten Config der Solar-Übersicht interessiert. Find es vor allem Klasse, wie easy man mit den iobroker-Objekten direkt die lovelace-Entitäten erstellen kann.
                                          Hab mir davor immer damit nen Ast abgebrochen. Aber hiermit, einfach wow.

                                          Danke und Grüße

                                          Henrik

                                          madleM 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          593

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe