Community Forum

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

NEWS

UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
A
apollon77

48

3

8.2k
Monatsrückblick – September 2025
B
Bluefox

13

1

1.9k
Neues Video "KI im Smart Home" - ioBroker plus n8n
B
Bluefox

15

1

2.2k

Test Adapter lovelace v0.2.x

Gesperrt Tester

1.1k Beiträge 131 Kommentatoren 383.0k Aufrufe 99 Watching

S 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

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

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

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

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

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

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

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

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

sigi234

Forum Testing Most Active

schrieb am

#184

@Scrounger

Tussi anwesend ist ein interessanter DP:grinning:

S 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

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

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

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

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

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

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

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

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

WW1983

schrieb am

#185

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

S 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

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

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

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

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

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

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

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

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

simatec

Developer Most Active

schrieb am

#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

S 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
```
S Online
S Online
sigi234
Forum Testing Most Active
schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

0
S Offline
S Offline
simatec
Developer Most Active
schrieb am zuletzt editiert von

#188

Danke die fehlte ... ;-)
Besuche meine Github Seite

Beitrag hat geholfen oder willst du mich unterstützen

HowTo Restore ioBroker
S 1 Antwort Letzte Antwort

0
S simatec

Danke die fehlte ... ;-)
S Online
S Online
sigi234
Forum Testing Most Active
schrieb am zuletzt editiert von 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 Antwort Letzte Antwort

0
W Offline
W Offline
WW1983

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

0
E Offline
E Offline
ecki945

schrieb am zuletzt editiert von

#191

@Scrounger Danke für die Hilfe. So langsam blicke ich da durch wie das ganze funktioniert.:+1:
1 Antwort Letzte Antwort

0
S sigi234

@Scrounger

Tussi anwesend ist ein interessanter DP:grinning:
S Offline
S Offline
Scrounger
Developer
schrieb am zuletzt editiert von

#192

@sigi234 sagte in [Aufruf] Test lovelace Adapter:

@Scrounger

Tussi anwesend ist ein interessanter DP:grinning:

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

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
<a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

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

0

S Scrounger

@sigi234 sagte in [Aufruf] Test lovelace Adapter:

@Scrounger

Tussi anwesend ist ein interessanter DP:grinning:

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

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

sigi234

Forum Testing Most Active

schrieb am

#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

W Offline
W Offline
WW1983

schrieb am zuletzt editiert von

#194

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

0
W WW1983

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

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

0
M Offline
M Offline
marcuskl

schrieb am zuletzt editiert von

#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 ?

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 Antwort Letzte Antwort

0

WW1983

schrieb am

#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

S 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

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

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

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

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

schrieb am zuletzt editiert von

#200

@WW1983 Danke!
Sonos, Intel Nuc, Iobroker Pro, Proxmox, IPad Air (Wand), Vis, Xiaomi, Devolo, Bose, Philips Hue, Instar, Synology
1 Antwort Letzte Antwort

0
X Offline
X Offline
xADDRx

schrieb am zuletzt editiert von

#201

Hallo,

ich habe auf meinem Surface Pro etwas mit lovelace gearbeitet, dabei habe ich das gemacht:

Nun wollte ich das ganze auf meinem Ipad air anschauen, jedoch sieht das hier anders aus...warum?
Sonos, Intel Nuc, Iobroker Pro, Proxmox, IPad Air (Wand), Vis, Xiaomi, Devolo, Bose, Philips Hue, Instar, Synology
1 Antwort Letzte Antwort

0
D dontobi
Hat jemand von euch einen Dim Aktor von Homematic in Lovelace eingebunden?

Ich habe es versucht... Das hier kam dabei raus...

Zur Erklärung:
Ich habe das Objekt LEVEL verwendet. Denn wenn ich das unter ioBroker -> Objekte von hand auf einen Wert von 75% setze, wird das Homematic Modul auch angesteuert.
Zusätzlich habe ich eine Variable für Lovelace von Hand angelegt. Somit liegen auf dem einen Objekt 2 Variablen für Lovelace. Diese sind:
- light.Licht___Wohnzimmer_1
- input_number.Licht_Wohnzimmer_1
Auf dem 2 Bild sieht man dann, dass ich 2 unterschiedliche Cards hinzugefügt habe. Die Light Cards ist mit light.Licht___Wohnzimmer_1 parametriert und setzt beim Ändern unter Lovelace das Objekt nicht auf den gewünschten Wert. Da passiert überhaupt nichts.
Die andere Card ist eine Entities Card und mit beiden Variablen parametriert. Wie man sieht, wird bei der input_number "NaN %" angezeigt. Ändere ich den Wert über den Slider, so ändert sich der Wert des Objekts, aber in der Card bleibt der Wert auf "NaN %". Und die Variable light lässt sich ja (wie man sieht) nicht bedienen.

Ich Stelle mit die Frage, ob ich den Channel nicht für Lovelace angeben muss (anstelle von Objekt LEVEL). Aber vielleicht habt ihr ja einen Tipp für mich. Oder es ist am Ende ein Bug (Kombi aus HM Gerät und Lovelace).
B Offline
B Offline
BobBruni

schrieb am zuletzt editiert von

#202

@dontobi said in [Aufruf] Test lovelace Adapter:

Hat jemand von euch einen Dim Aktor von Homematic in Lovelace eingebunden?

Ich habe es versucht... Das hier kam dabei raus...

Wie man sieht, wird bei der input_number "NaN %" angezeigt. Ändere ich den Wert über den Slider, so ändert sich der Wert des Objekts, aber in der Card bleibt der Wert auf "NaN %".

Habe genau das gleiche Problem. Gibt es schon eine Lösung?
1 Antwort Letzte Antwort

0
W Offline
W Offline
WW1983

schrieb am zuletzt editiert von

#203

Bei der aktuellen Version werden keine Wettericons angezeigt:
1 Antwort Letzte Antwort

0

Anmelden zum Antworten

Support us

211

Online

32.4k

Benutzer

81.4k

Themen

1.3m

Beiträge