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

[WW1983]

Hat jemand die Wetter-Card zum laufen gebracht? Bei mir werden keine Icons angezeigt. Das war aber nicht immer so.

[marcuskl]

@WW1983 Danke dir :blush:

[BBTown]

@WW1983 sagte in Test Adapter lovelace v0.2.x:

Hat jemand die Wetter-Card zum laufen gebracht? Bei mir werden keine Icons angezeigt. Das war aber nicht immer so.

Hast Du die Icon irgendwann mal selbst kopiert/hochgeladen und kann es sein dass dies erst seit der Aktualisierung auf js-controller v2.x so ist?, dann könnte es mit den Hinweisen hier zu tun haben.

Weiterhin wird der ioBroke-Eigene-Dateibereich (im Normalfall bisher unter <ioBroker-Verzeichnis>/iobroker-data/files/...) nun strikter behandelt und manuell oder per Skript (fs.write) dort direkt abgelegte/hinkopierte Dateien sind ggf. nicht mehr in Visualisierungen anzeigbar!
Skripte müssen angepasst werden (Nutzung von writeFile) bzw. die Dateien müssen in offiziell definierte Adpater-Basisverzeichnisse (z.B. vis.0, iqontrol.meta u.ä.) abgelegt werden. Nutzt am besten auch die offiziellen Uploader via Vis oder iqontrol, damit diese Dateien korrekt registriert sind. Diese Änderung wurde auch zur Erhöhung der Sicherheit umgesetzt! Der positive Nebeneffekt ist auch das die Files dann mit im Backup landen, was bisher nicht gegeben war!

[xADDRx]

@WW1983 Ich habe den Code kopiert, jedoch ändert sich nicht am Theme.

# Main colors
primary-color: '#5294E2'                                                        # Header
accent-color: '#E45E65'                                                         # Accent color
dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
ha-card-border-radius: '20px'   
ha-card-background: 'rgba(150, 150, 150, 0.1)'
                                                                           
# Text colors                                                                  
primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
disabled-text-color: '#7F848E'                                                  # Disabled text colour
label-badge-border-color: 'green'                                               # Label badge border, just a reference value   

# Background colors                                                            
primary-background-color: '#383C45'                                             # Settings background
secondary-background-color: '#383C45'                                           # Main card UI background  
divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider 

# Table rows                                                                   
table-row-background-color: '#353840'                                           # Table row
table-row-alternative-background-color: '#3E424B'                               # Table row alternative
                                                                           
# Nav Menu                                                                   
paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'                                   
paper-grey-200: '#414A59'                                                       # Navigation menu selection
                                                                           
# Paper card                                                               
paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
paper-card-background-color: 'rgba(150, 150, 150, 0.1)'                         # Card background colour
paper-dialog-background-color: '#434954'                                        # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
paper-item-icon-active-color: '#F9C536'                                         # Icon color active
paper-item-icon_-_color: 'green'           
paper-item-selected_-_background-color: '#434954'                               # Popup item select                      
paper-tabs-selection-bar-color: 'green'

# Labels 
label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here
label-badge-background: 'rgba(255, 255, 255, 0.1)'

# Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'  

# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

# Google colors
google-red-500: '#E45E65'
google-green-500: '#39E949'

[g.polat]

@WW1983 sagte in Test Adapter lovelace v0.2.x:

Hat jemand die Wetter-Card zum laufen gebracht? Bei mir werden keine Icons angezeigt. Das war aber nicht immer so.

Hier das gleiche, hast du eine Lösung gefunden?

[g.polat]

@Scrounger sagte in Test Adapter lovelace v0.2.x:

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

tolle arbeit, wie hast u das mit den Pictures gelöst. Wie lautet der Pfad im Iobroker?
Gruß

[marcuskl]

@xADDRx

Hat bei mir auch nicht so funktioniert.
Du musst vorher "transparent:" hinzufügen, so:

transparent:
   # Main colors
   primary-color: '#5294E2'                                                        # Header
   accent-color: '#E45E65'                                                         # Accent color
   dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
........

dann funktioniert es.

Ich habe noch das Hintergrund Bild bei den Cards hochgeladen und die Zeile Backround image hinzugefügt.

#Background images
background: center / cover no-repeat url("/cards/background.jpg") fixed

[WW1983]

@BBTown
Habe eigentlich nichts selbst kopiert / hochgeladen. Sind die Icons von DasWetter

[WW1983]

@g-polat
Leider nein

[WW1983]

@xADDRx
Das Theme musst du manuell hinzufügen. In den Einstellungen von Lovelace gibt es einen Extra Reiter "Theme". Dort habe ich die Theme Einstellungen hineinkopiert. Kann gerne mal den Theme "Code" heute Abend hier rein stellen.

Edit: Sehe gerade dass @marcuskl es schon gepostet hat

