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

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.1k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.1k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.4k

Lovelace Einsteigerfragen

Scheduled Pinned Locked Moved Visualisierung
11 Posts 3 Posters 950 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.
  • David G.D Offline
    David G.D Offline
    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 Offline
        David G.D Offline
        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 Offline
            David G.D Offline
            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 Offline
                David G.D Offline
                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 Offline
                    David G.D Offline
                    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

                      710

                      Online

                      32.6k

                      Users

                      82.3k

                      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