Advertisement
dykandDK

HA - YAML - Custom:button-card example with multiple icons

Sep 17th, 2023 (edited)
1,208
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 3.12 KB | None | 0 0
  1. type: horizontal-stack
  2. cards:
  3.   - type: custom:button-card
  4.     entity: sensor.multi_sensor_temperature_01
  5.     color_type: card
  6.     show_name: true
  7.     show_label: true
  8.     show_icon: true
  9.     show_state: true
  10.     name: Kitchen
  11.     icon: mdi:silverware-fork-knife
  12.     state_display: |
  13.      [[[
  14.         var a = entity.state;
  15.         var floatValue = parseFloat(a.replace(/, /, '.'));
  16.         return floatValue.toFixed(1).toString().replace('.',',')+ ' °C';
  17.       ]]]
  18.     custom_fields:
  19.       icon1: >
  20.         [[[return '<ha-icon icon="mdi:lightbulb" style="width: 20px; height:
  21.         20px; color: green;"> </ha-icon>';]]]
  22.      icon2: >
  23.        [[[return '<ha-icon icon="mdi:motion-sensor-off" style="width: 20px;
  24.         height: 20px;"> </ha-icon>';]]]
  25.      icon3: >
  26.        [[[return '<ha-icon icon="mdi:door-open" style="width: 20px; height:
  27.         20px;color: red"> </ha-icon>';]]]
  28.      icon4: >
  29.        [[[return '<ha-icon icon="mdi:lock-open" style="width: 20px; height:
  30.         20px; color: red"> </ha-icon>';]]]
  31.    styles:
  32.      grid:
  33.        - grid-template-areas: '"l" "i" "n" "s"'
  34.        - grid-template-rows: 1fr 2fr min-content min-content
  35.        - grid-template-columns: 1fr
  36.      custom_fields:
  37.        icon1:
  38.          - position: absolute
  39.          - left: 85%
  40.          - top: 5%
  41.        icon2:
  42.          - position: absolute
  43.          - left: 85%
  44.          - top: 30%
  45.        icon3:
  46.          - position: absolute
  47.          - left: 85%
  48.          - top: 55%
  49.        icon4:
  50.          - position: absolute
  51.          - left: 85%
  52.          - top: 80%
  53.  - type: custom:button-card
  54.    entity: sensor.multi_sensor_temperature_02
  55.    color_type: card
  56.    show_name: true
  57.    show_label: true
  58.    show_icon: true
  59.    show_state: true
  60.    name: Living Room
  61.    icon: mdi:sofa
  62.    state_display: |
  63.      [[[
  64.        var a = entity.state;
  65.        var floatValue = parseFloat(a.replace(/, /, '.'));
  66.        return floatValue.toFixed(1).toString().replace('.',',')+ ' °C';
  67.      ]]]
  68.    custom_fields:
  69.      icon1: >
  70.        [[[return '<ha-icon icon="mdi:lightbulb-off" style="width: 20px; height:
  71.        20px;;"> </ha-icon>';]]]
  72.      icon2: >
  73.        [[[return '<ha-icon icon="mdi:motion-sensor" style="width: 20px; height:
  74.         20px; color: red;"> </ha-icon>';]]]
  75.      icon3: >
  76.        [[[return '<ha-icon icon="mdi:door-closed" style="width: 20px; height:
  77.        20px;"> </ha-icon>';]]]
  78.      icon4: >
  79.        [[[return '<ha-icon icon="mdi:lock" style="width: 20px; height: 20px;
  80.         color: green"> </ha-icon>';]]]
  81.    styles:
  82.      grid:
  83.        - grid-template-areas: '"l" "i" "n" "s"'
  84.        - grid-template-rows: 1fr 2fr min-content min-content
  85.        - grid-template-columns: 1fr
  86.      custom_fields:
  87.        icon1:
  88.          - position: absolute
  89.          - left: 85%
  90.          - top: 5%
  91.        icon2:
  92.          - position: absolute
  93.          - left: 85%
  94.          - top: 30%
  95.        icon3:
  96.          - position: absolute
  97.          - left: 85%
  98.          - top: 55%
  99.        icon4:
  100.          - position: absolute
  101.          - left: 85%
  102.          - top: 80%
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement