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

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

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. 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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
11 Beiträge 3 Kommentatoren 827 Aufrufe 3 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • S Offline
    S Offline
    srkonus
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    0
    • David G.D Online
      David G.D Online
      David G.
      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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.
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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.
              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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.
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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.
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        0
                        Antworten
                        • In einem neuen Thema antworten
                        Anmelden zum Antworten
                        • Älteste zuerst
                        • Neuste zuerst
                        • Meiste Stimmen


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        806

                        Online

                        32.4k

                        Benutzer

                        81.6k

                        Themen

                        1.3m

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

                        • Du hast noch kein Konto? Registrieren

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