API tools faq
paste
Guest User

ButtonCard

a guest
Sep 20th, 2024
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 9.73 KB | Source Code | 0 0
raw download clone embed print report
  1. square: false
  2. type: grid
  3. cards:
  4.   - type: custom:button-card
  5.     name: Vorraum
  6.     icon: mdi:hanger
  7.     show_state: true
  8.     entity: sensor.temperatur_badezimmer_temperature
  9.     tap_action:
  10.       action: navigate
  11.       navigation_path: '#vorraum'
  12.     custom_fields:
  13.       btn:
  14.         card:
  15.           type: custom:mushroom-chips-card
  16.           chips:
  17.             - type: light
  18.               entity: light.vorraum_licht
  19.               tap_action:
  20.                 action: toggle
  21.               hold_action:
  22.                 action: navigate
  23.                 navigation_path: '#vorraum_licht'
  24.               content_info: none
  25.               icon: mdi:led-strip-variant
  26.               card_mod:
  27.                 style: |
  28.                  ha-card {
  29.                     --chip-background: {{'var(--cse-yellow)' if is_state('light.vorraum_licht', 'on') else 'var(--cse-yellow-tint)'}};
  30.                     padding: 5px!important;
  31.                     border-radius: 100px!important;
  32.                   }
  33.             - type: alarm-control-panel
  34.               entity: alarm_control_panel.alarm
  35.               tap_action:
  36.                 action: navigate
  37.                 navigation_path: '#alarm'
  38.               content_info: none
  39.               card_mod:
  40.                 style: |
  41.                  ha-card {
  42.                     --chip-background: {{'var(--cse-moss)' if is_state('alarm_control_panel.alarm', 'triggered') else 'var(--cse-moss-tint)'}};
  43.                     padding: 5px!important;
  44.                     border-radius: 100px!important;
  45.                   }
  46.             - type: entity
  47.               entity: lock.nuki_haustur_lock
  48.               tap_action:
  49.                 action: navigate
  50.                 navigation_path: '#lock'
  51.               hold_action:
  52.                 action: navigate
  53.                 navigation_path: '#vorraum_licht'
  54.               content_info: none
  55.               icon: mdi:lock
  56.               card_mod:
  57.                 style: |
  58.                  ha-card {
  59.                     --chip-background: {{'var(--cse-brown)' if is_state('lock.nuki_haustur_lock', 'locked') else 'var(--cse-brown-tint)'}};
  60.                     padding: 5px!important;
  61.                     border-radius: 100px!important;
  62.                   }
  63.           card_mod:
  64.             style:
  65.               mushroom-light-chip:nth-child(1)$: |
  66.                ha-state-icon {
  67.                   --color: black !important;
  68.                 }
  69.               mushroom-alarm-control-panel-chip:nth-child(2)$: |
  70.                ha-state-icon {
  71.                   --color: black !important;
  72.                 }
  73.       notification:
  74.         card:
  75.           type: conditional
  76.           conditions:
  77.             - condition: state
  78.               entity: binary_sensor.haustur
  79.               state: 'on'
  80.           card:
  81.             type: custom:mushroom-chips-card
  82.             chips:
  83.               - type: template
  84.                 icon: mdi:door-open
  85.                 icon_color: white
  86.                 card_mod:
  87.                   style: |
  88.                    ha-card {
  89.                       --chip-background: var(--blue);
  90.                       --chip-icon-symbol-size: 70px;
  91.                     }
  92.             card_mod:
  93.               style:
  94.                 mushroom-template-chip:nth-child(1)$: |
  95.                  ha-state-icon {
  96.                       --chip-icon-size: 22px;
  97.                       margin: 0px 0px 0px px;
  98.     styles:
  99.       grid:
  100.         - grid-template-areas: '"n btn" "s btn" "i btn" "notification btn"'
  101.         - grid-template-columns: 1fr min-content
  102.         - grid-template-rows: min-content min-content min-content 1fr
  103.       card:
  104.         - padding: 22px 8px 22px 22px
  105.       custom_fields:
  106.         btn:
  107.           - justify-content: end
  108.           - align-self: start
  109.         notification:
  110.           - border-radius: 50%
  111.           - position: absolute
  112.           - left: 25%
  113.           - top: 50%
  114.           - height: 30px
  115.           - width: 30px
  116.           - font-size: 8px
  117.           - line-height: 20px
  118.       name:
  119.         - justify-self: start
  120.         - align-self: start
  121.         - font-size: 16px
  122.         - font-weight: 600
  123.       icon:
  124.         - width: 60px
  125.         - opacity: '0.6'
  126.         - color: black
  127.       state:
  128.         - min-height: 80px
  129.         - justify-self: start
  130.         - align-self: start
  131.         - font-size: 14px
  132.         - opacity: '0'
  133.       img_cell:
  134.         - justify-content: start
  135.         - position: absolute
  136.         - width: 120px
  137.         - height: 120px
  138.         - left: 0
  139.         - bottom: 0
  140.         - margin: 0 0 -30px -30px
  141.         - background: var(--cse-light-orange)
  142.         - border-radius: 200px!important
  143.   - type: custom:button-card
  144.     name: Badezimmer
  145.     icon: mdi:shower-head
  146.     tap_action:
  147.       action: navigate
  148.       navigation_path: '#bad'
  149.     show_state: true
  150.     custom_fields:
  151.       temp: >
  152.        [[[ return
  153.         Math.floor(states['sensor.temperatur_badezimmer_temperature'].state) +
  154.         '°C' ]]]
  155.       hum: >
  156.        [[[ return
  157.         Math.floor(states['sensor.temperatur_badezimmer_humidity'].state) + '%'
  158.         ]]]
  159.       btn:
  160.         card:
  161.           type: custom:mushroom-chips-card
  162.           chips:
  163.             - type: light
  164.               entity: light.badezimmer_ambient_licht
  165.               tap_action:
  166.                 action: toggle
  167.               hold_action:
  168.                 action: navigate
  169.                 navigation_path: '#bad_ambient'
  170.               content_info: none
  171.               icon: mdi:led-strip-variant
  172.               card_mod:
  173.                 style: |
  174.                  ha-card {
  175.                     --chip-background: {{'rgba(252, 222, 112, 1)' if is_state('light.badezimmer_ambient_licht', 'on') else 'rgba(252, 222, 112, 0.6)'}};
  176.                     padding: 5px!important;
  177.                     border-radius: 100px!important;
  178.                   }
  179.             - type: light
  180.               entity: light.badezimmer_ambient_licht
  181.               tap_action:
  182.                 action: toggle
  183.               hold_action:
  184.                 action: navigate
  185.                 navigation_path: '#bad_ambient'
  186.               content_info: none
  187.               icon: none
  188.               card_mod:
  189.                 style: |
  190.                  ha-card {
  191.                     --chip-background: none;
  192.                     padding: 5px!important;
  193.                     border-radius: 100px!important;
  194.                   }
  195.             - type: light
  196.               entity: light.badezimmer_ambient_licht
  197.               tap_action:
  198.                 action: toggle
  199.               hold_action:
  200.                 action: navigate
  201.                 navigation_path: '#bad_ambient'
  202.               content_info: none
  203.               icon: none
  204.               card_mod:
  205.                 style: |
  206.                  ha-card {
  207.                     --chip-background: none;
  208.                     padding: 5px!important;
  209.                     border-radius: 100px!important;
  210.                   }
  211.       notification:
  212.         card:
  213.           type: conditional
  214.           conditions:
  215.             - condition: state
  216.               entity: binary_sensor.fenster_badezimmer
  217.               state: 'on'
  218.           card:
  219.             type: custom:mushroom-chips-card
  220.             chips:
  221.               - type: template
  222.                 icon: mdi:window-open-variant
  223.                 icon_color: white
  224.                 card_mod:
  225.                   style: |
  226.                    ha-card {
  227.                       --chip-background: var(--blue);
  228.                       --chip-icon-symbol-size: 70px;
  229.                     }
  230.             card_mod:
  231.               style:
  232.                 mushroom-template-chip:nth-child(1)$: |
  233.                  ha-state-icon {
  234.                       --chip-icon-size: 22px;
  235.                       margin: 0px 0px 0px px;
  236.     styles:
  237.       grid:
  238.         - grid-template-areas: '"n btn" "temp btn" "hum btn" "i btn" "notification btn"'
  239.         - grid-template-columns: 1fr min-content
  240.         - grid-template-rows: min-content min-content min-content min-content min-content 1fr
  241.       card:
  242.         - padding: 22px 8px 22px 22px
  243.       custom_fields:
  244.         btn:
  245.           - justify-content: end
  246.           - align-self: start
  247.         temp:
  248.           - justify-self: start
  249.           - align-self: start
  250.           - font-size: 14px
  251.           - opacity: '0.7'
  252.           - padding-top: 2px
  253.         hum:
  254.           - justify-self: start
  255.           - align-self: start
  256.           - font-size: 14px
  257.           - opacity: '0.7'
  258.           - font-weight: >
  259.              [[[if(states['sensor.temperatur_badezimmer_humidity'].state>55)
  260.               return 600 ]]]
  261.           - background-color: >
  262.              [[[if(states['sensor.temperatur_badezimmer_humidity'].state>55)
  263.               return 'var(--red)' ]]]
  264.           - border-radius: 100px
  265.           - padding: 3px 8px 3px 8px
  266.           - margin-left: '-8px'
  267.         notification:
  268.           - border-radius: 100%
  269.           - position: absolute
  270.           - left: 25%
  271.           - top: 50%
  272.           - height: 30px
  273.           - width: 30px
  274.           - font-size: 8px
  275.           - line-height: 20px
  276.       name:
  277.         - justify-self: start
  278.         - align-self: start
  279.         - font-size: 16px
  280.         - font-weight: 600
  281.       icon:
  282.         - width: 60px
  283.         - opacity: '0.6'
  284.         - color: black
  285.       state:
  286.         - min-height: 80px
  287.         - justify-self: start
  288.         - align-self: start
  289.         - font-size: 14px
  290.         - opacity: '0.7'
  291.       img_cell:
  292.         - justify-content: start
  293.         - position: absolute
  294.         - width: 120px
  295.         - height: 120px
  296.         - left: 0
  297.         - bottom: 0
  298.         - margin: 0 0 -30px -30px
  299.         - background: '#A1D6B2'
  300.         - border-radius: 200px!important
  301. columns: 2
  302. title: ' '
  303.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!