Test Adapter lovelace v0.2.x

[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

Spoiler

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

Spoiler

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

Spoiler

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

Spoiler

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

Spoiler

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

Spoiler

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

Spoiler

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

Spoiler

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]

@Scrounger

Tussi anwesend ist ein interessanter DP

[WW1983]

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

[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

[sigi234]

@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

[simatec]

Danke die fehlte ...

[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

[WW1983]

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?

[ecki945]

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

[Scrounger]

@sigi234 sagte in [Aufruf] Test lovelace Adapter:

@Scrounger

Tussi anwesend ist ein interessanter DP

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

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

[sigi234]

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

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

[WW1983]

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

[marcuskl]

@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.

[marcuskl]

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.

[WW1983]

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

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

[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:

2. 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

[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

[xADDRx]

@WW1983 Danke!

[xADDRx]

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?

[BobBruni]

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