[marcuskl]

@WW1983 hast du es hinbekommen den header transparent zu bekommen mit der compact-custom-header card ?

[WW1983]

@marcuskl

Nein. Leider nicht. Habe nicht wirklich verstanden wo und wie man es einstellen kann. Deshalb habe ich den Header einfach farblich halbwegs angepasst

[marcuskl]

@WW1983
Ich habe alles mögliche versucht aber die Card hat nicht funktioniert.
Ich habe es auch nur dunkler gemacht

[WW1983]

@marcuskl
es funktionieren derzeit so einige Cards nicht. Ich hoffe das wird irgendwann noch behoben.

Man kann zwar jetzt schon was brauchbares basteln. Aber schade das noch so vieles nicht funktioniert. Auch die "Standard-Entitys"

[marcuskl]

@WW1983 Ja des stimmt.
Ich würde gerne mal meine RGB Beleuchtungen einbinden, aber die light entiy card funktioniert auch noch nicht.
https://github.com/ljmerza/light-entity-card

[WW1983]

@marcuskl
Habe die auch schon getestet. Bei mir funktioniert die auch nicht. Aber auch die integrierte Light Card funktioniert bei mir nicht. Kann nur licht an und aus machen, aber mit der Card nicht die Dimmfunktion nutzen.

[xADDRx]

@marcuskl danke

transparent:
   # Main colors
   primary-color: '#5294E2'                                                        # Header
   accent-color: '#E45E65'                                                         # Accent color
   dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
   light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
   ha-card-border-radius: '20px'   
   ha-card-background: 'rgba(150, 150, 150, 0.1)'

                                                                           

   # Text colors                                                                  
   primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
   text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
   secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
   disabled-text-color: '#7F848E'                                                  # Disabled text colour
   label-badge-border-color: 'green'                                               # Label badge border, just a reference value   

 

   # Background colors                                                            
   primary-background-color: '#383C45'                                             # Settings background
   secondary-background-color: '#383C45'                                           # Main card UI background  
   divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider 

 

   # Table rows                                                                   
   table-row-background-color: '#353840'                                           # Table row
   table-row-alternative-background-color: '#3E424B'                               # Table row alternative

                                                                           

   # Nav Menu                                                                   
   paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
   paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
   paper-grey-50: 'var(--primary-text-color)'                                   
   paper-grey-200: '#414A59'                                                       # Navigation menu selection

                                                                           

   # Paper card                                                               
   paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
   paper-card-background-color: 'rgba(150, 150, 150, 0.1)'                         # Card background colour
   paper-dialog-background-color: '#434954'                                        # Card dialog background colour
   paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
   paper-item-icon-active-color: '#F9C536'                                         # Icon color active
   paper-item-icon_-_color: 'green'           
   paper-item-selected_-_background-color: '#434954'                               # Popup item select                      
   paper-tabs-selection-bar-color: 'green'

 

   # Labels 
   label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
   label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
   label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here
   label-badge-background: 'rgba(255, 255, 255, 0.1)'

 

   # Switches
   paper-toggle-button-checked-button-color: 'var(--accent-color)'
   paper-toggle-button-checked-bar-color: 'var(--accent-color)'
   paper-toggle-button-checked-ink-color: 'var(--accent-color)'
   paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
   paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
   paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'  

 

   # Sliders
   paper-slider-knob-color: 'var(--accent-color)'
   paper-slider-knob-start-color: 'var(--accent-color)'
   paper-slider-pin-color: 'var(--accent-color)'
   paper-slider-active-color: 'var(--accent-color)'
   paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
   paper-slider-secondary-color: 'var(--secondary-background-color)'
   paper-slider-disabled-active-color: 'var(--disabled-text-color)'
   paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

 

   # Google colors
   google-red-500: '#E45E65'
   google-green-500: '#39E949'



   # Background images
   background: center / cover no-repeat url("/cards/background.jpg") fixed

[schittl]

Hi,

mal was zum Einstieg ehe ich mich tief darin verliere ;). Sollte man ebenfalls pro verschiedene Auflösung (z.B. Tablet & Smartphone) am besten 2 Views erstellen oder kann man das out of the box mit einer View bewerkstelligen.

Ansonsten klingt der Adapter sehr interessant und ich bin schon fleißig am rumprobieren. Guter Ansatz bzw. Umsetzung.

vg
Falk

[Scrounger]

@g-polat
Glaub node-modules/lovelace/hass-irgendwa/static/
Bin Grad nicht am Rechner.

Und da dann reinkopiert. Achtung nach Adapter Update sind die Bilder dann weg!

[WW1983]

@Scrounger

Könnte man den Ordner theoretisch mit Schreibschutz versehen, oder gibt dann ein Problem mit dem Update?