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. ioBroker Allgemein
  4. Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

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

Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

Geplant Angeheftet Gesperrt Verschoben ioBroker Allgemein
lovelacedokumentationleitfadenhilfeanleitung
194 Beiträge 30 Kommentatoren 53.5k Aufrufe 37 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.
  • David G.D David G.

    @xbit

    Anbei mein Theme.
    Bei mir ging das aber schon immer.
    Auch vorher mit dem Theme was ich hatte.

    noctis:
    
      # Fonts
      primary-font-family: 'Raleway,sans-serif'
      paper-font-common-base_-_font-family: "var(--primary-font-family)"
      paper-font-common-code_-_font-family: "var(--primary-font-family)"
      paper-font-body1_-_font-family: "var(--primary-font-family)"
      paper-font-subhead_-_font-family: "var(--primary-font-family)"
      paper-font-headline_-_font-family: "var(--primary-font-family)"
      paper-font-caption_-_font-family: "var(--primary-font-family)"
      paper-font-title_-_font-family: "var(--primary-font-family)"
      ha-card-header-font-family: "var(--primary-font-family)"
    
    
      # Text
      text-color: '#ffffff' 
      primary-text-color: 'var(--text-color)'
      text-primary-color: 'var(--text-color)'
      secondary-text-color: "#BAC0C6"
      text-medium-light-color: '#A0A2A8'
      text-medium-color: '#80828A'
      disabled-text-color: '#626569'
      primary-color: 'var(--accent-color)'
      text-light-primary-color: 'var(--text-color)'
    
      # Text Fields an Dropdown
      mdc-text-field-fill-color: '#2e3b53'
      mdc-text-field-ink-color: 'var(--text-color)'
      mdc-select-fill-color: '#2e3b53'
      mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
      input-fill-color: 'var(--background-color)'
      input-ink-color: 'var(--text-color)'
      input-label-ink-color: 'var(--text-color)'
      input-disabled-fill-color: 'var(--background-color)'
      input-disabled-ink-color: 'var(--disabled-text-color)'
      input-disabled-label-ink-color: 'var(--disabled-text-color)'
      input-idle-line-color: 'var(--background-color)'
      input-dropdown-icon-color: 'var(--secondary-text-color)'
      input-hover-line-color: 'var(--primary-color)'
      code-editor-background-color: '#222c40'
      codemirror-property: 'var(--accent-color)'
      
      # Main Colors
      app-header-background-color: '#242e42'
      header-height: 48px
      accent-color: '#1A89F5'
      accent-medium-color: 'var(--accent-color)'
    
      # Background
      background-color: '#242e42'
      primary-background-color: 'var(--background-color)'
      background-color-2: '#20293c' 
      secondary-background-color: 'none'
      markdown-code-background-color: 'var(--background-color)'
      
      # Card
      card-background-color: 'var(--ha-card-background)'
      ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
      ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
      ha-card-border-radius: "5px"
      border-radius: "5px"
      ha-card-border-color: 'rgba(0,0,0,0)'
      ha-card-border-width: '0'
    
      # Dialog
      ha-dialog-border-radius: "5px"
    
      # Icons
      paper-item-icon-color: '#EBEBEB'
      paper-item-icon-active-color: 'var(--accent-color)'
    
      # RGB States
      rgb-state-default-color: '26, 137, 245'
      rgb-accent-color: 'var(--rgb-state-default-color)'
      # rgb-state-light-color: 'var(--rgb-state-default-color)'
      # rgb-state-switch-color: 'var(--rgb-state-default-color)'
      # rgb-state-automation-color: 'var(--rgb-state-default-color)'
      # rgb-state-binary-sensor-color: 'var(--rgb-state-default-color)'
      # rgb-state-cover-color: 'var(--rgb-state-default-color)'
      # rgb-state-fan-color: 'var(--rgb-state-default-color)'
      # rgb-state-group-color: 'var(--rgb-state-default-color)'
      # rgb-state-humidifier-color: 'var(--rgb-state-default-color)'
      # rgb-state-input-boolean-color: 'var(--rgb-state-default-color)'
      # rgb-state-media-player-color: 'var(--rgb-state-default-color)'
      # rgb-state-remote-color: 'var(--rgb-state-default-color)'
      # rgb-state-script-color: 'var(--rgb-state-default-color)'
      # rgb-state-timer-color: 'var(--rgb-state-default-color)'
      # rgb-state-vacuum-color: 'var(--rgb-state-default-color)'
      # rgb-state-alarm-armed-color: var(--rgb-red-color)
      # rgb-state-alarm-arming-color: var(--rgb-orange-color)
      # rgb-state-alarm-disarmed-color: var(--rgb-grey-color)
      # rgb-state-alarm-pending-color: var(--rgb-orange-color)
      # rgb-state-alarm-triggered-color: var(--rgb-red-color)
      # rgb-state-alert-color: var(--rgb-red-color)
      # rgb-state-binary-sensor-alerting-color: var(--rgb-red-color)
      # rgb-state-calendar-color: var(--rgb-blue-color)
      # rgb-state-camera-color: var(--rgb-blue-color)
      # rgb-state-climate-auto-color: var(--rgb-green-color)
      # rgb-state-climate-cool-color: var(--rgb-blue-color)
      # rgb-state-climate-dry-color: var(--rgb-orange-color)
      # rgb-state-climate-fan-only-color: var(--rgb-cyan-color)
      # rgb-state-climate-heat-color: var(--rgb-deep-orange-color)
      # rgb-state-climate-heat-cool-color: var(--rgb-amber-color)
      # rgb-state-climate-idle-color: var(--rgb-disabled-color)
      # rgb-state-lock-jammed-color: var(--rgb-red-color)
      # rgb-state-lock-locked-color: var(--rgb-red-color)
      # rgb-state-lock-pending-color: var(--rgb-orange-color)
      # rgb-state-lock-unlocked-color: var(--rgb-red-color)
      # rgb-state-person-home-color: var(--rgb-green-color)
      # rgb-state-person-zone-color: var(--rgb-blue-color)
      # rgb-state-person-not-home-color: var(--rgb-grey-color)
      # rgb-state-sensor-battery-high-color: var(--rgb-green-color)
      # rgb-state-sensor-battery-low-color: var(--rgb-red-color)
      # rgb-state-sensor-battery-medium-color: var(--rgb-orange-color)
      # rgb-state-sensor-battery-unknown-color: var(--rgb-disabled-color)
      # rgb-state-siren-color: var(--rgb-red-color)
      # rgb-state-sun-day-color: var(--rgb-amber-color)
      # rgb-state-sun-night-color: var(--rgb-deep-purple-color)
      # rgb-state-update-color: var(--rgb-green-color)
      # rgb-state-update-installing-color: var(--rgb-orange-color)
      # rgb-state-light-color: 'var(--rgb-state-default-color)'
      # rgb-state-switch-color: 'var(--rgb-state-default-color)'
      # rgb-state-automation-color: 'var(--rgb-state-default-color)'
      # rgb-state-binary-sensor-color: 'var(--rgb-state-default-color)'
      # rgb-state-cover-color: 'var(--rgb-state-default-color)'
      # rgb-state-fan-color: 'var(--rgb-state-default-color)'
      # rgb-state-group-color: 'var(--rgb-state-default-color)'
      # rgb-state-humidifier-color: 'var(--rgb-state-default-color)'
      # rgb-state-input-boolean-color: 'var(--rgb-state-default-color)'
      # rgb-state-media-player-color: 'var(--rgb-state-default-color)'
      # rgb-state-remote-color: 'var(--rgb-state-default-color)'
      # rgb-state-script-color: 'var(--rgb-state-default-color)'
      # rgb-state-timer-color: 'var(--rgb-state-default-color)'
      # rgb-state-vacuum-color: 'var(--rgb-state-default-color)'
      # error-color: #db4437
      # warning-color: #ffa600
      # success-color: #43a047
      # info-color: #039be5
    
      # State Colors
      state-active-color: '#1A89F5'
      state-red-color: '#FC937E'
      state-green-color: '#00CA8B'
      state-orange-color: '#F7D88B'
      state-alarm_control_panel-armed_away-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_custom_bypass-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_home-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_night-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_vacation-color: 'var(--state-green-color)'
      state-alarm_control_panel-arming-color: 'var(--state-orange-color)'
      state-alarm_control_panel-disarming-color: 'var(--state-orange-color)'
      state-alarm_control_panel-pending-color: 'var(--state-orange-color)'
      state-alarm_control_panel-triggered-color: 'var(--state-red-color)'
      state-alert-off-color: var(--paper-item-icon-color)
      state-alert-on-color: 'var(--state-red-color)'
      state-automation-active-color: 'var(--accent-color)'
      state-binary_sensor-active-color: 'var(--accent-color)'
      state-binary_sensor-battery-on-color: 'var(--state-red-color)'
      state-binary_sensor-carbon_monoxide-on-color: 'var(--state-red-color)'
      state-binary_sensor-gas-on-color: 'var(--state-red-color)'
      state-binary_sensor-heat-on-color: 'var(--state-red-color)'
      state-binary_sensor-lock-on-color: 'var(--state-red-color)'
      state-binary_sensor-moisture-on-color: 'var(--state-red-color)'
      state-binary_sensor-problem-on-color: var(--state-red-color)
      state-binary_sensor-safety-on-color: 'var(--state-red-color)'
      state-binary_sensor-smoke-on-color: 'var(--state-red-color)'
      state-binary_sensor-sound-on-color: 'var(--state-red-color)'
      state-binary_sensor-tamper-on-color: 'var(--state-red-color)'
      state-climate-auto-color: 'var(--accent-color)'
      state-climate-cool-color: 'var(--accent-color)'
      state-climate-dry-color: 'var(--accent-color)'
      state-climate-fan_only-color: 'var(--accent-color)'
      state-climate-heat-color: 'var(--state-orange-color)'
      state-climate-heat-cool-color: 'var(--accent-color)'
      state-cover-active-color: 'var(--accent-color)'
      state-device_tracker-active-color: 'var(--accent-color)'
      state-device_tracker-home-color: 'var(--accent-color)'
      state-fan-active-color: 'var(--accent-color)'
      state-group-active-color: 'var(--accent-color)'
      state-humidifier-active-color: 'var(--accent-color)'
      state-input_boolean-active-color: 'var(--accent-color)'
      state-light-active-color: 'var(--accent-color)'
      state-lock-jammed-color: 'var(--state-red-color)'
      state-lock-locked-color: 'var(--accent-color)'
      state-lock-pending-color: 'var(--state-orange-color)'
      state-lock-unlocked-color: var(--paper-item-icon-color)
      state-media_player-active-color: 'var(--accent-color)'
      state-person-active-color: 'var(--accent-color)'
      state-person-home-color: 'var(--accent-color)'
      state-plant-active-color: 'var(--state-red-color)'
      state-siren-active-color: 'var(--state-red-color)'
      state-sun-above_horizon-color: 'var(--amber-color)'
      state-sun-below_horizon-color: 'var(--indigo-color)'
      state-switch-active-color: 'var(--accent-color)'
      state-update-active-color: 'var(--accent-color)'
      state-vacuum-active-color: 'var(--accent-color)'
      state-sensor-battery-high-color: 'var(--accent-color)'
      state-sensor-battery-low-color: 'var(--state-red-color)'
      state-sensor-battery-medium-color: 'var(--state-orange-color)'
    
      # Sidebar
      sidebar-background-color: 'var(--background-color)'
      sidebar-icon-color: '#98a7b9'
      sidebar-selected-icon-color: 'var(--accent-color)'
      sidebar-selected-text-color: 'var(--text-color)'
      paper-listbox-background-color: 'var(--sidebar-background-color)'
      divider-color: 'var(--background-color)'
      light-primary-color: 'var(--ha-card-background)'
    
      # Sliders
      paper-slider-knob-color: 'var(--accent-color)'
      paper-slider-pin-color: 'var(--background-color-2)'
      paper-slider-active-color: 'var(--accent-color)'
      paper-slider-container-color: 'var(--background-color-2)'
    
      # Toggle:
      paper-toggle-button-checked-bar-color: 'var(--accent-color)'
      mdc-theme-primary: 'var(--accent-color)'
    
      # Switch
      switch-unchecked-color: '#70889e'
      switch-checked-button-color: 'var(--accent-color)'
      switch-unchecked-track-color: 'var(--background-color-2)'
      switch-checked-track-color: 'var(--background-color-2)'
    
      # Radio Button
      paper-radio-button-checked-color: 'var(--accent-color)'
    
      # Popups
      more-info-header-background: 'var(--secondary-background-color)'
      paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
      popup-border-radius: "5px"
    
      # Tables
      table-row-background-color: 'var(--background-color)'
      table-row-alternative-background-color: 'var(--ha-card-background)'
    
      # Badges
      label-badge-background-color: 'var(--background-color)'
      label-badge-text-color: 'var(--text-primary-color)'
      label-badge-red: 'rgba(73,85,108,1)'
      label-badge-blue: 'rgba(26,137,245,1)'
      label-badge-green: 'rgba(0,202,139,1)'
      label-badge-yellow: 'rgba(222,176,107,1)'
    
      paper-input-container-focus-color: 'var(--accent-color)'
      
      # Custom Header
      ch-background: 'var(--background-color)'
      ch-active-tab-color: 'var(--accent-color)'
      ch-notification-dot-color: 'var(--accent-color)'
      ch-all-tabs-color: 'var(--sidebar-icon-color)'
      ch-tab-indicator-color: 'var(--accent-color)'
    
      # Mini Mediaplayer
      mini-media-player-base-color: 'var(--text-color)'
      mini-media-player-accent-color: 'var(--accent-color)'
      mini-media-player-button-color: 'var(--ha-card-background)'
    
      # Alarm
      alarm-color-armed: 'rgba(247,53,67,1)'
    
    
      # Card-Mod #####################################################################
      # Uncomment the Code below if you have card-mod installed and want blur effect #
      ################################################################################
    
    
      # card-mod-theme: noctis
      
      # card-mod-more-info-yaml: |
      #   $: |
      #     .mdc-dialog .mdc-dialog__scrim {
      #       backdrop-filter: blur(15px);
      #       -webkit-backdrop-filter: blur(15px);
      #       background: rgba(0,0,0,.6);
      #     } 
      #     .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
      #       box-shadow: none !important;
      #       border-radius: var(--ha-card-border-radius);
      #     }
      #   .: |
      #     :host {
      #       --ha-card-box-shadow: none;
      #     }
        
    

    Edit hier in dem Post hat es @Armilar korrekt im Einsatz. Grad zufällig gesehen.
    https://forum.iobroker.net/topic/59435/test-lovelace-4-x/774?_=1737997035499

    XBiTX Online
    XBiTX Online
    XBiT
    schrieb am zuletzt editiert von
    #178

    @david-g

    auch mit deinen Theme ist bei mir der Hintergrund weiß und nicht Transparent... sehr merkwürdig...
    Das Bild von @armilar ist die custom:power-flow-card-plus die geht bei mir auch, nur beim iFrame mit dem "Energiefluss-erweitert" geht Transparent nicht jede Farbe etc. geht.

    David G.D 1 Antwort Letzte Antwort
    0
    • XBiTX XBiT

      @david-g

      auch mit deinen Theme ist bei mir der Hintergrund weiß und nicht Transparent... sehr merkwürdig...
      Das Bild von @armilar ist die custom:power-flow-card-plus die geht bei mir auch, nur beim iFrame mit dem "Energiefluss-erweitert" geht Transparent nicht jede Farbe etc. geht.

      David G.D Online
      David G.D Online
      David G.
      schrieb am zuletzt editiert von
      #179

      @xbit

      Klappt denn bei dir Zb echarts mit transparentem Hintergrund?
      Evtl lässt sich so eingrenzen, ob es an manchen Systemen/Browsern etc oder der Umsetzung des Hintergrundes im EF Adapter liegt.

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

      Meine Tabellen für eure Visualisierung klick

      XBiTX 1 Antwort Letzte Antwort
      0
      • David G.D David G.

        @xbit

        Klappt denn bei dir Zb echarts mit transparentem Hintergrund?
        Evtl lässt sich so eingrenzen, ob es an manchen Systemen/Browsern etc oder der Umsetzung des Hintergrundes im EF Adapter liegt.

        XBiTX Online
        XBiTX Online
        XBiT
        schrieb am zuletzt editiert von
        #180

        @david-g

        muss ich mal echarts einrichten habe ich (noch) nicht.. schaffe ich aber heute nicht mehr bin jetzt unterwegs eventuell morgen.

        1 Antwort Letzte Antwort
        0
        • J Offline
          J Offline
          JohnDenver0815
          schrieb am zuletzt editiert von JohnDenver0815
          #181

          Ich wollte an dieser Stelle nur mal ein kurzes "Danke für eure Mühen" los lassen ;-)

          Ich lese sehr gespannt mit, in der Hoffnung, irgendwann auch etwas transparenter unterwegs zu sein ;-)

          Edit: Falls es der Lösung zuträglich ist: auf meinem Mac existiert dieses intransparente Verhalten sowohl im Firefox (127.0.1) als auch in Safari (15.6.1).

          1 Antwort Letzte Antwort
          0
          • SKBS Offline
            SKBS Offline
            SKB
            Developer Most Active
            schrieb am zuletzt editiert von
            #182

            Ich habe mal eine "normale" HTML Seite erstellt, die so aussieht:

            <html>
            
            <head>
              <style>
                body {
                  background-color: red;
                }
            
                iframe {
                  border: 1px solid yellow;
                }
              </style>
            </head>
            
            <body>
              <iframe src="https://192.168.2.19:8082/energiefluss-erweitert/?instance=1" width="100%" height="100%"
                frameborder="0"></iframe>
            </body>
            
            </html>
            

            Ergebnis auf Windows:
            2025-01-28 17_47_26-Mozilla Firefox.png

            Die HTML Seite hat den roten Hintergrund, der Frame einen gelben Rahmen und der EF schaut durch mit background-color: rgba(255,255,255,0)

            Auch auf meinem Apple-Simuator scheint die gesetzte Farbe der HTML durch den EF durch:
            2025-01-28 17_50_20-Playwright.png

            ... wer nicht mit der Zeit geht, geht mit der Zeit ...

            Aktuelle Entwicklung: Energiefluss - erweitert (https://forum.iobroker.net/topic/64734)

            1 Antwort Letzte Antwort
            0
            • B Offline
              B Offline
              benni86
              schrieb am zuletzt editiert von
              #183

              Funktioniert bei euch die weather-forecast Card? Ich versuche sie gerade das erste mal einzurichten, habe den Raum "any" und die Function "weather" angelegt aber er legt die Entitäten einfach nicht an. Habe es mit dem Adapter daswetter aber auch mit yr probiert. In den Logs vom Lovelace Adapter den ich mehrfach neugestartet habe sieht man auch nichts. Irgendwelche Ideen wo ich suchen könnte?

              B 1 Antwort Letzte Antwort
              0
              • B benni86

                Funktioniert bei euch die weather-forecast Card? Ich versuche sie gerade das erste mal einzurichten, habe den Raum "any" und die Function "weather" angelegt aber er legt die Entitäten einfach nicht an. Habe es mit dem Adapter daswetter aber auch mit yr probiert. In den Logs vom Lovelace Adapter den ich mehrfach neugestartet habe sieht man auch nichts. Irgendwelche Ideen wo ich suchen könnte?

                B Offline
                B Offline
                benni86
                schrieb am zuletzt editiert von benni86
                #184

                @benni86 Ah Problem selbst gelöst, da war das Problem, die Einstellung:
                Automatische Generierung von Geräten nur aus Alias.0.

                GarfonsoG 1 Antwort Letzte Antwort
                1
                • B benni86

                  @benni86 Ah Problem selbst gelöst, da war das Problem, die Einstellung:
                  Automatische Generierung von Geräten nur aus Alias.0.

                  GarfonsoG Offline
                  GarfonsoG Offline
                  Garfonso
                  Developer
                  schrieb am zuletzt editiert von
                  #185

                  @benni86
                  Sehr gut, dass du das gefunden hast. :-)

                  Ansonsten hilft bei so Problemen auch immer den devices Adapter installieren und im Geräte-Tab gucken, ob das Gerät da (richtig) auftaucht. Wenn nicht, hat lovelace keine Chance.

                  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

                  P 1 Antwort Letzte Antwort
                  0
                  • GarfonsoG Garfonso

                    @benni86
                    Sehr gut, dass du das gefunden hast. :-)

                    Ansonsten hilft bei so Problemen auch immer den devices Adapter installieren und im Geräte-Tab gucken, ob das Gerät da (richtig) auftaucht. Wenn nicht, hat lovelace keine Chance.

                    P Offline
                    P Offline
                    piatho
                    schrieb am zuletzt editiert von
                    #186

                    @garfonso Ich habe mal eine Frage zur technischen Umsetzung. Die Frage steht ein wenig in Bezug zum Github Issue #555

                    Templates funktionieren bei mir eingeschrängt, wenn ich entsprechende Inhalte in die RAW YAML am Anfang eintragen. Aber es gibt eine Menge schöne Templates die aus mehrfach verschachtelten yaml's bestehen. Da macht es keinen Sinn, das in die "Haupt"-YAML einzufügen.

                    Daher habe ich mich gefragt, wie die Dateistrukturen im Hintergrund sind. Du musst ja auch die Themes irgendwie in die Yaml laden, also müsste es doch auch gehen, externe YAMLs zu includen, bspw. ```
                    !include /config/lovelace/views/view_Home.yaml

                    Dafür müsste man aber wissen in welchem Verzeichnis die Hauptyaml liegt und ob ich relativ oder absolut referenzieren kann
                    
                    Grüße
                    GarfonsoG 1 Antwort Letzte Antwort
                    0
                    • P piatho

                      @garfonso Ich habe mal eine Frage zur technischen Umsetzung. Die Frage steht ein wenig in Bezug zum Github Issue #555

                      Templates funktionieren bei mir eingeschrängt, wenn ich entsprechende Inhalte in die RAW YAML am Anfang eintragen. Aber es gibt eine Menge schöne Templates die aus mehrfach verschachtelten yaml's bestehen. Da macht es keinen Sinn, das in die "Haupt"-YAML einzufügen.

                      Daher habe ich mich gefragt, wie die Dateistrukturen im Hintergrund sind. Du musst ja auch die Themes irgendwie in die Yaml laden, also müsste es doch auch gehen, externe YAMLs zu includen, bspw. ```
                      !include /config/lovelace/views/view_Home.yaml

                      Dafür müsste man aber wissen in welchem Verzeichnis die Hauptyaml liegt und ob ich relativ oder absolut referenzieren kann
                      
                      Grüße
                      GarfonsoG Offline
                      GarfonsoG Offline
                      Garfonso
                      Developer
                      schrieb am zuletzt editiert von Garfonso
                      #187

                      @piatho said in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                      Du musst ja auch die Themes irgendwie in die Yaml laden

                      Die Themes werden in yaml in einem state gespeichert und das frontend ruft die mit der Funktion frontend/get_themes ab, worauf das Theme dann ausgeliefert wird.
                      Da sind mittlerweile einige Sachen so gebaut. Das "große Yaml", was es zur HomeAssistant Konfiguration braucht, bekommt das Frontend immer weniger und ruft bei HomeAssistant die Sachen einzeln ab. Der Adapter baut daher keine Yaml. Früher hat er mal für die custom cards was in die config gepackt (die aber auch als JSON verschickt und gespeichert wird, kein yaml), aber auch das gibts nicht mehr. Also da irgendwie YAML Code reinzuquetschen wäre einiger Aufwand.

                      Die Frage ist hier: Wie werden denn die yamls geladen? Wenn das Frontend das macht, kannst du da mal versuchen einen Pfad mit /cards/ am Anfang anzugeben. Im Grunde wird alles, was du als "custom card" installierst (also z.B. über die Instazeinstellungen reinziehst) ans Frontend ausgeliefert, wenn es das anfordert. Also alles, was URL mit /cards/ anfängt, wird aus dem ioBroker Datei-Store für Lovelace im Unterordner cards gelesen und abgeschickt, ohne groß zu prüfen, was für eine Datei es ist. Wenn das frontend die yaml Dateien also entsprechend anfragt, könnte es gehen. Kann aber auch sein, dass es das nicht tut.

                      Falls das so nicht geht, müsste man rausfinden, was das frontend da versucht aufzurufen, wenn es ein template sieht... vielleicht mal im Log vom Adapter gucken, ob da was über unbekannte requests steht. Kann sein, dass du dafür auf debug log umstellen musst.

                      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 Antwort Letzte Antwort
                      0
                      • H Offline
                        H Offline
                        hacki11
                        schrieb am zuletzt editiert von hacki11
                        #188

                        Ich hätte eine Verständnisfrage, ich möchte für eine WLAN Steckdose (Tasmota via Sonoff Adapter) eine Card erstellen welche den aktuellen Verbrauch mit anzeigt. Wenn ich mich nicht täusche wäre der Verbrauch der Zustand "ELECTRIC_POWER" im Gerätemanager und müsste zu einem Attribut im Lovelace Adapter werden welches ich mit der Card "Entity" wählen können müsste. Wenn ich mir aber die Attribute im Lovelace Adapter von der Steckdose anzeigen lassen fehlen eigentlich alle Attribute aus dem Gerätemanager.

                        Beispiel:
                        bd79064e-8b1d-4c87-abfc-d4494fab158f-image.png

                        So bin ich vorgegangen:

                        1. Raum & Funktion zugewiesen
                          5b5949cf-2d9b-4555-b6c0-ed6f1c6e9ede-image.png

                        2. Gerätemanager erkennt die Steckdose
                          c242c360-0c35-4af3-a476-20417d4753ac-image.png

                        3. Lovelace erkennt einen Switch, jedoch ohne die restlichen Zustände des Geräts
                          e0bd6942-8ed2-41f3-93c0-4bce77155989-image.png

                        Somit kann ich das Gerät nicht wirklich nutzen und müsste den Datenpunkt "ENERGY_Power" manuell herausführen. Dann kann ich wiederum die Card nicht nutzen weil diese ja nur mit Attributen funktioniert. Gut nicht dramatisch, dann nutze ich eben die "Tile" Card welche auf Entitäten geht.

                        Aber, mache ich hier etwas falsch oder sollte ich lieber einfach alle Datenpunkte manuell setzen und eben nur jene Cards welche dann auf Entitäten gehen statt Attribute? Ich will ungern bei ein und demselben Gerät zwei verschiedene Ansätze (automatisch & manuell) fahren.

                        Dankeschön

                        GarfonsoG 1 Antwort Letzte Antwort
                        0
                        • C Chrisham

                          @david-g Ok, danke. Mit html/css komme ich schon zurecht. die "Card-Mod" installieren heißt, ähnlich wie andere eigene Karten auch "nur" das .js File (card-mod.js) bei settings hochladen?

                          D Offline
                          D Offline
                          dispo112
                          schrieb am zuletzt editiert von
                          #189

                          @chrisham stehe vor dem gleichen Problem. Nur die card-mod.js hochladen klappt nicht.
                          Wo ist der Fehler?

                          1 Antwort Letzte Antwort
                          0
                          • H hacki11

                            Ich hätte eine Verständnisfrage, ich möchte für eine WLAN Steckdose (Tasmota via Sonoff Adapter) eine Card erstellen welche den aktuellen Verbrauch mit anzeigt. Wenn ich mich nicht täusche wäre der Verbrauch der Zustand "ELECTRIC_POWER" im Gerätemanager und müsste zu einem Attribut im Lovelace Adapter werden welches ich mit der Card "Entity" wählen können müsste. Wenn ich mir aber die Attribute im Lovelace Adapter von der Steckdose anzeigen lassen fehlen eigentlich alle Attribute aus dem Gerätemanager.

                            Beispiel:
                            bd79064e-8b1d-4c87-abfc-d4494fab158f-image.png

                            So bin ich vorgegangen:

                            1. Raum & Funktion zugewiesen
                              5b5949cf-2d9b-4555-b6c0-ed6f1c6e9ede-image.png

                            2. Gerätemanager erkennt die Steckdose
                              c242c360-0c35-4af3-a476-20417d4753ac-image.png

                            3. Lovelace erkennt einen Switch, jedoch ohne die restlichen Zustände des Geräts
                              e0bd6942-8ed2-41f3-93c0-4bce77155989-image.png

                            Somit kann ich das Gerät nicht wirklich nutzen und müsste den Datenpunkt "ENERGY_Power" manuell herausführen. Dann kann ich wiederum die Card nicht nutzen weil diese ja nur mit Attributen funktioniert. Gut nicht dramatisch, dann nutze ich eben die "Tile" Card welche auf Entitäten geht.

                            Aber, mache ich hier etwas falsch oder sollte ich lieber einfach alle Datenpunkte manuell setzen und eben nur jene Cards welche dann auf Entitäten gehen statt Attribute? Ich will ungern bei ein und demselben Gerät zwei verschiedene Ansätze (automatisch & manuell) fahren.

                            Dankeschön

                            GarfonsoG Offline
                            GarfonsoG Offline
                            Garfonso
                            Developer
                            schrieb am zuletzt editiert von
                            #190

                            @hacki11 said in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                            Wenn ich mir aber die Attribute im Lovelace Adapter von der Steckdose anzeigen lassen fehlen eigentlich alle Attribute aus dem Gerätemanager.

                            Das stimmt, das unterstützt der Adapter so noch nicht.

                            Wusste ehrlich gesagt bis gerade nicht, dass lovelace / HASS energie Attribute bei Switch entities unterstützt. Muss ich mir mal angucken und das ergänzen.

                            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 Antwort Letzte Antwort
                            0
                            • astuermerA Offline
                              astuermerA Offline
                              astuermer
                              schrieb am zuletzt editiert von
                              #191

                              Kleine Frage zum Lovelace Release 5.0.0 - irgendwie bekomm ich keine Bilder hochgeladen als Hintergrundbild. Es kommt immer ne Fehlermeldung.

                              "SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"

                              Ansonsten ist 5.0.0 ein großer Schritt meiner Meinung gegenüber 4.1.x - alles viel besser. Gratulation!

                              David G.D 1 Antwort Letzte Antwort
                              0
                              • astuermerA astuermer

                                Kleine Frage zum Lovelace Release 5.0.0 - irgendwie bekomm ich keine Bilder hochgeladen als Hintergrundbild. Es kommt immer ne Fehlermeldung.

                                "SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"

                                Ansonsten ist 5.0.0 ein großer Schritt meiner Meinung gegenüber 4.1.x - alles viel besser. Gratulation!

                                David G.D Online
                                David G.D Online
                                David G.
                                schrieb am zuletzt editiert von David G.
                                #192

                                @astuermer

                                Hochladen musst du nach wie vor über die Settings im Adapter.
                                Lovelace ist ein Fork der Visualisierung von Homeassistant, viele Sachen lassen sich da nicht direkt umsetzen/übernehmen.

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

                                Meine Tabellen für eure Visualisierung klick

                                astuermerA 1 Antwort Letzte Antwort
                                0
                                • David G.D David G.

                                  @astuermer

                                  Hochladen musst du nach wie vor über die Settings im Adapter.
                                  Lovelace ist ein Fork der Visualisierung von Homeassistant, viele Sachen lassen sich da nicht direkt umsetzen/übernehmen.

                                  astuermerA Offline
                                  astuermerA Offline
                                  astuermer
                                  schrieb am zuletzt editiert von
                                  #193

                                  @david-g sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                                  @astuermer

                                  Hochladen musst du nach wie vor über die Settings im Adapter.
                                  Lovelace ist ein Fork der Visualisierung von Homeassistant, viele Sachen lassen sich da nicht direkt umsetzen/übernehmen.

                                  Nö ich meine das hier. Ist direkt in Lovelace. Bearbeiten der Seite, 2ter Tab. Ist erst ab Version 5.0.0.

                                  IMG_1080.jpeg

                                  David G.D 1 Antwort Letzte Antwort
                                  0
                                  • astuermerA astuermer

                                    @david-g sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                                    @astuermer

                                    Hochladen musst du nach wie vor über die Settings im Adapter.
                                    Lovelace ist ein Fork der Visualisierung von Homeassistant, viele Sachen lassen sich da nicht direkt umsetzen/übernehmen.

                                    Nö ich meine das hier. Ist direkt in Lovelace. Bearbeiten der Seite, 2ter Tab. Ist erst ab Version 5.0.0.

                                    IMG_1080.jpeg

                                    David G.D Online
                                    David G.D Online
                                    David G.
                                    schrieb am zuletzt editiert von
                                    #194

                                    @astuermer

                                    Ja, das habe ich mir gedacht.
                                    Ich denke, das hat @Garfonso nich nicht für uns angepasst, nicht gesehen, dass es das gibt oder ausgeblendet falls man es nicht für uns angepasst bekommt.

                                    Wie gesagt. Lovelace hat eigentlich eine Basis die rein garnichts mit ioBroker zu tun hat. @garfonso hat alles so Umgebungen, dass das Teil den iobroker versteht.

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

                                    Meine Tabellen für eure Visualisierung klick

                                    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
                                    FAQ Cloud / IOT
                                    HowTo: Node.js-Update
                                    HowTo: Backup/Restore
                                    Downloads
                                    BLOG

                                    693

                                    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