API tools faq
paste
d_sellers1

Lab

d_sellers1
Jul 8th, 2023
1,271
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 113.99 KB | Source Code | 0 0
raw download clone embed print report
  1. button_card_templates:
  2.   generic_custom_button:
  3.     show_icon: true
  4.     show_name: true
  5.     show_state: false
  6.     color_type: icon
  7.     triggers_update: all
  8.     state:
  9.       - color: rgb(28, 28, 28)
  10.         operator: '=='
  11.         value: 'off'
  12.         styles:
  13.           name:
  14.             - color: rgb(128, 128, 128)
  15.       - color: yellow
  16.         operator: '=='
  17.         value: 'on'
  18.         styles:
  19.           name:
  20.             - color: rgb(255, 255, 255)
  21.     styles:
  22.       card:
  23.         - background-color: transparent
  24.         - '--ha-card-box-shadow': none
  25.         - border-radius: 20px
  26.         - '--mdc-ripple-color': white
  27.         - '--mdc-ripple-press-opacity': 1.5
  28.         - border: 1px solid var(--primary-text-color)
  29.     tap_action:
  30.       action: toggle
  31.     hold_action:
  32.       action: more-info
  33.     double_tap_action:
  34.       action: none
  35.   blank_custom_button:
  36.     show_icon: false
  37.     show_name: false
  38.     show_state: false
  39.     triggers_update: all
  40.     styles:
  41.       card:
  42.         - background-color: transparent
  43.         - border: none
  44.     tap_action:
  45.       action: none
  46.     hold_action:
  47.       action: none
  48.     double_tap_action:
  49.       action: none
  50.   oversized_custom_button:
  51.     template: generic_custom_button
  52.     aspect_ratio: 2/2
  53.     custom_fields:
  54.       color_temp: |-
  55.         [[[ if ((entity.state === 'on')) ;
  56.             if (entity.attributes.color_mode == 'color_temp') return entity.attributes.color_temp_kelvin + "K";
  57.             if (entity.attributes.rgb_color != undefined) return "RGB(" + entity.attributes.rgb_color + ")";
  58.             else return;
  59.         ]]]
  60.       last_changed: |-
  61.         [[[ if (entity.state === 'on') {
  62.             var last_changed_in_minutes = ((new Date().getTime() - new Date(entity.last_changed).getTime())/60000).toFixed(0);  
  63.             if (last_changed_in_minutes < 1) return;
  64.             if (last_changed_in_minutes < 60) return last_changed_in_minutes + " min";
  65.             if (last_changed_in_minutes >= 60) {
  66.               var hrs = Math.floor(last_changed_in_minutes / 60);
  67.               return hrs + " hr" + " " + (last_changed_in_minutes % (hrs * 60)) + " min"; }
  68.             } ]]]
  69.     styles:
  70.       card:
  71.         - font-size: 30px
  72.       icon:
  73.         - width: 125%
  74.       custom_fields:
  75.         color_temp:
  76.           - align-self: middle
  77.           - justify-self: right
  78.           - position: absolute
  79.           - right: 3%
  80.           - top: 3%
  81.           - font-size: 20px
  82.           - color: white
  83.           - transform: rotate(0deg)
  84.           - opacity: 33%
  85.         last_changed:
  86.           - align-self: middle
  87.           - justify-self: right
  88.           - position: absolute
  89.           - right: 3%
  90.           - top: 8%
  91.           - font-size: 20px
  92.           - color: white
  93.           - transform: rotate(0deg)
  94.           - opacity: 33%
  95.   oversized_custom_button_with_auto:
  96.     template: oversized_custom_button
  97.     variables:
  98.       var_auto_entity: input_boolean.automation_auto_kitchen_lights
  99.     custom_fields:
  100.       auto: >
  101.        [[[ if ((states[variables.var_auto_entity].state === 'on')) return
  102.         "Automatic"; ]]]
  103.     styles:
  104.       custom_fields:
  105.         auto:
  106.           - align-self: middle
  107.           - justify-self: left
  108.           - position: absolute
  109.           - left: 3%
  110.           - top: 3%
  111.           - font-size: 24px
  112.           - color: yellow
  113.           - transform: rotate(0deg)
  114.           - opacity: 33%
  115.     double_tap_action:
  116.       action: call-service
  117.       service: input_boolean.toggle
  118.       service_data:
  119.         entity_id: '[[[ return variables.var_auto_entity; ]]]'
  120.   rgb_selector:
  121.     template: generic_custom_button
  122.     variables:
  123.       var_color_name: red
  124.       var_entity_id: light.living_room_lights
  125.     show_name: false
  126.     show_icon: false
  127.     styles:
  128.       card:
  129.         - border-radius: 50%
  130.         - height: 75px
  131.         - width: 75px
  132.         - background-color: rgba(255, 0, 0, 0.5)
  133.     tap_action:
  134.       action: call-service
  135.       service: light.turn_on
  136.       service_data:
  137.         entity_id: light.bedroom_lights
  138.         color_name: red
  139.     hold_action:
  140.       action: call-service
  141.       service: nodered.trigger
  142.       service_data:
  143.         entity_id: switch.nodered_all_lights_to_rgb
  144.         payload:
  145.           color_name: '[[[ return variables.var_color_name; ]]]'
  146.   brightness_selector:
  147.     template: generic_custom_button
  148.     variables:
  149.       var_value: 100
  150.       var_entity_id: light.living_room_lights
  151.     name: '[[[ return `${variables.var_value}%` ]]]'
  152.     show_icon: false
  153.     state:
  154.       - operator: template
  155.         value: |-
  156.           [[[ return
  157.               parseInt(states[variables.var_entity_id].attributes.brightness) ===
  158.               Math.round(variables.var_value*255/100) ]]]
  159.         styles:
  160.           name:
  161.             - color: yellow
  162.           card:
  163.             - box-shadow: inset 0px 0px 5px 1px yellow
  164.             - border: 1px solid yellow
  165.     styles:
  166.       card:
  167.         - height: 75px
  168.       name:
  169.         - font-weight: bold
  170.         - font-size: 24px
  171.     tap_action:
  172.       action: call-service
  173.       service: light.turn_on
  174.       service_data:
  175.         brightness_pct: '[[[ return variables.var_value; ]]]'
  176.         entity_id: '[[[ return variables.var_entity_id; ]]]'
  177.     hold_action:
  178.       action: call-service
  179.       service: nodered.trigger
  180.       service_data:
  181.         entity_id: switch.nodered_all_lights_to_rgb
  182.         payload:
  183.           brightness_pct: '[[[ return variables.var_value; ]]]'
  184.   battery_custom_button:
  185.     template: generic_custom_button
  186.     entity: sensor.derek_s_fire_10_battery_level
  187.     name: Tablet
  188.     tap_action:
  189.       action: none
  190.     variables:
  191.       var_color: |-
  192.         [[[
  193.           var battery_level=entity.state;
  194.           if (battery_level > 70) return 'lime';
  195.           else if (battery_level >= 30) return 'yellow';
  196.           else return 'red';
  197.         ]]]
  198.     custom_fields:
  199.       battery_percentage: |
  200.        [[[ if (entity.state === 'unavailable') return " ";
  201.             else return `${entity.state}%` ]]]
  202.     styles:
  203.       card:
  204.         - border: none
  205.       icon:
  206.         - color: '[[[ return variables.var_color ]]]'
  207.         - animation: |
  208.            [[[ if (entity.state <= 10 ) return 'blink 2s ease infinite'; ]]]
  209.       custom_fields:
  210.         battery_percentage:
  211.           - align-self: middle
  212.           - justify-self: center
  213.           - position: absolute
  214.           - left: 5%
  215.           - top: 25%
  216.           - font-size: 14px
  217.           - color: '[[[ return variables.var_color ]]]'
  218.           - transform: rotate(90deg)
  219.   motion_detector_animated:
  220.     entity: binary_sensor.bathroom_motion_detector_on_off
  221.     name: Bathroom
  222.     show_name: true
  223.     variables:
  224.       var_battery_entity: sensor.living_room_motion_detector_battery_level
  225.     custom_fields:
  226.       battery_percentage: >
  227.         [[[ return `<ha-icon icon="mdi:circle-small" style="width: 25px; height:
  228.        25px;"> </ha-icon>`; ]]]
  229.    styles:
  230.      custom_fields:
  231.        battery_percentage:
  232.          - position: absolute
  233.          - left: 10%
  234.          - top: 10%
  235.          - color: |-
  236.              [[[
  237.                var battery_level=states[variables.var_battery_entity].state;
  238.                if (battery_level > 70) return 'lime';
  239.                else if (battery_level >= 30) return 'yellow';
  240.                else return 'red';
  241.              ]]]
  242.      card:
  243.        - background-color: rgb(17, 17, 17)
  244.        - border-radius: 20px
  245.    state:
  246.      - value: 'off'
  247.        operator: '=='
  248.        icon: mdi:walk
  249.        color: rgb(28, 28, 28)
  250.        styles:
  251.          name:
  252.            - color: rgb(28, 28, 28)
  253.      - value: 'on'
  254.        operator: '=='
  255.        icon: mdi:motion-sensor
  256.        color: rgb(255, 0, 0)
  257.        styles:
  258.          name:
  259.            - color: white
  260.          icon:
  261.            - animation: blink 2s ease infinite
  262.      - value: unavailable
  263.        operator: '=='
  264.        icon: mdi:walk
  265.        color: rgb(255, 255, 0)
  266.        styles:
  267.          name:
  268.            - color: rgb(255, 255, 0)
  269.            - animation: blink 3s cubic-bezier(.2, 0, 1, 1) infinite
  270.  onstate:
  271.    state:
  272.      - color: rgb(0,255,0)
  273.        value: 'on'
  274.  offstate:
  275.    state:
  276.      - color: rgb(255,0,0)
  277.        value: 'off'
  278.  chips:
  279.    tap_action:
  280.      action: more-info
  281.    show_icon: false
  282.    show_label: true
  283.    show_name: false
  284.    show_state: false
  285.    styles:
  286.      label:
  287.        - justify-self: center
  288.        - padding: 0px 6px
  289.        - font-weight: bold
  290.        - font-size: 14px
  291.      img_cell:
  292.        - width: 24px
  293.      grid:
  294.        - grid-template-areas: '''l'''
  295.      card:
  296.        - border-radius: 18px
  297.        - box-shadow: var(--box-shadow)
  298.        - height: 36px
  299.        - width: auto
  300.        - padding-left: 6px
  301.        - padding-right: 6px
  302.    size: 80%
  303.  chip_icon_label:
  304.    template: chips
  305.    show_icon: true
  306.    size: 100%
  307.    styles:
  308.      card:
  309.        - padding-top: 6px
  310.        - padding-button: 6px
  311.        - padding-left: 12px
  312.      grid:
  313.        - grid-template-areas: '''i l'''
  314.        - grid-template-columns: max_content auto
  315.        - grid-template-rows: min-content
  316.      img_cell:
  317.        - place-self: center
  318.        - width: 14px
  319.        - height: 24px
  320.      label:
  321.        - font-size: 12px
  322.        - margin-left: 0px
  323. views:
  324.  - icon: mdi:animation-outline
  325.    theme: Derek Dark Theme
  326.    badges: []
  327.    cards:
  328.      - type: custom:stack-in-card
  329.        mode: horizontal
  330.        card_mod:
  331.          style: |
  332.            ha-card {
  333.              border: none;
  334.            }
  335.        cards:
  336.          - type: custom:auto-entities
  337.            card:
  338.              type: custom:layout-card
  339.              layout_type: horizontal
  340.              layout_options:
  341.                width: 100
  342.            filter:
  343.              include:
  344.                - domain: light
  345.                  options:
  346.                    type: custom:button-card
  347.                    entity_id: this.entity_id
  348.                    layout: vertical
  349.                    show_last_changed: true
  350.                    aspect_ratio: 1/1
  351.                    styles:
  352.                      card:
  353.                        - box-shadow: none
  354.                        - background-color: transparent
  355.                        - border: 1
  356.                        - padding: 15%
  357.                        - color: yellow
  358.                        - opacity: 1
  359.                        - font-size: 10px
  360.                        - text-shadow: 0px 0px 5px black
  361.                        - text-transform: capitalize
  362.                      icon:
  363.                        - width: 40%
  364.                        - padding-top: 10px
  365.                      label:
  366.                        - color: gray
  367.                        - font-size: 10px
  368.                        - padding-top: 0px
  369.                        - opacity: 0.7
  370.                      name:
  371.                        - white-space: normal
  372.                        - font-weight: 300
  373.                        - font-size: 10px
  374.                        - color: white
  375.                    tap_action:
  376.                      action: toggle
  377.                    hold_action:
  378.                      action: more-info
  379.              exclude:
  380.                - state: 'off'
  381.                - entity_id: '*lights*'
  382.                - entity_id: '*screen*'
  383.                - state: '0'
  384.                - state: unavailable
  385.            sort:
  386.              method: name
  387.              reverse: false
  388.              numeric: false
  389.            show_empty: true
  390.      - type: custom:button-card
  391.        entity: binary_sensor.hallway_closet
  392.        icon: mdi:star
  393.        name: Blink
  394.        styles:
  395.          icon:
  396.            - animation: blink 1s infinite
  397.      - type: custom:button-card
  398.        entity: binary_sensor.hallway_closet
  399.        extra_styles: |
  400.          @keyframes bounce {
  401.            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  402.            40% { transform: translateY(-25px); }
  403.            60% { transform: translateY(-15px); }
  404.          }
  405.        icon: mdi:star
  406.        name: Bounce
  407.        styles:
  408.          icon:
  409.            - animation: bounce 1s infinite
  410.      - type: custom:button-card
  411.        entity: binary_sensor.hallway_closet
  412.        extra_styles: |
  413.          @-webkit-keyframes swing
  414.          {
  415.              15%
  416.              {
  417.                  -webkit-transform: translateX(5px);
  418.                  transform: translateX(5px);
  419.              }
  420.              30%
  421.              {
  422.                  -webkit-transform: translateX(-5px);
  423.                 transform: translateX(-5px);
  424.              }
  425.              50%
  426.              {
  427.                  -webkit-transform: translateX(3px);
  428.                  transform: translateX(3px);
  429.              }
  430.              65%
  431.              {
  432.                  -webkit-transform: translateX(-3px);
  433.                  transform: translateX(-3px);
  434.              }
  435.              80%
  436.              {
  437.                  -webkit-transform: translateX(2px);
  438.                  transform: translateX(2px);
  439.              }
  440.              100%
  441.              {
  442.                  -webkit-transform: translateX(0);
  443.                  transform: translateX(0);
  444.              }
  445.          }
  446.        icon: mdi:star
  447.        name: Swing
  448.        styles:
  449.          icon:
  450.            - animation: swing 1s infinite
  451.      - type: custom:button-card
  452.        entity: binary_sensor.hallway_closet
  453.        extra_styles: |
  454.          @keyframes red-alert {
  455.            0% {
  456.              -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
  457.              box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
  458.            }
  459.            70% {
  460.                -moz-box-shadow: 0 0 0 10px rgba(240,52,52, 0.9);
  461.                box-shadow: 0 0 0 15px rgba(240,52,52, 0.7);
  462.            }
  463.            100% {
  464.                -moz-box-shadow: 0 0 0 0 rgba(240,52,52, 0);
  465.                box-shadow: 0 0 0 0 rgba(240,52,52, 0);
  466.            }
  467.          }
  468.        icon: mdi:star
  469.        name: Red Alert
  470.        styles:
  471.          icon:
  472.            - animation: red-alert 1s infinite
  473.      - type: custom:button-card
  474.        entity: binary_sensor.hallway_closet
  475.        extra_styles: |
  476.          @keyframes scale {
  477.           from {
  478.             transform: scale(1);
  479.             box-shadow: 0 8px 6px -6px #6C7A89;
  480.           }
  481.           to {
  482.             transform: scale(1.25);
  483.             box-shadow: 0 10px 6px -6px #6C7A89;
  484.           }
  485.        icon: mdi:star
  486.        name: Scale
  487.        styles:
  488.          icon:
  489.            - animation: scale 2s ease-in-out infinite alternate
  490.      - type: custom:button-card
  491.        entity: binary_sensor.hallway_closet
  492.        icon: mdi:star
  493.        name: Rotating
  494.        styles:
  495.          icon:
  496.            - animation: rotating 5s linear infinite alternate
  497.      - type: custom:button-card
  498.        entity: binary_sensor.hallway_closet
  499.        extra_styles: |
  500.          @keyframes fade {
  501.            0%, 100% {
  502.              opacity: 0.5;
  503.            }
  504.            50% {
  505.              opacity: 1;
  506.            }
  507.          }
  508.        icon: mdi:star
  509.        name: Fade
  510.        styles:
  511.          icon:
  512.            - animation: fade 2s ease-in-out infinite alternate
  513.      - type: custom:button-card
  514.        entity: binary_sensor.hallway_closet
  515.        extra_styles: |
  516.          @keyframes heartbeat {
  517.            0% {
  518.              opacity: 1;
  519.              transform: scale(0.95);
  520.            }
  521.            30% {
  522.              opacity: 0.7;
  523.              transform: scale(1.05);
  524.            }
  525.            40% {
  526.              opacity: 1;
  527.              transform: scale(0.9);
  528.            }
  529.            50% {
  530.              opacity: 0.7;
  531.              transform: scale(1.1);
  532.            }
  533.            60% {
  534.              opacity: 1;
  535.              transform: scale(0.95);
  536.            }
  537.            90% {
  538.              opacity: 1;
  539.              transform: scale(0.95);
  540.            }
  541.            100% {
  542.              opacity: 1;
  543.              transform: scale(0.95);
  544.            }
  545.          }
  546.        icon: mdi:star
  547.        name: Heartbeat
  548.        styles:
  549.          icon:
  550.            - animation: heartbeat 1.5s infinite
  551.      - type: custom:button-card
  552.        entity: binary_sensor.hallway_closet
  553.        extra_styles: |
  554.          @-webkit-keyframes WidthAni {
  555.            0% {width: 0px}
  556.            10% {width: 50%;left: 0;right: 0}
  557.            20% {width: 5%;left: 95%;}
  558.            25% {width: 5%;left: 95%;}
  559.            35% {width: 50%;left: 0%;}
  560.            45% {width: 0%;}
  561.            100% {width: 0%;}
  562.          }
  563.        icon: mdi:star
  564.        name: In & Out
  565.        styles:
  566.          icon:
  567.            - animation: WidthAni 5.0s infinite ease-in-out
  568.      - type: custom:button-card
  569.        entity: binary_sensor.hallway_closet
  570.        extra_styles: |
  571.          @keyframes cool {
  572.            0% {
  573.              transform: rotate(0deg);
  574.              background-color: #ff4081;
  575.            }
  576.            25% {
  577.              transform: rotate(90deg);
  578.              background-color: #40c4ff;
  579.            }
  580.            50% {
  581.              transform: rotate(180deg);
  582.              background-color: #ffdd57;
  583.            }
  584.            75% {
  585.              transform: rotate(270deg);
  586.              background-color: #ccff90;
  587.            }
  588.            100% {
  589.              transform: rotate(360deg);
  590.              background-color: #ff4081;
  591.            }
  592.          }
  593.        icon: mdi:star
  594.        name: Cool
  595.        styles:
  596.          icon:
  597.            - animation: cool 4s infinite
  598.  - title: Test bed
  599.    icon: mdi:test-tube
  600.    path: lab
  601.    badges: []
  602.    cards:
  603.      - type: horizontal-stack
  604.        title: bedroom1
  605.        card_mod:
  606.          style: |
  607.            ha-card {
  608.              border: solid 1px var(--primary-text-color);
  609.              background-color: rgba(0, 0, 0, 0)
  610.            }
  611.        cards:
  612.          - type: custom:light-brightness-preset-row
  613.            entity: light.bedroom1
  614.            name: ' '
  615.            reverseButtons: true
  616.            customSetpoints: true
  617.            lowBrightness: 30
  618.            medBrightness: 127
  619.            hiBrightness: 255
  620.          - type: custom:slider-entity-row
  621.            entity: light.bedroom1
  622.            toggle: false
  623.            hide_state: true
  624.            hide_when_off: true
  625.            full_row: true
  626.            haptic: light
  627.            min: 5
  628.            step: 10
  629.      - type: vertical-stack
  630.        title: RGB Light card (visible when on)
  631.        cards:
  632.          - type: custom:rgb-light-card
  633.            entity: light.bedroom1
  634.            hide_when_off: true
  635.            justify: center
  636.            colors:
  637.              - rgb_color:
  638.                  - 255
  639.                  - 0
  640.                  - 0
  641.                transition: 0
  642.              - rgb_color:
  643.                  - 0
  644.                  - 255
  645.                  - 0
  646.                transition: 0
  647.              - rgb_color:
  648.                  - 0
  649.                  - 0
  650.                  - 255
  651.                transition: 0
  652.              - color_temp: 288
  653.                transition: 0
  654.              - kelvin: 2000
  655.                transition: 0
  656.        state_color: true
  657.      - type: vertical-stack
  658.        title: Auto entities - motion detectors
  659.        cards:
  660.          - type: custom:auto-entities
  661.            card:
  662.              type: entities
  663.              card_mod:
  664.                style: |
  665.                  ha-card {
  666.                    border: solid 1px var(--primary-text-color);
  667.                    background-color: rgba(0, 0, 0, 0)
  668.                  }
  669.            filter:
  670.              include:
  671.                - entity_id: '*motion_detector_o*'
  672.              exclude: []
  673.            sort:
  674.              method: none
  675.      - type: custom:button-card
  676.        template: generic_custom_button
  677.        show_header_toggle: false
  678.        entity: zone.home
  679.        icon: mdi:restart
  680.        name: Theme Restart
  681.        show_state: false
  682.        show_icon: true
  683.        styles:
  684.          card:
  685.            - height: 150px
  686.            - width: 150px
  687.            - '--mdc-ripple-color': red
  688.            - '--mdc-ripple-press-opacity': 1.5
  689.        tap_action:
  690.          action: none
  691.        hold_action:
  692.          action: call-service
  693.          service: frontend.reload_themes
  694.      - type: grid
  695.        cards:
  696.          - type: custom:button-card
  697.            template: generic_custom_button
  698.            entity: sensor.s22_ultra_battery_level
  699.            name: S22
  700.            styles:
  701.              icon:
  702.                - animation: |
  703.                    [[[
  704.                      if (states['binary_sensor.s22_ultra_is_charging'].state === 'on') return 'blink 2s ease infinite';
  705.                    ]]]
  706.                - color: |
  707.                    [[[
  708.                      if (states['binary_sensor.s22_ultra_is_charging'].state === 'on')
  709.                        return 'red';
  710.                    ]]]
  711.          - type: custom:button-card
  712.            template: generic_custom_button
  713.            entity: sensor.s22_ultra_battery_level
  714.            name: S22
  715.            variables:
  716.              var_color: |-
  717.                [[[
  718.                  var blevel=entity.state;
  719.                  if (blevel > 70) return 'lime';
  720.                  else if (blevel >= 30) return 'yellow';
  721.                  else return 'red';
  722.                ]]]
  723.            custom_fields:
  724.              battery_percentage: |
  725.                [[[
  726.                  return `${entity.state}%`
  727.                ]]]
  728.            styles:
  729.              icon:
  730.                - color: '[[[ return variables.var_color ]]]'
  731.              custom_fields:
  732.                battery_percentage:
  733.                  - align-self: right
  734.                  - position: absolute
  735.                  - right: 9%
  736.                  - top: 3%
  737.                  - font-size: 14px
  738.                  - color: '[[[ return variables.var_color ]]]'
  739.          - type: custom:button-card
  740.            template: generic_custom_button
  741.            entity: sensor.s22_ultra_battery_level
  742.            name: S22
  743.            variables:
  744.              var_color: |-
  745.                [[[
  746.                  var blevel=entity.state;
  747.                  if (blevel > 80) return 'lime';
  748.                  else if (blevel >= 30) return 'green';
  749.                  else if (blevel >= 30) return 'orange';
  750.                  else if (blevel >= 30) return 'yellow';
  751.                  else return 'red';
  752.                ]]]
  753.            custom_fields:
  754.              battery_percentage: |
  755.                [[[
  756.                  return `${entity.state}%`
  757.                ]]]
  758.            styles:
  759.              icon:
  760.                - color: '[[[ return variables.var_color ]]]'
  761.              custom_fields:
  762.                battery_percentage:
  763.                  - align-self: right
  764.                  - position: absolute
  765.                  - right: 9%
  766.                  - top: 14%
  767.                  - font-size: 14px
  768.                  - color: '[[[ return variables.var_color ]]]'
  769.                  - transform: rotate(90deg)
  770.      - type: entities
  771.        entities:
  772.          - entity: light.living_room1
  773.          - entity: light.living_room1
  774.          - entity: light.living_room1
  775.          - entity: light.living_room1
  776.        show_header_toggle: false
  777.        title: Card Mod Test
  778.        card_mod:
  779.          style: |
  780.            ha-card {
  781.              border: solid 1px var(--primary-text-color);
  782.              background-color: rgba(0, 0, 0, 0)
  783.            }
  784.      - type: custom:button-card
  785.        template: generic_custom_button
  786.        show_state: true
  787.        show_icon: false
  788.        show_name: false
  789.        entity: sensor.time
  790.        styles:
  791.          card:
  792.            - font-size: 75px
  793.      - type: grid
  794.        cards:
  795.          - type: custom:button-card
  796.            entity: sensor.processor_temperature
  797.            icon: mdi:raspberry-pi
  798.            aspect_ratio: 1/1
  799.            name: HassOS
  800.            styles:
  801.              card:
  802.                - background-color: '#000044'
  803.                - border-radius: 10%
  804.                - padding: 10%
  805.                - color: ivory
  806.                - font-size: 10px
  807.                - text-shadow: 0px 0px 5px black
  808.                - text-transform: capitalize
  809.              grid:
  810.                - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
  811.                - grid-template-columns: 1fr 1fr
  812.                - grid-template-rows: 1fr min-content min-content min-content min-content
  813.              name:
  814.                - font-weight: bold
  815.                - font-size: 13px
  816.                - color: white
  817.                - align-self: middle
  818.                - justify-self: start
  819.                - padding-bottom: 4px
  820.              img_cell:
  821.                - justify-content: start
  822.                - align-items: start
  823.                - margin: none
  824.              icon:
  825.                - color: |
  826.                    [[[
  827.                      if (entity.state < 60) return 'lime';
  828.                      if (entity.state >= 60 && entity.state < 80) return 'orange';
  829.                      else return 'red';
  830.                    ]]]
  831.                - width: 70%
  832.                - margin-top: '-10%'
  833.              custom_fields:
  834.                temp:
  835.                  - align-self: start
  836.                  - justify-self: end
  837.                cpu:
  838.                  - padding-bottom: 2px
  839.                  - align-self: middle
  840.                  - justify-self: start
  841.                  - '--text-color-sensor': >-
  842.                      [[[ if (states["sensor.processor_use"].state > 80) return
  843.                      "red"; ]]]
  844.                ram:
  845.                  - padding-bottom: 2px
  846.                  - align-self: middle
  847.                  - justify-self: start
  848.                  - '--text-color-sensor': >-
  849.                      [[[ if (states["sensor.memory_use_percent"].state > 80)
  850.                      return "red"; ]]]
  851.                sd:
  852.                  - align-self: middle
  853.                  - justify-self: start
  854.                  - '--text-color-sensor': >-
  855.                      [[[ if
  856.                      (states["sensor.derek_s_fire_10_external_storage"].state >
  857.                      80) return "red"; ]]]
  858.            custom_fields:
  859.              temp: |
  860.                [[[
  861.                  return `<ha-icon
  862.                    icon="mdi:thermometer"
  863.                    style="width: 12px; height: 12px; color: yellow;">
  864.                    </ha-icon><span>${entity.state}°F</span>`
  865.                ]]]
  866.              cpu: |
  867.                [[[
  868.                  return `<ha-icon
  869.                    icon="mdi:server"
  870.                    style="width: 12px; height: 12px; color: deepskyblue;">
  871.                    </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
  872.                ]]]
  873.              ram: |
  874.                [[[
  875.                  return `<ha-icon
  876.                    icon="mdi:memory"
  877.                    style="width: 12px; height: 12px; color: deepskyblue;">
  878.                    </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
  879.                ]]]
  880.              sd: |
  881.                [[[
  882.                  return `<ha-icon
  883.                    icon="mdi:harddisk"
  884.                    style="width: 12px; height: 12px; color: deepskyblue;">
  885.                    </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.derek_s_fire_10_external_storage'].state}%</span></span>`
  886.                ]]]
  887.      - type: entities
  888.        show_header_toggle: false
  889.        title: Entities with sliders
  890.        entities:
  891.          - type: custom:slider-entity-row
  892.            entity: light.all_lights
  893.            toggle: true
  894.            hide_when_off: true
  895.            haptic: light
  896.            min: 5
  897.            step: 20
  898.          - type: custom:slider-entity-row
  899.            entity: light.bathroom_lights
  900.            toggle: true
  901.            hide_when_off: true
  902.            haptic: light
  903.            min: 5
  904.            step: 20
  905.          - type: custom:slider-entity-row
  906.            entity: light.bedroom_lights
  907.            toggle: true
  908.            hide_when_off: true
  909.            haptic: light
  910.            min: 5
  911.            step: 20
  912.          - type: custom:slider-entity-row
  913.            entity: light.hallway
  914.            toggle: true
  915.            hide_when_off: true
  916.            haptic: light
  917.            min: 5
  918.            step: 20
  919.          - type: custom:slider-entity-row
  920.            entity: light.kitchen_lights
  921.            toggle: true
  922.            hide_when_off: true
  923.            haptic: light
  924.            min: 5
  925.            step: 20
  926.          - type: custom:slider-entity-row
  927.            entity: light.living_room_lights
  928.            toggle: true
  929.            hide_when_off: true
  930.            haptic: light
  931.            min: 5
  932.            step: 20
  933.          - type: custom:slider-entity-row
  934.            entity: light.office_lights
  935.            toggle: true
  936.            hide_when_off: true
  937.            haptic: light
  938.            min: 5
  939.            step: 20
  940.        state_color: true
  941.      - type: vertical-stack
  942.        title: Markdown with formatted date/time
  943.        cards:
  944.          - type: markdown
  945.            content: '{{ now().strftime("%m/%d/%Y, %H:%M") }}'
  946.           - type: markdown
  947.             content: |-
  948.               {% set time = now().hour %}
  949.               {% if (time >= 18) %}
  950.                 Good evening, {{user}}!
  951.               {% elif (time >= 12) %}
  952.                 Good afternoon, {{user}}!
  953.               {% elif (time >= 6) %}
  954.                 Good morning, {{user}}!
  955.               {% elif (time >= 0) %}
  956.                 Good night, {{user}}!
  957.               {% else %}
  958.                 Hallo, {{user}}!
  959.               {% endif %}
  960.               Today is **{{ now().strftime('%B %d, %Y') }}**
  961.             card_mod:
  962.               style: |
  963.                ha-markdown {
  964.                   padding: 0 0 0 1 !important;
  965.                   font-size: 12px !important;
  966.                   font-weight: normal !important;
  967.                   line-height: 1.4 !important;
  968.                 }
  969.                 ha-card {
  970.                   font-family: Arial;
  971.                   text-align: center;
  972.                   width: 120px;
  973.                   box-shadow: 0px 2px 5px 1px red;
  974.                   border-radius: 25px;
  975.                   margin-left: auto;
  976.                   margin-right: auto;
  977.                   margin-top: 4px;
  978.                   margin-bottom: 4px;
  979.                   padding-top: 15px;
  980.                   padding-right: 15px;
  981.                   padding-left: 15px;
  982.                   padding-bottom: 15px;
  983.                   padding: 15px;
  984.                   {% if is_state('light.bedroom_lights', 'on') %}
  985.                     background-color: yellow;
  986.                     color: black;
  987.                     box-shadow: inset 0px 0px 5px 1px black;
  988.                   {% else %}
  989.                     background: transparent;
  990.                     color: yellow;
  991.                     box-shadow: inset 0px 0px 5px 1px yellow;
  992.                   {% endif %}
  993.                 }
  994.           - type: markdown
  995.             content: '{{ now().strftime("%m/%d/%y, %H:%M") }}'
  996.             card_mod:
  997.               style: |
  998.                ha-card {
  999.                   background: transparent;
  1000.                 }
  1001.                 :host {
  1002.                   position: fixed;
  1003.                   top: 0px;
  1004.                   right: 10%;
  1005.                   z-index: 99;
  1006.                   font-size:25px;
  1007.                 }
  1008.           - type: markdown
  1009.             content: '{{ states("input_select.navigation_test_variable") }}'
  1010.       - type: vertical-stack
  1011.         title: Button card with glow when on
  1012.         cards:
  1013.           - type: grid
  1014.             cards:
  1015.               - type: custom:button-card
  1016.                 layout: icon_name
  1017.                 entity: light.living_room1
  1018.                 label: lamp
  1019.                 show_state: false
  1020.                 show_name: false
  1021.                 show_label: true
  1022.                 color: auto
  1023.                 styles:
  1024.                   grid:
  1025.                     - grid-template-rows: 42px 0px auto
  1026.                     - grid-template-columns: 42px auto
  1027.                   icon:
  1028.                     - height: 30px
  1029.                     - width: 30px
  1030.                   card:
  1031.                     - border-radius: 15px
  1032.                     - height: 76px
  1033.                     - width: 76px
  1034.                     - margin: 5px 5px 0px 0px
  1035.                     - padding: 0px 0px
  1036.                   label:
  1037.                     - justify-self: end
  1038.                     - align-self: end
  1039.                     - padding: 9px 10px
  1040.                     - font-size: 12px
  1041.                     - text-transform: capitalize
  1042.                 state:
  1043.                   - value: 'on'
  1044.                     styles:
  1045.                       card:
  1046.                         - '--paper-card-background-color': rgba(40, 40, 40)
  1047.                         - box-shadow: inset 0px 0px 10px 3px yellow
  1048.                       name:
  1049.                         - color: white
  1050.                       state:
  1051.                         - color: white
  1052.                       label:
  1053.                         - color: white
  1054.                   - value: 'off'
  1055.                     styles: null
  1056.                 tap_action:
  1057.                   action: toggle
  1058.               - type: custom:button-card
  1059.                 layout: icon_name
  1060.                 entity: light.living_room1
  1061.                 label: lamp
  1062.                 show_state: false
  1063.                 show_name: false
  1064.                 show_label: true
  1065.                 color: auto
  1066.                 styles:
  1067.                   grid:
  1068.                     - grid-template-rows: 42px 0px auto
  1069.                     - grid-template-columns: 42px auto
  1070.                   icon:
  1071.                     - height: 30px
  1072.                     - width: 30px
  1073.                   card:
  1074.                     - border-radius: 15px
  1075.                     - height: 76px
  1076.                     - width: 76px
  1077.                     - margin: 5px 5px 0px 0px
  1078.                     - padding: 0px 0px
  1079.                   label:
  1080.                     - justify-self: center
  1081.                     - align-self: end
  1082.                     - padding: 9px 10px
  1083.                     - font-size: 12px
  1084.                     - text-transform: capitalize
  1085.                 state:
  1086.                   - value: 'on'
  1087.                     styles:
  1088.                       card:
  1089.                         - '--paper-card-background-color': rgba(40, 40, 40)
  1090.                         - box-shadow: inset 0px 0px 10px 3px yellow
  1091.                       name:
  1092.                         - color: white
  1093.                       state:
  1094.                         - color: white
  1095.                       label:
  1096.                         - color: white
  1097.                   - value: 'off'
  1098.                     styles: null
  1099.                 tap_action:
  1100.                   action: toggle
  1101.       - type: vertical-stack
  1102.         title: Templated sensor (in configuration.yaml)
  1103.         cards:
  1104.           - type: grid
  1105.             columns: 2
  1106.             cards:
  1107.               - type: sensor
  1108.                 entity: sensor.sensor_f2c
  1109.                 graph: none
  1110.               - type: sensor
  1111.                 entity: sensor.bathroom_door_temperature
  1112.                 graph: none
  1113.             square: false
  1114.           - type: custom:button-card
  1115.             entity: sensor.bathroom_door_temperature
  1116.             name: '[[[ return Math.round(entity.state) + " °F" ]]]'
  1117.             state_display: '[[[ return Math.round(entity.state * 10) / 10  + " °F" ]]]'
  1118.             show_state: true
  1119.             show_icon: false
  1120.       - type: custom:stack-in-card
  1121.         mode: vertical
  1122.         title: Show an entity's attribute
  1123.         cards:
  1124.           - type: custom:button-card
  1125.             entity: light.living_room1
  1126.             name: '[[[ return entity.attributes.brightness]]]'
  1127.             show_icon: false
  1128.             card_mod:
  1129.               style: |
  1130.                ha-card {
  1131.                   border: none;
  1132.                 }
  1133.           - type: custom:button-card
  1134.             entity: light.living_room1
  1135.             name: '[[[ return entity.state ]]]'
  1136.             show_icon: false
  1137.             card_mod:
  1138.               style: |
  1139.                ha-card {
  1140.                   border: none;
  1141.                 }
  1142.           - type: custom:button-card
  1143.             entity: light.living_room1
  1144.             name: >-
  1145.               [[[ if (entity.state === "on") return "Yup"; if (entity.state ===
  1146.               "off") return "Nope";  else return "Dunno"]]]
  1147.             show_icon: false
  1148.             card_mod:
  1149.               style: |
  1150.                ha-card {
  1151.                   border: none;
  1152.                 }
  1153.           - type: custom:button-card
  1154.             entity: light.living_room1
  1155.             name: This is a test
  1156.             show_icon: false
  1157.             styles:
  1158.               name:
  1159.                 - font-family: Wingdings
  1160.             card_mod:
  1161.               style: |
  1162.                ha-card {
  1163.                   border: none;
  1164.                 }
  1165.       - type: custom:apexcharts-card
  1166.         series:
  1167.           - entity: sensor.bathroom_door_temperature
  1168.       - type: custom:mushroom-media-player-card
  1169.         entity: media_player.plex_plex_for_windows_desktop_p54jk04
  1170.         name: Plex
  1171.         icon: mdi:plex
  1172.         use_media_info: true
  1173.         show_volume_level: true
  1174.         media_controls:
  1175.          - play_pause_stop
  1176.         volume_controls: []
  1177.         fill_container: true
  1178.         collapsible_controls: true
  1179.         hold_action:
  1180.           action: none
  1181.         double_tap_action:
  1182.           action: none
  1183.         icon_type: entity-picture
  1184.       - type: custom:button-card
  1185.         header: State modifiers
  1186.         entity: input_boolean.automation_override
  1187.         show_name: true
  1188.         show_state: true
  1189.         name: Automations
  1190.         icon: mdi:lightbulb-auto-outline
  1191.         state:
  1192.           - value: 'off'
  1193.             operator: '=='
  1194.             styles:
  1195.               icon:
  1196.                 - color: red
  1197.             state_display: Automations are off.
  1198.           - value: 'on'
  1199.             operator: '=='
  1200.             styles:
  1201.               icon:
  1202.                 - color: green
  1203.                 - icon: mdi:lightbulb
  1204.             state_display: Automations are on.
  1205.       - type: custom:stack-in-card
  1206.         mode: vertical
  1207.         title: Icon based on another entity state
  1208.         cards:
  1209.           - type: custom:button-card
  1210.             entity: light.bedroom1
  1211.             name: Bedroom1
  1212.             color: auto
  1213.             icon: |
  1214.              [[[  
  1215.                 if (states['input_boolean.tester'].state === 'on')
  1216.                   return 'mdi:lightbulb';
  1217.                 else
  1218.                   return 'mdi:lightbulb-auto';
  1219.               ]]]  
  1220.           - type: custom:button-card
  1221.             entity: light.bedroom1
  1222.             name: Bedroom1
  1223.             color: auto
  1224.             icon: |
  1225.              [[[
  1226.                  if (states['input_boolean.tester'].state == "on")
  1227.                    return 'phu:ikea-blind-closed';
  1228.                  if (states['input_boolean.tester'].state == "off")
  1229.                    return 'phu:ikea-blind-open';
  1230.               ]]]
  1231.           - type: custom:button-card
  1232.             entity: light.bedroom1
  1233.             name: Bedroom1
  1234.             color: auto
  1235.             icon: |
  1236.              [[[
  1237.                  if (entity.state == "on")
  1238.                    return 'phu:ikea-blind-closed';
  1239.                  if (entity.state == "off")
  1240.                    return 'phu:ikea-blind-open';
  1241.               ]]]
  1242.       - type: custom:mini-media-player
  1243.         name: Desktop Plex
  1244.         entity: media_player.plex_plex_for_windows_desktop_p54jk04
  1245.         icon: mdi:plex
  1246.         artwork: full
  1247.         source: full
  1248.         mini-media-player-scale: 1
  1249.         hide:
  1250.           power_state: false
  1251.           power: true
  1252.           source: true
  1253.           name: true
  1254.           icon: true
  1255.           runtime: false
  1256.           controls: full
  1257.           volume: false
  1258.           progress: true
  1259.       - type: custom:stack-in-card
  1260.         title: Icon and color based on state (card_mod)
  1261.         mode: vertical
  1262.         cards:
  1263.           - type: entities
  1264.             card_mod:
  1265.               style: |
  1266.                ha-card {
  1267.                   border: none;
  1268.                 }
  1269.             entities:
  1270.               - entity: light.hallway
  1271.                 name: Entity card using one state
  1272.                 card_mod:
  1273.                   style: |-
  1274.                     :host {
  1275.                       {% if is_state('light.hallway', 'off') %}
  1276.                         --card-mod-icon: mdi:light-switch-off;
  1277.                         --card-mod-icon-color: red;
  1278.                       {% else %}
  1279.                         --card-mod-icon: mdi:light-switch;
  1280.                         --card-mod-icon-color: green;
  1281.                       {% endif %}
  1282.                     }
  1283.               - entity: light.living_room_lights
  1284.                 name: Entity card using time range
  1285.                 card_mod:
  1286.                   style: |-
  1287.                     :host {
  1288.                       {% if today_at('15:00') < now() < today_at('21:00') %}
  1289.                         --card-mod-icon-color: green;
  1290.                       {% else %}
  1291.                         --card-mod-icon-color: red;
  1292.                       {% endif %}
  1293.                       --card-mod-icon: mdi:currency-usd;
  1294.                     }
  1295.           - type: entities
  1296.             card_mod:
  1297.               style: |
  1298.                ha-card {
  1299.                   border: none;
  1300.                 }
  1301.             entities:
  1302.               - entity: light.hallway
  1303.                 name: Entity card using two states
  1304.                 card_mod:
  1305.                   style: |-
  1306.                     :host {
  1307.                       {% if is_state('light.hallway', 'off') and is_state('person.derek', 'home') %}
  1308.                         --card-mod-icon: mdi:light-switch-off;
  1309.                         --card-mod-icon-color: red;
  1310.                       {% elif is_state('light.hallway', 'off') and is_state('person.derek', 'not_home') %}
  1311.                         --card-mod-icon: mdi:chat-question;
  1312.                         --card-mod-icon-color: white;
  1313.                       {% else %}
  1314.                         --card-mod-icon: mdi:light-switch;
  1315.                         --card-mod-icon-color: yellow;
  1316.                       {% endif %}
  1317.                     }
  1318.           - type: button
  1319.             name: Button card with one state
  1320.             show_name: true
  1321.             show_icon: true
  1322.             entity: light.hallway
  1323.             tap_action:
  1324.               action: toggle
  1325.             card_mod:
  1326.               style: |-
  1327.                 :host {
  1328.                   {% if is_state('light.hallway', 'off') %}
  1329.                     --card-mod-icon: mdi:light-switch-off;
  1330.                     --card-mod-icon-color: red;
  1331.                   {% else %}
  1332.                     --card-mod-icon: mdi:light-switch;
  1333.                     --card-mod-icon-color: yellow;
  1334.                   {% endif %}
  1335.                 }
  1336.                 ha-card {
  1337.                   border: none;
  1338.                 }
  1339.           - type: button
  1340.             name: Button card comparing numbers
  1341.             show_name: true
  1342.             show_icon: true
  1343.             tap_action:
  1344.               action: none
  1345.             card_mod:
  1346.               style: |-
  1347.                 :host {
  1348.                   background-color: dimgray;
  1349.                   {% set level = states('sensor.s22_ultra_battery_level') | int %}
  1350.                   {% if level >= 80 %}
  1351.                     --card-mod-icon: mdi:check;
  1352.                     --card-mod-icon-color: green;
  1353.                   {% elif level >= 40 %}
  1354.                     --card-mod-icon: mdi:thumb-up;
  1355.                     --card-mod-icon-color: yellow;
  1356.                   {% else %}
  1357.                     --card-mod-icon: mdi:thumb-down;
  1358.                     --card-mod-icon-color: red;
  1359.                   {% endif %}
  1360.                 }
  1361.                 ha-card {
  1362.                   border: none;
  1363.                   --primary-text-color: hotpink;
  1364.                   --secondary-text-color: blue;
  1365.                 }
  1366.       - type: vertical-stack
  1367.         title: Trigger an automation
  1368.         cards:
  1369.           - type: custom:mushroom-entity-card
  1370.             entity: automation.test_automation
  1371.             icon: mdi:controller
  1372.             icon_color: deep-orange
  1373.             layout: vertical
  1374.             secondary_info: none
  1375.             name: Call Automation
  1376.             tap_action:
  1377.               action: call-service
  1378.               service: automation.trigger
  1379.               service_data:
  1380.                 entity_id: automation.test_automation
  1381.       - type: vertical-stack
  1382.         title: Tap navigate based on variable from entity
  1383.         cards:
  1384.           - type: entities
  1385.             entities:
  1386.              - input_select.navigation_test_variable
  1387.           - type: custom:button-card
  1388.             entity: input_select.navigation_test_variable
  1389.             size: 25px
  1390.             name: '[[[ return entity.state ]]]'
  1391.             tap_action:
  1392.               action: navigate
  1393.               navigation_path: '[[[ return entity.state ]]]'
  1394.       - type: vertical-stack
  1395.         title: Return count of lights on in group
  1396.         cards:
  1397.           - type: custom:button-card
  1398.             entity: light.all_lights
  1399.             name: >
  1400.              [[[ var i; var entities = entity.attributes.entity_id; var count =
  1401.               0; for (i = 0; i < entities.length; i++) {
  1402.                 var state = states[entities[i]].state;
  1403.                 if (state == 'on') {count += 1;}
  1404.                }
  1405.               if (count == entities.length) return 'All ' + entities.length + '
  1406.               lights on'; if (count == 0) return 'No lights on'; return 'Lights
  1407.               on: ' + count + ' of ' + entities.length; ]]]
  1408.       - type: vertical-stack
  1409.         title: State-switch card (Door open > 30 sec)
  1410.         cards:
  1411.           - type: custom:state-switch
  1412.             entity: template
  1413.             template: >-
  1414.               {% if is_state('binary_sensor.living_room_door_on_off', 'on') and
  1415.               (as_timestamp(now()) -
  1416.               as_timestamp(states.binary_sensor.living_room_door_on_off.last_updated))|int
  1417.               > 30 %}  open_too_long  {% endif %}
  1418.             states:
  1419.               open_too_long:
  1420.                 type: custom:mushroom-chips-card
  1421.                 chips:
  1422.                   - type: template
  1423.                     icon_color: red
  1424.                     icon: mdi:door-open
  1425.                     card_mod:
  1426.                       style: |
  1427.                        ha-card {
  1428.                         animation: blink 1s linear infinite;
  1429.                         --chip-icon-size: 0.6em;
  1430.                         }
  1431.                     hold_action:
  1432.                       action: navigate
  1433.                       navigation_path: /fire-main/sensors
  1434.       - type: vertical-stack
  1435.         title: Custom button with multiple IFs
  1436.         cards:
  1437.           - type: custom:button-card
  1438.             variables:
  1439.               temperature: |
  1440.                [[[
  1441.                 var temperature = states["sensor.bedroom_temperature"].state;
  1442.                 if (temperature >= 74) return "high";
  1443.                 else if (temperature <= 60) return "low";
  1444.                 else return true
  1445.                 ]]]
  1446.               humidity: |
  1447.                [[[
  1448.                 var humidity = states["sensor.bedroom_humidity"].state;
  1449.                 if (humidity >= 60) return "high";
  1450.                 else if (humidity <= 30) return "low";
  1451.                 else return true
  1452.                 ]]]
  1453.             name: >
  1454.              [[[  
  1455.  
  1456.               if (variables.temperature == true && variables.humidity == true)
  1457.               return "Temperature & Humidity Good";  
  1458.  
  1459.               if (variables.temperature != true && variables.humidity == true)
  1460.               return "Temperature " + variables.temperature;  
  1461.  
  1462.               if (variables.temperature == true && variables.humidity != true)
  1463.               return "Humidity " + variables.humidity;  
  1464.  
  1465.               if (variables.temperature != true && variables.humidity != true)
  1466.               return "Temperature " + variables.temperature + " & humidity " +
  1467.               variables.humidity;
  1468.  
  1469.               else return "unknown";
  1470.  
  1471.               ]]]
  1472.             icon: >
  1473.              [[[ if (variables.temperature == true && variables.humidity ==
  1474.               true) return "mdi:check";  
  1475.  
  1476.               if (variables.temperature != true && variables.humidity == true)
  1477.               return "mdi:thermometer";  
  1478.  
  1479.               if (variables.temperature == true && variables.humidity != true)
  1480.               return "mdi:water";  
  1481.  
  1482.               if (variables.temperature != true && variables.humidity != true)
  1483.               return "mdi:thermometer-water";
  1484.  
  1485.               else return "mdi:minus-circle-outline"; ]]]
  1486.             styles:
  1487.               icon:
  1488.                 - color: >
  1489.                    [[[ if (variables.temperature == true && variables.humidity
  1490.                     == true) return "white" ; else return "black"; ]]]
  1491.               card:
  1492.                 - color: >
  1493.                    [[[ if (variables.temperature == true && variables.humidity
  1494.                     == true) return "white" ; else return "black"; ]]]
  1495.                 - background-color: >
  1496.                    [[[ if (variables.temperature == true && variables.humidity
  1497.                     == true) return 'green'; else return 'red'; ]]]
  1498.       - type: custom:button-card
  1499.         entity: light.bedroom1
  1500.         template: chips
  1501.         tap_action:
  1502.           action: toggle
  1503.           entity: '[[[ return variables.ulm_chip_mdi_icon_only_entity ]]]'
  1504.         show_icon: true
  1505.         icon: '[[[ return variables.ulm_chip_mdi_icon_only_icon ]]]'
  1506.         styles:
  1507.           grid:
  1508.             - grid-template-areas: '''i'''
  1509.           icon:
  1510.             - color: '[[[ return variables.ulm_chip_mdi_icon_only_icon_color; ]]]'
  1511.         variables:
  1512.           ulm_chip_mdi_icon_only_entity: light.bedroom1
  1513.           ulm_chip_mdi_icon_only_icon: mdi:lightbulb
  1514.           ulm_chip_mdi_icon_only_icon_color: white
  1515.       - type: custom:button-card
  1516.         entity: input_number.temp_helper
  1517.         name: |
  1518.          [[[
  1519.           var value = states["input_number.temp_helper"].state;
  1520.           if (value >= 20) return "Full";
  1521.           if (value >= 10) return "Half";
  1522.           if (value < 10) return "Empty";
  1523.           else return "Unknown";
  1524.           ]]]
  1525.         icon: |
  1526.          [[[
  1527.           var value = states["input_number.temp_helper"].state;
  1528.           if (value >= 20) return "mdi:circle";
  1529.           if (value >= 10) return 'mdi:circle-half-full';
  1530.           if (value < 10) return 'mdi:circle-outline';
  1531.           else return
  1532.           ]]]
  1533.       - type: custom:button-card
  1534.         show_icon: false
  1535.         entity: input_boolean.tester
  1536.         name: |-
  1537.           [[[
  1538.             var t = states['timer.tester'].attributes.finishes_at;
  1539.             if (entity.state === "on") return "Apple";
  1540.             if (entity.state === "off") return t
  1541.           ]]]
  1542.       - type: vertical-stack
  1543.         title: Hiding entity/cards based on state
  1544.         cards:
  1545.           - type: entities
  1546.             title: Using an entities card with conditional
  1547.             entities:
  1548.               - entity: input_boolean.tester
  1549.                 name: Enable automation?
  1550.               - type: conditional
  1551.                 conditions:
  1552.                   - entity: input_boolean.tester
  1553.                     state: 'on'
  1554.                 row:
  1555.                   entity: input_datetime.automation_nighttime_motion_detection_start
  1556.                   name: Start Time
  1557.               - type: conditional
  1558.                 conditions:
  1559.                   - entity: input_boolean.tester
  1560.                     state: 'on'
  1561.                 row:
  1562.                   entity: input_datetime.automation_nighttime_motion_detection_end
  1563.                   name: End Time
  1564.           - type: custom:stack-in-card
  1565.             title: Using a conditional card
  1566.             mode: vertical
  1567.             cards:
  1568.               - type: entities
  1569.                 entities:
  1570.                   - entity: input_boolean.tester
  1571.                     name: Enable automation?
  1572.                 card_mod:
  1573.                   style: |
  1574.                    ha-card {
  1575.                       border: none;
  1576.                     }
  1577.               - type: conditional
  1578.                 conditions:
  1579.                   - entity: input_boolean.tester
  1580.                     state_not: 'off'
  1581.                 card:
  1582.                   type: vertical-stack
  1583.                   cards:
  1584.                     - type: entities
  1585.                       entities:
  1586.                         - entity: >-
  1587.                             input_datetime.automation_nighttime_motion_detection_start
  1588.                           name: Start time
  1589.                       card_mod:
  1590.                         style: |
  1591.                          ha-card {
  1592.                             border: none;
  1593.                           }
  1594.                     - type: entities
  1595.                       entities:
  1596.                         - entity: >-
  1597.                             input_datetime.automation_nighttime_motion_detection_end
  1598.                           name: End time
  1599.                       card_mod:
  1600.                         style: |
  1601.                          ha-card {
  1602.                             border: none;
  1603.                           }
  1604.       - type: custom:button-card
  1605.         entity: person.derek
  1606.         name: >-
  1607.           [[[ if (entity.state === "home") return "At the house"; else return
  1608.           "Not at the house" ]]]
  1609.       - type: custom:button-card
  1610.         entity: sensor.bedroom_temperature
  1611.         name: '[[[ return parseFloat(entity.state).toFixed(1) + "°F" ]]]'
  1612.       - type: vertical-stack
  1613.         title: Stack-in-card with borders removed
  1614.         cards:
  1615.           - type: custom:stack-in-card
  1616.             mode: vertical
  1617.             cards:
  1618.               - type: horizontal-stack
  1619.                 cards:
  1620.                   - show_name: true
  1621.                     show_icon: true
  1622.                     type: button
  1623.                     tap_action:
  1624.                       action: toggle
  1625.                     entity: light.living_room_lights
  1626.                     icon: mdi:sleep
  1627.                     name: Sleep
  1628.                     card_mod:
  1629.                       style: |
  1630.                        ha-card {
  1631.                           border: none;
  1632.                         }
  1633.                   - show_name: true
  1634.                     show_icon: true
  1635.                     type: button
  1636.                     tap_action:
  1637.                       action: toggle
  1638.                     entity: light.living_room_lights
  1639.                     icon: mdi:sleep
  1640.                     name: Sleep
  1641.                     card_mod:
  1642.                       style: |
  1643.                        ha-card {
  1644.                           border: none;
  1645.                         }
  1646.                   - show_name: true
  1647.                     show_icon: true
  1648.                     type: button
  1649.                     tap_action:
  1650.                       action: toggle
  1651.                     entity: light.living_room_lights
  1652.                     icon: mdi:sleep
  1653.                     name: Sleep
  1654.                     card_mod:
  1655.                       style: |
  1656.                        ha-card {
  1657.                           border: none;
  1658.                         }
  1659.               - type: horizontal-stack
  1660.                 cards:
  1661.                   - show_name: true
  1662.                     show_icon: true
  1663.                     type: button
  1664.                     tap_action:
  1665.                       action: toggle
  1666.                     entity: light.living_room_lights
  1667.                     icon: mdi:sleep
  1668.                     name: Sleep
  1669.                     card_mod:
  1670.                       style: |
  1671.                        ha-card {
  1672.                           border: none;
  1673.                         }
  1674.                   - show_name: true
  1675.                     show_icon: true
  1676.                     type: button
  1677.                     tap_action:
  1678.                       action: toggle
  1679.                     entity: light.living_room_lights
  1680.                     icon: mdi:sleep
  1681.                     name: Sleep
  1682.                     card_mod:
  1683.                       style: |
  1684.                        ha-card {
  1685.                           border: none;
  1686.                         }
  1687.                   - show_name: true
  1688.                     show_icon: true
  1689.                     type: button
  1690.                     tap_action:
  1691.                       action: toggle
  1692.                     entity: light.living_room_lights
  1693.                     icon: mdi:sleep
  1694.                     name: Sleep
  1695.                     card_mod:
  1696.                       style: |
  1697.                        ha-card {
  1698.                           border: none;
  1699.                         }
  1700.       - show_name: true
  1701.         show_icon: true
  1702.         show_state: true
  1703.         type: glance
  1704.         entities:
  1705.           - entity: light.bedroom2
  1706.           - entity: sensor.canon_laser_printer
  1707.           - entity: button.fire_living_room_restart_browser
  1708.         columns: 4
  1709.       - type: grid
  1710.         columns: 4
  1711.         card_mod:
  1712.           style: |
  1713.            ha-card {
  1714.               padding: 0px !important;
  1715.               margin: 0px;
  1716.             }  
  1717.         cards:
  1718.           - type: custom:button-card
  1719.             entity: light.living_room_lights
  1720.             name: Lights
  1721.             card_mod:
  1722.               style: |
  1723.                ha-card {
  1724.                   padding: 0px !important;
  1725.                   margin: 0px !important;
  1726.                 }  
  1727.           - type: custom:button-card
  1728.             entity: light.living_room_lights
  1729.             name: Lights
  1730.           - type: custom:button-card
  1731.             entity: light.living_room_lights
  1732.             name: Lights
  1733.           - type: custom:button-card
  1734.             entity: light.living_room_lights
  1735.             name: Lights
  1736.       - type: entities
  1737.         entities:
  1738.          - sensor.s22_ultra_battery_level
  1739.         card_mod:
  1740.           style: |-
  1741.             :host {
  1742.               {% set phlevel = states('sensor.s22_ultra_battery_level') | float %}
  1743.               {% if phlevel < 7.2 %}
  1744.                 --card-mod-icon-color: red;
  1745.                 --card-mod-icon: mdi:stop-circle-outline;
  1746.                 --primary-text-color: red;
  1747.               {% elif phlevel > 7.2 and phlevel < 7.39 %}
  1748.                 --card-mod-icon: mdi:sign-caution
  1749.                 --card-mod-icon-color: yellow;
  1750.               {% elif phlevel > 7.4 and phlevel < 7.59 %}
  1751.                 --card-mod-icon-color: green;
  1752.               {% elif phlevel >= 7.6 and phlevel <= 7.79 %}
  1753.                 --card-mod-icon-color: yellow;
  1754.               {% elif phlevel >= 7.80 %}
  1755.                 --card-mod-icon: mdi:alert;
  1756.                 --card-mod-icon-color: yellow;
  1757.                 --primary-text-color: yellow;
  1758.               {% else %}
  1759.                 --card-mod-icon: mdi:head-question;
  1760.                 --card-mod-icon-color: grey;
  1761.                 --card-mod-text-color: red;
  1762.                 --primary-text-color: red;
  1763.                 --secondary-text-color: blue;
  1764.               {% endif %}
  1765.             }
  1766.       - type: custom:frigate-card
  1767.         cameras:
  1768.           - camera_entity: camera.rtsp
  1769.         view:
  1770.           dark_mode: 'on'
  1771.         menu:
  1772.           buttons:
  1773.             frigate:
  1774.               enabled: false
  1775.             live:
  1776.               enabled: false
  1777.             cameras:
  1778.               enabled: false
  1779.             camera_ui:
  1780.               enabled: true
  1781.             substreams:
  1782.               enabled: false
  1783.           style: none
  1784.         live:
  1785.           preload: true
  1786.           controls:
  1787.             builtin: false
  1788.         performance:
  1789.           features:
  1790.             animated_progress_indicator: false
  1791.       - type: custom:banner-card
  1792.         row_size: 3
  1793.         background: '#B0C2ED'
  1794.         heading:
  1795.          - mdi:shower
  1796.           - Bathroom
  1797.         color: red
  1798.         link: /lovelace/living_room
  1799.         entities:
  1800.           - entity: sensor.living_room_door_temperature
  1801.             name: Temp
  1802.       - type: custom:button-card
  1803.         show_name: true
  1804.         show_icon: true
  1805.         show_state: false
  1806.         entity: media_player.plex_plex_for_windows_desktop_p54jk04
  1807.         name: >-
  1808.           [[[ return
  1809.           states['media_player.plex_plex_for_windows_desktop_p54jk04'].state;
  1810.           ]]]
  1811.         icon: |
  1812.          [[[
  1813.              if (entity.state == "playing") return 'mdi:play';
  1814.              if (entity.state == "paused") return 'mdi:play-pause';
  1815.              else return 'mdi:stop';
  1816.           ]]]
  1817.       - type: custom:button-card
  1818.         entity: person.derek
  1819.         aspect_ratio: 1/1
  1820.         name: Person
  1821.         show_entity_picture: true
  1822.         show_name: false
  1823.         hold_action:
  1824.           action: none
  1825.         state:
  1826.           - value: home
  1827.             styles:
  1828.               custom_fields:
  1829.                 icon:
  1830.                   - border-color: '#77c66e'
  1831.           - value: not_home
  1832.             styles:
  1833.               card:
  1834.                 - background-color: '#dedede'
  1835.               custom_fields:
  1836.                 icon:
  1837.                   - border-color: deepskyblue
  1838.         styles:
  1839.           card:
  1840.             - background-color: white
  1841.             - border-radius: 5%
  1842.             - padding: 5%
  1843.             - color: gray
  1844.             - font-size: 10px
  1845.             - text-shadow: 0px 0px 0px black
  1846.             - text-transform: capitalize
  1847.             - justify-self: end
  1848.             - align-self: middle
  1849.           grid:
  1850.             - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
  1851.             - grid-template-columns: 2fr 1fr
  1852.             - grid-template-rows: 1fr min-content min-content min-content min-content
  1853.           name:
  1854.             - font-size: 15px
  1855.             - align-self: middle
  1856.             - justify-self: start
  1857.             - padding-bottom: 10px
  1858.           custom_fields:
  1859.             icon:
  1860.               - clip-path: circle()
  1861.               - width: 80%
  1862.               - pointer-events: none
  1863.               - display: grid
  1864.               - border: 5px solid
  1865.               - border-color: gray
  1866.               - border-radius: 500px
  1867.               - margin: 0 +10% 0 0
  1868.               - justify-self: end
  1869.               - opacity: 1
  1870.             status:
  1871.               - align-self: start
  1872.               - justify-self: end
  1873.               - color: gray
  1874.             proximity:
  1875.               - padding: 0.5em 0px
  1876.               - align-self: middle
  1877.               - justify-self: start
  1878.               - color: gray
  1879.             wifi:
  1880.               - padding: 0.5em 0px
  1881.               - align-self: middle
  1882.               - justify-self: start
  1883.               - color: gray
  1884.               - '--text-wifi-color-sensor': >-
  1885.                   [[[ if (states["person.derek"].attributes.wifi_on == 'false')
  1886.                   return "#aaaaaa"; ]]]
  1887.             battery:
  1888.               - padding: 0.5em 0px
  1889.               - align-self: middle
  1890.               - justify-self: start
  1891.               - color: gray
  1892.               - '--text-color-sensor': >-
  1893.                   [[[ if (states["person.derek"].attributes.battery_level < 50)
  1894.                   return "#EF4F1A"; ]]]
  1895.         custom_fields:
  1896.           icon: >
  1897.             [[[ return entity === undefined ? null : `<img
  1898.             src="https://frazhome.zapto.org/local/alex.png" width="100%">`; ]]]
  1899.           status: |
  1900.            [[[
  1901.               if (states['person.derek'].state =='not_home') {
  1902.               return `<ha-icon icon="mdi:home-export-outline"
  1903.                 style="width: 20px; height: 20px; color: '#888888';">
  1904.                 </ha-icon><span> Away</span>`;
  1905.               }
  1906.               if (states['person.derek'].state =='home') {
  1907.               return `<ha-icon
  1908.                 icon="mdi:home"
  1909.                 style="width: 20px; height: 20px; color: 888888;">
  1910.                 </ha-icon><span> ${entity.state}</span>`;
  1911.               } else {
  1912.               return `<ha-icon
  1913.                 icon="mdi:map-marker-radius"
  1914.                 style="width: 20px; height: 20px; color: 888888;">
  1915.                 </ha-icon><span> ${entity.state}</span>`;
  1916.               }
  1917.             ]]]
  1918.           battery: |
  1919.            [[[
  1920.               if (states['person.derek'].attributes.battery_charging =='true') {
  1921.                 return `<ha-icon
  1922.                 icon="mdi:battery-charging"
  1923.                 style="width: 20px; height: 20px; color: #888888;">
  1924.                 </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['person.derek'].attributes.battery_level}% battery</span></span>`;
  1925.               } else {
  1926.                 return `<ha-icon
  1927.                 icon="mdi:battery"
  1928.                 style="width: 20px; height: 20px; color: #888888;">
  1929.                 </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['person.derek'].attributes.battery_level}% battery</span></span>`;
  1930.               }
  1931.             ]]]
  1932.           wifi: |
  1933.            [[[
  1934.               if (states['person.derek'].attributes.wifi_on =='false') {
  1935.                 return `<ha-icon
  1936.                 icon="mdi:wifi"
  1937.                 style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
  1938.                 </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`;
  1939.               } else {
  1940.                 return `<ha-icon
  1941.                 icon="mdi:wifi"
  1942.                 style="width: 20px; height: 20px; color: #888888;">
  1943.                 </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['person.derek'].attributes.wifi_on}</span></span>`;
  1944.               }
  1945.             ]]]
  1946.       - type: custom:button-card
  1947.         entity: person.derek
  1948.         aspect_ratio: 1/1
  1949.         name: Person
  1950.         show_entity_picture: true
  1951.         show_name: false
  1952.         hold_action:
  1953.           action: none
  1954.         state:
  1955.           - value: home
  1956.             styles:
  1957.               custom_fields:
  1958.                 icon:
  1959.                   - border-color: '#77c66e'
  1960.           - value: not_home
  1961.             styles:
  1962.               card:
  1963.                 - background-color: '#dedede'
  1964.               custom_fields:
  1965.                 icon:
  1966.                   - border-color: '#EF4F1A'
  1967.           - value: Work
  1968.             styles:
  1969.               custom_fields:
  1970.                 icon:
  1971.                   - border-color: deepskyblue
  1972.         styles:
  1973.           card:
  1974.             - background-color: transparent
  1975.             - border-radius: 5%
  1976.             - padding: 5%
  1977.             - color: gray
  1978.             - font-size: 10px
  1979.             - text-shadow: 0px 0px 0px black
  1980.             - text-transform: capitalize
  1981.             - justify-self: end
  1982.             - align-self: middle
  1983.             - width: 200px
  1984.             - height: 200px
  1985.           grid:
  1986.             - grid-template-areas: '"icon icon" "n n" "battery status" "s s" "wifi steps" "sd sd"'
  1987.             - grid-template-columns: 1fr 1fr
  1988.             - grid-template-rows: 1fr min-content min-content min-content min-content
  1989.           name:
  1990.             - font-size: 15px
  1991.             - align-self: middle
  1992.             - justify-self: start
  1993.             - padding-bottom: 10px
  1994.           custom_fields:
  1995.             icon:
  1996.               - clip-path: circle()
  1997.               - width: 60%
  1998.               - pointer-events: none
  1999.               - display: grid
  2000.               - border: 5px solid
  2001.               - border-color: gray
  2002.               - border-radius: 500px
  2003.               - margin: 0 15% 0 0
  2004.               - justify-self: end
  2005.               - opacity: 1
  2006.             status:
  2007.               - padding: 0.5em
  2008.               - align-self: middle
  2009.               - justify-self: right
  2010.               - color: gray
  2011.             steps:
  2012.               - padding: 0.5em
  2013.               - align-self: middle
  2014.               - justify-self: right
  2015.               - color: gray
  2016.             wifi:
  2017.               - padding: 0.5em 0px
  2018.               - align-self: middle
  2019.               - justify-self: start
  2020.               - color: gray
  2021.               - '--text-wifi-color-sensor': >-
  2022.                   [[[ if (states["sensor.s22_ultra_wifi_connection"].state ==
  2023.                   '<not connected>') return "#aaaaaa"; ]]]
  2024.             battery:
  2025.               - padding: 0.5em 0px
  2026.               - align-self: middle
  2027.               - justify-self: start
  2028.               - color: gray
  2029.               - '--text-color-sensor': >-
  2030.                   [[[ if (states["sensor.s22_ultra_battery_level"].state < 50)
  2031.                   return "#EF4F1A"; ]]]
  2032.         custom_fields:
  2033.           icon: >
  2034.             [[[ return entity === undefined ? null : `<img
  2035.             src="${states[entity.entity_id].attributes.entity_picture}"
  2036.             width="100%">`; ]]]
  2037.           status: |
  2038.            [[[
  2039.               if (states['person.derek'].state =='not_home') {
  2040.               return `<ha-icon icon="mdi:home-export-outline"
  2041.                 style="width: 20px; height: 20px; color: '#888888';">
  2042.                 </ha-icon><span> Away</span>`;
  2043.               }
  2044.               if (states['person.derek'].state =='home') {
  2045.               return `<ha-icon
  2046.                 icon="mdi:home"
  2047.                 style="width: 20px; height: 20px; color: 888888;">
  2048.                 </ha-icon><span> ${entity.state}</span>`;
  2049.               } else {
  2050.               return `<ha-icon
  2051.                 icon="mdi:map-marker-radius"
  2052.                 style="width: 20px; height: 20px; color: 888888;">
  2053.                 </ha-icon><span> ${entity.state}</span>`;
  2054.               }
  2055.             ]]]
  2056.           steps: |
  2057.            [[[
  2058.               return `<ha-icon
  2059.                 icon="mdi:walk"
  2060.                 style="width: 20px; height: 20px; color: #888888;">
  2061.                 </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${parseInt(states['sensor.watch5_daily_steps'].state)} steps</span></span>`
  2062.             ]]]
  2063.           battery: |
  2064.            [[[
  2065.               if (states['sensor.s22_ultra_battery_state'].state =='charging') {
  2066.                 return `<ha-icon
  2067.                 icon="mdi:battery-charging"
  2068.                 style="width: 20px; height: 20px; color: #888888;">
  2069.                 </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.s22_ultra_battery_level'].state}% battery</span></span>`;
  2070.               } else {
  2071.                 return `<ha-icon
  2072.                 icon="mdi:battery"
  2073.                 style="width: 20px; height: 20px; color: #888888;">
  2074.                 </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.s22_ultra_battery_level'].state}% battery</span></span>`;
  2075.               }
  2076.             ]]]
  2077.           wifi: |
  2078.            [[[
  2079.               if (states['sensor.s22_ultra_wifi_connection'].state =='<not connected>') {
  2080.                 return `<ha-icon
  2081.                 icon="mdi:wifi"
  2082.                 style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
  2083.                 </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`;
  2084.               } else {
  2085.                 return `<ha-icon
  2086.                 icon="mdi:wifi"
  2087.                 style="width: 20px; height: 20px; color: #888888;">
  2088.                 </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.s22_ultra_wifi_connection'].state}</span></span>`;
  2089.               }
  2090.             ]]]
  2091.       - type: custom:button-card
  2092.         entity: sensor.s22_ultra_battery_level
  2093.         show_state: true
  2094.         variables:
  2095.           var_color: |-
  2096.             [[[
  2097.               var percentage = entity.state;
  2098.               var r = 0; var g = 0; var b = 0;
  2099.               if (percentage < 50 ) {
  2100.                 var r = 255;
  2101.                 var g = parseInt(5.1 * percentage);
  2102.               } else {  
  2103.                 var g = 255;
  2104.                 var r = parseInt(510 - 5.10 * percentage);
  2105.               }
  2106.               var h = r * 0x10000 + g * 0x100 + b * 0x1;
  2107.               return '#' + ('000000' + h.toString(16)).slice(-6);
  2108.             ]]]
  2109.         styles:
  2110.           icon:
  2111.             - color: '[[[ return variables.var_color ]]]'
  2112.           card:
  2113.             - height: 200px
  2114.             - width: 200px
  2115.       - type: grid
  2116.         cards:
  2117.           - type: gauge
  2118.             entity: sensor.s22_ultra_battery_level
  2119.             min: 0
  2120.             max: 100
  2121.             segments:
  2122.               - from: 0
  2123.                 color: var(--gauge-gradient)
  2124.             needle: true
  2125.             card_mod:
  2126.               style: >
  2127.                 :host { --gauge-gradient: url("data:image/svg+xml,%3Csvg
  2128.                xmlns='http://www.w3.org/2000/svg' width='100'
  2129.                height='100'%3E%3Cdefs%3E%3ClinearGradient id='linear' x1='0%25'
  2130.                y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25'
  2131.                stop-color='red'/%3E%3Cstop offset='50%25'
  2132.                stop-color='yellow'/%3E%3Cstop offset='100%25'
  2133.                stop-color='green'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E#linear");
  2134.                 }
  2135.           - type: gauge
  2136.             entity: sensor.s22_ultra_battery_level
  2137.             min: 0
  2138.             max: 100
  2139.             segments:
  2140.               - from: 0
  2141.                 color: var(--gauge-gradient)
  2142.             needle: true
  2143.             card_mod:
  2144.               style: |
  2145.                 :host { --gauge-gradient:  {% set percentage = 87 | int %}
  2146.                   {% set r, g, b = 0, 0, 0 %}
  2147.                   {% if (percentage <= 51) %}
  2148.                     {% set r = 255 %}
  2149.                     {% set g = (5.0 * percentage) | round | int %}
  2150.                   {% else %}
  2151.                     {% set g = 255 %}
  2152.                     {% set r = (505 - 4.89 * percentage) | round | int %}
  2153.                   {% endif %}
  2154.                   {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
  2155.           - type: gauge
  2156.             entity: sensor.s22_ultra_battery_level
  2157.             min: 0
  2158.             max: 100
  2159.             needle: true
  2160.             segments:
  2161.               - from: 0
  2162.                 color: '#57bb8a'
  2163.               - from: 5
  2164.                 color: '#63b682'
  2165.               - from: 10
  2166.                 color: '#73b87e'
  2167.               - from: 15
  2168.                 color: '#84bb7b'
  2169.               - from: 20
  2170.                 color: '#94bd77'
  2171.               - from: 25
  2172.                 color: '#a4c073'
  2173.               - from: 30
  2174.                 color: '#b0be6e'
  2175.               - from: 35
  2176.                 color: '#c4c56d'
  2177.               - from: 40
  2178.                 color: '#d4c86a'
  2179.               - from: 45
  2180.                 color: '#e2c965'
  2181.               - from: 50
  2182.                 color: '#f5ce62'
  2183.               - from: 55
  2184.                 color: '#f3c563'
  2185.               - from: 60
  2186.                 color: '#e9b861'
  2187.               - from: 65
  2188.                 color: '#e6ad61'
  2189.               - from: 70
  2190.                 color: '#ecac67'
  2191.               - from: 75
  2192.                 color: '#e9a268'
  2193.               - from: 80
  2194.                 color: '#e79a69'
  2195.               - from: 85
  2196.                 color: '#e5926b'
  2197.               - from: 90
  2198.                 color: '#e2886c'
  2199.               - from: 90
  2200.                 color: '#e0816d'
  2201.               - from: 100
  2202.                 color: '#dd776e'
  2203.           - type: gauge
  2204.             entity: sensor.s22_ultra_battery_level
  2205.             name: Red-to-green
  2206.             min: 0
  2207.             max: 100
  2208.             needle: true
  2209.             segments:
  2210.               - from: 0
  2211.                 color: '#FF0000'
  2212.               - from: 3
  2213.                 color: '#FF1100'
  2214.               - from: 7
  2215.                 color: '#FF2200'
  2216.               - from: 10
  2217.                 color: '#FF3300'
  2218.               - from: 13
  2219.                 color: '#FF4400'
  2220.               - from: 17
  2221.                 color: '#FF5500'
  2222.               - from: 20
  2223.                 color: '#FF6600'
  2224.               - from: 23
  2225.                 color: '#FF7700'
  2226.               - from: 27
  2227.                 color: '#FF8800'
  2228.               - from: 30
  2229.                 color: '#FF9900'
  2230.               - from: 33
  2231.                 color: '#FFAA00'
  2232.               - from: 37
  2233.                 color: '#FFBB00'
  2234.               - from: 40
  2235.                 color: '#FFCC00'
  2236.               - from: 43
  2237.                 color: '#FFDD00'
  2238.               - from: 47
  2239.                 color: '#FFEE00'
  2240.               - from: 50
  2241.                 color: '#FFFF00'
  2242.               - from: 53
  2243.                 color: '#EEFF00'
  2244.               - from: 57
  2245.                 color: '#DDFF00'
  2246.               - from: 60
  2247.                 color: '#CCFF00'
  2248.               - from: 63
  2249.                 color: '#BBFF00'
  2250.               - from: 67
  2251.                 color: '#AAFF00'
  2252.               - from: 70
  2253.                 color: '#99FF00'
  2254.               - from: 73
  2255.                 color: '#88FF00'
  2256.               - from: 77
  2257.                 color: '#77FF00'
  2258.               - from: 80
  2259.                 color: '#66FF00'
  2260.               - from: 83
  2261.                 color: '#55FF00'
  2262.               - from: 87
  2263.                 color: '#44FF00'
  2264.               - from: 90
  2265.                 color: '#33FF00'
  2266.               - from: 93
  2267.                 color: '#22FF00'
  2268.               - from: 97
  2269.                 color: '#11FF00'
  2270.               - from: 100
  2271.                 color: '#00FF00'
  2272.           - type: gauge
  2273.             entity: sensor.s22_ultra_battery_level
  2274.             name: Green-to-red
  2275.             min: 0
  2276.             max: 100
  2277.             needle: true
  2278.             segments:
  2279.               - from: 0
  2280.                 color: '#00FF00'
  2281.               - from: 3
  2282.                 color: '#11FF00'
  2283.               - from: 7
  2284.                 color: '#22FF00'
  2285.               - from: 10
  2286.                 color: '#33FF00'
  2287.               - from: 13
  2288.                 color: '#44FF00'
  2289.               - from: 17
  2290.                 color: '#55FF00'
  2291.               - from: 20
  2292.                 color: '#66FF00'
  2293.               - from: 23
  2294.                 color: '#77FF00'
  2295.               - from: 27
  2296.                 color: '#88FF00'
  2297.               - from: 30
  2298.                 color: '#99FF00'
  2299.               - from: 33
  2300.                 color: '#AAFF00'
  2301.               - from: 37
  2302.                 color: '#BBFF00'
  2303.               - from: 40
  2304.                 color: '#CCFF00'
  2305.               - from: 43
  2306.                 color: '#DDFF00'
  2307.               - from: 47
  2308.                 color: '#EEFF00'
  2309.               - from: 50
  2310.                 color: '#FFFF00'
  2311.               - from: 53
  2312.                 color: '#FFEE00'
  2313.               - from: 57
  2314.                 color: '#FFDD00'
  2315.               - from: 60
  2316.                 color: '#FFCC00'
  2317.               - from: 63
  2318.                 color: '#FFBB00'
  2319.               - from: 67
  2320.                 color: '#FFAA00'
  2321.               - from: 70
  2322.                 color: '#FF9900'
  2323.               - from: 73
  2324.                 color: '#FF8800'
  2325.               - from: 77
  2326.                 color: '#FF7700'
  2327.               - from: 80
  2328.                 color: '#FF6600'
  2329.               - from: 83
  2330.                 color: '#FF5500'
  2331.               - from: 87
  2332.                 color: '#FF4400'
  2333.               - from: 90
  2334.                 color: '#FF3300'
  2335.               - from: 93
  2336.                 color: '#FF2200'
  2337.               - from: 97
  2338.                 color: '#FF1100'
  2339.               - from: 100
  2340.                 color: '#FF0000'
  2341.       - type: custom:button-card
  2342.         entity: light.office1
  2343.         name: Office
  2344.         icon: mdi:wall-sconce-flat
  2345.         styles:
  2346.           card:
  2347.             - height: 100px
  2348.           icon:
  2349.             - width: 25%
  2350.           name:
  2351.             - padding: 5px 0px
  2352.             - font-size: 15px
  2353.             - text-overflow: unset
  2354.             - white-space: unset
  2355.             - word-break: break-word
  2356.         state:
  2357.           - value: 'on'
  2358.             color: yellow
  2359.           - value: 'off'
  2360.             styles:
  2361.               icon:
  2362.                 - opacity: 0.5
  2363.       - type: entities
  2364.         entities:
  2365.           - entity: light.living_room1
  2366.             type: custom:multiple-entity-row
  2367.             name: One entity
  2368.             secondary_info: last-changed
  2369.             entities:
  2370.              - sensor.bedroom_max_temp
  2371.             icon: >
  2372.               [[[ return `<ha-icon icon="mdi:circle-small" style="width: 25px;
  2373.               height:25px;"> </ha-icon>`; ]]]
  2374.          - entity: light.hallway
  2375.            name: Entity card using one state
  2376.            type: custom:multiple-entity-row
  2377.            secondary_info: last-changed
  2378.            toggle: true
  2379.            card_mod:
  2380.              style: |-
  2381.                :host {
  2382.                  {% if is_state('light.hallway', 'off') %}
  2383.                    --card-mod-icon: mdi:light-switch-off;
  2384.                    --card-mod-icon-color: red;
  2385.                  {% else %}
  2386.                    --card-mod-icon: mdi:light-switch;
  2387.                    --card-mod-icon-color: green;
  2388.                  {% endif %}
  2389.                }
  2390.      - type: custom:button-card
  2391.        entity: light.bedroom1
  2392.        template:
  2393.          - onstate
  2394.          - offstate
  2395.  - path: mushroom
  2396.    icon: mdi:mushroom
  2397.    theme: Derek Dark Theme
  2398.    badges: []
  2399.    cards:
  2400.      - type: vertical-stack
  2401.        title: Mushroom light card with brightness control
  2402.        cards:
  2403.          - type: custom:mushroom-light-card
  2404.            entity: light.living_room_lights
  2405.            fill_container: false
  2406.            use_light_color: true
  2407.            show_brightness_control: true
  2408.            show_color_control: false
  2409.            show_color_temp_control: false
  2410.            collapsible_controls: true
  2411.            layout: horizontal
  2412.            card_mod:
  2413.              style: |
  2414.                mushroom-chips-card {
  2415.                 --ha-card-background: transparent;}
  2416.      - type: custom:mushroom-chips-card
  2417.        chips:
  2418.          - type: entity
  2419.            entity: person.derek
  2420.          - type: entity
  2421.            entity: sensor.s22_ultra_battery_level
  2422.            use_entity_picture: false
  2423.          - type: entity
  2424.            entity: input_boolean.guest_mode
  2425.            double_tap_action:
  2426.              action: more-info
  2427.            name: Guest
  2428.            use_entity_picture: false
  2429.            content_info: name
  2430.            icon_color: green
  2431.            tap_action:
  2432.              action: toggle
  2433.        card_mod:
  2434.          style: |
  2435.            ha-card {
  2436.              {% if states('input_boolean.guest_mode') == 'on' %}
  2437.                --card-mod-icon-color: green;
  2438.              {% elif states('input_boolean.guest_mode') == 'off' %}
  2439.                --card-mod-icon-color: red;
  2440.              {% endif %}
  2441.            }
  2442.      - type: custom:mushroom-chips-card
  2443.        chips:
  2444.          - type: entity
  2445.            entity: person.derek
  2446.          - type: template
  2447.            content: |-
  2448.              {% if states.light | selectattr('state', 'eq', 'on')
  2449.                | map(attribute='entity_id') | map('area_name')
  2450.                | select('in', ['Living Room'])
  2451.                | list | count  == 0 %}
  2452.               {0}
  2453.              {%else %}
  2454.              {{states.light | selectattr('state', 'eq', 'on')
  2455.                | map(attribute='entity_id') | map('area_name')
  2456.                | select('in', ['Living Room'])
  2457.                | list | count}}
  2458.              {%- endif %}
  2459.            icon: mdi:lightbulb
  2460.            icon_color: |-
  2461.              {% if (states.light | selectattr('state', 'eq', 'on')
  2462.                    | map(attribute='entity_id') | map('area_name')
  2463.                    | select('in', ['Living Room'])
  2464.                    | list | count) >= 1 -%}
  2465.              yellow
  2466.              {%- else -%}
  2467.              white
  2468.              {%- endif %}
  2469.            hold_action:
  2470.              action: call-service
  2471.              service: light.turn_off
  2472.              service_data: {}
  2473.              target:
  2474.                area_id: living_room
  2475.          - type: template
  2476.            entity: input_boolean.guest_mode
  2477.            content: Guest Mode
  2478.            icon: mdi:home
  2479.            icon_color: |
  2480.              {{ (states(entity)=="on") | iif("green", "red") }}
  2481.            press_action:
  2482.              action: toggle
  2483.      - type: vertical-stack
  2484.        title: Icon based on charging state (chip)
  2485.        cards:
  2486.          - type: custom:mushroom-chips-card
  2487.            chips:
  2488.              - type: template
  2489.                entity: sensor.fire_computer_desk_battery_level
  2490.                content: '{{ states(''sensor.fire_computer_desk_battery_level'') }} %'
  2491.                icon: >
  2492.                  {{
  2493.                  (states("binary_sensor.fire_computer_desk_plugged_in")=="off")
  2494.                  | iif("mdi:tablet-dashboard", "mdi:flash") }}
  2495.                icon_color: >-
  2496.                  {{ is_state('binary_sensor.fire_computer_desk_plugged_in',
  2497.                  'on') | iif('yellow', 'gray') }}
  2498.      - type: vertical-stack
  2499.        title: Icon based on charging state (mushroom)
  2500.        cards:
  2501.          - type: custom:mushroom-template-card
  2502.            entity: sensor.fire_computer_desk_battery_level
  2503.            primary: '{{ states("sensor.fire_computer_desk_battery_level") }} %'
  2504.            icon: >-
  2505.              {{ is_state('binary_sensor.fire_computer_desk_plugged_in', 'on') |
  2506.              iif('mdi:battery', 'mdi:power-plug') }}
  2507.            icon_color: >-
  2508.              {{ is_state('binary_sensor.fire_computer_desk_plugged_in', 'on')
  2509.              |  iif('red',  'green') }}
  2510.      - type: custom:mushroom-template-card
  2511.        primary: Hello, {{user}}
  2512.        secondary: How are you?
  2513.        icon: mdi:home
  2514.        card_mod:
  2515.          style: |
  2516.            :host {
  2517.              --mush-icon-size: 50px;
  2518.            }
  2519.            ha-card {
  2520.              --card-primary-font-size:  15px;
  2521.              --card-secondary-font-size: 10px;
  2522.            }
  2523.            mushroom-shape-icon {
  2524.              --shape-color: none !important;
  2525.              --shape-color-disabled: none !important;
  2526.            }
  2527.      - type: vertical-stack
  2528.        title: Mushroom template card with colors based on battery level
  2529.        cards:
  2530.          - type: custom:mushroom-template-card
  2531.            entity: sensor.s22_ultra_battery_level
  2532.            primary: S22
  2533.            secondary: >-
  2534.              {{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
  2535.              }}
  2536.            icon: |
  2537.              {% set state = (states(entity) | int) %}
  2538.              {% if state >= 75 %} mdi:battery-90
  2539.              {% elif state >= 33 %} mdi:battery-40
  2540.              {% else %} mdi:battery-10
  2541.              {% endif %}
  2542.            icon_color: |
  2543.              {% set state = (states(entity) | int) %}
  2544.              {% if state >= 90 %} green
  2545.              {% elif state >= 70 %} light-green
  2546.              {% elif state >= 50 %} orange
  2547.              {% elif state >= 30 %} yellow
  2548.              {% else %} red
  2549.              {% endif %}
  2550.            tap_action:
  2551.              action: none
  2552.            hold_action:
  2553.              action: none
  2554.            double_tap_action:
  2555.              action: none
  2556.      - type: vertical-stack
  2557.        title: Swipe card (auto scrolling)
  2558.        cards:
  2559.          - type: custom:swipe-card
  2560.            parameters:
  2561.              autoHeight: false
  2562.              initialSlide: 1
  2563.              centeredSlides: true
  2564.              effect: cards
  2565.              loop: false
  2566.              followfinger: true
  2567.              autoplay:
  2568.                delay: 3000
  2569.            cards:
  2570.              - type: custom:mushroom-chips-card
  2571.                chips:
  2572.                  - type: action
  2573.                    tap_action:
  2574.                      action: navigate
  2575.                      navigation_path: /lovelace/WoonKamer
  2576.                    icon: mdi:sofa
  2577.                    icon_color: deep-purple
  2578.                    style: |
  2579.                      ha-card {
  2580.                       --chip-height: 50px;
  2581.                      }
  2582.                  - type: action
  2583.                    icon: mdi:door-closed
  2584.                    tap_action:
  2585.                      action: navigate
  2586.                      navigation_path: /lovelace/gang
  2587.                    icon_color: brown
  2588.                    style: |
  2589.                      ha-card {
  2590.                       --chip-height: 50px;
  2591.                      }
  2592.                  - type: action
  2593.                    icon: mdi:cctv
  2594.                    icon_color: white
  2595.                    tap_action:
  2596.                      action: navigate
  2597.                      navigation_path: /lovelace/Camera
  2598.                    style: |
  2599.                      ha-card {
  2600.                       --chip-height: 50px;
  2601.                      }
  2602.              - type: custom:mushroom-chips-card
  2603.                chips:
  2604.                  - type: entity
  2605.                    entity: person.derek
  2606.                    use_entity_picture: true
  2607.                    card_mod:
  2608.                      style: |
  2609.                        ha-card {
  2610.                          border: unset;
  2611.                          --chip-background: none
  2612.                          --chip-font-size: 0.4em;
  2613.                          --chip-padding: 0 0.3em;
  2614.                          --chip-box-shadow: none;
  2615.                  - type: entity
  2616.                    entity: sensor.s22_ultra_battery_level
  2617.                    use_entity_picture: false
  2618.                  - type: template
  2619.                    entity: input_boolean.guest_mode
  2620.                    content: Guest Mode
  2621.                    icon: >
  2622.                      {{ (states(entity)=="on") | iif("mdi:home",
  2623.                      "mdi:home-off-outline") }}
  2624.                    icon_color: |
  2625.                      {{ (states(entity)=="on") | iif("green", "red") }}
  2626.                    press_action:
  2627.                      action: toggle
  2628.                  - type: template
  2629.                    entity: input_boolean.automation_override
  2630.                    content: Automations
  2631.                    icon: >
  2632.                      {{ (states(entity)=="off") | iif("mdi:lightbulb-auto",
  2633.                      "mdi:lightbulb-auto-outline") }}
  2634.                    icon_color: |
  2635.                      {{ (states(entity)=="off") | iif("green", "red") }}
  2636.                    press_action:
  2637.                      action: toggle
  2638.                    hold_action:
  2639.                      action: navigate
  2640.                      navigation_path: /fire-main/automations
  2641.                  - type: template
  2642.                    entity: input_boolean.automation_interior_motion_detectors
  2643.                    content: Motion Detectors
  2644.                    icon: >
  2645.                      {{ (states(entity)=="on") | iif("mdi:motion-sensor",
  2646.                      "mdi:motion-sensor-off") }}
  2647.                    icon_color: |
  2648.                      {{ (states((entity))=="on") | iif("green", "red") }}
  2649.                    press_action:
  2650.                      action: toggle
  2651.                  - type: conditional
  2652.                    conditions:
  2653.                      - entity: binary_sensor.living_room_motion_detector_on_off
  2654.                        state: 'on'
  2655.                    chip:
  2656.                      type: template
  2657.                      icon_color: red
  2658.                      icon: mdi:motion-sensor
  2659.                      card_mod:
  2660.                        style: |
  2661.                          ha-card {
  2662.                          animation: blink 1s linear infinite;
  2663.                          --chip-icon-size: 0.6em;
  2664.                          }
  2665.                      hold_action:
  2666.                        action: navigate
  2667.                        navigation_path: /fire-main/sensors
  2668.              - type: custom:mushroom-template-card
  2669.                primary: S22
  2670.                secondary: >-
  2671.                  {{ states(entity) }} {{ state_attr(entity,
  2672.                  "unit_of_measurement") }}
  2673.                icon: |
  2674.                  {% set state = (states(entity) | int) %}
  2675.                  {% if state >= 75 %} mdi:battery-90
  2676.                  {% elif state >= 33 %} mdi:battery-40
  2677.                  {% else %} mdi:battery-10
  2678.                  {% endif %}
  2679.                entity: sensor.s22_ultra_battery_level
  2680.                icon_color: |
  2681.                  {% set state = (states(entity) | int) %}
  2682.                  {% set state = (80) %}
  2683.                  {% if state >= 90 %} green
  2684.                  {% elif state >= 70 %} lime
  2685.                  {% elif state >= 40 %} orange
  2686.                  {% elif state >= 30 %} yellow
  2687.                  {% else %} red
  2688.                  {% endif %}
  2689.                tap_action:
  2690.                  action: none
  2691.                hold_action:
  2692.                  action: none
  2693.                double_tap_action:
  2694.                  action: none
  2695.      - type: vertical-stack
  2696.        title: Mushroom chip icon/color based on power usage
  2697.        cards:
  2698.          - type: custom:mushroom-chips-card
  2699.            chips:
  2700.              - type: template
  2701.                content: >
  2702.                  {{ ((states("sensor.tv_plug_active_power") | int) > 5) |
  2703.                  iif("TV is on", "TV is off") }}
  2704.                icon: >
  2705.                  {{ ((states("sensor.tv_plug_active_power") | int) > 5) |
  2706.                  iif("mdi:television", "mdi:television-off") }}
  2707.                icon_color: >
  2708.                  {{ ((states("sensor.tv_plug_active_power") | int) > 5) |
  2709.                  iif('green', 'red') }}
  2710.              - type: template
  2711.                entity: sensor.tv_plug_active_power
  2712.                content: >
  2713.                  {{ ((states(entity) | int) > 5) | iif("TV is on", "TV is off")
  2714.                  }}
  2715.                icon: |
  2716.                  {{ ((states(entity) | int) > 5) | iif("mdi:television",
  2717.                  "mdi:television-off") }}
  2718.                icon_color: |
  2719.                  {{ ((states(entity) | int) > 5) | iif('green', 'red') }}
  2720.                tap_action:
  2721.                  action: none
  2722.                hold_action:
  2723.                  action: none
  2724.                double_tap_action:
  2725.                  action: none
  2726.      - type: vertical-stack
  2727.        title: Mushroom chip styling (card_mod)
  2728.        cards:
  2729.          - type: custom:mushroom-chips-card
  2730.            chips:
  2731.              - type: entity
  2732.                entity: person.derek
  2733.                use_entity_picture: true
  2734.                card_mod:
  2735.                  style: |
  2736.                    ha-card {
  2737.                      border: unset;
  2738.                      --chip-box-shadow: none;
  2739.                      --chip-background: none;
  2740.                      --chip-font-size: 24px;
  2741.                      --chip-padding: 0 0.3em;
  2742.                      --text-color: red;
  2743.                      --chip-height: 75px;
  2744.                      --chip-border-radius: 45px;
  2745.                    }
  2746.      - type: vertical-stack
  2747.        title: Mushroom template animation WIP
  2748.        cards:
  2749.          - type: custom:mushroom-template-card
  2750.            primary: Robot
  2751.            icon: mdi:robot-outline
  2752.            icon_color: deep-purple
  2753.            entity: input_boolean.tester
  2754.            card_mod:
  2755.              style:
  2756.                mushroom-shape-icon$: |
  2757.                  ha-icon {
  2758.                    --icon-animation: rotation 2s linear infinite
  2759.                  }
  2760.                  @keyframes rotation {
  2761.                    0% { transform: rotate(0deg); }
  2762.                    100% { transform: rotate(360deg); }
  2763.                  }
  2764.                  .shape {
  2765.                    --shape-animation: ping 2s infinite;
  2766.                  }
  2767.                  @keyframes ping {
  2768.                    60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
  2769.                    100% { box-shadow: 0 0 5px 15px transparent; }
  2770.                  }
  2771.          - type: custom:mushroom-template-card
  2772.            primary: Robot
  2773.            icon: mdi:robot-outline
  2774.            icon_color: deep-purple
  2775.            entity: input_boolean.tester
  2776.            card_mod:
  2777.              style: |
  2778.                ha-card {
  2779.                  animation: rotation linear infinite;
  2780.                  {% if states('input_boolean.guest_mode') == 'on' %}
  2781.                    animation-duration: 3s;
  2782.                    icon_color: green;
  2783.                  {%- else -%}
  2784.                    color: inherit;
  2785.                  {%- endif %}
  2786.                  }
  2787.                @keyframes rotation {
  2788.                  0% {
  2789.                    transform: rotate(0deg);
  2790.                    }
  2791.                  100% {
  2792.                    transform: rotate(360deg);
  2793.                      }
  2794.                  }
  2795.          - type: custom:mushroom-template-card
  2796.            primary: Robot
  2797.            icon: mdi:robot-outline
  2798.            icon_color: deep-purple
  2799.            entity: input_boolean.tester
  2800.            card_mod:
  2801.              style: |
  2802.                ha-state-icon {
  2803.                  animation: rotation linear infinite 3s;
  2804.                }
  2805.                @keyframes rotation {
  2806.                  0% { transform: rotate(0deg); }
  2807.                  100% { transform: rotate(360deg);}
  2808.                }
  2809.          - type: custom:mushroom-template-card
  2810.            primary: Robot
  2811.            icon: mdi:robot-outline
  2812.            icon_color: deep-purple
  2813.            entity: input_boolean.tester
  2814.            card_mod:
  2815.              style: |
  2816.                ha-state-icon {
  2817.                  animation: rotation 3s linear infinite;
  2818.                  }
  2819.                @keyframes rotation {
  2820.                  0% { transform: rotate(0deg); }
  2821.                  100% { transform: rotate(360deg); }
  2822.                }
  2823.      - type: vertical-stack
  2824.        title: Mushroom multiline_secondary spacing
  2825.        cards:
  2826.          - type: custom:mushroom-template-card
  2827.            primary: Bedroom
  2828.            multiline_secondary: true
  2829.            secondary: >-
  2830.              {{ states('sensor.bedroom_temperature')|int }}°F       {{
  2831.              states('sensor.bedroom_humidity')|int }}%
  2832.      - type: vertical-stack
  2833.        title: Custom last updated info
  2834.        cards:
  2835.          - type: custom:mushroom-template-card
  2836.            primary: 'Travel time: {{ states("sensor.waze_travel_time") }} minutes'
  2837.            secondary: >-
  2838.              Last updated:    {% set t = ((as_timestamp(now()) -
  2839.              as_timestamp(states.sensor.waze_travel_time.last_updated)) | int)
  2840.              %}   {% if t <= 10 %} Just now  {% elif t <= 60 %} {{ t }}
  2841.              seconds  {% elif t < 3600 %}
  2842.                {{ (t / 60) | int }} min {{ (t % 60) }} sec
  2843.              {% elif t >= 3600 %}
  2844.                {{ (t / 3600) | int }} hr {{ (t / 60) | int }} min {{ (t % 60) }} sec
  2845.              {% else %} error  {% endif %}
  2846.          - type: custom:mushroom-template-card
  2847.            primary: 'Status: {{ states("light.living_room_lights") }}'
  2848.            secondary: >-
  2849.              {% set t = ((as_timestamp(now()) -
  2850.              as_timestamp(states.light.living_room_lights.last_changed)) | int)
  2851.              %}  
  2852.  
  2853.              {% if t < 60 %}
  2854.  
  2855.              {% elif t < 3600 %} {{ (t / 60) | int }} min
  2856.  
  2857.              {% elif t >= 3600 %} {{ (t / 3600) | int }} hr {{ (t / 60) | int
  2858.              }} min
  2859.  
  2860.              {% else %} error  
  2861.  
  2862.              {% endif %}
  2863.      - type: custom:mushroom-template-card
  2864.        entity: light.living_room1
  2865.        primary: 'Show attribute '
  2866.        secondary: '{{ state_attr("light.living_room1", "brightness") }}'
  2867.        icon: mdi:check
  2868.        icon_color: |-
  2869.          {% if states("light.living_room1") == "on" %}
  2870.            green
  2871.          {% else %}
  2872.            red
  2873.          {% endif %}
  2874.        tap_action:
  2875.          action: none
  2876.        hold_action:
  2877.          action: none
  2878.        double_tap_action:
  2879.          action: none
  2880.        badge_icon: mdi:home
  2881.        badge_color: green
  2882.        picture: ''
  2883.        card_mod:
  2884.          style: |
  2885.            ha-card {
  2886.              --ha-card-background: rgb(5, 48, 104);  
  2887.              font-family: 'Comfortaa';
  2888.              filter:
  2889.                drop-shadow(2.5px 2.5px 0.125rem rgb(48, 48, 51));
  2890.              }
  2891.      - type: custom:mushroom-template-card
  2892.        primary: Hello, {{ user }} !
  2893.        secondary: '{{ states("sensor.time") }}'
  2894.        fill_container: false
  2895.        multiline_secondary: false
  2896.        card_mod:
  2897.          style: |
  2898.            :host {
  2899.              --primary-text-color: red;
  2900.              --secondary-text-color: red;
  2901.              --ha-card-background: transparent;
  2902.              --ha-card-border-width: 0;
  2903.              text-align: center;
  2904.              --card-primary-font-size: 26px !important;
  2905.              --card-secondary-font-size: 18px !important;
  2906.              font-family: 'Comfortaa';
  2907.            }
  2908.      - type: vertical-stack
  2909.        cards:
  2910.          - type: custom:mushroom-template-card
  2911.            entity: person.derek
  2912.            primary: '{{ state_attr(entity, "friendly_name").upper() }}'
  2913.            secondary: '{{ states(entity).capitalize() }}'
  2914.            layout: vertical
  2915.            icon: mdi:check
  2916.            icon_color: |-
  2917.              {% if states("person.derek").lower() == "home" %}
  2918.                green
  2919.              {% else %}
  2920.                red
  2921.              {% endif %}
  2922.          - type: custom:mushroom-entity-card
  2923.            entity: person.derek
  2924.            primary: '{{ entity }}'
  2925.            secondary: '{{ states(entity) }}'
  2926.            layout: vertical
  2927.            icon: mdi:check
  2928.            card_mod:
  2929.              style: |
  2930.                :host {
  2931.                  --mush-icon-size: 60px;
  2932.                  --card-primary-font-size: 30px !important;
  2933.                  --card-secondary-font-size: 10px !important;
  2934.                  
  2935.                }
  2936.                mushroom-shape-icon {
  2937.                  --shape-color: red !important;
  2938.                  --shape-color-disabled: none !important;}
  2939.                }
  2940.          - type: custom:mushroom-template-card
  2941.            entity: sensor.s22_ultra_battery_level
  2942.            primary: '{{ state_attr(entity, "friendly_name").title() }}'
  2943.            secondary: '{{ states(entity) + "%" }}'
  2944.             layout: vertical
  2945.             icon: >
  2946.              {% set battery_level = states(entity) | int // 10 * 10 %}  
  2947.  
  2948.               {% set charging_state = states('sensor.s22_ultra_charger_type')
  2949.               %}  
  2950.  
  2951.               {% set is_charging =
  2952.               is_state('binary_sensor.s22_ultra_is_charging', 'on') | iif(True,
  2953.               False) %}  
  2954.  
  2955.               {% set map = {"none":"",
  2956.               "ac":"charging-","wireless":"charging-wireless-"} %}  
  2957.  
  2958.               {% set charging = map[states('sensor.s22_ultra_charger_type')] %}
  2959.  
  2960.               {% if battery_level == 100 and is_charging == True %}
  2961.               mdi:battery-charging  
  2962.  
  2963.               {% elif battery_level == 100 %} mdi:battery      
  2964.  
  2965.               {% elif battery_level >= 10 %}
  2966.               mdi:battery-{{charging}}{{battery_level}}    
  2967.  
  2968.               {% elif battery_level >= 0 %} mdi:battery-{{charging}}outline    
  2969.  
  2970.               {% else %} mdi:battery-unknown    
  2971.  
  2972.               {% endif %}
  2973.             icon_color: |-
  2974.               {% set percentage = states(entity) | int %}
  2975.               {% set r, g, b = 0, 0, 0 %}
  2976.               {% if (percentage <= 51) %}
  2977.                 {% set r = 255 %}
  2978.                 {% set g = (5.0 * percentage) | round | int %}
  2979.               {% else %}
  2980.                 {% set g = 255 %}
  2981.                 {% set r = (505 - 4.89 * percentage) | round | int %}
  2982.               {% endif %}
  2983.               {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
  2984.       - type: custom:button-card
  2985.         show_entity_picture: true
  2986.         state:
  2987.           - value: 'on'
  2988.             icon: mdi:garage-open
  2989.             color: red
  2990.             label: Open
  2991.           - value: 'off'
  2992.             icon: mdi:garage-lock
  2993.             color: green
  2994.             label: Closed
  2995.         tap_action:
  2996.           action: toggle
  2997.         entity: input_boolean.tester
  2998.         show_state: false
  2999.         show_label: true
  3000.         size: 20%
  3001.         label: |
  3002.          [[[
  3003.             if (entity.state === "on")
  3004.               return "closed";
  3005.             else if (entity.state === "off")
  3006.               return "open";
  3007.           ]]]
  3008.       - type: custom:mushroom-template-card
  3009.         entity: input_boolean.tester
  3010.         secondary: >-
  3011.           Last changed:   {% set t = ((as_timestamp(now()) -
  3012.           as_timestamp(states.input_boolean.tester.last_updated)) | int) %}   {%
  3013.           if t <= 10 %} Just now  {% elif t <= 60 %} {{ t }} seconds  {% elif t
  3014.           < 3600 %}
  3015.             {{ (t / 60) | int }} min {{ (t % 60) }} sec
  3016.           {% elif t >= 3600 %}
  3017.             {{ (t / 3600) | int }} hr {{ (t / 60) | int }} min {{ (t % 60) }} sec
  3018.           {% else %} error  {% endif %}
  3019.         primary: '{{ ''Stop drumming'' if states(entity) == ''on'' else ''Start drumming'' }}'
  3020.         icon: >-
  3021.           {{ 'mdi:music-box' if states(entity) == 'on' else
  3022.           'mdi:music-box-outline' }}
  3023.         icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
  3024.         tap_action:
  3025.           action: call-service
  3026.           service: automation.trigger
  3027.           service_data:
  3028.             entity_id: >
  3029.              {{ (states(entity)=="on") | iif("automation.test_automation",
  3030.               "automation.test_automation") }}
  3031.         double_tap_action:
  3032.           action: call-service
  3033.           service: automation.trigger
  3034.           service_data:
  3035.             entity_id: >
  3036.              {{ "automation.test_automation" if
  3037.               is_state("input_boolean.tester", 'on') else
  3038.               "automation.test_automation" }}
  3039.       - type: custom:button-card
  3040.         show_entity_picture: true
  3041.         entity: binary_sensor.shelly1_98cdac0ce253_input
  3042.         name: Call service - different entity
  3043.         state:
  3044.           - value: 'off'
  3045.             icon: mdi:garage-open
  3046.             color: rgba(146,107,199,255)
  3047.           - value: 'on'
  3048.             icon: mdi:garage
  3049.             color: rgba(68,115,158,255)
  3050.         tap_action:
  3051.           action: call-service
  3052.           service: switch.toggle
  3053.           service_data:
  3054.             entity_id: switch.shelly1_98cdac0ce253
  3055.         show_state: false
  3056.       - type: grid
  3057.         columns: 4
  3058.         cards:
  3059.           - type: custom:mushroom-template-card
  3060.             entity: sensor.s22_ultra_battery_level
  3061.             primary: S22
  3062.             secondary: 25%
  3063.             layout: vertical
  3064.             icon: mdi:battery-20
  3065.             icon_color: |-
  3066.               {% set percentage = states(entity) | int %}
  3067.               {% set percentage = 25 | int %}
  3068.               {% set r, g, b = 0, 0, 0 %}
  3069.               {% if (percentage <= 51) %}
  3070.                 {% set r = 255 %}
  3071.                 {% set g = (5.0 * percentage) | round | int %}
  3072.               {% else %}
  3073.                 {% set g = 255 %}
  3074.                 {% set r = (505 - 4.89 * percentage) | round | int %}
  3075.               {% endif %}
  3076.               {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
  3077.           - type: custom:mushroom-template-card
  3078.             entity: sensor.s22_ultra_battery_level
  3079.             primary: S22
  3080.             secondary: 50%
  3081.             layout: vertical
  3082.             icon: mdi:battery-charging-50
  3083.             icon_color: |-
  3084.               {% set percentage = states(entity) | int %}
  3085.               {% set percentage = 50 | int %}
  3086.               {% set r, g, b = 0, 0, 0 %}
  3087.               {% if (percentage <= 51) %}
  3088.                 {% set r = 255 %}
  3089.                 {% set g = (5.0 * percentage) | round | int %}
  3090.               {% else %}
  3091.                 {% set g = 255 %}
  3092.                 {% set r = (505 - 4.89 * percentage) | round | int %}
  3093.               {% endif %}
  3094.               {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
  3095.           - type: custom:mushroom-template-card
  3096.             entity: sensor.s22_ultra_battery_level
  3097.             primary: S22
  3098.             secondary: 75%
  3099.             layout: vertical
  3100.             icon: mdi:battery-charging-wireless-70
  3101.             icon_color: |-
  3102.               {% set percentage = states(entity) | int %}
  3103.               {% set percentage = 75 | int %}
  3104.               {% set r, g, b = 0, 0, 0 %}
  3105.               {% if (percentage <= 51) %}
  3106.                 {% set r = 255 %}
  3107.                 {% set g = (5.0 * percentage) | round | int %}
  3108.               {% else %}
  3109.                 {% set g = 255 %}
  3110.                 {% set r = (505 - 4.89 * percentage) | round | int %}
  3111.               {% endif %}
  3112.               {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
  3113.           - type: custom:mushroom-template-card
  3114.             entity: sensor.s22_ultra_battery_level
  3115.             primary: S22
  3116.             secondary: 100%
  3117.             layout: vertical
  3118.             icon: mdi:battery-charging
  3119.             icon_color: |-
  3120.               {% set percentage = states(entity) | int %}
  3121.               {% set percentage = 100 | int %}
  3122.               {% set r, g, b = 0, 0, 0 %}
  3123.               {% if (percentage <= 51) %}
  3124.                 {% set r = 255 %}
  3125.                 {% set g = (5.0 * percentage) | round | int %}
  3126.               {% else %}
  3127.                 {% set g = 255 %}
  3128.                 {% set r = (505 - 4.89 * percentage) | round | int %}
  3129.               {% endif %}
  3130.               {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
  3131.       - square: true
  3132.         type: grid
  3133.         columns: 4
  3134.         cards:
  3135.           - type: custom:button-card
  3136.             entity: sensor.s22_ultra_battery_level
  3137.             name: S22
  3138.             state_display: 25 %
  3139.             icon: mdi:battery-20
  3140.             show_state: true
  3141.             variables:
  3142.               var_color: |-
  3143.                 [[[
  3144.                   var percentage = entity.state;
  3145.                   var percentage = 25;
  3146.                   var r = 0; var g = 0; var b = 0;
  3147.                   if (percentage < 50 ) {
  3148.                     var r = 255;
  3149.                     var g = parseInt(5.1 * percentage);
  3150.                   } else {  
  3151.                     var g = 255;
  3152.                     var r = parseInt(510 - 5.10 * percentage);
  3153.                   }
  3154.                   var h = r * 0x10000 + g * 0x100 + b * 0x1;
  3155.                   return '#' + ('000000' + h.toString(16)).slice(-6);
  3156.                 ]]]
  3157.             styles:
  3158.               icon:
  3159.                 - color: '[[[ return variables.var_color ]]]'
  3160.           - type: custom:button-card
  3161.             entity: sensor.s22_ultra_battery_level
  3162.             name: S22
  3163.             state_display: 50 %
  3164.             icon: mdi:battery-charging-50
  3165.             show_state: true
  3166.             variables:
  3167.               var_color: |-
  3168.                 [[[
  3169.                   var percentage = entity.state;
  3170.                   var percentage = 50;
  3171.                   var r = 0; var g = 0; var b = 0;
  3172.                   if (percentage < 50 ) {
  3173.                     var r = 255;
  3174.                     var g = parseInt(5.1 * percentage);
  3175.                   } else {  
  3176.                     var g = 255;
  3177.                     var r = parseInt(510 - 5.10 * percentage);
  3178.                   }
  3179.                   var h = r * 0x10000 + g * 0x100 + b * 0x1;
  3180.                   return '#' + ('000000' + h.toString(16)).slice(-6);
  3181.                 ]]]
  3182.             styles:
  3183.               icon:
  3184.                 - color: '[[[ return variables.var_color ]]]'
  3185.           - type: custom:button-card
  3186.             entity: sensor.s22_ultra_battery_level
  3187.             name: S22
  3188.             state_display: 75 %
  3189.             icon: mdi:battery-charging-wireless-70
  3190.             show_state: true
  3191.             variables:
  3192.               var_color: |-
  3193.                 [[[
  3194.                   var percentage = entity.state;
  3195.                   var percentage = 75;
  3196.                   var r = 0; var g = 0; var b = 0;
  3197.                   if (percentage < 50 ) {
  3198.                     var r = 255;
  3199.                     var g = parseInt(5.1 * percentage);
  3200.                   } else {  
  3201.                     var g = 255;
  3202.                     var r = parseInt(510 - 5.10 * percentage);
  3203.                   }
  3204.                   var h = r * 0x10000 + g * 0x100 + b * 0x1;
  3205.                   return '#' + ('000000' + h.toString(16)).slice(-6);
  3206.                 ]]]
  3207.             styles:
  3208.               icon:
  3209.                 - color: '[[[ return variables.var_color ]]]'
  3210.           - type: custom:button-card
  3211.             entity: sensor.s22_ultra_battery_level
  3212.             name: S22
  3213.             state_display: 100 %
  3214.             icon: mdi:battery-charging
  3215.             show_state: true
  3216.             variables:
  3217.               var_color: |-
  3218.                 [[[
  3219.                   var percentage = entity.state;
  3220.                   var percentage = 100;
  3221.                   var r = 0; var g = 0; var b = 0;
  3222.                   if (percentage < 50 ) {
  3223.                     var r = 255;
  3224.                     var g = parseInt(5.1 * percentage);
  3225.                   } else {  
  3226.                     var g = 255;
  3227.                     var r = parseInt(510 - 5.10 * percentage);
  3228.                   }
  3229.                   var h = r * 0x10000 + g * 0x100 + b * 0x1;
  3230.                   return '#' + ('000000' + h.toString(16)).slice(-6);
  3231.                 ]]]
  3232.             styles:
  3233.               icon:
  3234.                 - color: '[[[ return variables.var_color ]]]'
  3235.   - theme: Derek Dark Theme
  3236.     icon: mdi:video-vintage
  3237.     type: panel
  3238.     visible:
  3239.       - user: 533e51fcaca94bfbbc41b474e0b127af
  3240.       - user: f1ff35aa97074588beee1542d27c4d95
  3241.     badges: []
  3242.     cards:
  3243.       - type: custom:plex-meets-homeassistant
  3244.         protocol: http
  3245.         sort: ''
  3246.         playTrailer: false
  3247.         showExtras: false
  3248.         showSearch: false
  3249.         ip: 10.10.10.6
  3250.         token: iG5A9nVLfa-6Zyh3s6wN
  3251.         port: '32400'
  3252.         entity:
  3253.           cast: media_player.plex_plex_for_windows_desktop_p54jk04
  3254.         libraryName: Deck
  3255.         maxCount: '20'
  3256.         maxRows: ''
  3257.         useHorizontalScroll: 'Yes'
  3258.         useShuffle: 'No'
  3259.         displayTitleMain: 'Yes'
  3260.         displaySubtitleMain: 'Yes'
  3261.         minWidth: ''
  3262.         minEpisodeWidth: ''
  3263.         minExpandedWidth: ''
  3264.         fontSize1: ''
  3265.         fontSize2: ''
  3266.         fontSize3: ''
  3267.         fontSize4: ''
  3268.         minExpandedHeight: ''
  3269.         title: Plex
  3270.         runBefore: ''
  3271.         runAfter: ''
  3272.  
Tags: Home assistant
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!