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

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. Test Adapter lovelace v0.2.x

NEWS

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

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

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

Test Adapter lovelace v0.2.x

Scheduled Pinned Locked Moved Tester
testcall for actionlovelacevisualisierung
1.1k Posts 131 Posters 382.3k Views 99 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.
  • E Offline
    E Offline
    ecki945
    wrote on last edited by
    #181

    @all Gibt es irgendwo im www noch Lesestoff für die Konfiguration des Adapters?

    Tue mich sehr schwer mit dem Einrichten. Würde z.B. gerne so ne Ansicht für die Rollladen einrichten.
    bec5dacb-09b5-4976-9214-b6bd83dad236-grafik.png
    3a279ed1-68c2-4571-baf6-47ea9b79b234-grafik.png

    Auf Github, der Home Assistant Seite oder Youtube gibt es zu genug fertige Sachen. Doch ich verstehe es nicht wie ich sowas einbinde.

    Gruß

    ScroungerS 1 Reply Last reply
    0
    • E ecki945

      @all Gibt es irgendwo im www noch Lesestoff für die Konfiguration des Adapters?

      Tue mich sehr schwer mit dem Einrichten. Würde z.B. gerne so ne Ansicht für die Rollladen einrichten.
      bec5dacb-09b5-4976-9214-b6bd83dad236-grafik.png
      3a279ed1-68c2-4571-baf6-47ea9b79b234-grafik.png

      Auf Github, der Home Assistant Seite oder Youtube gibt es zu genug fertige Sachen. Doch ich verstehe es nicht wie ich sowas einbinde.

      Gruß

      ScroungerS Offline
      ScroungerS Offline
      Scrounger
      Developer
      wrote on last edited by
      #182

      @ecki945
      Such Mal nach input_number, damit kannst dein vorhaben realisieren.

      <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

      <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

      1 Reply Last reply
      0
      • ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        wrote on last edited by Scrounger
        #183

        Hier mal ein paar Beispiele, was ich so mit lovelace realisiert habe.

        Hauptsächlich verwende ich die button-card, da diese sehr viel Flexibilität ermöglicht und man so mit manuellen entities sehr gut arbeiten kann.

        Anwesenheit
        anwesenheit.png

        type: horizontal-stack
        cards:
          - type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                layout: vertical
                show_name: true
                show_last_changed: true
                show_entity_picture: true
                show_icon: false
                tap_action:
                  action: none
                styles:
                  label:
                    - font-size: small
                    - font-style: italic
                    - color: '#a1a1a1'
                state:
                  - value: true
                    entity_picture: /static/myimages/tussi_presence.png
                    name: anwesend
                  - value: false
                    entity_picture: /static/myimages/tussi_presence.png
                    name: abwesend
                    styles:
                      icon:
                        - filter: grayscale(100%)
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                show_name: false
                show_icon: false
                styles:
                  card:
                    - width: 100%
                    - padding: 2px
                state:
                  - value: true
                    styles:
                      card:
                        - background: green
                  - value: false
                    styles:
                      card:
                        - background: FireBrick
          - type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_Handy_Anwesend
                layout: vertical
                show_name: true
                show_last_changed: true
                show_entity_picture: true
                show_icon: false
                tap_action:
                  action: none
                styles:
                  label:
                    - font-size: small
                    - font-style: italic
                    - color: '#a1a1a1'
                state:
                  - value: true
                    entity_picture: /static/myimages/ich_presence.png
                    name: anwesend
                  - value: false
                    entity_picture: /static/myimages/ich_presence.png
                    name: abwesend
                    styles:
                      icon:
                        - filter: grayscale(100%)
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_Handy_Anwesend
                show_name: false
                show_icon: false
                styles:
                  card:
                    - width: 100%
                    - padding: 2px
                state:
                  - value: true
                    styles:
                      card:
                        - background: green
                  - value: false
                    styles:
                      card:
                        - background: FireBrick
        

        Fenster
        windows.png

        type: horizontal-stack
        cards:
          - type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:button-card'
                entity: sensor.Sensoren_Fenster_Bad_Offen
                layout: vertical
                show_name: false
                show_entity_picture: true
                show_icon: false
                show_last_changed: true
                tap_action:
                  action: none
                styles:
                  label:
                    - font-size: small
                    - font-style: italic
                    - color: '#a1a1a1'
                state:
                  - value: true
                    entity_picture: /static/myimages/window_open.png
                    name: offen
                    show_last_changed: true
                  - value: false
                    entity_picture: /static/myimages/window_closed.png
                    name: geschlossen
                    show_last_changed: false
          - type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:button-card'
                entity: sensor.Sensoren_Fenster_WC_Offen
                layout: vertical
                show_name: false
                show_entity_picture: true
                show_icon: false
                show_last_changed: true
                tap_action:
                  action: none
                styles:
                  label:
                    - font-size: small
                    - font-style: italic
                    - color: '#a1a1a1'
                state:
                  - value: true
                    entity_picture: /static/myimages/window_open.png
                    name: offen
                    show_last_changed: true
                  - value: false
                    entity_picture: /static/myimages/window_closed.png
                    name: geschlossen
                    show_last_changed: false
        
        

        Licht - Schalter
        light_switch.gif

        type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: 'custom:vertical-stack-in-card'
                cards:
                  - type: entity-button
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                    show_icon: true
                    show_name: true
                    entity: light.Licht_Flur_Main_An
                    name: Flur
                  - type: horizontal-stack
                    cards:
                      - type: 'custom:button-card'
                        entity: sensor.Licht_Flur_Main_Leistung
                        layout: vertical
                        show_name: true
                        show_icon: false
                        show_state: false
                        show_label: true
                        name: Leistung
                        label: |
                          [[[
                            if(entity.state > 0)
                              return (entity.state + " " + entity.attributes.unit_of_measurement);
                            else
                              return "0 " + entity.attributes.unit_of_measurement;
                          ]]]
                        styles:
                          card:
                            - background: '#a1a1a1'
                            - border-radius: 0px
                            - height: 50px
                          name:
                            - font-size: x-small
                            - color: '#44739e'
                            - font-weight: bold
                            - font-style: oblique
                          state:
                            - font-size: smaller
                          label:
                            - font-size: smaller
                      - type: 'custom:button-card'
                        entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Verbrauch_Tag
                        layout: vertical
                        show_name: true
                        show_icon: false
                        show_state: false
                        show_label: true
                        name: Heute
                        label: |
                          [[[ return entity.state * 1000 + ' Wh']]]                
                        styles:
                          card:
                            - background: '#a1a1a1'
                            - border-radius: 0px
                            - height: 50px
                          name:
                            - font-size: x-small
                            - color: '#44739e'
                            - font-weight: bold
                            - font-style: oblique
                          state:
                            - font-size: smaller
                          label:
                            - font-size: smaller
                      - type: 'custom:button-card'
                        entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Kosten_Jahr
                        layout: vertical
                        show_name: true
                        show_icon: false
                        show_state: false
                        show_label: true
                        name: Jahr
                        label: |
                          [[[
                            if(entity.state > 0)
                              return (entity.state + " " + entity.attributes.unit_of_measurement);
                            else
                              return "0 " + entity.attributes.unit_of_measurement;
                          ]]]   
                        styles:
                          card:
                            - background: '#a1a1a1'
                            - border-radius: 0px
                            - height: 50px
                          name:
                            - font-size: x-small
                            - color: '#44739e'
                            - font-weight: bold
                            - font-style: oblique
                          state:
                            - font-size: smaller
                          label:
                            - font-size: smaller
              - type: 'custom:vertical-stack-in-card'
                cards:
                  - type: entity-button
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                    show_icon: true
                    show_name: true
                    entity: light.Licht_Flur_Nische_An
                    name: Nische
                  - type: horizontal-stack
                    cards:
                      - type: 'custom:button-card'
                        entity: sensor.Licht_Flur_Nische_Leistung
                        layout: vertical
                        show_name: true
                        show_icon: false
                        show_state: false
                        show_label: true
                        name: Leistung
                        label: |
                          [[[
                            if(entity.state > 0)
                              return (entity.state + " " + entity.attributes.unit_of_measurement);
                            else
                              return "0 " + entity.attributes.unit_of_measurement;
                          ]]]
                        styles:
                          card:
                            - background: '#a1a1a1'
                            - border-radius: 0px
                            - height: 50px
                          name:
                            - font-size: x-small
                            - color: '#44739e'
                            - font-weight: bold
                            - font-style: oblique
                          state:
                            - font-size: smaller
                          label:
                            - font-size: smaller
                      - type: 'custom:button-card'
                        entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Verbrauch_Tag
                        layout: vertical
                        show_name: true
                        show_icon: false
                        show_state: false
                        show_label: true
                        name: Heute
                        label: |
                          [[[ return entity.state * 1000 + ' Wh']]]                
                        styles:
                          card:
                            - background: '#a1a1a1'
                            - border-radius: 0px
                            - height: 50px
                          name:
                            - font-size: x-small
                            - color: '#44739e'
                            - font-weight: bold
                            - font-style: oblique
                          state:
                            - font-size: smaller
                          label:
                            - font-size: smaller
                      - type: 'custom:button-card'
                        entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Kosten_Jahr
                        layout: vertical
                        show_name: true
                        show_icon: false
                        show_state: false
                        show_label: true
                        name: Jahr
                        label: |
                          [[[
                            if(entity.state > 0)
                              return (entity.state + " " + entity.attributes.unit_of_measurement);
                            else
                              return "0 " + entity.attributes.unit_of_measurement;
                          ]]]   
                        styles:
                          card:
                            - background: '#a1a1a1'
                            - border-radius: 0px
                            - height: 50px
                          name:
                            - font-size: x-small
                            - color: '#44739e'
                            - font-weight: bold
                            - font-style: oblique
                          state:
                            - font-size: smaller
                          label:
                            - font-size: smaller
        

        Licht - Dimmer
        light_dimmer.gif

        type: 'custom:vertical-stack-in-card'
        title: Esszimmer
        cards:
          - type: horizontal-stack
            cards:
              - type: light
                entity: light.Licht_Esszimmer_Links_Dimmer
                name: Links
              - type: light
                entity: light.Licht_Esszimmer_Rechts_Dimmer
                name: Rechts
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.Licht_Esszimmer_Gruppe_SummeLeistung
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Leistung
                label: |
                  [[[
                    if(entity.state > 0)
                      return (entity.state + " " + entity.attributes.unit_of_measurement);
                    else
                      return "0 " + entity.attributes.unit_of_measurement;
                  ]]]
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
              - type: 'custom:button-card'
                entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Verbrauch_Tag
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Heute
                label: |
                  [[[ return entity.state * 1000 + ' Wh']]]                
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
              - type: 'custom:button-card'
                entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Kosten_Jahr
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Jahr
                label: |
                  [[[
                    if(entity.state > 0)
                      return (entity.state + " " + entity.attributes.unit_of_measurement);
                    else
                      return "0 " + entity.attributes.unit_of_measurement;
                  ]]]   
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
        

        Geräte
        devices.png

        type: 'custom:vertical-stack-in-card'
        cards:
          - type: 'custom:button-card'
            entity: switch.Netzwerk_Devices_MusicCast_Esszimmer_An
            layout: vertical
            show_name: false
            show_entity_picture: true
            tap_action:
              action: toggle
            size: 30%
            state:
              - value: 'on'
                entity_picture: /static/myimages/MusicCast-WX-030.png
                styles:
                  card:
                    - background: LemonChiffon
              - value: 'off'
                entity_picture: /static/myimages/MusicCast-WX-030.png
          - type: 'custom:button-card'
            entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
            show_name: false
            show_icon: false
            tap_action:
              action: none
            styles:
              card:
                - width: 100%
                - padding: 2px
                - margin-top: '-10px'
            state:
              - value: An
                styles:
                  card:
                    - background: green
              - value: Aus
                styles:
                  card:
                    - background: FireBrick
              - value: Boot
                styles:
                  card:
                    - background: MediumSeaGreen
                    - animation: blink 2s ease infinite
              - value: Standby
                styles:
                  card:
                    - background: Orange
              - value: Enter Standby
                styles:
                  card:
                    - background: Orange
                    - animation: blink 2s ease infinite
              - value: Leave Standby
                styles:
                  card:
                    - background: Orange
                    - animation: blink 2s ease infinite
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
                layout: vertical
                show_name: true
                show_icon: false
                show_state: true
                name: Status
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
              - type: 'custom:button-card'
                entity: sensor.Schalter_Esszimmer_MusicCast_Leistung
                layout: vertical
                show_name: true
                show_icon: false
                show_state: true
                show_label: true
                name: Leistung
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
                state:
                  - value: 0
                    label: 0 W
              - type: 'custom:button-card'
                entity: sensor.Verbrauchszaehler_Schalter_Esszimmer_MusicCast_Kosten_Jahr
                layout: vertical
                show_name: true
                show_icon: false
                show_state: true
                show_label: true
                name: Jahr
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
                state:
                  - value: 0
                    label: 0 €
              - type: 'custom:button-card'
                entity: switch.Schalter_Esszimmer_MusicCast_An
                layout: vertical
                show_name: false
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
        

        system.png

        type: 'custom:vertical-stack-in-card'
        cards:
          - type: 'custom:button-card'
            name: System
            show_entity_picture: true
            entity_picture: /static/myimages/nuc.png
            styles:
              card:
                - height: 60px
                - padding: 0px
                - margin: 0px
              grid:
                - grid-template-areas: '"n i"'
                - grid-template-columns: 1fr 30%
              name:
                - justify-self: start
                - padding-left: 20px
                - color: '#0277bd'
                - font-size: x-large
              entity_picture:
                - padding-right: 20px
                - padding-top: 6px
                - padding-bottom: 6px
              img_cell:
                - justify-content: flex-end
          - type: divider
            style:
              height: 4px
              background: '#0277bd'
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: CPU
                show_icon: true
                show_state: false
                icon: 'mdi:raspberry-pi'
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                  grid:
                    - grid-template-areas: '"i n"'
                    - grid-template-columns: 1fr 70%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.System_CPU_Auslastung
                scale: 13px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 80
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: CPU ∅-Last
                show_icon: true
                show_state: false
                icon: 'mdi:raspberry-pi'
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                  grid:
                    - grid-template-areas: '"i n"'
                    - grid-template-columns: 1fr 70%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.System_CPU_Durchschnitt
                scale: 13px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 80
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: Arbeitsspeicher
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:memory'
                label: >-
                  [[[ return (states["sensor.System_RAM_used"].state + " GB / " +
                  states["sensor.System_RAM_total"].state + " GB") ]]]
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                    - padding: 2px
                  grid:
                    - grid-template-areas: '"i n" "i l"'
                    - grid-template-rows: min-content min-content
                    - grid-template-columns: 1fr 72%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  label:
                    - justify-self: start
                    - font-size: x-small
                    - margin: 0px
                    - font-style: italic
                    - color: '#0277bd'
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.System_RAM_usedPercent
                scale: 13px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 75
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: 'Win10 (C:)'
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:harddisk'
                label: >-
                  [[[ return (states["sensor.System_Laufwerke_C_used"].state + " GB / "
                  + states["sensor.System_Laufwerke_C_Size"].state + " GB") ]]]
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                    - padding: 2px
                  grid:
                    - grid-template-areas: '"i n" "i l"'
                    - grid-template-rows: min-content min-content
                    - grid-template-columns: 1fr 72%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  label:
                    - justify-self: start
                    - font-size: x-small
                    - margin: 0px
                    - font-style: italic
                    - color: '#0277bd'
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.System_Laufwerke_C_usedPercent
                scale: 13px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 75
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: 'Work (D:)'
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:harddisk'
                label: >-
                  [[[ return (states["sensor.System_Laufwerke_D_used"].state + " GB / "
                  + states["sensor.System_Laufwerke_D_Size"].state + " GB") ]]]
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                    - padding: 2px
                  grid:
                    - grid-template-areas: '"i n" "i l"'
                    - grid-template-rows: min-content min-content
                    - grid-template-columns: 1fr 72%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  label:
                    - justify-self: start
                    - font-size: x-small
                    - margin: 0px
                    - font-style: italic
                    - color: '#0277bd'
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.System_Laufwerke_D_usedPercent
                scale: 13px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 75
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: 'Backup (Y:)'
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:harddisk'
                label: >-
                  [[[ return (states["sensor.System_Laufwerke_Y_used"].state + " GB / "
                  + states["sensor.System_Laufwerke_Y_Size"].state + " GB") ]]]
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                    - padding: 2px
                  grid:
                    - grid-template-areas: '"i n" "i l"'
                    - grid-template-rows: min-content min-content
                    - grid-template-columns: 1fr 72%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  label:
                    - justify-self: start
                    - font-size: x-small
                    - margin: 0px
                    - font-style: italic
                    - color: '#0277bd'
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.System_Laufwerke_Y_usedPercent
                scale: 13px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 75
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: 'Mirror (Z:)'
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:harddisk'
                label: >-
                  [[[ return (states["sensor.System_Laufwerke_Z_used"].state + " GB / "
                  + states["sensor.System_Laufwerke_Z_Size"].state + " GB") ]]]
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                    - padding: 2px
                  grid:
                    - grid-template-areas: '"i n" "i l"'
                    - grid-template-rows: min-content min-content
                    - grid-template-columns: 1fr 72%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  label:
                    - justify-self: start
                    - font-size: x-small
                    - margin: 0px
                    - font-style: italic
                    - color: '#0277bd'
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.System_Laufwerke_Z_usedPercent
                scale: 13px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 75
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: 'custom:button-card'
            entity: sensor.Schalter_Flur_Server_An
            show_name: false
            show_icon: false
            tap_action:
              action: none
            styles:
              card:
                - width: 100%
                - padding: 2px
            state:
              - value: true
                styles:
                  card:
                    - background: green
              - value: false
                styles:
                  card:
                    - background: FireBrick
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.Schalter_Flur_Server_Leistung
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Leistung
                label: |
                  [[[
                    if(entity.state > 0)
                      return (entity.state + " " + entity.attributes.unit_of_measurement);
                    else
                      return "0 " + entity.attributes.unit_of_measurement;
                  ]]]
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
              - type: 'custom:button-card'
                entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Verbrauch_Tag
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Heute
                label: |
                  [[[ return entity.state * 1000 + ' Wh']]]                
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
              - type: 'custom:button-card'
                entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Kosten_Jahr
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Jahr
                label: |
                  [[[
                    if(entity.state > 0)
                      return (entity.state + " " + entity.attributes.unit_of_measurement);
                    else
                      return "0 " + entity.attributes.unit_of_measurement;
                  ]]]   
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
        

        raspi.png

        type: 'custom:vertical-stack-in-card'
        cards:
          - type: 'custom:button-card'
            name: Raspimatic
            show_entity_picture: true
            entity_picture: /static/myimages/raspberrymatic.png
            tap_action:
              action: url
              url: 'http://10.0.124.189/login.htm'
            styles:
              card:
                - height: 60px
                - padding: 0px
                - margin: 0px
              grid:
                - grid-template-areas: '"n i"'
                - grid-template-columns: 1fr 20%
              name:
                - justify-self: start
                - padding-left: 20px
                - color: '#0277bd'
                - font-size: x-large
              entity_picture:
                - padding-right: 20px
                - padding-top: 6px
                - padding-bottom: 6px
              img_cell:
                - justify-content: flex-end
          - type: 'custom:button-card'
            entity: sensor.Netzwerk_Devices_RaspiMatic_Verbunden
            show_name: false
            show_icon: false
            tap_action:
              action: none
            styles:
              card:
                - width: 100%
                - padding: 2px
            state:
              - value: true
                styles:
                  card:
                    - background: green
              - value: false
                styles:
                  card:
                    - background: FireBrick
          - type: 'custom:button-card'
            entity: sensor.Netzwerk_Devices_RaspiMatic_Betriebszeit
            layout: icon_name
            name: Betriebszeit
            show_icon: true
            show_state: false
            show_label: true
            icon: 'mdi:clock-outline'
            label: |
              [[[ if (entity.state == "") 
                    return "0m"; 
                  else 
                    return entity.state;
              ]]]
            styles:
              card:
                - padding-top: 10px
                - padding-bottom: 10px
              grid:
                - grid-template-areas: '"i n l"'
                - grid-template-columns: 11% 1fr 19%
              name:
                - justify-self: start
                - margin: 0px
              label:
                - justify-self: end
                - padding-right: 20px
              icon:
                - color: '#0277bd'
          - type: 'custom:button-card'
            entity: sensor.Netzwerk_Devices_RaspiMatic_upgradable
            layout: icon_name
            name: Neue Version verfügbar
            show_icon: true
            show_state: false
            show_label: true
            icon: 'mdi:update'
            label: |
              [[[ if (entity.state == false) 
                    return "nein"; 
                  else 
                    return "Ja";
              ]]]
            styles:
              card:
                - padding-top: 10px
                - padding-bottom: 10px
              grid:
                - grid-template-areas: '"i n l"'
                - grid-template-columns: 11% 1fr 19%
              name:
                - justify-self: start
                - margin: 0px
              label:
                - justify-self: end
                - padding-right: 20px
              icon:
                - color: |
                    [[[ 
                      if (entity.state === true) 
                        return "green";
                      else
                        return '#0277bd';
                     ]]]        
          - type: 'custom:button-card'
            entity: sensor.Netzwerk_Devices_RaspiMatic_Alarmmeldungen
            layout: icon_name
            name: Alarmmeldungen
            show_icon: true
            show_state: false
            show_label: true
            icon: 'mdi:alert-octagon'
            label: |
              [[[ if (entity.state == 0) 
                    return "0"; 
                  else 
                    return entity.state;
              ]]]
            styles:
              card:
                - padding-top: 10px
                - padding-bottom: 10px
              grid:
                - grid-template-areas: '"i n l"'
                - grid-template-columns: 11% 1fr 19%
              name:
                - justify-self: start
                - margin: 0px
              label:
                - justify-self: end
                - padding-right: 20px
              icon:
                - color: |
                    [[[ 
                      if (entity.state > 0) 
                        return "FireBrick";
                      else
                        return '#0277bd';
                     ]]]
          - type: 'custom:button-card'
            entity: sensor.Netzwerk_Devices_RaspiMatic_Servicemeldungen
            layout: icon_name
            name: Servicemeldungen
            show_icon: true
            show_state: false
            show_label: true
            icon: 'mdi:alert-octagon'
            label: |
              [[[ if (entity.state == 0) 
                    return "0"; 
                  else 
                    return entity.state;
              ]]]
            styles:
              card:
                - padding-top: 10px
                - padding-bottom: 10px
              grid:
                - grid-template-areas: '"i n l"'
                - grid-template-columns: 11% 1fr 19%
              name:
                - justify-self: start
                - margin: 0px
              label:
                - justify-self: end
                - padding-right: 20px
              icon:
                - color: |
                    [[[ 
                      if (entity.state > 0) 
                        return "Gold";
                      else
                        return '#0277bd';
                     ]]]
          - type: divider
            style:
              height: 1px
              margin-left: 10px
              margin-right: 10px
              background: '#0277bd'
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: Temperatur
                show_icon: true
                show_state: false
                icon: 'mdi:thermometer'
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                  grid:
                    - grid-template-areas: '"i n"'
                    - grid-template-columns: 1fr 70%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_Temperatur
                scale: 12px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 50
                    style: green
                  - value: 55
                    style: Gold
                  - value: 65
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: CPU
                show_icon: true
                show_state: false
                icon: 'mdi:raspberry-pi'
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                  grid:
                    - grid-template-areas: '"i n"'
                    - grid-template-columns: 1fr 70%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_Auslastung
                scale: 12px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 80
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: Arbeitsspeicher
                show_icon: true
                show_state: false
                icon: 'mdi:memory'
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                  grid:
                    - grid-template-areas: '"i n"'
                    - grid-template-columns: 1fr 70%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_RamUsed
                scale: 12px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 80
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: SD-Karte
                show_icon: true
                show_state: false
                icon: 'mdi:micro-sd'
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                  grid:
                    - grid-template-areas: '"i n"'
                    - grid-template-columns: 1fr 70%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_SdUsed
                scale: 12px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 60
                    style: green
                  - value: 75
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                layout: icon_name
                name: Duty Cycle
                show_icon: true
                show_state: false
                icon: 'mdi:chart-line-variant'
                styles:
                  card:
                    - height: 100%
                    - width: 100%
                    - min-width: 160px
                  grid:
                    - grid-template-areas: '"i n"'
                    - grid-template-columns: 1fr 70%
                  name:
                    - justify-self: start
                    - font-size: smaller
                    - margin: 0px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:bignumber-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_DutyCycle
                scale: 12px
                from: left
                min: 0
                max: 100
                severity:
                  - value: 50
                    style: green
                  - value: 70
                    style: Gold
                  - value: 100
                    style: FireBrick
          - type: divider
            style:
              height: 6px
        
        

        Bar-Chart
        graph.png

        type: 'custom:vertical-stack-in-card'
        cards:
          - type: 'custom:mini-graph-card'
            entities:
              - entity: sensor.Verbrauchszaehler_Licht_Summe_Verbrauch__Tag_Tag_1
                color: '#44739e'
                name: Lichter Energie gesamt
            name: Lichter Energie gesamt
            hour24: true
            points_per_hour: 0.041
            hours_to_show: 168
            decimals: 3
            show:
              graph: bar
              name: false
              icon: false
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.Licht_Leistung
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Leistung
                label: |
                  [[[
                    if(entity.state > 0)
                      return (entity.state + " " + entity.attributes.unit_of_measurement);
                    else
                      return "0 " + entity.attributes.unit_of_measurement;
                  ]]]
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
              - type: 'custom:button-card'
                entity: sensor.Verbrauchszaehler_Licht_Summe_Kosten_Jahr
                layout: vertical
                show_name: true
                show_icon: false
                show_state: false
                show_label: true
                name: Jahr
                label: |
                  [[[
                    if(entity.state > 0)
                      return (entity.state + " " + entity.attributes.unit_of_measurement);
                    else
                      return "0 " + entity.attributes.unit_of_measurement;
                  ]]]   
                styles:
                  card:
                    - background: '#a1a1a1'
                    - border-radius: 0px
                    - height: 50px
                  name:
                    - font-size: x-small
                    - color: '#44739e'
                    - font-weight: bold
                    - font-style: oblique
                  state:
                    - font-size: smaller
                  label:
                    - font-size: smaller
        
        

        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

        sigi234S W simatecS G 4 Replies Last reply
        5
        • ScroungerS Scrounger

          Hier mal ein paar Beispiele, was ich so mit lovelace realisiert habe.

          Hauptsächlich verwende ich die button-card, da diese sehr viel Flexibilität ermöglicht und man so mit manuellen entities sehr gut arbeiten kann.

          Anwesenheit
          anwesenheit.png

          type: horizontal-stack
          cards:
            - type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                  layout: vertical
                  show_name: true
                  show_last_changed: true
                  show_entity_picture: true
                  show_icon: false
                  tap_action:
                    action: none
                  styles:
                    label:
                      - font-size: small
                      - font-style: italic
                      - color: '#a1a1a1'
                  state:
                    - value: true
                      entity_picture: /static/myimages/tussi_presence.png
                      name: anwesend
                    - value: false
                      entity_picture: /static/myimages/tussi_presence.png
                      name: abwesend
                      styles:
                        icon:
                          - filter: grayscale(100%)
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                  show_name: false
                  show_icon: false
                  styles:
                    card:
                      - width: 100%
                      - padding: 2px
                  state:
                    - value: true
                      styles:
                        card:
                          - background: green
                    - value: false
                      styles:
                        card:
                          - background: FireBrick
            - type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_Handy_Anwesend
                  layout: vertical
                  show_name: true
                  show_last_changed: true
                  show_entity_picture: true
                  show_icon: false
                  tap_action:
                    action: none
                  styles:
                    label:
                      - font-size: small
                      - font-style: italic
                      - color: '#a1a1a1'
                  state:
                    - value: true
                      entity_picture: /static/myimages/ich_presence.png
                      name: anwesend
                    - value: false
                      entity_picture: /static/myimages/ich_presence.png
                      name: abwesend
                      styles:
                        icon:
                          - filter: grayscale(100%)
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_Handy_Anwesend
                  show_name: false
                  show_icon: false
                  styles:
                    card:
                      - width: 100%
                      - padding: 2px
                  state:
                    - value: true
                      styles:
                        card:
                          - background: green
                    - value: false
                      styles:
                        card:
                          - background: FireBrick
          

          Fenster
          windows.png

          type: horizontal-stack
          cards:
            - type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Sensoren_Fenster_Bad_Offen
                  layout: vertical
                  show_name: false
                  show_entity_picture: true
                  show_icon: false
                  show_last_changed: true
                  tap_action:
                    action: none
                  styles:
                    label:
                      - font-size: small
                      - font-style: italic
                      - color: '#a1a1a1'
                  state:
                    - value: true
                      entity_picture: /static/myimages/window_open.png
                      name: offen
                      show_last_changed: true
                    - value: false
                      entity_picture: /static/myimages/window_closed.png
                      name: geschlossen
                      show_last_changed: false
            - type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Sensoren_Fenster_WC_Offen
                  layout: vertical
                  show_name: false
                  show_entity_picture: true
                  show_icon: false
                  show_last_changed: true
                  tap_action:
                    action: none
                  styles:
                    label:
                      - font-size: small
                      - font-style: italic
                      - color: '#a1a1a1'
                  state:
                    - value: true
                      entity_picture: /static/myimages/window_open.png
                      name: offen
                      show_last_changed: true
                    - value: false
                      entity_picture: /static/myimages/window_closed.png
                      name: geschlossen
                      show_last_changed: false
          
          

          Licht - Schalter
          light_switch.gif

          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: 'custom:vertical-stack-in-card'
                  cards:
                    - type: entity-button
                      tap_action:
                        action: toggle
                      hold_action:
                        action: more-info
                      show_icon: true
                      show_name: true
                      entity: light.Licht_Flur_Main_An
                      name: Flur
                    - type: horizontal-stack
                      cards:
                        - type: 'custom:button-card'
                          entity: sensor.Licht_Flur_Main_Leistung
                          layout: vertical
                          show_name: true
                          show_icon: false
                          show_state: false
                          show_label: true
                          name: Leistung
                          label: |
                            [[[
                              if(entity.state > 0)
                                return (entity.state + " " + entity.attributes.unit_of_measurement);
                              else
                                return "0 " + entity.attributes.unit_of_measurement;
                            ]]]
                          styles:
                            card:
                              - background: '#a1a1a1'
                              - border-radius: 0px
                              - height: 50px
                            name:
                              - font-size: x-small
                              - color: '#44739e'
                              - font-weight: bold
                              - font-style: oblique
                            state:
                              - font-size: smaller
                            label:
                              - font-size: smaller
                        - type: 'custom:button-card'
                          entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Verbrauch_Tag
                          layout: vertical
                          show_name: true
                          show_icon: false
                          show_state: false
                          show_label: true
                          name: Heute
                          label: |
                            [[[ return entity.state * 1000 + ' Wh']]]                
                          styles:
                            card:
                              - background: '#a1a1a1'
                              - border-radius: 0px
                              - height: 50px
                            name:
                              - font-size: x-small
                              - color: '#44739e'
                              - font-weight: bold
                              - font-style: oblique
                            state:
                              - font-size: smaller
                            label:
                              - font-size: smaller
                        - type: 'custom:button-card'
                          entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Kosten_Jahr
                          layout: vertical
                          show_name: true
                          show_icon: false
                          show_state: false
                          show_label: true
                          name: Jahr
                          label: |
                            [[[
                              if(entity.state > 0)
                                return (entity.state + " " + entity.attributes.unit_of_measurement);
                              else
                                return "0 " + entity.attributes.unit_of_measurement;
                            ]]]   
                          styles:
                            card:
                              - background: '#a1a1a1'
                              - border-radius: 0px
                              - height: 50px
                            name:
                              - font-size: x-small
                              - color: '#44739e'
                              - font-weight: bold
                              - font-style: oblique
                            state:
                              - font-size: smaller
                            label:
                              - font-size: smaller
                - type: 'custom:vertical-stack-in-card'
                  cards:
                    - type: entity-button
                      tap_action:
                        action: toggle
                      hold_action:
                        action: more-info
                      show_icon: true
                      show_name: true
                      entity: light.Licht_Flur_Nische_An
                      name: Nische
                    - type: horizontal-stack
                      cards:
                        - type: 'custom:button-card'
                          entity: sensor.Licht_Flur_Nische_Leistung
                          layout: vertical
                          show_name: true
                          show_icon: false
                          show_state: false
                          show_label: true
                          name: Leistung
                          label: |
                            [[[
                              if(entity.state > 0)
                                return (entity.state + " " + entity.attributes.unit_of_measurement);
                              else
                                return "0 " + entity.attributes.unit_of_measurement;
                            ]]]
                          styles:
                            card:
                              - background: '#a1a1a1'
                              - border-radius: 0px
                              - height: 50px
                            name:
                              - font-size: x-small
                              - color: '#44739e'
                              - font-weight: bold
                              - font-style: oblique
                            state:
                              - font-size: smaller
                            label:
                              - font-size: smaller
                        - type: 'custom:button-card'
                          entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Verbrauch_Tag
                          layout: vertical
                          show_name: true
                          show_icon: false
                          show_state: false
                          show_label: true
                          name: Heute
                          label: |
                            [[[ return entity.state * 1000 + ' Wh']]]                
                          styles:
                            card:
                              - background: '#a1a1a1'
                              - border-radius: 0px
                              - height: 50px
                            name:
                              - font-size: x-small
                              - color: '#44739e'
                              - font-weight: bold
                              - font-style: oblique
                            state:
                              - font-size: smaller
                            label:
                              - font-size: smaller
                        - type: 'custom:button-card'
                          entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Kosten_Jahr
                          layout: vertical
                          show_name: true
                          show_icon: false
                          show_state: false
                          show_label: true
                          name: Jahr
                          label: |
                            [[[
                              if(entity.state > 0)
                                return (entity.state + " " + entity.attributes.unit_of_measurement);
                              else
                                return "0 " + entity.attributes.unit_of_measurement;
                            ]]]   
                          styles:
                            card:
                              - background: '#a1a1a1'
                              - border-radius: 0px
                              - height: 50px
                            name:
                              - font-size: x-small
                              - color: '#44739e'
                              - font-weight: bold
                              - font-style: oblique
                            state:
                              - font-size: smaller
                            label:
                              - font-size: smaller
          

          Licht - Dimmer
          light_dimmer.gif

          type: 'custom:vertical-stack-in-card'
          title: Esszimmer
          cards:
            - type: horizontal-stack
              cards:
                - type: light
                  entity: light.Licht_Esszimmer_Links_Dimmer
                  name: Links
                - type: light
                  entity: light.Licht_Esszimmer_Rechts_Dimmer
                  name: Rechts
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Licht_Esszimmer_Gruppe_SummeLeistung
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Leistung
                  label: |
                    [[[
                      if(entity.state > 0)
                        return (entity.state + " " + entity.attributes.unit_of_measurement);
                      else
                        return "0 " + entity.attributes.unit_of_measurement;
                    ]]]
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
                - type: 'custom:button-card'
                  entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Verbrauch_Tag
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Heute
                  label: |
                    [[[ return entity.state * 1000 + ' Wh']]]                
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
                - type: 'custom:button-card'
                  entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Kosten_Jahr
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Jahr
                  label: |
                    [[[
                      if(entity.state > 0)
                        return (entity.state + " " + entity.attributes.unit_of_measurement);
                      else
                        return "0 " + entity.attributes.unit_of_measurement;
                    ]]]   
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
          

          Geräte
          devices.png

          type: 'custom:vertical-stack-in-card'
          cards:
            - type: 'custom:button-card'
              entity: switch.Netzwerk_Devices_MusicCast_Esszimmer_An
              layout: vertical
              show_name: false
              show_entity_picture: true
              tap_action:
                action: toggle
              size: 30%
              state:
                - value: 'on'
                  entity_picture: /static/myimages/MusicCast-WX-030.png
                  styles:
                    card:
                      - background: LemonChiffon
                - value: 'off'
                  entity_picture: /static/myimages/MusicCast-WX-030.png
            - type: 'custom:button-card'
              entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
              show_name: false
              show_icon: false
              tap_action:
                action: none
              styles:
                card:
                  - width: 100%
                  - padding: 2px
                  - margin-top: '-10px'
              state:
                - value: An
                  styles:
                    card:
                      - background: green
                - value: Aus
                  styles:
                    card:
                      - background: FireBrick
                - value: Boot
                  styles:
                    card:
                      - background: MediumSeaGreen
                      - animation: blink 2s ease infinite
                - value: Standby
                  styles:
                    card:
                      - background: Orange
                - value: Enter Standby
                  styles:
                    card:
                      - background: Orange
                      - animation: blink 2s ease infinite
                - value: Leave Standby
                  styles:
                    card:
                      - background: Orange
                      - animation: blink 2s ease infinite
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: true
                  name: Status
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                - type: 'custom:button-card'
                  entity: sensor.Schalter_Esszimmer_MusicCast_Leistung
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: true
                  show_label: true
                  name: Leistung
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
                  state:
                    - value: 0
                      label: 0 W
                - type: 'custom:button-card'
                  entity: sensor.Verbrauchszaehler_Schalter_Esszimmer_MusicCast_Kosten_Jahr
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: true
                  show_label: true
                  name: Jahr
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
                  state:
                    - value: 0
                      label: 0 €
                - type: 'custom:button-card'
                  entity: switch.Schalter_Esszimmer_MusicCast_An
                  layout: vertical
                  show_name: false
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
          

          system.png

          type: 'custom:vertical-stack-in-card'
          cards:
            - type: 'custom:button-card'
              name: System
              show_entity_picture: true
              entity_picture: /static/myimages/nuc.png
              styles:
                card:
                  - height: 60px
                  - padding: 0px
                  - margin: 0px
                grid:
                  - grid-template-areas: '"n i"'
                  - grid-template-columns: 1fr 30%
                name:
                  - justify-self: start
                  - padding-left: 20px
                  - color: '#0277bd'
                  - font-size: x-large
                entity_picture:
                  - padding-right: 20px
                  - padding-top: 6px
                  - padding-bottom: 6px
                img_cell:
                  - justify-content: flex-end
            - type: divider
              style:
                height: 4px
                background: '#0277bd'
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: CPU
                  show_icon: true
                  show_state: false
                  icon: 'mdi:raspberry-pi'
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                    grid:
                      - grid-template-areas: '"i n"'
                      - grid-template-columns: 1fr 70%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.System_CPU_Auslastung
                  scale: 13px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 80
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: CPU ∅-Last
                  show_icon: true
                  show_state: false
                  icon: 'mdi:raspberry-pi'
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                    grid:
                      - grid-template-areas: '"i n"'
                      - grid-template-columns: 1fr 70%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.System_CPU_Durchschnitt
                  scale: 13px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 80
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: Arbeitsspeicher
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:memory'
                  label: >-
                    [[[ return (states["sensor.System_RAM_used"].state + " GB / " +
                    states["sensor.System_RAM_total"].state + " GB") ]]]
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                      - padding: 2px
                    grid:
                      - grid-template-areas: '"i n" "i l"'
                      - grid-template-rows: min-content min-content
                      - grid-template-columns: 1fr 72%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    label:
                      - justify-self: start
                      - font-size: x-small
                      - margin: 0px
                      - font-style: italic
                      - color: '#0277bd'
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.System_RAM_usedPercent
                  scale: 13px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 75
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: 'Win10 (C:)'
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:harddisk'
                  label: >-
                    [[[ return (states["sensor.System_Laufwerke_C_used"].state + " GB / "
                    + states["sensor.System_Laufwerke_C_Size"].state + " GB") ]]]
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                      - padding: 2px
                    grid:
                      - grid-template-areas: '"i n" "i l"'
                      - grid-template-rows: min-content min-content
                      - grid-template-columns: 1fr 72%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    label:
                      - justify-self: start
                      - font-size: x-small
                      - margin: 0px
                      - font-style: italic
                      - color: '#0277bd'
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.System_Laufwerke_C_usedPercent
                  scale: 13px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 75
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: 'Work (D:)'
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:harddisk'
                  label: >-
                    [[[ return (states["sensor.System_Laufwerke_D_used"].state + " GB / "
                    + states["sensor.System_Laufwerke_D_Size"].state + " GB") ]]]
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                      - padding: 2px
                    grid:
                      - grid-template-areas: '"i n" "i l"'
                      - grid-template-rows: min-content min-content
                      - grid-template-columns: 1fr 72%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    label:
                      - justify-self: start
                      - font-size: x-small
                      - margin: 0px
                      - font-style: italic
                      - color: '#0277bd'
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.System_Laufwerke_D_usedPercent
                  scale: 13px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 75
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: 'Backup (Y:)'
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:harddisk'
                  label: >-
                    [[[ return (states["sensor.System_Laufwerke_Y_used"].state + " GB / "
                    + states["sensor.System_Laufwerke_Y_Size"].state + " GB") ]]]
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                      - padding: 2px
                    grid:
                      - grid-template-areas: '"i n" "i l"'
                      - grid-template-rows: min-content min-content
                      - grid-template-columns: 1fr 72%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    label:
                      - justify-self: start
                      - font-size: x-small
                      - margin: 0px
                      - font-style: italic
                      - color: '#0277bd'
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.System_Laufwerke_Y_usedPercent
                  scale: 13px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 75
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: 'Mirror (Z:)'
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:harddisk'
                  label: >-
                    [[[ return (states["sensor.System_Laufwerke_Z_used"].state + " GB / "
                    + states["sensor.System_Laufwerke_Z_Size"].state + " GB") ]]]
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                      - padding: 2px
                    grid:
                      - grid-template-areas: '"i n" "i l"'
                      - grid-template-rows: min-content min-content
                      - grid-template-columns: 1fr 72%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    label:
                      - justify-self: start
                      - font-size: x-small
                      - margin: 0px
                      - font-style: italic
                      - color: '#0277bd'
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.System_Laufwerke_Z_usedPercent
                  scale: 13px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 75
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: 'custom:button-card'
              entity: sensor.Schalter_Flur_Server_An
              show_name: false
              show_icon: false
              tap_action:
                action: none
              styles:
                card:
                  - width: 100%
                  - padding: 2px
              state:
                - value: true
                  styles:
                    card:
                      - background: green
                - value: false
                  styles:
                    card:
                      - background: FireBrick
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Schalter_Flur_Server_Leistung
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Leistung
                  label: |
                    [[[
                      if(entity.state > 0)
                        return (entity.state + " " + entity.attributes.unit_of_measurement);
                      else
                        return "0 " + entity.attributes.unit_of_measurement;
                    ]]]
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
                - type: 'custom:button-card'
                  entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Verbrauch_Tag
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Heute
                  label: |
                    [[[ return entity.state * 1000 + ' Wh']]]                
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
                - type: 'custom:button-card'
                  entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Kosten_Jahr
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Jahr
                  label: |
                    [[[
                      if(entity.state > 0)
                        return (entity.state + " " + entity.attributes.unit_of_measurement);
                      else
                        return "0 " + entity.attributes.unit_of_measurement;
                    ]]]   
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
          

          raspi.png

          type: 'custom:vertical-stack-in-card'
          cards:
            - type: 'custom:button-card'
              name: Raspimatic
              show_entity_picture: true
              entity_picture: /static/myimages/raspberrymatic.png
              tap_action:
                action: url
                url: 'http://10.0.124.189/login.htm'
              styles:
                card:
                  - height: 60px
                  - padding: 0px
                  - margin: 0px
                grid:
                  - grid-template-areas: '"n i"'
                  - grid-template-columns: 1fr 20%
                name:
                  - justify-self: start
                  - padding-left: 20px
                  - color: '#0277bd'
                  - font-size: x-large
                entity_picture:
                  - padding-right: 20px
                  - padding-top: 6px
                  - padding-bottom: 6px
                img_cell:
                  - justify-content: flex-end
            - type: 'custom:button-card'
              entity: sensor.Netzwerk_Devices_RaspiMatic_Verbunden
              show_name: false
              show_icon: false
              tap_action:
                action: none
              styles:
                card:
                  - width: 100%
                  - padding: 2px
              state:
                - value: true
                  styles:
                    card:
                      - background: green
                - value: false
                  styles:
                    card:
                      - background: FireBrick
            - type: 'custom:button-card'
              entity: sensor.Netzwerk_Devices_RaspiMatic_Betriebszeit
              layout: icon_name
              name: Betriebszeit
              show_icon: true
              show_state: false
              show_label: true
              icon: 'mdi:clock-outline'
              label: |
                [[[ if (entity.state == "") 
                      return "0m"; 
                    else 
                      return entity.state;
                ]]]
              styles:
                card:
                  - padding-top: 10px
                  - padding-bottom: 10px
                grid:
                  - grid-template-areas: '"i n l"'
                  - grid-template-columns: 11% 1fr 19%
                name:
                  - justify-self: start
                  - margin: 0px
                label:
                  - justify-self: end
                  - padding-right: 20px
                icon:
                  - color: '#0277bd'
            - type: 'custom:button-card'
              entity: sensor.Netzwerk_Devices_RaspiMatic_upgradable
              layout: icon_name
              name: Neue Version verfügbar
              show_icon: true
              show_state: false
              show_label: true
              icon: 'mdi:update'
              label: |
                [[[ if (entity.state == false) 
                      return "nein"; 
                    else 
                      return "Ja";
                ]]]
              styles:
                card:
                  - padding-top: 10px
                  - padding-bottom: 10px
                grid:
                  - grid-template-areas: '"i n l"'
                  - grid-template-columns: 11% 1fr 19%
                name:
                  - justify-self: start
                  - margin: 0px
                label:
                  - justify-self: end
                  - padding-right: 20px
                icon:
                  - color: |
                      [[[ 
                        if (entity.state === true) 
                          return "green";
                        else
                          return '#0277bd';
                       ]]]        
            - type: 'custom:button-card'
              entity: sensor.Netzwerk_Devices_RaspiMatic_Alarmmeldungen
              layout: icon_name
              name: Alarmmeldungen
              show_icon: true
              show_state: false
              show_label: true
              icon: 'mdi:alert-octagon'
              label: |
                [[[ if (entity.state == 0) 
                      return "0"; 
                    else 
                      return entity.state;
                ]]]
              styles:
                card:
                  - padding-top: 10px
                  - padding-bottom: 10px
                grid:
                  - grid-template-areas: '"i n l"'
                  - grid-template-columns: 11% 1fr 19%
                name:
                  - justify-self: start
                  - margin: 0px
                label:
                  - justify-self: end
                  - padding-right: 20px
                icon:
                  - color: |
                      [[[ 
                        if (entity.state > 0) 
                          return "FireBrick";
                        else
                          return '#0277bd';
                       ]]]
            - type: 'custom:button-card'
              entity: sensor.Netzwerk_Devices_RaspiMatic_Servicemeldungen
              layout: icon_name
              name: Servicemeldungen
              show_icon: true
              show_state: false
              show_label: true
              icon: 'mdi:alert-octagon'
              label: |
                [[[ if (entity.state == 0) 
                      return "0"; 
                    else 
                      return entity.state;
                ]]]
              styles:
                card:
                  - padding-top: 10px
                  - padding-bottom: 10px
                grid:
                  - grid-template-areas: '"i n l"'
                  - grid-template-columns: 11% 1fr 19%
                name:
                  - justify-self: start
                  - margin: 0px
                label:
                  - justify-self: end
                  - padding-right: 20px
                icon:
                  - color: |
                      [[[ 
                        if (entity.state > 0) 
                          return "Gold";
                        else
                          return '#0277bd';
                       ]]]
            - type: divider
              style:
                height: 1px
                margin-left: 10px
                margin-right: 10px
                background: '#0277bd'
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: Temperatur
                  show_icon: true
                  show_state: false
                  icon: 'mdi:thermometer'
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                    grid:
                      - grid-template-areas: '"i n"'
                      - grid-template-columns: 1fr 70%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_Temperatur
                  scale: 12px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 50
                      style: green
                    - value: 55
                      style: Gold
                    - value: 65
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: CPU
                  show_icon: true
                  show_state: false
                  icon: 'mdi:raspberry-pi'
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                    grid:
                      - grid-template-areas: '"i n"'
                      - grid-template-columns: 1fr 70%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_Auslastung
                  scale: 12px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 80
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: Arbeitsspeicher
                  show_icon: true
                  show_state: false
                  icon: 'mdi:memory'
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                    grid:
                      - grid-template-areas: '"i n"'
                      - grid-template-columns: 1fr 70%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_RamUsed
                  scale: 12px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 80
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: SD-Karte
                  show_icon: true
                  show_state: false
                  icon: 'mdi:micro-sd'
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                    grid:
                      - grid-template-areas: '"i n"'
                      - grid-template-columns: 1fr 70%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_SdUsed
                  scale: 12px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 60
                      style: green
                    - value: 75
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  layout: icon_name
                  name: Duty Cycle
                  show_icon: true
                  show_state: false
                  icon: 'mdi:chart-line-variant'
                  styles:
                    card:
                      - height: 100%
                      - width: 100%
                      - min-width: 160px
                    grid:
                      - grid-template-areas: '"i n"'
                      - grid-template-columns: 1fr 70%
                    name:
                      - justify-self: start
                      - font-size: smaller
                      - margin: 0px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:bignumber-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_DutyCycle
                  scale: 12px
                  from: left
                  min: 0
                  max: 100
                  severity:
                    - value: 50
                      style: green
                    - value: 70
                      style: Gold
                    - value: 100
                      style: FireBrick
            - type: divider
              style:
                height: 6px
          
          

          Bar-Chart
          graph.png

          type: 'custom:vertical-stack-in-card'
          cards:
            - type: 'custom:mini-graph-card'
              entities:
                - entity: sensor.Verbrauchszaehler_Licht_Summe_Verbrauch__Tag_Tag_1
                  color: '#44739e'
                  name: Lichter Energie gesamt
              name: Lichter Energie gesamt
              hour24: true
              points_per_hour: 0.041
              hours_to_show: 168
              decimals: 3
              show:
                graph: bar
                name: false
                icon: false
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  entity: sensor.Licht_Leistung
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Leistung
                  label: |
                    [[[
                      if(entity.state > 0)
                        return (entity.state + " " + entity.attributes.unit_of_measurement);
                      else
                        return "0 " + entity.attributes.unit_of_measurement;
                    ]]]
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
                - type: 'custom:button-card'
                  entity: sensor.Verbrauchszaehler_Licht_Summe_Kosten_Jahr
                  layout: vertical
                  show_name: true
                  show_icon: false
                  show_state: false
                  show_label: true
                  name: Jahr
                  label: |
                    [[[
                      if(entity.state > 0)
                        return (entity.state + " " + entity.attributes.unit_of_measurement);
                      else
                        return "0 " + entity.attributes.unit_of_measurement;
                    ]]]   
                  styles:
                    card:
                      - background: '#a1a1a1'
                      - border-radius: 0px
                      - height: 50px
                    name:
                      - font-size: x-small
                      - color: '#44739e'
                      - font-weight: bold
                      - font-style: oblique
                    state:
                      - font-size: smaller
                    label:
                      - font-size: smaller
          
          

          sigi234S Online
          sigi234S Online
          sigi234
          Forum Testing Most Active
          wrote on last edited by
          #184

          @Scrounger

          Tussi anwesend ist ein interessanter DP😀

          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
          Immer Daten sichern!

          ScroungerS 1 Reply Last reply
          0
          • ScroungerS Scrounger

            Hier mal ein paar Beispiele, was ich so mit lovelace realisiert habe.

            Hauptsächlich verwende ich die button-card, da diese sehr viel Flexibilität ermöglicht und man so mit manuellen entities sehr gut arbeiten kann.

            Anwesenheit
            anwesenheit.png

            type: horizontal-stack
            cards:
              - type: 'custom:vertical-stack-in-card'
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                    layout: vertical
                    show_name: true
                    show_last_changed: true
                    show_entity_picture: true
                    show_icon: false
                    tap_action:
                      action: none
                    styles:
                      label:
                        - font-size: small
                        - font-style: italic
                        - color: '#a1a1a1'
                    state:
                      - value: true
                        entity_picture: /static/myimages/tussi_presence.png
                        name: anwesend
                      - value: false
                        entity_picture: /static/myimages/tussi_presence.png
                        name: abwesend
                        styles:
                          icon:
                            - filter: grayscale(100%)
                  - type: 'custom:button-card'
                    entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                    show_name: false
                    show_icon: false
                    styles:
                      card:
                        - width: 100%
                        - padding: 2px
                    state:
                      - value: true
                        styles:
                          card:
                            - background: green
                      - value: false
                        styles:
                          card:
                            - background: FireBrick
              - type: 'custom:vertical-stack-in-card'
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Netzwerk_Devices_Handy_Anwesend
                    layout: vertical
                    show_name: true
                    show_last_changed: true
                    show_entity_picture: true
                    show_icon: false
                    tap_action:
                      action: none
                    styles:
                      label:
                        - font-size: small
                        - font-style: italic
                        - color: '#a1a1a1'
                    state:
                      - value: true
                        entity_picture: /static/myimages/ich_presence.png
                        name: anwesend
                      - value: false
                        entity_picture: /static/myimages/ich_presence.png
                        name: abwesend
                        styles:
                          icon:
                            - filter: grayscale(100%)
                  - type: 'custom:button-card'
                    entity: sensor.Netzwerk_Devices_Handy_Anwesend
                    show_name: false
                    show_icon: false
                    styles:
                      card:
                        - width: 100%
                        - padding: 2px
                    state:
                      - value: true
                        styles:
                          card:
                            - background: green
                      - value: false
                        styles:
                          card:
                            - background: FireBrick
            

            Fenster
            windows.png

            type: horizontal-stack
            cards:
              - type: 'custom:vertical-stack-in-card'
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Sensoren_Fenster_Bad_Offen
                    layout: vertical
                    show_name: false
                    show_entity_picture: true
                    show_icon: false
                    show_last_changed: true
                    tap_action:
                      action: none
                    styles:
                      label:
                        - font-size: small
                        - font-style: italic
                        - color: '#a1a1a1'
                    state:
                      - value: true
                        entity_picture: /static/myimages/window_open.png
                        name: offen
                        show_last_changed: true
                      - value: false
                        entity_picture: /static/myimages/window_closed.png
                        name: geschlossen
                        show_last_changed: false
              - type: 'custom:vertical-stack-in-card'
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Sensoren_Fenster_WC_Offen
                    layout: vertical
                    show_name: false
                    show_entity_picture: true
                    show_icon: false
                    show_last_changed: true
                    tap_action:
                      action: none
                    styles:
                      label:
                        - font-size: small
                        - font-style: italic
                        - color: '#a1a1a1'
                    state:
                      - value: true
                        entity_picture: /static/myimages/window_open.png
                        name: offen
                        show_last_changed: true
                      - value: false
                        entity_picture: /static/myimages/window_closed.png
                        name: geschlossen
                        show_last_changed: false
            
            

            Licht - Schalter
            light_switch.gif

            type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: 'custom:vertical-stack-in-card'
                    cards:
                      - type: entity-button
                        tap_action:
                          action: toggle
                        hold_action:
                          action: more-info
                        show_icon: true
                        show_name: true
                        entity: light.Licht_Flur_Main_An
                        name: Flur
                      - type: horizontal-stack
                        cards:
                          - type: 'custom:button-card'
                            entity: sensor.Licht_Flur_Main_Leistung
                            layout: vertical
                            show_name: true
                            show_icon: false
                            show_state: false
                            show_label: true
                            name: Leistung
                            label: |
                              [[[
                                if(entity.state > 0)
                                  return (entity.state + " " + entity.attributes.unit_of_measurement);
                                else
                                  return "0 " + entity.attributes.unit_of_measurement;
                              ]]]
                            styles:
                              card:
                                - background: '#a1a1a1'
                                - border-radius: 0px
                                - height: 50px
                              name:
                                - font-size: x-small
                                - color: '#44739e'
                                - font-weight: bold
                                - font-style: oblique
                              state:
                                - font-size: smaller
                              label:
                                - font-size: smaller
                          - type: 'custom:button-card'
                            entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Verbrauch_Tag
                            layout: vertical
                            show_name: true
                            show_icon: false
                            show_state: false
                            show_label: true
                            name: Heute
                            label: |
                              [[[ return entity.state * 1000 + ' Wh']]]                
                            styles:
                              card:
                                - background: '#a1a1a1'
                                - border-radius: 0px
                                - height: 50px
                              name:
                                - font-size: x-small
                                - color: '#44739e'
                                - font-weight: bold
                                - font-style: oblique
                              state:
                                - font-size: smaller
                              label:
                                - font-size: smaller
                          - type: 'custom:button-card'
                            entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Kosten_Jahr
                            layout: vertical
                            show_name: true
                            show_icon: false
                            show_state: false
                            show_label: true
                            name: Jahr
                            label: |
                              [[[
                                if(entity.state > 0)
                                  return (entity.state + " " + entity.attributes.unit_of_measurement);
                                else
                                  return "0 " + entity.attributes.unit_of_measurement;
                              ]]]   
                            styles:
                              card:
                                - background: '#a1a1a1'
                                - border-radius: 0px
                                - height: 50px
                              name:
                                - font-size: x-small
                                - color: '#44739e'
                                - font-weight: bold
                                - font-style: oblique
                              state:
                                - font-size: smaller
                              label:
                                - font-size: smaller
                  - type: 'custom:vertical-stack-in-card'
                    cards:
                      - type: entity-button
                        tap_action:
                          action: toggle
                        hold_action:
                          action: more-info
                        show_icon: true
                        show_name: true
                        entity: light.Licht_Flur_Nische_An
                        name: Nische
                      - type: horizontal-stack
                        cards:
                          - type: 'custom:button-card'
                            entity: sensor.Licht_Flur_Nische_Leistung
                            layout: vertical
                            show_name: true
                            show_icon: false
                            show_state: false
                            show_label: true
                            name: Leistung
                            label: |
                              [[[
                                if(entity.state > 0)
                                  return (entity.state + " " + entity.attributes.unit_of_measurement);
                                else
                                  return "0 " + entity.attributes.unit_of_measurement;
                              ]]]
                            styles:
                              card:
                                - background: '#a1a1a1'
                                - border-radius: 0px
                                - height: 50px
                              name:
                                - font-size: x-small
                                - color: '#44739e'
                                - font-weight: bold
                                - font-style: oblique
                              state:
                                - font-size: smaller
                              label:
                                - font-size: smaller
                          - type: 'custom:button-card'
                            entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Verbrauch_Tag
                            layout: vertical
                            show_name: true
                            show_icon: false
                            show_state: false
                            show_label: true
                            name: Heute
                            label: |
                              [[[ return entity.state * 1000 + ' Wh']]]                
                            styles:
                              card:
                                - background: '#a1a1a1'
                                - border-radius: 0px
                                - height: 50px
                              name:
                                - font-size: x-small
                                - color: '#44739e'
                                - font-weight: bold
                                - font-style: oblique
                              state:
                                - font-size: smaller
                              label:
                                - font-size: smaller
                          - type: 'custom:button-card'
                            entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Kosten_Jahr
                            layout: vertical
                            show_name: true
                            show_icon: false
                            show_state: false
                            show_label: true
                            name: Jahr
                            label: |
                              [[[
                                if(entity.state > 0)
                                  return (entity.state + " " + entity.attributes.unit_of_measurement);
                                else
                                  return "0 " + entity.attributes.unit_of_measurement;
                              ]]]   
                            styles:
                              card:
                                - background: '#a1a1a1'
                                - border-radius: 0px
                                - height: 50px
                              name:
                                - font-size: x-small
                                - color: '#44739e'
                                - font-weight: bold
                                - font-style: oblique
                              state:
                                - font-size: smaller
                              label:
                                - font-size: smaller
            

            Licht - Dimmer
            light_dimmer.gif

            type: 'custom:vertical-stack-in-card'
            title: Esszimmer
            cards:
              - type: horizontal-stack
                cards:
                  - type: light
                    entity: light.Licht_Esszimmer_Links_Dimmer
                    name: Links
                  - type: light
                    entity: light.Licht_Esszimmer_Rechts_Dimmer
                    name: Rechts
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Licht_Esszimmer_Gruppe_SummeLeistung
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Leistung
                    label: |
                      [[[
                        if(entity.state > 0)
                          return (entity.state + " " + entity.attributes.unit_of_measurement);
                        else
                          return "0 " + entity.attributes.unit_of_measurement;
                      ]]]
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
                  - type: 'custom:button-card'
                    entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Verbrauch_Tag
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Heute
                    label: |
                      [[[ return entity.state * 1000 + ' Wh']]]                
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
                  - type: 'custom:button-card'
                    entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Kosten_Jahr
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Jahr
                    label: |
                      [[[
                        if(entity.state > 0)
                          return (entity.state + " " + entity.attributes.unit_of_measurement);
                        else
                          return "0 " + entity.attributes.unit_of_measurement;
                      ]]]   
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
            

            Geräte
            devices.png

            type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:button-card'
                entity: switch.Netzwerk_Devices_MusicCast_Esszimmer_An
                layout: vertical
                show_name: false
                show_entity_picture: true
                tap_action:
                  action: toggle
                size: 30%
                state:
                  - value: 'on'
                    entity_picture: /static/myimages/MusicCast-WX-030.png
                    styles:
                      card:
                        - background: LemonChiffon
                  - value: 'off'
                    entity_picture: /static/myimages/MusicCast-WX-030.png
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
                show_name: false
                show_icon: false
                tap_action:
                  action: none
                styles:
                  card:
                    - width: 100%
                    - padding: 2px
                    - margin-top: '-10px'
                state:
                  - value: An
                    styles:
                      card:
                        - background: green
                  - value: Aus
                    styles:
                      card:
                        - background: FireBrick
                  - value: Boot
                    styles:
                      card:
                        - background: MediumSeaGreen
                        - animation: blink 2s ease infinite
                  - value: Standby
                    styles:
                      card:
                        - background: Orange
                  - value: Enter Standby
                    styles:
                      card:
                        - background: Orange
                        - animation: blink 2s ease infinite
                  - value: Leave Standby
                    styles:
                      card:
                        - background: Orange
                        - animation: blink 2s ease infinite
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: true
                    name: Status
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                  - type: 'custom:button-card'
                    entity: sensor.Schalter_Esszimmer_MusicCast_Leistung
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: true
                    show_label: true
                    name: Leistung
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
                    state:
                      - value: 0
                        label: 0 W
                  - type: 'custom:button-card'
                    entity: sensor.Verbrauchszaehler_Schalter_Esszimmer_MusicCast_Kosten_Jahr
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: true
                    show_label: true
                    name: Jahr
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
                    state:
                      - value: 0
                        label: 0 €
                  - type: 'custom:button-card'
                    entity: switch.Schalter_Esszimmer_MusicCast_An
                    layout: vertical
                    show_name: false
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
            

            system.png

            type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:button-card'
                name: System
                show_entity_picture: true
                entity_picture: /static/myimages/nuc.png
                styles:
                  card:
                    - height: 60px
                    - padding: 0px
                    - margin: 0px
                  grid:
                    - grid-template-areas: '"n i"'
                    - grid-template-columns: 1fr 30%
                  name:
                    - justify-self: start
                    - padding-left: 20px
                    - color: '#0277bd'
                    - font-size: x-large
                  entity_picture:
                    - padding-right: 20px
                    - padding-top: 6px
                    - padding-bottom: 6px
                  img_cell:
                    - justify-content: flex-end
              - type: divider
                style:
                  height: 4px
                  background: '#0277bd'
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: CPU
                    show_icon: true
                    show_state: false
                    icon: 'mdi:raspberry-pi'
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                      grid:
                        - grid-template-areas: '"i n"'
                        - grid-template-columns: 1fr 70%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.System_CPU_Auslastung
                    scale: 13px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 80
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: CPU ∅-Last
                    show_icon: true
                    show_state: false
                    icon: 'mdi:raspberry-pi'
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                      grid:
                        - grid-template-areas: '"i n"'
                        - grid-template-columns: 1fr 70%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.System_CPU_Durchschnitt
                    scale: 13px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 80
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: Arbeitsspeicher
                    show_icon: true
                    show_state: false
                    show_label: true
                    icon: 'mdi:memory'
                    label: >-
                      [[[ return (states["sensor.System_RAM_used"].state + " GB / " +
                      states["sensor.System_RAM_total"].state + " GB") ]]]
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                        - padding: 2px
                      grid:
                        - grid-template-areas: '"i n" "i l"'
                        - grid-template-rows: min-content min-content
                        - grid-template-columns: 1fr 72%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      label:
                        - justify-self: start
                        - font-size: x-small
                        - margin: 0px
                        - font-style: italic
                        - color: '#0277bd'
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.System_RAM_usedPercent
                    scale: 13px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 75
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: 'Win10 (C:)'
                    show_icon: true
                    show_state: false
                    show_label: true
                    icon: 'mdi:harddisk'
                    label: >-
                      [[[ return (states["sensor.System_Laufwerke_C_used"].state + " GB / "
                      + states["sensor.System_Laufwerke_C_Size"].state + " GB") ]]]
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                        - padding: 2px
                      grid:
                        - grid-template-areas: '"i n" "i l"'
                        - grid-template-rows: min-content min-content
                        - grid-template-columns: 1fr 72%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      label:
                        - justify-self: start
                        - font-size: x-small
                        - margin: 0px
                        - font-style: italic
                        - color: '#0277bd'
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.System_Laufwerke_C_usedPercent
                    scale: 13px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 75
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: 'Work (D:)'
                    show_icon: true
                    show_state: false
                    show_label: true
                    icon: 'mdi:harddisk'
                    label: >-
                      [[[ return (states["sensor.System_Laufwerke_D_used"].state + " GB / "
                      + states["sensor.System_Laufwerke_D_Size"].state + " GB") ]]]
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                        - padding: 2px
                      grid:
                        - grid-template-areas: '"i n" "i l"'
                        - grid-template-rows: min-content min-content
                        - grid-template-columns: 1fr 72%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      label:
                        - justify-self: start
                        - font-size: x-small
                        - margin: 0px
                        - font-style: italic
                        - color: '#0277bd'
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.System_Laufwerke_D_usedPercent
                    scale: 13px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 75
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: 'Backup (Y:)'
                    show_icon: true
                    show_state: false
                    show_label: true
                    icon: 'mdi:harddisk'
                    label: >-
                      [[[ return (states["sensor.System_Laufwerke_Y_used"].state + " GB / "
                      + states["sensor.System_Laufwerke_Y_Size"].state + " GB") ]]]
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                        - padding: 2px
                      grid:
                        - grid-template-areas: '"i n" "i l"'
                        - grid-template-rows: min-content min-content
                        - grid-template-columns: 1fr 72%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      label:
                        - justify-self: start
                        - font-size: x-small
                        - margin: 0px
                        - font-style: italic
                        - color: '#0277bd'
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.System_Laufwerke_Y_usedPercent
                    scale: 13px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 75
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: 'Mirror (Z:)'
                    show_icon: true
                    show_state: false
                    show_label: true
                    icon: 'mdi:harddisk'
                    label: >-
                      [[[ return (states["sensor.System_Laufwerke_Z_used"].state + " GB / "
                      + states["sensor.System_Laufwerke_Z_Size"].state + " GB") ]]]
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                        - padding: 2px
                      grid:
                        - grid-template-areas: '"i n" "i l"'
                        - grid-template-rows: min-content min-content
                        - grid-template-columns: 1fr 72%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      label:
                        - justify-self: start
                        - font-size: x-small
                        - margin: 0px
                        - font-style: italic
                        - color: '#0277bd'
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.System_Laufwerke_Z_usedPercent
                    scale: 13px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 75
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: 'custom:button-card'
                entity: sensor.Schalter_Flur_Server_An
                show_name: false
                show_icon: false
                tap_action:
                  action: none
                styles:
                  card:
                    - width: 100%
                    - padding: 2px
                state:
                  - value: true
                    styles:
                      card:
                        - background: green
                  - value: false
                    styles:
                      card:
                        - background: FireBrick
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Schalter_Flur_Server_Leistung
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Leistung
                    label: |
                      [[[
                        if(entity.state > 0)
                          return (entity.state + " " + entity.attributes.unit_of_measurement);
                        else
                          return "0 " + entity.attributes.unit_of_measurement;
                      ]]]
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
                  - type: 'custom:button-card'
                    entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Verbrauch_Tag
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Heute
                    label: |
                      [[[ return entity.state * 1000 + ' Wh']]]                
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
                  - type: 'custom:button-card'
                    entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Kosten_Jahr
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Jahr
                    label: |
                      [[[
                        if(entity.state > 0)
                          return (entity.state + " " + entity.attributes.unit_of_measurement);
                        else
                          return "0 " + entity.attributes.unit_of_measurement;
                      ]]]   
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
            

            raspi.png

            type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:button-card'
                name: Raspimatic
                show_entity_picture: true
                entity_picture: /static/myimages/raspberrymatic.png
                tap_action:
                  action: url
                  url: 'http://10.0.124.189/login.htm'
                styles:
                  card:
                    - height: 60px
                    - padding: 0px
                    - margin: 0px
                  grid:
                    - grid-template-areas: '"n i"'
                    - grid-template-columns: 1fr 20%
                  name:
                    - justify-self: start
                    - padding-left: 20px
                    - color: '#0277bd'
                    - font-size: x-large
                  entity_picture:
                    - padding-right: 20px
                    - padding-top: 6px
                    - padding-bottom: 6px
                  img_cell:
                    - justify-content: flex-end
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_Verbunden
                show_name: false
                show_icon: false
                tap_action:
                  action: none
                styles:
                  card:
                    - width: 100%
                    - padding: 2px
                state:
                  - value: true
                    styles:
                      card:
                        - background: green
                  - value: false
                    styles:
                      card:
                        - background: FireBrick
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_Betriebszeit
                layout: icon_name
                name: Betriebszeit
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:clock-outline'
                label: |
                  [[[ if (entity.state == "") 
                        return "0m"; 
                      else 
                        return entity.state;
                  ]]]
                styles:
                  card:
                    - padding-top: 10px
                    - padding-bottom: 10px
                  grid:
                    - grid-template-areas: '"i n l"'
                    - grid-template-columns: 11% 1fr 19%
                  name:
                    - justify-self: start
                    - margin: 0px
                  label:
                    - justify-self: end
                    - padding-right: 20px
                  icon:
                    - color: '#0277bd'
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_upgradable
                layout: icon_name
                name: Neue Version verfügbar
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:update'
                label: |
                  [[[ if (entity.state == false) 
                        return "nein"; 
                      else 
                        return "Ja";
                  ]]]
                styles:
                  card:
                    - padding-top: 10px
                    - padding-bottom: 10px
                  grid:
                    - grid-template-areas: '"i n l"'
                    - grid-template-columns: 11% 1fr 19%
                  name:
                    - justify-self: start
                    - margin: 0px
                  label:
                    - justify-self: end
                    - padding-right: 20px
                  icon:
                    - color: |
                        [[[ 
                          if (entity.state === true) 
                            return "green";
                          else
                            return '#0277bd';
                         ]]]        
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_Alarmmeldungen
                layout: icon_name
                name: Alarmmeldungen
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:alert-octagon'
                label: |
                  [[[ if (entity.state == 0) 
                        return "0"; 
                      else 
                        return entity.state;
                  ]]]
                styles:
                  card:
                    - padding-top: 10px
                    - padding-bottom: 10px
                  grid:
                    - grid-template-areas: '"i n l"'
                    - grid-template-columns: 11% 1fr 19%
                  name:
                    - justify-self: start
                    - margin: 0px
                  label:
                    - justify-self: end
                    - padding-right: 20px
                  icon:
                    - color: |
                        [[[ 
                          if (entity.state > 0) 
                            return "FireBrick";
                          else
                            return '#0277bd';
                         ]]]
              - type: 'custom:button-card'
                entity: sensor.Netzwerk_Devices_RaspiMatic_Servicemeldungen
                layout: icon_name
                name: Servicemeldungen
                show_icon: true
                show_state: false
                show_label: true
                icon: 'mdi:alert-octagon'
                label: |
                  [[[ if (entity.state == 0) 
                        return "0"; 
                      else 
                        return entity.state;
                  ]]]
                styles:
                  card:
                    - padding-top: 10px
                    - padding-bottom: 10px
                  grid:
                    - grid-template-areas: '"i n l"'
                    - grid-template-columns: 11% 1fr 19%
                  name:
                    - justify-self: start
                    - margin: 0px
                  label:
                    - justify-self: end
                    - padding-right: 20px
                  icon:
                    - color: |
                        [[[ 
                          if (entity.state > 0) 
                            return "Gold";
                          else
                            return '#0277bd';
                         ]]]
              - type: divider
                style:
                  height: 1px
                  margin-left: 10px
                  margin-right: 10px
                  background: '#0277bd'
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: Temperatur
                    show_icon: true
                    show_state: false
                    icon: 'mdi:thermometer'
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                      grid:
                        - grid-template-areas: '"i n"'
                        - grid-template-columns: 1fr 70%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.Netzwerk_Devices_RaspiMatic_Temperatur
                    scale: 12px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 50
                        style: green
                      - value: 55
                        style: Gold
                      - value: 65
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: CPU
                    show_icon: true
                    show_state: false
                    icon: 'mdi:raspberry-pi'
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                      grid:
                        - grid-template-areas: '"i n"'
                        - grid-template-columns: 1fr 70%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.Netzwerk_Devices_RaspiMatic_Auslastung
                    scale: 12px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 80
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: Arbeitsspeicher
                    show_icon: true
                    show_state: false
                    icon: 'mdi:memory'
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                      grid:
                        - grid-template-areas: '"i n"'
                        - grid-template-columns: 1fr 70%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.Netzwerk_Devices_RaspiMatic_RamUsed
                    scale: 12px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 80
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: SD-Karte
                    show_icon: true
                    show_state: false
                    icon: 'mdi:micro-sd'
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                      grid:
                        - grid-template-areas: '"i n"'
                        - grid-template-columns: 1fr 70%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.Netzwerk_Devices_RaspiMatic_SdUsed
                    scale: 12px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 60
                        style: green
                      - value: 75
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    layout: icon_name
                    name: Duty Cycle
                    show_icon: true
                    show_state: false
                    icon: 'mdi:chart-line-variant'
                    styles:
                      card:
                        - height: 100%
                        - width: 100%
                        - min-width: 160px
                      grid:
                        - grid-template-areas: '"i n"'
                        - grid-template-columns: 1fr 70%
                      name:
                        - justify-self: start
                        - font-size: smaller
                        - margin: 0px
                      icon:
                        - color: '#0277bd'
                  - type: 'custom:bignumber-card'
                    entity: sensor.Netzwerk_Devices_RaspiMatic_DutyCycle
                    scale: 12px
                    from: left
                    min: 0
                    max: 100
                    severity:
                      - value: 50
                        style: green
                      - value: 70
                        style: Gold
                      - value: 100
                        style: FireBrick
              - type: divider
                style:
                  height: 6px
            
            

            Bar-Chart
            graph.png

            type: 'custom:vertical-stack-in-card'
            cards:
              - type: 'custom:mini-graph-card'
                entities:
                  - entity: sensor.Verbrauchszaehler_Licht_Summe_Verbrauch__Tag_Tag_1
                    color: '#44739e'
                    name: Lichter Energie gesamt
                name: Lichter Energie gesamt
                hour24: true
                points_per_hour: 0.041
                hours_to_show: 168
                decimals: 3
                show:
                  graph: bar
                  name: false
                  icon: false
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.Licht_Leistung
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Leistung
                    label: |
                      [[[
                        if(entity.state > 0)
                          return (entity.state + " " + entity.attributes.unit_of_measurement);
                        else
                          return "0 " + entity.attributes.unit_of_measurement;
                      ]]]
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
                  - type: 'custom:button-card'
                    entity: sensor.Verbrauchszaehler_Licht_Summe_Kosten_Jahr
                    layout: vertical
                    show_name: true
                    show_icon: false
                    show_state: false
                    show_label: true
                    name: Jahr
                    label: |
                      [[[
                        if(entity.state > 0)
                          return (entity.state + " " + entity.attributes.unit_of_measurement);
                        else
                          return "0 " + entity.attributes.unit_of_measurement;
                      ]]]   
                    styles:
                      card:
                        - background: '#a1a1a1'
                        - border-radius: 0px
                        - height: 50px
                      name:
                        - font-size: x-small
                        - color: '#44739e'
                        - font-weight: bold
                        - font-style: oblique
                      state:
                        - font-size: smaller
                      label:
                        - font-size: smaller
            
            

            W Offline
            W Offline
            WW1983
            wrote on last edited by
            #185

            @Scrounger
            WOW. Sieht schon sehr cool aus. Klasse Arbeit

            1 Reply Last reply
            0
            • ScroungerS Scrounger

              Hier mal ein paar Beispiele, was ich so mit lovelace realisiert habe.

              Hauptsächlich verwende ich die button-card, da diese sehr viel Flexibilität ermöglicht und man so mit manuellen entities sehr gut arbeiten kann.

              Anwesenheit
              anwesenheit.png

              type: horizontal-stack
              cards:
                - type: 'custom:vertical-stack-in-card'
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                      layout: vertical
                      show_name: true
                      show_last_changed: true
                      show_entity_picture: true
                      show_icon: false
                      tap_action:
                        action: none
                      styles:
                        label:
                          - font-size: small
                          - font-style: italic
                          - color: '#a1a1a1'
                      state:
                        - value: true
                          entity_picture: /static/myimages/tussi_presence.png
                          name: anwesend
                        - value: false
                          entity_picture: /static/myimages/tussi_presence.png
                          name: abwesend
                          styles:
                            icon:
                              - filter: grayscale(100%)
                    - type: 'custom:button-card'
                      entity: sensor.Netzwerk_Devices_Tussi_Anwesend
                      show_name: false
                      show_icon: false
                      styles:
                        card:
                          - width: 100%
                          - padding: 2px
                      state:
                        - value: true
                          styles:
                            card:
                              - background: green
                        - value: false
                          styles:
                            card:
                              - background: FireBrick
                - type: 'custom:vertical-stack-in-card'
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Netzwerk_Devices_Handy_Anwesend
                      layout: vertical
                      show_name: true
                      show_last_changed: true
                      show_entity_picture: true
                      show_icon: false
                      tap_action:
                        action: none
                      styles:
                        label:
                          - font-size: small
                          - font-style: italic
                          - color: '#a1a1a1'
                      state:
                        - value: true
                          entity_picture: /static/myimages/ich_presence.png
                          name: anwesend
                        - value: false
                          entity_picture: /static/myimages/ich_presence.png
                          name: abwesend
                          styles:
                            icon:
                              - filter: grayscale(100%)
                    - type: 'custom:button-card'
                      entity: sensor.Netzwerk_Devices_Handy_Anwesend
                      show_name: false
                      show_icon: false
                      styles:
                        card:
                          - width: 100%
                          - padding: 2px
                      state:
                        - value: true
                          styles:
                            card:
                              - background: green
                        - value: false
                          styles:
                            card:
                              - background: FireBrick
              

              Fenster
              windows.png

              type: horizontal-stack
              cards:
                - type: 'custom:vertical-stack-in-card'
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Sensoren_Fenster_Bad_Offen
                      layout: vertical
                      show_name: false
                      show_entity_picture: true
                      show_icon: false
                      show_last_changed: true
                      tap_action:
                        action: none
                      styles:
                        label:
                          - font-size: small
                          - font-style: italic
                          - color: '#a1a1a1'
                      state:
                        - value: true
                          entity_picture: /static/myimages/window_open.png
                          name: offen
                          show_last_changed: true
                        - value: false
                          entity_picture: /static/myimages/window_closed.png
                          name: geschlossen
                          show_last_changed: false
                - type: 'custom:vertical-stack-in-card'
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Sensoren_Fenster_WC_Offen
                      layout: vertical
                      show_name: false
                      show_entity_picture: true
                      show_icon: false
                      show_last_changed: true
                      tap_action:
                        action: none
                      styles:
                        label:
                          - font-size: small
                          - font-style: italic
                          - color: '#a1a1a1'
                      state:
                        - value: true
                          entity_picture: /static/myimages/window_open.png
                          name: offen
                          show_last_changed: true
                        - value: false
                          entity_picture: /static/myimages/window_closed.png
                          name: geschlossen
                          show_last_changed: false
              
              

              Licht - Schalter
              light_switch.gif

              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: 'custom:vertical-stack-in-card'
                      cards:
                        - type: entity-button
                          tap_action:
                            action: toggle
                          hold_action:
                            action: more-info
                          show_icon: true
                          show_name: true
                          entity: light.Licht_Flur_Main_An
                          name: Flur
                        - type: horizontal-stack
                          cards:
                            - type: 'custom:button-card'
                              entity: sensor.Licht_Flur_Main_Leistung
                              layout: vertical
                              show_name: true
                              show_icon: false
                              show_state: false
                              show_label: true
                              name: Leistung
                              label: |
                                [[[
                                  if(entity.state > 0)
                                    return (entity.state + " " + entity.attributes.unit_of_measurement);
                                  else
                                    return "0 " + entity.attributes.unit_of_measurement;
                                ]]]
                              styles:
                                card:
                                  - background: '#a1a1a1'
                                  - border-radius: 0px
                                  - height: 50px
                                name:
                                  - font-size: x-small
                                  - color: '#44739e'
                                  - font-weight: bold
                                  - font-style: oblique
                                state:
                                  - font-size: smaller
                                label:
                                  - font-size: smaller
                            - type: 'custom:button-card'
                              entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Verbrauch_Tag
                              layout: vertical
                              show_name: true
                              show_icon: false
                              show_state: false
                              show_label: true
                              name: Heute
                              label: |
                                [[[ return entity.state * 1000 + ' Wh']]]                
                              styles:
                                card:
                                  - background: '#a1a1a1'
                                  - border-radius: 0px
                                  - height: 50px
                                name:
                                  - font-size: x-small
                                  - color: '#44739e'
                                  - font-weight: bold
                                  - font-style: oblique
                                state:
                                  - font-size: smaller
                                label:
                                  - font-size: smaller
                            - type: 'custom:button-card'
                              entity: sensor.Verbrauchszaehler_Licht_Flur_Main_Kosten_Jahr
                              layout: vertical
                              show_name: true
                              show_icon: false
                              show_state: false
                              show_label: true
                              name: Jahr
                              label: |
                                [[[
                                  if(entity.state > 0)
                                    return (entity.state + " " + entity.attributes.unit_of_measurement);
                                  else
                                    return "0 " + entity.attributes.unit_of_measurement;
                                ]]]   
                              styles:
                                card:
                                  - background: '#a1a1a1'
                                  - border-radius: 0px
                                  - height: 50px
                                name:
                                  - font-size: x-small
                                  - color: '#44739e'
                                  - font-weight: bold
                                  - font-style: oblique
                                state:
                                  - font-size: smaller
                                label:
                                  - font-size: smaller
                    - type: 'custom:vertical-stack-in-card'
                      cards:
                        - type: entity-button
                          tap_action:
                            action: toggle
                          hold_action:
                            action: more-info
                          show_icon: true
                          show_name: true
                          entity: light.Licht_Flur_Nische_An
                          name: Nische
                        - type: horizontal-stack
                          cards:
                            - type: 'custom:button-card'
                              entity: sensor.Licht_Flur_Nische_Leistung
                              layout: vertical
                              show_name: true
                              show_icon: false
                              show_state: false
                              show_label: true
                              name: Leistung
                              label: |
                                [[[
                                  if(entity.state > 0)
                                    return (entity.state + " " + entity.attributes.unit_of_measurement);
                                  else
                                    return "0 " + entity.attributes.unit_of_measurement;
                                ]]]
                              styles:
                                card:
                                  - background: '#a1a1a1'
                                  - border-radius: 0px
                                  - height: 50px
                                name:
                                  - font-size: x-small
                                  - color: '#44739e'
                                  - font-weight: bold
                                  - font-style: oblique
                                state:
                                  - font-size: smaller
                                label:
                                  - font-size: smaller
                            - type: 'custom:button-card'
                              entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Verbrauch_Tag
                              layout: vertical
                              show_name: true
                              show_icon: false
                              show_state: false
                              show_label: true
                              name: Heute
                              label: |
                                [[[ return entity.state * 1000 + ' Wh']]]                
                              styles:
                                card:
                                  - background: '#a1a1a1'
                                  - border-radius: 0px
                                  - height: 50px
                                name:
                                  - font-size: x-small
                                  - color: '#44739e'
                                  - font-weight: bold
                                  - font-style: oblique
                                state:
                                  - font-size: smaller
                                label:
                                  - font-size: smaller
                            - type: 'custom:button-card'
                              entity: sensor.Verbrauchszaehler_Licht_Flur_Nische_Kosten_Jahr
                              layout: vertical
                              show_name: true
                              show_icon: false
                              show_state: false
                              show_label: true
                              name: Jahr
                              label: |
                                [[[
                                  if(entity.state > 0)
                                    return (entity.state + " " + entity.attributes.unit_of_measurement);
                                  else
                                    return "0 " + entity.attributes.unit_of_measurement;
                                ]]]   
                              styles:
                                card:
                                  - background: '#a1a1a1'
                                  - border-radius: 0px
                                  - height: 50px
                                name:
                                  - font-size: x-small
                                  - color: '#44739e'
                                  - font-weight: bold
                                  - font-style: oblique
                                state:
                                  - font-size: smaller
                                label:
                                  - font-size: smaller
              

              Licht - Dimmer
              light_dimmer.gif

              type: 'custom:vertical-stack-in-card'
              title: Esszimmer
              cards:
                - type: horizontal-stack
                  cards:
                    - type: light
                      entity: light.Licht_Esszimmer_Links_Dimmer
                      name: Links
                    - type: light
                      entity: light.Licht_Esszimmer_Rechts_Dimmer
                      name: Rechts
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Licht_Esszimmer_Gruppe_SummeLeistung
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Leistung
                      label: |
                        [[[
                          if(entity.state > 0)
                            return (entity.state + " " + entity.attributes.unit_of_measurement);
                          else
                            return "0 " + entity.attributes.unit_of_measurement;
                        ]]]
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
                    - type: 'custom:button-card'
                      entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Verbrauch_Tag
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Heute
                      label: |
                        [[[ return entity.state * 1000 + ' Wh']]]                
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
                    - type: 'custom:button-card'
                      entity: sensor.Verbrauchszaehler_Licht_Esszimmer_Gruppe_Kosten_Jahr
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Jahr
                      label: |
                        [[[
                          if(entity.state > 0)
                            return (entity.state + " " + entity.attributes.unit_of_measurement);
                          else
                            return "0 " + entity.attributes.unit_of_measurement;
                        ]]]   
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
              

              Geräte
              devices.png

              type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:button-card'
                  entity: switch.Netzwerk_Devices_MusicCast_Esszimmer_An
                  layout: vertical
                  show_name: false
                  show_entity_picture: true
                  tap_action:
                    action: toggle
                  size: 30%
                  state:
                    - value: 'on'
                      entity_picture: /static/myimages/MusicCast-WX-030.png
                      styles:
                        card:
                          - background: LemonChiffon
                    - value: 'off'
                      entity_picture: /static/myimages/MusicCast-WX-030.png
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
                  show_name: false
                  show_icon: false
                  tap_action:
                    action: none
                  styles:
                    card:
                      - width: 100%
                      - padding: 2px
                      - margin-top: '-10px'
                  state:
                    - value: An
                      styles:
                        card:
                          - background: green
                    - value: Aus
                      styles:
                        card:
                          - background: FireBrick
                    - value: Boot
                      styles:
                        card:
                          - background: MediumSeaGreen
                          - animation: blink 2s ease infinite
                    - value: Standby
                      styles:
                        card:
                          - background: Orange
                    - value: Enter Standby
                      styles:
                        card:
                          - background: Orange
                          - animation: blink 2s ease infinite
                    - value: Leave Standby
                      styles:
                        card:
                          - background: Orange
                          - animation: blink 2s ease infinite
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Netzwerk_Devices_MusicCast_Esszimmer_PowerStatus
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: true
                      name: Status
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                    - type: 'custom:button-card'
                      entity: sensor.Schalter_Esszimmer_MusicCast_Leistung
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: true
                      show_label: true
                      name: Leistung
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
                      state:
                        - value: 0
                          label: 0 W
                    - type: 'custom:button-card'
                      entity: sensor.Verbrauchszaehler_Schalter_Esszimmer_MusicCast_Kosten_Jahr
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: true
                      show_label: true
                      name: Jahr
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
                      state:
                        - value: 0
                          label: 0 €
                    - type: 'custom:button-card'
                      entity: switch.Schalter_Esszimmer_MusicCast_An
                      layout: vertical
                      show_name: false
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
              

              system.png

              type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:button-card'
                  name: System
                  show_entity_picture: true
                  entity_picture: /static/myimages/nuc.png
                  styles:
                    card:
                      - height: 60px
                      - padding: 0px
                      - margin: 0px
                    grid:
                      - grid-template-areas: '"n i"'
                      - grid-template-columns: 1fr 30%
                    name:
                      - justify-self: start
                      - padding-left: 20px
                      - color: '#0277bd'
                      - font-size: x-large
                    entity_picture:
                      - padding-right: 20px
                      - padding-top: 6px
                      - padding-bottom: 6px
                    img_cell:
                      - justify-content: flex-end
                - type: divider
                  style:
                    height: 4px
                    background: '#0277bd'
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: CPU
                      show_icon: true
                      show_state: false
                      icon: 'mdi:raspberry-pi'
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                        grid:
                          - grid-template-areas: '"i n"'
                          - grid-template-columns: 1fr 70%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.System_CPU_Auslastung
                      scale: 13px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 80
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: CPU ∅-Last
                      show_icon: true
                      show_state: false
                      icon: 'mdi:raspberry-pi'
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                        grid:
                          - grid-template-areas: '"i n"'
                          - grid-template-columns: 1fr 70%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.System_CPU_Durchschnitt
                      scale: 13px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 80
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: Arbeitsspeicher
                      show_icon: true
                      show_state: false
                      show_label: true
                      icon: 'mdi:memory'
                      label: >-
                        [[[ return (states["sensor.System_RAM_used"].state + " GB / " +
                        states["sensor.System_RAM_total"].state + " GB") ]]]
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                          - padding: 2px
                        grid:
                          - grid-template-areas: '"i n" "i l"'
                          - grid-template-rows: min-content min-content
                          - grid-template-columns: 1fr 72%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        label:
                          - justify-self: start
                          - font-size: x-small
                          - margin: 0px
                          - font-style: italic
                          - color: '#0277bd'
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.System_RAM_usedPercent
                      scale: 13px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 75
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: 'Win10 (C:)'
                      show_icon: true
                      show_state: false
                      show_label: true
                      icon: 'mdi:harddisk'
                      label: >-
                        [[[ return (states["sensor.System_Laufwerke_C_used"].state + " GB / "
                        + states["sensor.System_Laufwerke_C_Size"].state + " GB") ]]]
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                          - padding: 2px
                        grid:
                          - grid-template-areas: '"i n" "i l"'
                          - grid-template-rows: min-content min-content
                          - grid-template-columns: 1fr 72%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        label:
                          - justify-self: start
                          - font-size: x-small
                          - margin: 0px
                          - font-style: italic
                          - color: '#0277bd'
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.System_Laufwerke_C_usedPercent
                      scale: 13px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 75
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: 'Work (D:)'
                      show_icon: true
                      show_state: false
                      show_label: true
                      icon: 'mdi:harddisk'
                      label: >-
                        [[[ return (states["sensor.System_Laufwerke_D_used"].state + " GB / "
                        + states["sensor.System_Laufwerke_D_Size"].state + " GB") ]]]
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                          - padding: 2px
                        grid:
                          - grid-template-areas: '"i n" "i l"'
                          - grid-template-rows: min-content min-content
                          - grid-template-columns: 1fr 72%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        label:
                          - justify-self: start
                          - font-size: x-small
                          - margin: 0px
                          - font-style: italic
                          - color: '#0277bd'
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.System_Laufwerke_D_usedPercent
                      scale: 13px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 75
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: 'Backup (Y:)'
                      show_icon: true
                      show_state: false
                      show_label: true
                      icon: 'mdi:harddisk'
                      label: >-
                        [[[ return (states["sensor.System_Laufwerke_Y_used"].state + " GB / "
                        + states["sensor.System_Laufwerke_Y_Size"].state + " GB") ]]]
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                          - padding: 2px
                        grid:
                          - grid-template-areas: '"i n" "i l"'
                          - grid-template-rows: min-content min-content
                          - grid-template-columns: 1fr 72%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        label:
                          - justify-self: start
                          - font-size: x-small
                          - margin: 0px
                          - font-style: italic
                          - color: '#0277bd'
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.System_Laufwerke_Y_usedPercent
                      scale: 13px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 75
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: 'Mirror (Z:)'
                      show_icon: true
                      show_state: false
                      show_label: true
                      icon: 'mdi:harddisk'
                      label: >-
                        [[[ return (states["sensor.System_Laufwerke_Z_used"].state + " GB / "
                        + states["sensor.System_Laufwerke_Z_Size"].state + " GB") ]]]
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                          - padding: 2px
                        grid:
                          - grid-template-areas: '"i n" "i l"'
                          - grid-template-rows: min-content min-content
                          - grid-template-columns: 1fr 72%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        label:
                          - justify-self: start
                          - font-size: x-small
                          - margin: 0px
                          - font-style: italic
                          - color: '#0277bd'
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.System_Laufwerke_Z_usedPercent
                      scale: 13px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 75
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: 'custom:button-card'
                  entity: sensor.Schalter_Flur_Server_An
                  show_name: false
                  show_icon: false
                  tap_action:
                    action: none
                  styles:
                    card:
                      - width: 100%
                      - padding: 2px
                  state:
                    - value: true
                      styles:
                        card:
                          - background: green
                    - value: false
                      styles:
                        card:
                          - background: FireBrick
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Schalter_Flur_Server_Leistung
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Leistung
                      label: |
                        [[[
                          if(entity.state > 0)
                            return (entity.state + " " + entity.attributes.unit_of_measurement);
                          else
                            return "0 " + entity.attributes.unit_of_measurement;
                        ]]]
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
                    - type: 'custom:button-card'
                      entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Verbrauch_Tag
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Heute
                      label: |
                        [[[ return entity.state * 1000 + ' Wh']]]                
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
                    - type: 'custom:button-card'
                      entity: sensor.Verbrauchszaehler_Schalter_Flur_Server_Kosten_Jahr
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Jahr
                      label: |
                        [[[
                          if(entity.state > 0)
                            return (entity.state + " " + entity.attributes.unit_of_measurement);
                          else
                            return "0 " + entity.attributes.unit_of_measurement;
                        ]]]   
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
              

              raspi.png

              type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:button-card'
                  name: Raspimatic
                  show_entity_picture: true
                  entity_picture: /static/myimages/raspberrymatic.png
                  tap_action:
                    action: url
                    url: 'http://10.0.124.189/login.htm'
                  styles:
                    card:
                      - height: 60px
                      - padding: 0px
                      - margin: 0px
                    grid:
                      - grid-template-areas: '"n i"'
                      - grid-template-columns: 1fr 20%
                    name:
                      - justify-self: start
                      - padding-left: 20px
                      - color: '#0277bd'
                      - font-size: x-large
                    entity_picture:
                      - padding-right: 20px
                      - padding-top: 6px
                      - padding-bottom: 6px
                    img_cell:
                      - justify-content: flex-end
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_Verbunden
                  show_name: false
                  show_icon: false
                  tap_action:
                    action: none
                  styles:
                    card:
                      - width: 100%
                      - padding: 2px
                  state:
                    - value: true
                      styles:
                        card:
                          - background: green
                    - value: false
                      styles:
                        card:
                          - background: FireBrick
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_Betriebszeit
                  layout: icon_name
                  name: Betriebszeit
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:clock-outline'
                  label: |
                    [[[ if (entity.state == "") 
                          return "0m"; 
                        else 
                          return entity.state;
                    ]]]
                  styles:
                    card:
                      - padding-top: 10px
                      - padding-bottom: 10px
                    grid:
                      - grid-template-areas: '"i n l"'
                      - grid-template-columns: 11% 1fr 19%
                    name:
                      - justify-self: start
                      - margin: 0px
                    label:
                      - justify-self: end
                      - padding-right: 20px
                    icon:
                      - color: '#0277bd'
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_upgradable
                  layout: icon_name
                  name: Neue Version verfügbar
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:update'
                  label: |
                    [[[ if (entity.state == false) 
                          return "nein"; 
                        else 
                          return "Ja";
                    ]]]
                  styles:
                    card:
                      - padding-top: 10px
                      - padding-bottom: 10px
                    grid:
                      - grid-template-areas: '"i n l"'
                      - grid-template-columns: 11% 1fr 19%
                    name:
                      - justify-self: start
                      - margin: 0px
                    label:
                      - justify-self: end
                      - padding-right: 20px
                    icon:
                      - color: |
                          [[[ 
                            if (entity.state === true) 
                              return "green";
                            else
                              return '#0277bd';
                           ]]]        
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_Alarmmeldungen
                  layout: icon_name
                  name: Alarmmeldungen
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:alert-octagon'
                  label: |
                    [[[ if (entity.state == 0) 
                          return "0"; 
                        else 
                          return entity.state;
                    ]]]
                  styles:
                    card:
                      - padding-top: 10px
                      - padding-bottom: 10px
                    grid:
                      - grid-template-areas: '"i n l"'
                      - grid-template-columns: 11% 1fr 19%
                    name:
                      - justify-self: start
                      - margin: 0px
                    label:
                      - justify-self: end
                      - padding-right: 20px
                    icon:
                      - color: |
                          [[[ 
                            if (entity.state > 0) 
                              return "FireBrick";
                            else
                              return '#0277bd';
                           ]]]
                - type: 'custom:button-card'
                  entity: sensor.Netzwerk_Devices_RaspiMatic_Servicemeldungen
                  layout: icon_name
                  name: Servicemeldungen
                  show_icon: true
                  show_state: false
                  show_label: true
                  icon: 'mdi:alert-octagon'
                  label: |
                    [[[ if (entity.state == 0) 
                          return "0"; 
                        else 
                          return entity.state;
                    ]]]
                  styles:
                    card:
                      - padding-top: 10px
                      - padding-bottom: 10px
                    grid:
                      - grid-template-areas: '"i n l"'
                      - grid-template-columns: 11% 1fr 19%
                    name:
                      - justify-self: start
                      - margin: 0px
                    label:
                      - justify-self: end
                      - padding-right: 20px
                    icon:
                      - color: |
                          [[[ 
                            if (entity.state > 0) 
                              return "Gold";
                            else
                              return '#0277bd';
                           ]]]
                - type: divider
                  style:
                    height: 1px
                    margin-left: 10px
                    margin-right: 10px
                    background: '#0277bd'
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: Temperatur
                      show_icon: true
                      show_state: false
                      icon: 'mdi:thermometer'
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                        grid:
                          - grid-template-areas: '"i n"'
                          - grid-template-columns: 1fr 70%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.Netzwerk_Devices_RaspiMatic_Temperatur
                      scale: 12px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 50
                          style: green
                        - value: 55
                          style: Gold
                        - value: 65
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: CPU
                      show_icon: true
                      show_state: false
                      icon: 'mdi:raspberry-pi'
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                        grid:
                          - grid-template-areas: '"i n"'
                          - grid-template-columns: 1fr 70%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.Netzwerk_Devices_RaspiMatic_Auslastung
                      scale: 12px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 80
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: Arbeitsspeicher
                      show_icon: true
                      show_state: false
                      icon: 'mdi:memory'
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                        grid:
                          - grid-template-areas: '"i n"'
                          - grid-template-columns: 1fr 70%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.Netzwerk_Devices_RaspiMatic_RamUsed
                      scale: 12px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 80
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: SD-Karte
                      show_icon: true
                      show_state: false
                      icon: 'mdi:micro-sd'
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                        grid:
                          - grid-template-areas: '"i n"'
                          - grid-template-columns: 1fr 70%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.Netzwerk_Devices_RaspiMatic_SdUsed
                      scale: 12px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 60
                          style: green
                        - value: 75
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      layout: icon_name
                      name: Duty Cycle
                      show_icon: true
                      show_state: false
                      icon: 'mdi:chart-line-variant'
                      styles:
                        card:
                          - height: 100%
                          - width: 100%
                          - min-width: 160px
                        grid:
                          - grid-template-areas: '"i n"'
                          - grid-template-columns: 1fr 70%
                        name:
                          - justify-self: start
                          - font-size: smaller
                          - margin: 0px
                        icon:
                          - color: '#0277bd'
                    - type: 'custom:bignumber-card'
                      entity: sensor.Netzwerk_Devices_RaspiMatic_DutyCycle
                      scale: 12px
                      from: left
                      min: 0
                      max: 100
                      severity:
                        - value: 50
                          style: green
                        - value: 70
                          style: Gold
                        - value: 100
                          style: FireBrick
                - type: divider
                  style:
                    height: 6px
              
              

              Bar-Chart
              graph.png

              type: 'custom:vertical-stack-in-card'
              cards:
                - type: 'custom:mini-graph-card'
                  entities:
                    - entity: sensor.Verbrauchszaehler_Licht_Summe_Verbrauch__Tag_Tag_1
                      color: '#44739e'
                      name: Lichter Energie gesamt
                  name: Lichter Energie gesamt
                  hour24: true
                  points_per_hour: 0.041
                  hours_to_show: 168
                  decimals: 3
                  show:
                    graph: bar
                    name: false
                    icon: false
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.Licht_Leistung
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Leistung
                      label: |
                        [[[
                          if(entity.state > 0)
                            return (entity.state + " " + entity.attributes.unit_of_measurement);
                          else
                            return "0 " + entity.attributes.unit_of_measurement;
                        ]]]
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
                    - type: 'custom:button-card'
                      entity: sensor.Verbrauchszaehler_Licht_Summe_Kosten_Jahr
                      layout: vertical
                      show_name: true
                      show_icon: false
                      show_state: false
                      show_label: true
                      name: Jahr
                      label: |
                        [[[
                          if(entity.state > 0)
                            return (entity.state + " " + entity.attributes.unit_of_measurement);
                          else
                            return "0 " + entity.attributes.unit_of_measurement;
                        ]]]   
                      styles:
                        card:
                          - background: '#a1a1a1'
                          - border-radius: 0px
                          - height: 50px
                        name:
                          - font-size: x-small
                          - color: '#44739e'
                          - font-weight: bold
                          - font-style: oblique
                        state:
                          - font-size: smaller
                        label:
                          - font-size: smaller
              
              

              simatecS Offline
              simatecS Offline
              simatec
              Developer Most Active
              wrote on last edited by
              #186

              @Scrounger sagte in [Aufruf] Test lovelace Adapter:

              Hauptsächlich verwende ich die button-card, da diese sehr viel Flexibilität ermöglicht und man so mit manuellen entities sehr gut arbeiten kann.

              Wie hast du die button-card eingebunden?
              Wenn ich sie per Drag and Drop in die Custom Cards lege, bekomme ich den Fehler

              Custom element doesn't exist: vertical-stack-in-card
              
              • Besuche meine Github Seite
              • Beitrag hat geholfen oder willst du mich unterstützen
              • HowTo Restore ioBroker
              sigi234S 1 Reply Last reply
              0
              • simatecS simatec

                @Scrounger sagte in [Aufruf] Test lovelace Adapter:

                Hauptsächlich verwende ich die button-card, da diese sehr viel Flexibilität ermöglicht und man so mit manuellen entities sehr gut arbeiten kann.

                Wie hast du die button-card eingebunden?
                Wenn ich sie per Drag and Drop in die Custom Cards lege, bekomme ich den Fehler

                Custom element doesn't exist: vertical-stack-in-card
                
                sigi234S Online
                sigi234S Online
                sigi234
                Forum Testing Most Active
                wrote on last edited by
                #187

                @simatec sagte in [Aufruf] Test lovelace Adapter:

                @Scrounger sagte in [Aufruf] Test lovelace Adapter:

                Hauptsächlich verwende ich die button-card, da diese sehr viel Flexibilität ermöglicht und man so mit manuellen entities sehr gut arbeiten kann.

                Wie hast du die button-card eingebunden?
                Wenn ich sie per Drag and Drop in die Custom Cards lege, bekomme ich den Fehler

                Custom element doesn't exist: vertical-stack-in-card
                

                https://github.com/custom-cards/vertical-stack-in-card

                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                Immer Daten sichern!

                1 Reply Last reply
                0
                • simatecS Offline
                  simatecS Offline
                  simatec
                  Developer Most Active
                  wrote on last edited by
                  #188

                  Danke die fehlte ... 😉

                  • Besuche meine Github Seite
                  • Beitrag hat geholfen oder willst du mich unterstützen
                  • HowTo Restore ioBroker
                  sigi234S 1 Reply Last reply
                  0
                  • simatecS simatec

                    Danke die fehlte ... 😉

                    sigi234S Online
                    sigi234S Online
                    sigi234
                    Forum Testing Most Active
                    wrote on last edited by sigi234
                    #189

                    @simatec sagte in [Aufruf] Test lovelace Adapter:

                    Danke die fehlte ... 😉

                    Bitte, wo gehört die JS Datei hineinkopiert?
                    Habe ich schon mal gemacht, weis nicht mehr wie.

                    Aha,

                    Drag and drop the custom cards files here

                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                    Immer Daten sichern!

                    X 1 Reply Last reply
                    0
                    • W Offline
                      W Offline
                      WW1983
                      wrote on last edited by
                      #190

                      Ich kann derzeit keine manuellen Entitys erstellen. Der erkennt bei mir nur die, die durch den TypDetector erstellt wurden. Sobald ich die Raum und Funktion raus nehme und einen Datenpunkt versuche manuell zuzuweisen, taucht der nicht mehr auf.

                      Hat zufällig jemand das selbe Problem?

                      1 Reply Last reply
                      0
                      • E Offline
                        E Offline
                        ecki945
                        wrote on last edited by
                        #191

                        @Scrounger Danke für die Hilfe. So langsam blicke ich da durch wie das ganze funktioniert.👍

                        1 Reply Last reply
                        0
                        • sigi234S sigi234

                          @Scrounger

                          Tussi anwesend ist ein interessanter DP😀

                          ScroungerS Offline
                          ScroungerS Offline
                          Scrounger
                          Developer
                          wrote on last edited by
                          #192

                          @sigi234 sagte in [Aufruf] Test lovelace Adapter:

                          @Scrounger

                          Tussi anwesend ist ein interessanter DP😀

                          Dann drück mal die Daumen das es nie einen Bug geben wird der den DP Namen auf dem Tablet anzeigt 😁

                          Sodele Burger is back 😉
                          Hab gerade die neuste Version von lovelace kompeliert, wer testen will, kann aus meinem Fork installieren:
                          https://github.com/Scrounger/ioBroker.lovelace

                          burger_is_back.png

                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                          sigi234S 1 Reply Last reply
                          0
                          • ScroungerS Scrounger

                            @sigi234 sagte in [Aufruf] Test lovelace Adapter:

                            @Scrounger

                            Tussi anwesend ist ein interessanter DP😀

                            Dann drück mal die Daumen das es nie einen Bug geben wird der den DP Namen auf dem Tablet anzeigt 😁

                            Sodele Burger is back 😉
                            Hab gerade die neuste Version von lovelace kompeliert, wer testen will, kann aus meinem Fork installieren:
                            https://github.com/Scrounger/ioBroker.lovelace

                            burger_is_back.png

                            sigi234S Online
                            sigi234S Online
                            sigi234
                            Forum Testing Most Active
                            wrote on last edited by sigi234
                            #193

                            @Scrounger sagte in [Aufruf] Test lovelace Adapter:

                            @sigi234 sagte in [Aufruf] Test lovelace Adapter:

                            @Scrounger

                            Sodele Burger is back 😉
                            Hab gerade die neuste Version von lovelace kompeliert, wer testen will, kann aus meinem Fork installieren:
                            https://github.com/Scrounger/ioBroker.lovelace

                            lovelace.0	2019-09-19 08:00:28.091	info	http server listening on port 8091
                            lovelace.0	2019-09-19 08:00:28.070	info	starting. Version 0.1.5 in C:/ioBroker/node_modules/iobroker.lovelace, node: v10.16.3
                            lovelace.0	2019-09-19 08:00:08.760	warn	no max value for light object 'alexa2.0.Smart-Home-Devices' defined -> using fallback max = 100
                            lovelace.0	2019-09-19 07:58:06.919	warn	Unknown entity: undefined
                            lovelace.0	2019-09-19 07:58:06.918	warn	Unknown entity: undefined
                            lovelace.0	2019-09-19 07:58:06.914	warn	Unknown entity: undefined
                            lovelace.0	2019-09-19 07:58:06.911	warn	Unknown entity: undefined
                            lovelace.0	2019-09-19 07:58:06.911	warn	Unknown entity: undefined
                            lovelace.0	2019-09-19 07:57:46.322	warn	HASS auth_invalid: 20cc14336299e1f5650c87028ad11e40a76459f98008c416542d6c1b521f3ea6
                            lovelace.0	2019-09-19 07:57:45.778	warn	no max value for light object 'alexa2.0.Smart-Home-Devices' defined -> using fallback max = 100
                            lovelace.0	2019-09-19 07:57:43.253	info	http server listening on port 8091
                            

                            Ok, wie bekomme ich die alten ID weg?

                            Screenshot (4132).png

                            Wenn ich auf die UI klicke muss ich mich jedes mal anmelden?

                            Screenshot (4134).png

                            Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                            Immer Daten sichern!

                            1 Reply Last reply
                            0
                            • W Offline
                              W Offline
                              WW1983
                              wrote on last edited by
                              #194

                              Hat hier jemand iobroker auf einer Proxmox VM laufen? Ich habe Probleme mit Lovelace und finde die Ursache nicht

                              marcusklM 1 Reply Last reply
                              0
                              • W WW1983

                                Hat hier jemand iobroker auf einer Proxmox VM laufen? Ich habe Probleme mit Lovelace und finde die Ursache nicht

                                marcusklM Offline
                                marcusklM Offline
                                marcuskl
                                wrote on last edited by
                                #195

                                @WW1983 sagte in [Aufruf] Test lovelace Adapter:

                                Hat hier jemand iobroker auf einer Proxmox VM laufen? Ich habe Probleme mit Lovelace und finde die Ursache nicht

                                Ich habe es in einer VM.

                                Host: Intel Nuc6cayh (16GB Ram, 240GB SSD) mit Proxmox.

                                Iobroker VM, InfluxDB LXC, Pihole LXC, Tasmoadmin LXC, Easy2connect VM

                                1 Reply Last reply
                                0
                                • marcusklM Offline
                                  marcusklM Offline
                                  marcuskl
                                  wrote on last edited by
                                  #196

                                  Wenn ich eine Manual Card erstelle oder bei einer anderen Card und ich in die Raw von der Card bin, stockt Lovelace so arg, dass ich nichts mehr machen kann.
                                  Woran liegt das ?

                                  Screenshot_20190924-182016_Chrome.jpg

                                  Wie auf dem Bild z.B. wenn ich jetzt ein Type hinzufügen will oder icon etc. geht auf einmal nichts mehr.

                                  Host: Intel Nuc6cayh (16GB Ram, 240GB SSD) mit Proxmox.

                                  Iobroker VM, InfluxDB LXC, Pihole LXC, Tasmoadmin LXC, Easy2connect VM

                                  1 Reply Last reply
                                  0
                                  • W Offline
                                    W Offline
                                    WW1983
                                    wrote on last edited by
                                    #197

                                    Kann mir jemand sagen wo mein Fehler liegt. Bekomme die vertical-stack-in-Card nicht hin. DIe js habe ich bereits eingefügt:

                                    Anmerkung 2019-09-24 200119.png

                                    type: 'custom:vertical-stack-in-card'
                                    title: Wohnzimmer
                                    cards:
                                      - type: horizontal-stack
                                        cards:
                                          - type: light
                                            entity: light.WZ_Lampe_am_Sofa_level
                                          - type: light
                                            entity: light.WZ_Sideboard_level
                                    
                                    1 Reply Last reply
                                    0
                                    • sigi234S sigi234

                                      @simatec sagte in [Aufruf] Test lovelace Adapter:

                                      Danke die fehlte ... 😉

                                      Bitte, wo gehört die JS Datei hineinkopiert?
                                      Habe ich schon mal gemacht, weis nicht mehr wie.

                                      Aha,

                                      Drag and drop the custom cards files here

                                      X Offline
                                      X Offline
                                      xADDRx
                                      wrote on last edited by
                                      #198

                                      @sigi234 Hallo Sigi,

                                      wo hast du die Datei genau hinkopiert?

                                      1. Install the vertical-style-card card by copying vertical-style-card.js to <config directory>/www/vertical-style-card.js

                                      Auf Github steht auch:

                                      1. Link vertical-stack-in-card inside your ui-lovelace.yaml

                                      resources:

                                      • url: /local/vertical-stack-in-card.js?v=0.1.3
                                        type: js

                                      Was ist damit gemeint? Ich finde keine ui-lovelace.yaml....

                                      Kannst du mir bitte eventuell eine kurze Anleitung dazu geben?

                                      Gruß Ben

                                      Sonos, Intel Nuc, Iobroker Pro, Proxmox, IPad Air (Wand), Vis, Xiaomi, Devolo, Bose, Philips Hue, Instar, Synology

                                      W 1 Reply Last reply
                                      0
                                      • X xADDRx

                                        @sigi234 Hallo Sigi,

                                        wo hast du die Datei genau hinkopiert?

                                        1. Install the vertical-style-card card by copying vertical-style-card.js to <config directory>/www/vertical-style-card.js

                                        Auf Github steht auch:

                                        1. Link vertical-stack-in-card inside your ui-lovelace.yaml

                                        resources:

                                        • url: /local/vertical-stack-in-card.js?v=0.1.3
                                          type: js

                                        Was ist damit gemeint? Ich finde keine ui-lovelace.yaml....

                                        Kannst du mir bitte eventuell eine kurze Anleitung dazu geben?

                                        Gruß Ben

                                        W Offline
                                        W Offline
                                        WW1983
                                        wrote on last edited by
                                        #199

                                        @xADDRx

                                        Wenn du auf die Einstellung der Instanz Lovelace gehst, da gibt es einen Reiter "Custom Cards". Dort per Drag&Drop reinziehen und die Instanz neu starten. Dann wir die automatisch hochgeladen

                                        X 1 Reply Last reply
                                        0
                                        • W WW1983

                                          @xADDRx

                                          Wenn du auf die Einstellung der Instanz Lovelace gehst, da gibt es einen Reiter "Custom Cards". Dort per Drag&Drop reinziehen und die Instanz neu starten. Dann wir die automatisch hochgeladen

                                          X Offline
                                          X Offline
                                          xADDRx
                                          wrote on last edited by
                                          #200

                                          @WW1983 Danke!

                                          Sonos, Intel Nuc, Iobroker Pro, Proxmox, IPad Air (Wand), Vis, Xiaomi, Devolo, Bose, Philips Hue, Instar, Synology

                                          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

                                          752

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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