Usunięcie ikon z poziomego stosu (card-mod)

Witam,
na jednym z paneli mam sporo danych do wyświetlenia, potrzebuje więcej miejsca kosztem wyświetlenia ikon. card-mod 'em jestem w stanie usunąć samą ikonę ale tabela w której była ikona i entity zostaje - wynik tego taki, że w miejscu gdzie była ikona jest puste miejsce, a wyświetlane dane są w tym samym miejscu gdzie były.

Proszę o sugestie.

Wrzuć tutaj swój kod karty, zrzut ekranu.

type: horizontal-stack
cards:
  - type: entities
    entities:
      - entity: sensor.a1_b0
      - entity: sensor.a1_b1
      - entity: sensor.a1_b2
    card_mod:
      style: |
        :host {
          font-size: 12px;
          --card-mod-icon:
        }
  - type: entities
    entities:
      - entity: sensor.a1_b0
      - entity: sensor.a1_b1
      - entity: sensor.a1_b2
    card_mod:
      style: |
        :host {
          font-size: 12px;
        }
  - type: entities
    entities:
      - entity: sensor.a1_b0
      - entity: sensor.a1_b1
      - entity: sensor.a1_b2
    card_mod:
      style: |
        :host {
          font-size: 12px;
        }

zależy mi na trzech kolumnach, ikony chcę wyrzucić w celu zwolnienia miejsca tak aby nazwa i wartość temperatury nie była taka “rozstrzelona” jak teraz. Nie wiem może złego rodzaju karty używam. Do tej pory jakoś nie przykładałem wagi do wyglądu, ale takie coś to już nie przejdzie.

Jeżeli karta nie posiada funkcji wyłączenie takiej opcji w swojej konfiguracji to niestety wolne miejsce po ikonie pozostanie.

Spróbuj tego:


Każda pojedyncza karta zawiera dwie encje + wykres, duże możliwości formatowania .

Kod jednej karty:

type: custom:config-template-card
entities:
  - sensor.czujnik_c_pokoj_temperature
variables:
  - states['sensor.czujnik_c_pokoj_temperature'].state
card:
  type: custom:mini-graph-card
  name: Temperatura
  icon: >-
    ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
    'fas:thermometer-three-quarters' : vars[0] > 20 ? 'fas:thermometer-half' :
    vars[0] > 10 ? 'fas:thermometer-quarter' : 'fas:thermometer-empty' }
  more_info: false
  height: 100
  line_width: 4
  hours_to_show: 168
  points_per_hour: 0.25
  group: false
  hour24: true
  animate: true
  decimals: 1
  font_size: 55
  font_size_header: 14
  align_header: default
  align_icon: right
  align_state: center
  lower_bound: -5
  upper_bound: 40
  show:
    name: true
    icon: true
    state: true
    graph: line
    fill: true
    points: false
    legend: true
    extrema: false
    labels: false
    name_adaptive_color: true
    icon_adaptive_color: true
  color_thresholds:
    - value: 5
      color: '#0055FF'
    - value: 15
      color: '#FF6600'
    - value: 20
      color: '#FFAA00'
    - value: 22.5
      color: '#FF7700'
    - value: 25
      color: '#FF3700'
  entities:
    - entity: sensor.czujnik_c_pokoj_temperature
      name: Dom
      color: '#FF5000'
      show_state: true
    - entity: sensor.dark_sky_temperature
      name: Na Zewnątrz
      color: '#0099CC'
      show_state: true

Kod przedstawionego zrzutu karty :

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 95
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
  - type: horizontal-stack
    cards:
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
  - type: horizontal-stack
    cards:
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true
      - type: custom:config-template-card
        entities:
          - sensor.czujnik_c_pokoj_temperature
        variables:
          - states['sensor.czujnik_c_pokoj_temperature'].state
        card:
          type: custom:mini-graph-card
          name: Temperatura
          icon: >-
            ${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ?
            'fas:thermometer-three-quarters' : vars[0] > 20 ?
            'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' :
            'fas:thermometer-empty' }
          more_info: false
          height: 100
          line_width: 4
          hours_to_show: 168
          points_per_hour: 0.25
          group: false
          hour24: true
          animate: true
          decimals: 1
          font_size: 55
          font_size_header: 14
          align_header: default
          align_icon: right
          align_state: center
          lower_bound: -5
          upper_bound: 40
          show:
            name: true
            icon: true
            state: true
            graph: line
            fill: true
            points: false
            legend: true
            extrema: false
            labels: false
            name_adaptive_color: true
            icon_adaptive_color: true
          color_thresholds:
            - value: 5
              color: '#0055FF'
            - value: 15
              color: '#FF6600'
            - value: 20
              color: '#FFAA00'
            - value: 22.5
              color: '#FF7700'
            - value: 25
              color: '#FF3700'
          entities:
            - entity: sensor.czujnik_c_pokoj_temperature
              name: Dom
              color: '#FF5000'
              show_state: true
            - entity: sensor.dark_sky_temperature
              name: Na Zewnątrz
              color: '#0099CC'
              show_state: true

Wymagania:

custom:config-template-card
custom:mini-graph-card
Dostępne w HACS

1 Like

śliczne dzięki - działa tak jak chciaem :)))