Skip to content
  • Home
  • 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
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Lovelace Einsteigerfragen

NEWS

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

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

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

Lovelace Einsteigerfragen

Scheduled Pinned Locked Moved Visualisierung
11 Posts 3 Posters 827 Views 3 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.
  • S Offline
    S Offline
    srkonus
    wrote on last edited by
    #1

    Hallo zusammen,

    bisher nutze ich die inventwo Widgets unter vis1. Ich möchte allerdings zu Lovelace umsteigen, optisch gefällt es mir derzeit besser. Allerdings komme ich trotz des ultimativen Lovelace PDFs und verschiedenen Videos usw. nicht wirklich weiter.
    Wie visualisiere ich vom Zustand abhängig farbig? Beispiel ist:

    Handy im WLAN
    Klimaanlage Auto läuft

    Also wie mache ich das "bunt" (also das man an der Farbe oder Icon sieht was los ist) und gibt es animierte Icons?

    Sorry, falls diese Fragen schon gestellt wurden, bin noch nicht fündig geworden.

    VG
    srkonus

    1 Reply Last reply
    0
    • David G.D Online
      David G.D Online
      David G.
      wrote on last edited by David G.
      #2

      @srkonus

      Das hängt ganz daran, welche Karte du verwenden möchtest, es klappt fast mit jeder (auch wenn ich nicht bei allen sofort weiß wie).

      Zeug mal etwas, was dir gefällt, dann schauen wir, ob man es umsetzen kann.

      EDIT

      Hier mal ein Beispiel mit einer normalen Karte und mit Bild (hab einfach was genommen, was in meiner Visu schon an Bildern vor kommt).

      Bewegte Bilder müssten auch gehen als gif.

      Screen_Recordin-1714762459499.gif

      Beim Symbol bekomme ich gtad die zweite Farbe nicht geändert, müsste man mal am Desktop im Browser schauen was das ist. Da bin ich aber nicht so fit drinnen....

      EDIT 2
      Hier kann man sich auch schonmal Anregungen holen, auch wenn nicht alles bei uns klappt
      https://demo.home-assistant.io/

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

      Meine Tabellen für eure Visualisierung klick

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

        @srkonus

        Das hängt ganz daran, welche Karte du verwenden möchtest, es klappt fast mit jeder (auch wenn ich nicht bei allen sofort weiß wie).

        Zeug mal etwas, was dir gefällt, dann schauen wir, ob man es umsetzen kann.

        EDIT

        Hier mal ein Beispiel mit einer normalen Karte und mit Bild (hab einfach was genommen, was in meiner Visu schon an Bildern vor kommt).

        Bewegte Bilder müssten auch gehen als gif.

        Screen_Recordin-1714762459499.gif

        Beim Symbol bekomme ich gtad die zweite Farbe nicht geändert, müsste man mal am Desktop im Browser schauen was das ist. Da bin ich aber nicht so fit drinnen....

        EDIT 2
        Hier kann man sich auch schonmal Anregungen holen, auch wenn nicht alles bei uns klappt
        https://demo.home-assistant.io/

        S Offline
        S Offline
        srkonus
        wrote on last edited by
        #3

        @david-g Hey,

        vielen Dank für deine Antwort und entschuldige das ich erst jetzt dazu komme zu antworten. Alleine das die Lampe (oder ein anderes Symbol was man nimmt) je nach Zustand des Sensors die Farbe ändert, reicht mir schon.
        Wie hast du das gemacht? Bisher sind alle Versuche nichts.

        VG
        srkonus

        David G.D 1 Reply Last reply
        0
        • S srkonus

          @david-g Hey,

          vielen Dank für deine Antwort und entschuldige das ich erst jetzt dazu komme zu antworten. Alleine das die Lampe (oder ein anderes Symbol was man nimmt) je nach Zustand des Sensors die Farbe ändert, reicht mir schon.
          Wie hast du das gemacht? Bisher sind alle Versuche nichts.

          VG
          srkonus

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

          @srkonus

          Die Lampe ist ein einfacher Button.
          Kann man so über die gui hinzufügen.

          Ich hab es ab Zeile 7 erweitert, um die Farben vom Theme zu umgehen:

          show_name: true
          show_icon: true
          type: button
          tap_action:
            action: toggle
          entity: light.Deckenlicht
          style: |
            :host {
              --paper-item-icon-color: red
            }
            :host {
              --paper-item-icon-active-color: green
            }
          
          

          Zeile 12 hat noch einen Fehler, das grün nimmt er nicht, muss ich am Montag mal vom Rechner aus schauen.

          Wenn dir die Farben vom Theme reichen, einfach nur eine "Schaltfläche" über die gui hinzufügen und Zb den DP vom Handy auswählen (den DP vorher über die DP Settings für lovelace aktivieren). Als Tipp-Aktion kannst du ja "keine" auswählen. Macht ja kein Sinn es zu schalten.

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

          Meine Tabellen für eure Visualisierung klick

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

            @srkonus

            Die Lampe ist ein einfacher Button.
            Kann man so über die gui hinzufügen.

            Ich hab es ab Zeile 7 erweitert, um die Farben vom Theme zu umgehen:

            show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.Deckenlicht
            style: |
              :host {
                --paper-item-icon-color: red
              }
              :host {
                --paper-item-icon-active-color: green
              }
            
            

            Zeile 12 hat noch einen Fehler, das grün nimmt er nicht, muss ich am Montag mal vom Rechner aus schauen.

            Wenn dir die Farben vom Theme reichen, einfach nur eine "Schaltfläche" über die gui hinzufügen und Zb den DP vom Handy auswählen (den DP vorher über die DP Settings für lovelace aktivieren). Als Tipp-Aktion kannst du ja "keine" auswählen. Macht ja kein Sinn es zu schalten.

            S Offline
            S Offline
            srkonus
            wrote on last edited by
            #5

            @david-g Danke, habe das hier:

            type: light
            entity: light.Handy_Bernd_here
            hold_action:
              action: none
            double_tap_action:
              action: none
            

            Dein Style wird allerdings vom Editor nicht angenommen, deswegen ist es hier jetzt nicht drin. Den Type "light" habe ich genommen, weil es auf den ersten Blick für mich ausreicht den Status meines Handys anzuzeigen.

            David G.D 1 Reply Last reply
            0
            • S srkonus

              @david-g Danke, habe das hier:

              type: light
              entity: light.Handy_Bernd_here
              hold_action:
                action: none
              double_tap_action:
                action: none
              

              Dein Style wird allerdings vom Editor nicht angenommen, deswegen ist es hier jetzt nicht drin. Den Type "light" habe ich genommen, weil es auf den ersten Blick für mich ausreicht den Status meines Handys anzuzeigen.

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

              @srkonus

              Genau, der Editor kann nur "Standart".
              Wenn es speziell wird, muss man es händisch erweitern.

              Ich arbeite auch gerne mit der picture-elements. Da muss man sich aber was einarbeiten.
              https://community.home-assistant.io/t/styling-elements-in-picture-elements-card-a-small-tutorial/315252

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

              Meine Tabellen für eure Visualisierung klick

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

                @srkonus

                Genau, der Editor kann nur "Standart".
                Wenn es speziell wird, muss man es händisch erweitern.

                Ich arbeite auch gerne mit der picture-elements. Da muss man sich aber was einarbeiten.
                https://community.home-assistant.io/t/styling-elements-in-picture-elements-card-a-small-tutorial/315252

                S Offline
                S Offline
                srkonus
                wrote on last edited by
                #7

                @david-g Mmhh, klingt als ob es mir zu umständlich wird. Auch ist die Light Karte ja ein Schalter, auch wenn er keine Funktion hat.
                Eigentlich benötige ich nur eine reine Anzeige.

                David G.D 1 Reply Last reply
                0
                • S srkonus

                  @david-g Mmhh, klingt als ob es mir zu umständlich wird. Auch ist die Light Karte ja ein Schalter, auch wenn er keine Funktion hat.
                  Eigentlich benötige ich nur eine reine Anzeige.

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

                  @srkonus

                  Ist doch egal, wenn es ein Schalter ist. Hat ja keine Funktion.

                  Ansonsten gibt's ja noch den gezeigten weg mit Bildern.
                  Oder markdown, oder picture-elements. Selbst ent entities kann man es sauber umsetzen.

                  Für deinen Fall führen viele Wege nach Rom.

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

                  Meine Tabellen für eure Visualisierung klick

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

                    @srkonus

                    Ist doch egal, wenn es ein Schalter ist. Hat ja keine Funktion.

                    Ansonsten gibt's ja noch den gezeigten weg mit Bildern.
                    Oder markdown, oder picture-elements. Selbst ent entities kann man es sauber umsetzen.

                    Für deinen Fall führen viele Wege nach Rom.

                    J Offline
                    J Offline
                    JohannesF
                    wrote on last edited by
                    #9

                    Hallo,

                    die meisten Karten können das doch von ganz alleine. In der GUI gibt es dann oft eine Einstellung "Symbol je nach Zustand einfärben"

                    Habe das mit dem Zustand unten kurz ausprobiert und Entity, Glance und Button färben sich um.

                    Zustand:

                    {
                      "common": {
                        "name": "TestZustand",
                        "desc": "Manuell erzeugt",
                        "role": "state",
                        "type": "boolean",
                        "read": true,
                        "write": false,
                        "custom": {
                          "lovelace.0": {
                            "enabled": true,
                            "entity": "binary_sensor",
                            "name": "TestZustand"
                          }
                        }
                      },
                    

                    Entity:

                    type: entity
                    entity: binary_sensor.TestZustand
                    state_color: true
                    

                    Glance:

                    show_name: true
                    show_icon: true
                    show_state: true
                    type: glance
                    entities:
                      - entity: binary_sensor.TestZustand
                    state_color: true
                    

                    Button

                    show_name: true
                    show_icon: true
                    type: button
                    tap_action:
                      action: toggle
                    entity: binary_sensor.TestZustand
                    
                    David G.D 1 Reply Last reply
                    0
                    • J JohannesF

                      Hallo,

                      die meisten Karten können das doch von ganz alleine. In der GUI gibt es dann oft eine Einstellung "Symbol je nach Zustand einfärben"

                      Habe das mit dem Zustand unten kurz ausprobiert und Entity, Glance und Button färben sich um.

                      Zustand:

                      {
                        "common": {
                          "name": "TestZustand",
                          "desc": "Manuell erzeugt",
                          "role": "state",
                          "type": "boolean",
                          "read": true,
                          "write": false,
                          "custom": {
                            "lovelace.0": {
                              "enabled": true,
                              "entity": "binary_sensor",
                              "name": "TestZustand"
                            }
                          }
                        },
                      

                      Entity:

                      type: entity
                      entity: binary_sensor.TestZustand
                      state_color: true
                      

                      Glance:

                      show_name: true
                      show_icon: true
                      show_state: true
                      type: glance
                      entities:
                        - entity: binary_sensor.TestZustand
                      state_color: true
                      

                      Button

                      show_name: true
                      show_icon: true
                      type: button
                      tap_action:
                        action: toggle
                      entity: binary_sensor.TestZustand
                      
                      David G.D Online
                      David G.D Online
                      David G.
                      wrote on last edited by
                      #10

                      @johannesf sagte in Lovelace Einsteigerfragen:

                      die meisten Karten können das doch von ganz alleine. In der GUI gibt es dann oft eine Einstellung "Symbol je nach Zustand einfärben"

                      Das ist mir neu. Ich sehe es bei keiner Karte. Und wenn nur die Farben des Themes.

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

                      Meine Tabellen für eure Visualisierung klick

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

                        @johannesf sagte in Lovelace Einsteigerfragen:

                        die meisten Karten können das doch von ganz alleine. In der GUI gibt es dann oft eine Einstellung "Symbol je nach Zustand einfärben"

                        Das ist mir neu. Ich sehe es bei keiner Karte. Und wenn nur die Farben des Themes.

                        S Offline
                        S Offline
                        srkonus
                        wrote on last edited by
                        #11

                        @David-G @JohannesF
                        Danke euch für eure Infos und Antworten. Habe was zustande gebracht, sieht auch gut aus. Weitere Fragen werde ich im normalen Lovelace Bereich stellen.

                        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

                        841

                        Online

                        32.4k

                        Users

                        81.6k

                        Topics

                        1.3m

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

                        • Don't have an account? Register

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