API tools faq
paste
Advertisement
lanapaste

Dashboard new YAML

lanapaste
Mar 5th, 2025 (edited)
40
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 16.77 KB | Pets | 0 0
raw download clone embed print report
  1. title: Home Dashboard
  2. views:
  3.   - title: Home
  4.     path: home
  5.     theme: Rounded
  6.     panel: false
  7.     cards:
  8.      # ── Section 1: Family Presence ───────────────────────────────
  9.       - type: vertical-stack
  10.         cards:
  11.           - type: grid
  12.             columns: 4
  13.             square: false
  14.             cards:
  15.               - type: custom:button-card
  16.                 entity: person.ana
  17.                 name: Ana
  18.                 icon: mdi:account
  19.                 tap_action:
  20.                   action: more-info
  21.                 card_mod:
  22.                   style: |
  23.                    ha-card {
  24.                       border: 3px solid {% if states('person.ana') == 'home' %} green {% else %} red {% endif %};
  25.                       border-radius: 15px;
  26.                     }
  27.               - type: custom:button-card
  28.                 entity: person.leigh
  29.                 name: Leigh
  30.                 icon: mdi:account
  31.                 tap_action:
  32.                   action: more-info
  33.                 card_mod:
  34.                   style: |
  35.                    ha-card {
  36.                       border: 3px solid {% if states('person.leigh') == 'home' %} green {% else %} red {% endif %};
  37.                       border-radius: 15px;
  38.                     }
  39.               - type: custom:button-card
  40.                 entity: person.grayson
  41.                 name: Grayson
  42.                 icon: mdi:account
  43.                 tap_action:
  44.                   action: more-info
  45.                 card_mod:
  46.                   style: |
  47.                    ha-card {
  48.                       border: 3px solid {% if states('person.grayson') == 'home' %} green {% else %} red {% endif %};
  49.                       border-radius: 15px;
  50.                     }
  51.               - type: custom:button-card
  52.                 entity: person.scarlett
  53.                 name: Scarlett
  54.                 icon: mdi:account
  55.                 tap_action:
  56.                   action: more-info
  57.                 card_mod:
  58.                   style: |
  59.                    ha-card {
  60.                       border: 3px solid {% if states('person.scarlett') == 'home' %} green {% else %} red {% endif %};
  61.                       border-radius: 15px;
  62.                     }
  63.          
  64.           # ── Section 2: Greeting Title Card ─────────────────────────────
  65.           - type: custom:button-card
  66.             name: >
  67.              [[[
  68.                 var hour = new Date().getHours();
  69.                 var greeting = hour < 12 ? "Good Morning" : (hour < 18 ? "Good Afternoon" : "Good Evening");
  70.                 var last = (states['sensor.last_person_home'] && states['sensor.last_person_home'] !== 'unknown') ? states['sensor.last_person_home'] : "Wolf Family";
  71.                 return greeting + ", " + last;
  72.               ]]]
  73.             styles:
  74.               card:
  75.                 - font-family: In case of a custom font, otherwise you can remove this line
  76.                 - background: none
  77.                 - padding: 16px 0
  78.                 - '--mdc-ripple-press-opacity': 0
  79.               name:
  80.                 - font-size: 32px
  81.                 - color: var(--contrast20)
  82.          
  83.           # ── Section 3: Sensor & Weather Chips ─────────────────────────
  84.           - type: grid
  85.             columns: 5
  86.             square: false
  87.             cards:
  88.               - type: custom:button-card
  89.                 entity: weather.home
  90.                 name: Weather
  91.                 icon: mdi:weather-partly-cloudy
  92.               - type: custom:button-card
  93.                 entity: sensor.sun_next_setting
  94.                 icon: mdi:weather-sunset-down
  95.               - type: custom:button-card
  96.                 entity: sensor.sun_next_rising
  97.                 icon: mdi:weather-sunset-up
  98.               - type: custom:button-card
  99.                 entity: sensor.bertalstreet_temperature
  100.                 icon: mdi:thermometer
  101.               - type: custom:button-card
  102.                 entity: sensor.bertalstreet_humidity
  103.                 icon: mdi:water-percent
  104.          
  105.           # ── Section 4: Swipable Graph Card ─────────────────────────────
  106.           - type: custom:swipe-card
  107.             card_width: calc(100% - 48px)
  108.             parameters:
  109.               centeredSlides: true
  110.               slidesPerView: auto
  111.               spaceBetween: 16
  112.               initialSlide: 0
  113.             cards:
  114.               - type: sensor
  115.                 entity: sensor.aqara_multi_sensor_woonkamer_temperature
  116.                 hours_to_show: 24
  117.                 detail: 1
  118.                 graph: line
  119.                 name: Woonkamer
  120.                 icon: none
  121.                 card_mod:
  122.                   class: graph
  123.               # (Add additional sensor cards here as needed)
  124.          
  125.           # ── Section 5: Scene Buttons ───────────────────────────────────
  126.           - type: grid
  127.             columns: 4
  128.             square: false
  129.             cards:
  130.               - type: custom:button-card
  131.                 icon: mdi:sofa-single
  132.                 name: Gezellig
  133.                 aspect_ratio: 1/1
  134.                 tap_action:
  135.                   action: call-service
  136.                   service: scene.turn_on
  137.                   haptic: medium
  138.                   service_data:
  139.                     entity_id: scene.gezellig
  140.                 styles:
  141.                   card:
  142.                     - border-radius: 24px
  143.                     - background-color: var(--blue)
  144.                   icon:
  145.                     - color: var(--black)
  146.               # (Copy for additional scene buttons)
  147.          
  148.           # ── Section 6: Light Cards ─────────────────────────────────────
  149.           - type: grid
  150.             columns: 2
  151.             square: false
  152.             cards:
  153.              # Light Card Example
  154.               - type: custom:button-card
  155.                 name: Studeerkamer
  156.                 icon: mdi:track-light
  157.                 entity: light.studeerkamer_groep
  158.                 tap_action:
  159.                   action: toggle
  160.                   haptic: medium
  161.                 hold_action:
  162.                   action: more-info
  163.                   haptic: medium
  164.                 custom_fields:
  165.                   slider:
  166.                     card:
  167.                       type: custom:my-slider-v2
  168.                       entity: light.studeerkamer_groep
  169.                       colorMode: brightness
  170.                       styles:
  171.                         container:
  172.                           - background: none
  173.                           - border-radius: 100px
  174.                           - overflow: visible
  175.                         card:
  176.                           - height: 16px
  177.                           - padding: 0 8px
  178.                           - background: |
  179.                              [[[ if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 100%)"; else return "var(--contrast4)"; ]]]
  180.                         track:
  181.                           - overflow: visible
  182.                           - background: none
  183.                         progress:
  184.                           - background: none
  185.                         thumb:
  186.                           - background: |
  187.                              [[[ if (entity.state == "on") return "var(--black)"; if (entity.state == "off") return "var(--contrast20)"; else return "var(--contrast8)"; ]]]
  188.                           - top: 2px
  189.                           - right: '-6px'
  190.                           - height: 12px
  191.                           - width: 12px
  192.                           - border-radius: 100px
  193.                 styles:
  194.                   grid:
  195.                     - grid-template-areas: '"i" "n" "slider"'
  196.                     - grid-template-columns: 1fr
  197.                     - grid-template-rows: 1fr min-content min-content
  198.                   card:
  199.                     - background: var(--contrast2)
  200.                     - padding: 16px
  201.                     - '--mdc-ripple-press-opacity': 0
  202.                   icon:
  203.                     - width: 24px
  204.                     - height: 24px
  205.                     - color: var(--contrast8)
  206.                   name:
  207.                     - font-size: 14px
  208.                     - margin: 4px 0 12px 0
  209.                     - color: var(--contrast8)
  210.                 state:
  211.                   - value: 'on'
  212.                     styles:
  213.                       card:
  214.                         - background: var(--yellow)
  215.                       icon:
  216.                         - color: var(--black)
  217.                       name:
  218.                         - color: var(--black)
  219.                   - value: 'off'
  220.                     styles:
  221.                       icon:
  222.                         - color: var(--contrast20)
  223.                       name:
  224.                         - color: var(--contrast20)
  225.              
  226.               # Colored Light Card Example
  227.               - type: custom:button-card
  228.                 name: Desk
  229.                 icon: '[[[ return entity.attributes.icon ]]]'
  230.                 entity: light.desk
  231.                 tap_action:
  232.                   action: toggle
  233.                   haptic: medium
  234.                 hold_action:
  235.                   action: more-info
  236.                   haptic: medium
  237.                 custom_fields:
  238.                   slider:
  239.                     card:
  240.                       type: custom:my-slider-v2
  241.                       entity: "[[[ return entity.entity_id ]]]"
  242.                       colorMode: brightness
  243.                       styles:
  244.                         container:
  245.                           - background: none
  246.                           - border-radius: 100px
  247.                           - overflow: visible
  248.                         card:
  249.                           - height: 16px
  250.                           - padding: 0 8px
  251.                           - background: |
  252.                              [[[ if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 100%)"; else return "var(--contrast4)"; ]]]
  253.                         track:
  254.                           - overflow: visible
  255.                           - background: none
  256.                         progress:
  257.                           - background: none
  258.                         thumb:
  259.                           - background: |
  260.                              [[[ if (entity.state == "on") return "var(--black)"; if (entity.state == "off") return "var(--contrast20)"; else return "var(--contrast8)"; ]]]
  261.                           - top: 2px
  262.                           - right: '-8px'
  263.                           - height: 12px
  264.                           - width: 12px
  265.                           - border-radius: 10px
  266.                 styles:
  267.                   grid:
  268.                     - grid-template-areas: '"i" "n" "slider"'
  269.                     - grid-template-columns: 1fr
  270.                     - grid-template-rows: 1fr min-content min-content
  271.                   card:
  272.                     - background: var(--contrast2)
  273.                     - padding: 16px
  274.                     - '--mdc-ripple-press-opacity': 0
  275.                   icon:
  276.                     - width: 24px
  277.                     - height: 24px
  278.                     - color: var(--contrast8)
  279.                   name:
  280.                     - font-size: 14px
  281.                     - margin: 4px 0 12px 0
  282.                     - color: var(--contrast8)
  283.                 state:
  284.                   - value: 'on'
  285.                     styles:
  286.                       card:
  287.                         - background: |
  288.                            [[[ var color = entity.attributes?.rgb_color;
  289.                                 if (entity.state != "on"){
  290.                                   return 'var(--contrast20)';
  291.                                 } else if (color){
  292.                                   return 'rgba(' + color + ')';
  293.                                 } else {
  294.                                   return 'var(--yellow)';
  295.                                 }
  296.                             ]]]
  297.                       icon:
  298.                         - color: var(--black)
  299.                       name:
  300.                         - color: var(--black)
  301.                   - value: 'off'
  302.                     styles:
  303.                       icon:
  304.                         - color: var(--contrast20)
  305.                       name:
  306.                         - color: var(--contrast20)
  307.          
  308.           # ── Section 7: Brightness & Temperature Slider ───────────────
  309.           - type: custom:button-card
  310.             name: Helderheid
  311.             custom_fields:
  312.               slider:
  313.                 card:
  314.                   type: custom:my-slider-v2
  315.                   entity: light.actieve_woonkamer_lampen
  316.                   colorMode: brightness
  317.                   styles:
  318.                     container:
  319.                       - border-radius: 100px
  320.                       - overflow: visible
  321.                       - background: none
  322.                     card:
  323.                       - height: 40px
  324.                       - padding: 0 20px
  325.                       - background: var(--brightness)
  326.                     track:
  327.                       - overflow: visible
  328.                       - background: none
  329.                     progress:
  330.                       - background: none
  331.                     thumb:
  332.                       - background: var(--black)
  333.                       - top: 2px
  334.                       - right: '-18px'
  335.                       - height: 36px
  336.                       - width: 36px
  337.                       - border-radius: 100px
  338.             styles:
  339.               grid:
  340.                 - grid-template-areas: '"n" "slider"'
  341.                 - grid-template-columns: 1fr
  342.                 - grid-template-rows: min-content min-content
  343.               card:
  344.                 - background: var(--brightness-tint)
  345.                 - padding: 16px
  346.                 - '--mdc-ripple-press-opacity': 0
  347.               name:
  348.                 - font-size: 14px
  349.                 - margin: 4px 0 12px 0
  350.                 - color: var(--contrast20)
  351.          
  352.           # ── Section 8: Quick Controls ───────────────────────────────
  353.           - type: grid
  354.             columns: 4
  355.             square: false
  356.             cards:
  357.               - type: custom:button-card
  358.                 entity: switch.automation_wake_up_1
  359.                 name: Wake Up Routine
  360.                 icon: mdi:alarm
  361.                 size: 15%
  362.                 styles:
  363.                   card:
  364.                     - height: 60px
  365.                   grid:
  366.                     - grid-template-areas: '"i n s"'
  367.                     - grid-template-columns: 15% auto 10%
  368.                     - grid-template-rows: min-content
  369.                   icon:
  370.                     - width: 25px
  371.                     - height: 25px
  372.               - type: custom:button-card
  373.                 entity: switch.automation_routine_1
  374.                 name: Morning Routine
  375.                 icon: mdi:coffee
  376.                 size: 15%
  377.                 styles:
  378.                   card:
  379.                     - height: 60px
  380.                   grid:
  381.                     - grid-template-areas: '"i n s"'
  382.                     - grid-template-columns: 15% auto 10%
  383.                     - grid-template-rows: min-content
  384.                   icon:
  385.                     - width: 25px
  386.                     - height: 25px
  387.               - type: custom:button-card
  388.                 entity: switch.automation_leaving_home
  389.                 name: Leaving Home
  390.                 icon: mdi:exit-run
  391.                 size: 15%
  392.                 styles:
  393.                   card:
  394.                     - height: 60px
  395.                   grid:
  396.                     - grid-template-areas: '"i n s"'
  397.                     - grid-template-columns: 15% auto 10%
  398.                     - grid-template-rows: min-content
  399.                   icon:
  400.                     - width: 25px
  401.                     - height: 25px
  402.               - type: custom:button-card
  403.                 entity: switch.automation_coming_home
  404.                 name: Coming Home
  405.                 icon: mdi:home-import-outline
  406.                 size: 15%
  407.                 styles:
  408.                   card:
  409.                     - height: 60px
  410.                   grid:
  411.                     - grid-template-areas: '"i n s"'
  412.                     - grid-template-columns: 15% auto 10%
  413.                     - grid-template-rows: min-content
  414.                   icon:
  415.                     - width: 25px
  416.                     - height: 25px
  417.  
Tags: Home assistant
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!