API tools faq
paste
Guest User

Untitled

a guest
Jul 5th, 2025
982
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 20.19 KB | None | 0 0
raw download clone embed print report
  1. button_card_templates:
  2.   base_card:
  3.     size: 100%
  4.     styles:
  5.       card:
  6.         - justify-content: start
  7.         - align-items: center
  8.         - flex-direction: row
  9.         - gap: 25px
  10.         - margin: 0
  11.         - scroll-snap-type: x mandatory
  12.         - height: 150px
  13.         - font-size: 22px
  14.         - color: white
  15.         - transition: all 0.5s ease-in
  16.         - backdrop-filter: blur(10px)
  17.         - box-shadow: 0 0 5px rgb(0,0,0)
  18.         - background: rgba(170, 170, 170, 0.3)
  19.         - border: none
  20.         - border-radius: 0
  21.       grid:
  22.         - grid-template-areas: '"nothing nothing" "n i" "s i" "nothing1 nothing1"'
  23.         - grid-template-columns: 1fr 30%
  24.         - grid-template-rows: 1fr min-content min-content 2fr
  25.       name:
  26.         - color: var(--primary-background-color)
  27.         - justify-self: start
  28.         - padding: 10px
  29.         - padding-left: 20px
  30.         - text-wrap: wrap
  31.         - text-align: left
  32.         - font-size: 18px
  33.         - width: 80%
  34.       label:
  35.         - color: var(--primary-background-color)
  36.         - justify-self: start
  37.       img_cell:
  38.         - width: 50px
  39.         - align-items: end
  40.         - justify-items: end
  41.         - margin-right: 0
  42.         - margin: 0
  43.         - padding: 0
  44.       icon:
  45.         - width: 100%
  46.         - height: 100%
  47.       state:
  48.         - color: var(--primary-background-color)
  49.         - justify-self: start
  50.         - padding: 0px
  51.         - padding-left: 20px
  52.         - text-wrap: wrap
  53.         - text-align: left
  54.         - font-size: 14px
  55.         - width: 80%
  56.     state:
  57.       - value: 'off'
  58.         styles:
  59.           icon:
  60.             - color: rgba(255, 255, 255, 0.3)
  61.       - value: 'on'
  62.         styles:
  63.           icon:
  64.             - color: rgba(255, 255, 255, 0.7)
  65.   light_card:
  66.     template: base_card
  67.     show_state: true
  68.     state_display: |
  69.      [[[
  70.         var state = helpers.localize(entity);
  71.         if (entity.state == 'on' && entity.attributes.brightness) {
  72.           state = Math.round(entity.attributes.brightness * 100 / 255) + '%';
  73.         }
  74.         return state;
  75.       ]]]
  76.     hold_action:
  77.       action: more-info
  78.     size: 100%
  79.     styles:
  80.       card:
  81.         - background: |
  82.            [[[
  83.               if (entity.state == 'on') {
  84.                 if (entity.attributes.rgb_color) {
  85.                   var rgb = entity.attributes.rgb_color;
  86.                   var color_start = 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', 0.1)';
  87.                   var color_end = 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', 0.4)';
  88.                   var color_bg_grey = 'rgba(255, 255, 255, 0.3)'
  89.  
  90.                   return 'linear-gradient(180deg, ' + color_end + ' 0%, ' + color_bg_grey + ' 100%, ' + color_bg_grey + ' 100%)';
  91.                 }
  92.                 return 'rgba(255, 255, 255, 0.3)';
  93.               } else {
  94.                 return 'rgba(170, 170, 170, 0.3)';
  95.               }
  96.             ]]]
  97.       grid:
  98.         - grid-template-areas: '"nothing nothing" "n i" "s i" "light-slider light-slider"'
  99.         - grid-template-columns: 1fr 30%
  100.         - grid-template-rows: 1fr min-content min-content 2fr
  101.       custom_fields:
  102.         light-slider:
  103.           - position: absolute
  104.           - bottom: 20px
  105.           - height: 12px
  106.           - right: 0
  107.           - left: 0
  108.           - padding: 0 30px
  109.           - transition: transform 0.6s
  110.           - transform: |
  111.              [[[
  112.                 if (entity.state === 'off' || entity.state === 'unavailable' || !entity.attributes.brightness)
  113.                   return "translateY(40px)"
  114.                 else
  115.                   return "translateY(0)"
  116.               ]]]
  117.     custom_fields:
  118.       light-slider:
  119.         card:
  120.           type: custom:my-slider-v2
  121.           entity: |
  122.            [[[
  123.               return entity.entity_id;
  124.             ]]]
  125.           allowTapping: true
  126.           allowSliding: true
  127.           styles:
  128.             card:
  129.               - height: 100%
  130.               - margin: 0
  131.               - border-radius: 0px
  132.               - border: none
  133.               - background: transparent
  134.             track:
  135.               - background: hsl(0 0% 60%)
  136.               - border-radius: 20px
  137.             container:
  138.               - border-radius: 0
  139.               - overflow: visible
  140.             progress:
  141.               - background: hsl(0 0% 90%)
  142.               - border-top-left-radius: 20px
  143.               - border-bottom-left-radius: 20px
  144.             thumb:
  145.               - display: block
  146.               - width: 20px
  147.               - height: 20px
  148.               - border-radius: 50%
  149.               - background: white
  150.               - transform: translateY(-4px)
  151.               - box-shadow: 2px 0 8px 2px rgba(0, 0, 0, 0.15)
  152.   entity_card:
  153.     template: base_card
  154.     show_state: true
  155.   climate_card:
  156.     template: base_card
  157.     variables:
  158.       temp_graph_entity: none
  159.     show_state: true
  160.     show_icon: false
  161.     state_display: >
  162.      [[[ return entity.attributes.temperature + '°C' + ' - ' +
  163.       helpers.localize(entity); ]]]
  164.     styles:
  165.       card:
  166.         - padding: 0
  167.       grid:
  168.         - grid-template-areas: >-
  169.             "nothing buttons_left buttons_right" "n buttons_left buttons_right"
  170.             "s buttons_left buttons_right" "nothing1 buttons_left buttons_right"
  171.         - grid-template-columns: 1fr 50px 50px
  172.         - grid-template-rows: 1fr min-content min-content 2fr
  173.         - grid-gap: 0
  174.         - height: 150px
  175.       custom_fields:
  176.         temp_chart:
  177.           - position: absolute
  178.           - bottom: 0
  179.           - left: 0
  180.           - z-index: 0
  181.           - width: 100%
  182.           - background: none
  183.           - border: none
  184.           - border-radius: none
  185.         buttons_right:
  186.           - height: 100%
  187.         buttons_left:
  188.           - height: 100%
  189.     custom_fields:
  190.       temp_chart:
  191.         card:
  192.           type: custom:mini-graph-card
  193.           entities:
  194.             - entity: |
  195.                [[[
  196.                   return variables.temp_graph_entity;
  197.                 ]]]
  198.               color: |
  199.                [[[
  200.                   var curr_state = states[entity.entity_id].state;
  201.                   if (curr_state === 'cool') {
  202.                     return 'rgba(0, 0, 255, 1)';
  203.                   } else if (curr_state === 'heat') {
  204.                     return 'rgba(255, 0, 0, 1)';
  205.                   } else if (curr_state === 'dry') {
  206.                     return 'rgba(255, 127, 0, 1)';
  207.                   }
  208.                   return 'rgba(0, 0, 0, 1)';
  209.                 ]]]
  210.           line_width: 0
  211.           height: 60
  212.           show:
  213.             icon: false
  214.             state: false
  215.             name: false
  216.             legend: false
  217.             labels: false
  218.           card_mod:
  219.             style: |
  220.               ha-card { border-style: none; background: none; border-radius: 0;}
  221.       buttons_left:
  222.         card:
  223.           type: custom:paper-buttons-row
  224.           styles:
  225.             display: flex
  226.             flex-direction: column
  227.             flex-wrap: wrap
  228.             height: 100%
  229.             border: 1px solid rgba(0, 0, 0, 0.5)
  230.             border-right: none
  231.           buttons:
  232.             - icon: mdi:snowflake
  233.               styles:
  234.                 button:
  235.                   - height: 33.33333%
  236.                   - width: 100%
  237.                   - color: rgba(255, 255, 255, 1)
  238.                   - background: rgba(0, 0, 0, 0.2)
  239.                   - padding: 0
  240.                   - margin: 0
  241.                   - box-sizing: border-box
  242.                   - border-bottom: 1px solid rgba(0, 0, 0, 0.5)
  243.                   - border-right: none
  244.               tap_action:
  245.                 action: call-service
  246.                 service: climate.set_hvac_mode
  247.                 service_data:
  248.                   entity_id: |
  249.                    [[[ return entity.entity_id ]]]
  250.                   hvac_mode: cool
  251.             - icon: mdi:fire
  252.               styles:
  253.                 button:
  254.                   - height: 33.33333%
  255.                   - width: 100%
  256.                   - color: rgba(255, 255, 255, 1)
  257.                   - background: rgba(0, 0, 0, 0.2)
  258.                   - padding: 0
  259.                   - margin: 0
  260.                   - box-sizing: border-box
  261.                   - border-right: none
  262.               tap_action:
  263.                 action: call-service
  264.                 service: climate.set_hvac_mode
  265.                 service_data:
  266.                   entity_id: |
  267.                    [[[ return entity.entity_id ]]]
  268.                   hvac_mode: heat
  269.             - icon: mdi:water-percent
  270.               styles:
  271.                 button:
  272.                   - height: 33.33333%
  273.                   - width: 100%
  274.                   - color: rgba(255, 255, 255, 1)
  275.                   - background: rgba(0, 0, 0, 0.2)
  276.                   - padding: 0
  277.                   - margin: 0
  278.                   - box-sizing: border-box
  279.                   - border-top: 1px solid rgba(0, 0, 0, 0.5)
  280.                   - border-right: none
  281.               tap_action:
  282.                 action: call-service
  283.                 service: climate.set_hvac_mode
  284.                 service_data:
  285.                   entity_id: |
  286.                    [[[ return entity.entity_id ]]]
  287.                   hvac_mode: dry
  288.       buttons_right:
  289.         card:
  290.           type: custom:paper-buttons-row
  291.           styles:
  292.             display: flex
  293.             flex-direction: column
  294.             flex-wrap: wrap
  295.             height: 100%
  296.             border: 1px solid rgba(0, 0, 0, 0.5)
  297.           buttons:
  298.             - icon: mdi:arrow-up
  299.               styles:
  300.                 button:
  301.                   - height: 33.33333%
  302.                   - width: 100%
  303.                   - color: rgba(255, 255, 255, 1)
  304.                   - background: rgba(0, 0, 0, 0.2)
  305.                   - padding: 0
  306.                   - margin: 0
  307.                   - box-sizing: border-box
  308.                   - border-bottom: 1px solid rgba(0, 0, 0, 0.5)
  309.               tap_action:
  310.                 action: call-service
  311.                 service: script.hvac_increase_temperature_by_step
  312.                 service_data:
  313.                   hvac_entity: |
  314.                    [[[ return entity.entity_id ]]]
  315.                   step: 1
  316.             - icon: mdi:power
  317.               styles:
  318.                 button:
  319.                   - height: 33.33333%
  320.                   - width: 100%
  321.                   - color: rgba(255, 255, 255, 1)
  322.                   - background: rgba(0, 0, 0, 0.2)
  323.                   - padding: 0
  324.                   - margin: 0
  325.                   - box-sizing: border-box
  326.               tap_action:
  327.                 action: call-service
  328.                 service: climate.set_hvac_mode
  329.                 service_data:
  330.                   entity_id: |
  331.                    [[[ return entity.entity_id ]]]
  332.                   hvac_mode: 'off'
  333.             - icon: mdi:arrow-down
  334.               styles:
  335.                 button:
  336.                   - height: 33.33333%
  337.                   - width: 100%
  338.                   - color: rgba(255, 255, 255, 1)
  339.                   - background: rgba(0, 0, 0, 0.2)
  340.                   - padding: 0
  341.                   - margin: 0
  342.                   - box-sizing: border-box
  343.                   - border-top: 1px solid rgba(0, 0, 0, 0.5)
  344.               tap_action:
  345.                 action: call-service
  346.                 service: script.hvac_increase_temperature_by_step
  347.                 service_data:
  348.                   hvac_entity: |
  349.                    [[[ return entity.entity_id ]]]
  350.                   step: -1
  351.   room_title_card:
  352.     show_state: false
  353.     show_icon: false
  354.     variables:
  355.       room_label: default_room
  356.       sensor_temperature: unknown
  357.       sensor_humidity: unknown
  358.     styles:
  359.       card:
  360.         - width: 100%
  361.         - justify-self: start
  362.         - align-items: start
  363.         - position: relative
  364.         - top: 0
  365.         - bottom: 0
  366.         - margin: auto 0
  367.         - border: none
  368.         - background: transparent
  369.         - color: rgba(255, 255, 255, 1)
  370.         - font-family: Roboto
  371.       grid:
  372.         - grid-template-areas: '"indoor_temp" "title_big" "humidity"'
  373.         - grid-template-rows: min-content 1fr min-content
  374.       custom_fields:
  375.         indoor_temp:
  376.           - align-items: start
  377.           - justify-self: start
  378.           - text-transform: uppercase
  379.           - font-family: Roboto
  380.           - padding: 10px 0 0 0
  381.           - text-align: left
  382.         title_big:
  383.           - font-size: 108px
  384.           - font-weight: bold
  385.           - align-items: start
  386.           - justify-self: start
  387.           - font-family: Roboto
  388.           - text-align: left
  389.           - text-wrap: wrap
  390.         humidity:
  391.           - align-items: start
  392.           - justify-self: start
  393.           - text-transform: uppercase
  394.           - font-family: Roboto
  395.           - padding: 10px 0 0 0
  396.     custom_fields:
  397.       indoor_temp: |
  398.        [[[
  399.           var text = ''
  400.           var value = Math.round(states[variables.sensor_temperature].state)
  401.           if (value > 25) {
  402.             text = 'very hot'
  403.           } else if (value > 22) {
  404.             text = 'hot'
  405.           } else if (value > 20) {
  406.             text = 'comfortable'
  407.           } else if (value > 18) {
  408.             text = 'cool'
  409.           } else {
  410.             text = 'cold'
  411.           }
  412.           return '<span style="font-weight: bolder;">' + value + '°</span> - ' + text
  413.         ]]]
  414.       title_big: |
  415.        [[[ return variables.room_label; ]]]
  416.       humidity: |
  417.        [[[
  418.           var text = ''
  419.           var value = Math.round(states[variables.sensor_humidity].state)
  420.           if (value > 60) {
  421.             text = 'high'
  422.           } else if (value < 30) {
  423.             text = 'low'
  424.           } else {
  425.             text = 'good'
  426.           }
  427.  
  428.           return 'Humidity is ' + text + ' at <span style="font-weight: bolder;">'
  429.               + value + '%</span>'
  430.         ]]]
  431.     card_mod:
  432.       style: |
  433.         @media (max-width: 600px) {
  434.           ha-card #title_big {
  435.             font-size: 72px !important;
  436.           }
  437.         }
  438.         @media (max-width: 500px) {
  439.           ha-card #title_big {
  440.             font-size: 48px !important;
  441.           }
  442.         }
  443.   menu_entry_card:
  444.     show_state: false
  445.     show_icon: false
  446.     show_title: false
  447.     variables:
  448.       path: /none
  449.     tap_action:
  450.       action: navigate
  451.       navigation_path: '[[[ return variables.path ]]]'
  452.     styles:
  453.       card:
  454.         - height: 50px
  455.         - max-width: 150px
  456.         - text-transform: uppercase
  457.         - border: none
  458.         - border-radius: 0
  459.         - background: transparent
  460.         - color: rgba(255, 255, 255, 1)
  461.         - border-bottom: |
  462.            [[[
  463.               if (window.location.pathname.includes(variables.path)) {
  464.                 return '2px solid rgba(255, 255, 255, 1)';
  465.               } else {
  466.                 return 'none';
  467.               }
  468.             ]]]
  469.       label:
  470.         - font-weight: bold
  471.       name:
  472.         - font-weight: bold
  473. views:
  474.   - title: Living room
  475.     type: custom:grid-layout
  476.     layout:
  477.       grid-template-rows: min-content 1fr min-content
  478.       grid-column-gap: 0px
  479.       margin: 0 30px
  480.       padding: 0
  481.       height: 100%
  482.       position: relative
  483.       place-items: center normal
  484.       card_margin: 0
  485.       mediaquery:
  486.         '(max-width: 600px)':
  487.           margin: 0 10px
  488.     cards:
  489.       - type: custom:layout-card
  490.         layout_type: custom:grid-layout
  491.         layout:
  492.           grid-template-columns: repeat(auto-fill, min(160px))
  493.         cards:
  494.           - type: custom:button-card
  495.             template: menu_entry_card
  496.             name: living room
  497.             variables:
  498.               path: /dashboard-fullscreenhome/room_livingroom
  499.           - type: custom:button-card
  500.             template: menu_entry_card
  501.             name: bedroom
  502.             variables:
  503.               path: /dashboard-fullscreenhome/room_bedroom
  504.           - type: custom:button-card
  505.             template: menu_entry_card
  506.             name: office
  507.             variables:
  508.               path: /dashboard-fullscreenhome/room_office
  509.           - type: custom:button-card
  510.             template: menu_entry_card
  511.             name: bathroom
  512.             variables:
  513.               path: /dashboard-fullscreenhome/room_bathroom
  514.       - type: custom:button-card
  515.         template: room_title_card
  516.         variables:
  517.           room_label: Living room
  518.           sensor_temperature: sensor.living_room_average_temperature
  519.           sensor_humidity: sensor.living_room_average_humidity
  520.       - type: custom:layout-card
  521.         layout_type: custom:grid-layout
  522.         layout:
  523.           grid-template-columns: repeat(auto-fill, min(260px))
  524.           mediaquery:
  525.             '(max-width: 600px)':
  526.               grid-template-columns: 1fr
  527.         cards:
  528.           - type: custom:button-card
  529.             entity: light.living_room_ceiling
  530.             template: light_card
  531.             name: Ceiling
  532.           # Add other cards here...
  533.           #- type: custom:button-card
  534.           #  entity: light.living_room_ceiling
  535.           #  template: light_card
  536.           #  name: Ceiling
  537.           # Add other cards here...
  538.           - type: custom:button-card
  539.             entity: climate.ac_1
  540.             template: climate_card
  541.             name: AC
  542.             variables:
  543.               temp_graph_entity: sensor.living_room_average_temperature
  544.           - type: custom:button-card
  545.             template: entity_card
  546.             entity: binary_sensor.living_room_doors_or_windows_open
  547.             name: Doors or windows
  548.             icon: mdi:door
  549.     sections: []
  550.     subview: false
  551.     background:
  552.       opacity: 100
  553.       alignment: center
  554.       size: cover
  555.       repeat: repeat
  556.       attachment: fixed
  557.       image: /api/image/serve/0f4538e0fe0f7c5ba96f07b8c02835e6/original
  558.     path: room_livingroom
  559.   - title: Office
  560.     type: custom:grid-layout
  561.     layout:
  562.       grid-template-rows: min-content 1fr max-content
  563.       grid-column-gap: 10px
  564.       margin: 0 0 0 30px
  565.       padding: 0
  566.       height: 100%
  567.       position: relative
  568.       place-items: center normal
  569.       backdrop-filter: blur(10px)
  570.     cards:
  571.       - type: custom:layout-card
  572.         layout_type: custom:grid-layout
  573.         layout:
  574.           grid-template-columns: repeat(auto-fill, min(160px))
  575.         cards:
  576.           - type: custom:button-card
  577.             template: menu_entry_card
  578.             name: living room
  579.             variables:
  580.               path: /dashboard-fullscreenhome/room_livingroom
  581.           - type: custom:button-card
  582.             template: menu_entry_card
  583.             name: bedroom
  584.             variables:
  585.               path: /dashboard-fullscreenhome/room_bedroom
  586.           - type: custom:button-card
  587.             template: menu_entry_card
  588.             name: office
  589.             variables:
  590.               path: /dashboard-fullscreenhome/room_office
  591.           - type: custom:button-card
  592.             template: menu_entry_card
  593.             name: bathroom
  594.             variables:
  595.               path: /dashboard-fullscreenhome/room_bathroom
  596.       - type: custom:button-card
  597.         template: room_title_card
  598.         variables:
  599.           room_label: Office
  600.           sensor_temperature: sensor.office_average_temperature
  601.           sensor_humidity: sensor.office_average_humidity
  602.       - type: custom:layout-card
  603.         layout_type: custom:grid-layout
  604.         layout:
  605.           grid-template-columns: repeat(auto-fill, min(260px))
  606.         cards:
  607.           - type: custom:button-card
  608.             template: light_card
  609.             entity: light.office_ceiling
  610.             name: Ceiling
  611.           - type: custom:button-card
  612.             template: climate_card
  613.             entity: climate.ac_2
  614.             name: AC
  615.             variables:
  616.               temp_graph_entity: sensor.office_average_temperature
  617.           - type: custom:button-card
  618.             template: entity_card
  619.             entity: binary_sensor.office_door_contact
  620.             name: Doors
  621.             icon: mdi:door
  622.     sections: []
  623.     subview: false
  624.     background:
  625.       opacity: 100
  626.       alignment: center
  627.       size: cover
  628.       repeat: repeat
  629.       attachment: fixed
  630.       image: /api/image/serve/3fa9c38652cd3e35d0e5860508359744/original
  631.     path: room_office
  632.  
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!