matt8707 / hass-config

✨ A different take on designing a Lovelace UI (Dashboard)

Home Assistant Configuration

⚠️ Important

As of 2024, this repository is no longer maintained. While I will not be updating this project, pull requests addressing future breaking changes are welcome. I want to thank everyone for their contributions and support on this project. Seeing it rise as the community's top topic of all time has been truly overwhelming.

I am now shifting my focus to a new project called ha-fusion. It aims to be a modern, easy-to-use, and performant custom dashboard built from scratch. I hope you'll check it out!

https://github.com/matt8707/ha-fusion

---

Home Assistant Container on a Synology DiskStation DS918+ NAS. Wall mounted tablet (Galaxy Tab A 10.1) using Fully Kiosk Browser. My configuration is exposed to HomeKit with Apple TV acting as a hub for remote connection.

If you like anything here, be sure to 🌟 my repo!

Installation

How do I install this theme?
There's no install button. I'm sharing my full configuration

Can you please add this to HACS?
No, because this is not a custom card or integration

Where do I even start?
INSTALL.md explains how to get started 🎉

Features

• Dashboard (Lovelace) using custom button-card and layout-card
• Portrait, landscape and mobile view - responsive_demo.mp4 [mirror]
• Less cluttered interface by displaying more information in a popup
• Loading animation for slow responding entities
• Adding tap audio feedback to the UI for wall-mounted tablet
• Icon CSS animations based on entity state

Sidebar

• Time and date with greeting based on time of day
• Entities that are on, using natural language
• Mailbox counter to show received mail
• Temperature with emoji based on weather conditions
• Important calendar information
• Other conditional alerts

Footer

Popups that supports notifications.

Popups

Long press a button to show settings and information pertaining to the entity, using browser_mod. Light popups are automatically created using the light button-card template with 🍄 Mushroom

Media

Conditionally display media players based on the last active device. If nothing is active for 15 minutes, a poster of the last downloaded movie/episode is shown (Plex, Radarr, Sonarr). Swipe to reveal non-active media players

Theme

card-mod is used for the styles in include/themes.yaml and each popup also contain styles depending on content. I've made a tool to help with css element selectors - https://matt8707.github.io/card-mod-helper/

Screenshots

nas	vacuum

misc

Hardware

Vendor	Product	Integration	Description
Ubiquiti	UniFi Dream Machine	unifi	Router, controller, switch and access point
Synology	DiskStation DS918+	synology_dsm	4x4TB NAS - matt8707/docker-compose-dsm
Raspberry	Pi 3 Model B+	shell_command	Bluetooth communication - matt8707/docker-compose-rpi
Samsung	Galaxy Tab A SM-T510	custom	Wall mounted tablet in hallway by the front door
Philips	Hue	hue	Bridge, 15 bulbs, 3 motion sensors, 2 dimmer switches
Apple	iMac	shell_command	All-in-one desktop computer
SwitchBot	SwitchBot Bot	custom	Bluetooth device that mechanically turns on my computer
Xiaomi	Mi Roborock S50	xiaomi_miio	Robot vacuum with lidar - xiaomi-cloud-map-extractor
Broadlink	RM4 Pro, HTS2 cable	broadlink	Infrared transmitter for AC unit with temp/humidity sensor
Gosund	SP112	esphome	3x tuya wifi plugs with power monitoring, flashed with ESPHome
Belkin	WeMo	wemo	2x wifi plugs and 1x motion sensor
Google	Nest Mini	cast	Not really used, Google sent me one
Deltaco	SH-P01	tuya	Cheap wifi plug for balcony LED lights
Phoscon	ConBee II	custom	Zigbee USB gateway using zigbee2mqtt
Xiaomi	Aqara MCCGQ11LM	mqtt	3x zigbee door/window contact sensors
Apple	TV 4K	apple_tv	2x set-top-boxes that streams content from Plex
Sony	Bravia KDL-55W905A	braviatv	2013 mid-range 55" 1080p 3D TV
Samsung	UE50RU6025KXXC	custom	2019 low-range 50" 4K HDR TV
Sony	PlayStation 5	custom	Game console - State, sleep and wake
Apple	iPhone X	ios	Home Assistant Companion App for iOS

Note: I do not recommend "Belkin WeMo" or "Deltaco SH-P01"

---

GitHub Repository https://github.com/matt8707/hass-config

Home Assistant Community Topic https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594

hass-config's Issues

Smaller display (Fire Tablet 7) and template issue

Hello! Thanks for putting this dashboard together, it gives me some ideas for mine. I'm having 2 issues with what I'm using from your setup.

1. The buttons are huge on my little display, so I can only fit 8 buttons on screen before I have to scroll. Where would I change the sizing so that the buttons would decrease in size to make more items visible?

2. I'm using the template.yaml file, when I first loaded the file I got the data I needed, but after I restarted home assistant for other updates, the template is now blank and the state shows unavailable.

Any help would be greatly appreciated.

Missing font files

Hi Matt,

Fonts files are not in the package. Is it something you can add and share ?
Thanks
Stephan

Roborock Vacuum Map - Icon of vacuum and charging unit

Hi Mattias,

How did you get the icons, for the vacuum and charging unit, like this:

This is not in your configuration and it seems that it's not implemented by Xiaomi-Cloud-Map-Extractor yet.

Hope you can help.
Thanks in advance!

Missing entitie device_tracker.lukas (or mattias in your Config)

Hello

First of all: what a damn beautiful design !! I love it.

Now the fucking part. I don't know if I'm too stupid or something, but I miss the device_tracker.lukas. How is it made? After hours of research I have to annoy you: /. Excuse the circumstances.

Have a great week and Thanks in advance
Lukas

please help me

sorry, new in home assistant please let me know ho i can install it? i have Hass installed so i can add scripts from git hub please help me, may be its video how to do it or what i need to do first to get same result?

Problem with fullykiosk_screen \ fullykiosk_screensaver \ fullykiosk_brightness_slider

so this 3 setups don't work, I don't know what can be a problem, battery and all other things works as it should and all connected correctly, may be its should be some set up in Fullykiosk app? I bought app if its a problem can you please let me know what need to turn on/off in app? or its something else don't let me set it up correctly?

Popup not working

Hi,
I have a problem with theme. I have compatible all from theme, but popups not working. How fix this?

@font-face declaration dosent follow the fontspring bulletproof syntax

Hi, getting the above message. I have downloaded and copyed the 3 font types into /www/font/ (/local/font/)

Any idea why?

question

how do you get your card to "pop out" like this?

Theme

Hello, I'm a beginner as I let me homeassists just like yours

file path on lovelace config

i got question about ui-lovelace.yaml , is it refer to this bar-card.js

but that 2 files is on different path
on lovelace it says /community_plugin/bar-card/bar-card.js
but the file actually on /community/bar-card/bar-card.js

did i just miss something or will hass recognize it?

i'm still bit confused how to implement your config to mine , what needed to copy and what to not

i just amazed by the time i saw your ui on forum, that's so nice ui
Thank you for sharing your config!

Popup-Style

One more question. I tried the browser_mod plugin but my style is different to yours (and I LOVE dark UIs ;) ) I guess this is the default theme that I'd need to use, right? Can you tell me which one you use?

Also... the Button for closing the popup. In your sample-screenshot it aligns where it should. For me it makes this strange border around everything and it's just totally off?!? Do you have an idea what the problem could be?

And while I am here asking :) The bar-card icon and text are first: wrong colo, second miss-aligned and third show those up and down triangles. Do you know how to fix those as well?

Oh.. and sensor.home_assistant_v2_db... I couldn't find any more info on that one in your config files?!?

Thank you so much for sharing your config! I absolutely love it!

No issue but info regarding sensor.oresundskraft

Could you share the sensor.oresundskraft value?
I would understand how you build this master sensor for split and built graph.
Thank you so much
Sandro

Help in creating the popup for the lights

Hello!
I'm trying to integrate the configuration part under Light and Sensors, to be exact I'm interested in the vertical dimmer and color selector.
I am not with lovelace in yaml mode.

I managed to generate this code that actually opens the popup with the slider but now I don't understand how to add the circles for the color selector. Can you please help me?

type: glance
entities:
  - entity: light.scrivania
    name: Scivania
    tap_action:
      action: toggle
    double_tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: Test
        card:
          type: 'custom:light-popup-card'
          entity: light.scrivania
          icon: 'mdi:led-strip'
          borderRadius: 12px

Thanks

Animated icons broken on Chrome

Hello matt8707,

First of all, i would like to thank you for your amazing work and generosity.

Your animated buttons completely blew my eyes when i saw them. I didn't know it was even possible to do that.
I have digged into your code and found how to implement the animations for my buttons and i also learned how to create my owns on SVGator.
Sorry if my question is not related to your config or personal buttons but i'm struggling with this since few days now as i'm far from being an expert in css templating.
My animations were working fine on all browsers but since last "Chrome" update they are kind of broken on this particular browser and also on the Android App.
I have split my SVG code and it partially fixed the animations display, but i don't understand how to completely resolve this issue and if this is even possible.

Here is my code before Chrome update:

decluttering_templates:
  button_chromecast:
    card: 
      type: 'custom:button-card'  
      color: auto
      size: 50%
      entity: '[[entity]]'
      show_last_changed: true
      aspect_ratio: 1/1
      show_state: true
      show_icon: false
      name: '[[name]]'
      show_label: true
      tap_action:
        action: toggle
        haptic: light
      hold_action:
        action: more-info
        haptic: success
      double_tap_action: 
        action: fire-dom-event
        browser_mod:
          command: popup
          deviceID:
            - this
            - dashboard  
          title: Chromecast Audio
          hide_header: true
          style:
            $: |
              .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                box-shadow:none;
              }
            .: |
              :host {
                --mdc-theme-surface: rgba(0,0,0,0);
                --secondary-background-color: rgba(0,0,0,0);
                --ha-card-background: rgba(0,0,0,0);
                --ha-card-box-shadow: none;                    
                --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
              }
              mwc-icon-button {
                color: #FFF;
              }            
          card: 
            type: media-control            
            entity: media_player.chromecast_audio
      card_mod:
        style: |
          ha-card {
            box-shadow: 
              {% if is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'on') %}
                inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
              {% elif is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'playing') %}
                inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03); 
              {% elif is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'paused') %}
                inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);                            
              {% elif is_state('sun.sun', 'above_horizon') and is_state('[[entity]]', 'off') %}                      
                -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
              {% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'on') %}                      
                inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3); 
              {% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'playing') %}                      
                inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
              {% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'paused') %}                      
                inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);                              
              {% elif is_state('sun.sun', 'below_horizon') and is_state('[[entity]]', 'off') %}   
                -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
              {% endif %}     
          }
      custom_fields:
        icon_monitors: >
          [[[ if (entity.state === 'playing') {
          return '<svg viewBox="0 0 24 24" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><style><![CDATA[#ekas083utsm2_to {animation: ekas083utsm2_to__to 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_to__to { 0% {transform: translate(12.002080px,12.003087px)} 3.333333% {transform: translate(12.002080px,12.003087px)} 100% {transform: translate(12.002080px,12.003087px)} }#ekas083utsm2_tr {animation: ekas083utsm2_tr__tr 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_tr__tr { 0% {transform: rotate(0deg)} 3.333333% {transform: rotate(0deg)} 13.333333% {transform: rotate(0deg)} 40% {transform: rotate(360deg)} 100% {transform: rotate(360deg)} }#ekas083utsm2_ts {animation: ekas083utsm2_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_ts__ts { 0% {transform: scale(1,1)} 3.333333% {transform: scale(1.100000,1.100000)} 6.666667% {transform: scale(1,1)} 10% {transform: scale(0.900000,0.900000)} 13.333333% {transform: scale(1,1)} 43.333333% {transform: scale(0.900000,0.900000)} 46.666667% {transform: scale(1,1)} 100% {transform: scale(1,1)} }#ekas083utsm3 {animation: ekas083utsm3_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm3_c_o { 0% {opacity: 0} 30% {opacity: 0} 40% {opacity: 1} 100% {opacity: 1} }#ekas083utsm4 {animation: ekas083utsm4_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm4_c_o { 0% {opacity: 0} 23.333333% {opacity: 0} 33.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm5 {animation: ekas083utsm5_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm5_c_o { 0% {opacity: 0} 16.666667% {opacity: 0} 26.666667% {opacity: 1} 100% {opacity: 1} }#ekas083utsm6_ts {animation: ekas083utsm6_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_ts__ts { 0% {transform: translate(11.999646px,12.000690px) scale(1,1)} 40% {transform: translate(11.999646px,12.000690px) scale(1,1)} 46.666667% {transform: translate(11.999646px,12.000690px) scale(1,1)} 100% {transform: translate(11.999646px,12.000690px) scale(1,1)} }#ekas083utsm6 {animation: ekas083utsm6_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_c_o { 0% {opacity: 0} 10% {opacity: 0} 20% {opacity: 1} 100% {opacity: 1} }#ekas083utsm7 {animation: ekas083utsm7_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm7_c_o { 0% {opacity: 0} 13.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm8 {animation: ekas083utsm8_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm8_c_o { 0% {opacity: 1} 13.333333% {opacity: 0} 100% {opacity: 0} }]]></style><g id="ekas083utsm2_to" transform="translate(12.002080,12.003087)"><g id="ekas083utsm2_tr" transform="rotate(0)"><g id="ekas083utsm2_ts" transform="scale(1,1)"><g id="ekas083utsm2" transform="translate(-12.002080,-12.003087)"><path id="ekas083utsm3" d="M6.893152,9.100248C6.263414,8.006358,5.748447,7.098084,5.748782,7.081860C5.749916,7.026952,6.388112,6.335220,6.674968,6.077979C9.847697,3.232804,14.610825,3.359084,17.632808,6.368492C18.002685,6.736830,18.396066,7.222499,18.672990,7.652703L18.872875,7.963224L15.094864,7.984773C11.362080,8.006064,11.312995,8.007411,10.994583,8.097295C9.803582,8.433498,8.868201,9.221373,8.351817,10.323307C8.263881,10.510958,8.169878,10.760037,8.142922,10.876815C8.115966,10.993592,8.081361,11.089138,8.066022,11.089138C8.050682,11.089138,7.522891,10.194137,6.893152,9.100248Z" opacity="0" fill="rgb(221,67,55)" stroke="rgb(221,67,55)" stroke-width="1"/><path id="ekas083utsm4" d="M10.234525,19.764487C9.607878,19.618016,9.101147,19.436064,8.501461,19.142195C6.135889,17.982977,4.522722,15.789555,4.107518,13.167756C4.004330,12.516176,4.014051,11.345112,4.127946,10.706823C4.233548,10.115013,4.379835,9.584985,4.575574,9.084977C4.767152,8.595598,5.047633,8.052760,5.086897,8.095371C5.103856,8.113776,5.876971,9.442340,6.804930,11.047735C8.579143,14.117173,8.702594,14.319894,9.029981,14.701535C9.462846,15.206133,10.277307,15.703486,10.991668,15.899444C11.458071,16.027384,12.506825,16.028442,12.930968,15.901444C13.090041,15.853794,13.222268,15.818184,13.224805,15.822314C13.227305,15.826414,12.704941,16.733427,12.063913,17.837847C10.725013,20.144626,10.931277,19.927391,10.234525,19.764535Z" opacity="0" fill="rgb(16,157,88)" stroke="rgb(16,157,88)" stroke-width="1"/><path id="ekas083utsm5" d="M12.051067,19.965071C13.098824,18.164481,15.418787,14.116804,15.548451,13.863127C16.346433,12.301953,16.102919,10.509909,14.925362,9.277764L14.678059,9.018996L17.039715,9.018996L19.401370,9.018996L19.569476,9.526181C20.065328,11.022197,20.107745,12.531205,19.697201,14.070128C19.058907,16.462773,17.309042,18.443240,15.001705,19.384407C14.218591,19.703841,13.360807,19.897675,12.397911,19.972790C12.188608,19.989120,12.039012,19.985790,12.051067,19.965090Z" opacity="0" fill="rgb(255,206,65)" stroke="rgb(255,206,65)" stroke-width="1"/><g id="ekas083utsm6_ts" transform="translate(11.999646,12.000690) scale(1,1)"><path id="ekas083utsm6" d="M11.402172,14.912674C9.798878,14.569035,8.759147,13.006103,9.084853,11.429258C9.333488,10.225541,10.225541,9.333488,11.429258,9.084853C12.608782,8.841216,13.845499,9.372434,14.507297,10.406991C15.143585,11.401669,15.128430,12.655868,14.468117,13.649116C13.802027,14.651059,12.563346,15.161552,11.402169,14.912674Z" transform="translate(-11.999646,-12.000690)" opacity="0" fill="rgb(67,133,246)" stroke="rgb(67,133,246)" stroke-width="1"/></g><path id="ekas083utsm7" d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0.041403"/><path id="ekas083utsm8" d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" fill="rgb(186,192,198)" stroke="none" stroke-width="0.041403"/></g></g></g></g></svg>'; }
          if (entity.state === 'on') {
          return '<svg viewBox="0 0 24 24" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><style><![CDATA[#ekas083utsm2_to {animation: ekas083utsm2_to__to 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_to__to { 0% {transform: translate(12.002080px,12.003087px)} 3.333333% {transform: translate(12.002080px,12.003087px)} 100% {transform: translate(12.002080px,12.003087px)} }#ekas083utsm2_tr {animation: ekas083utsm2_tr__tr 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_tr__tr { 0% {transform: rotate(0deg)} 3.333333% {transform: rotate(0deg)} 13.333333% {transform: rotate(0deg)} 40% {transform: rotate(360deg)} 100% {transform: rotate(360deg)} }#ekas083utsm2_ts {animation: ekas083utsm2_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_ts__ts { 0% {transform: scale(1,1)} 3.333333% {transform: scale(1.100000,1.100000)} 6.666667% {transform: scale(1,1)} 10% {transform: scale(0.900000,0.900000)} 13.333333% {transform: scale(1,1)} 43.333333% {transform: scale(0.900000,0.900000)} 46.666667% {transform: scale(1,1)} 100% {transform: scale(1,1)} }#ekas083utsm3 {animation: ekas083utsm3_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm3_c_o { 0% {opacity: 0} 30% {opacity: 0} 40% {opacity: 1} 100% {opacity: 1} }#ekas083utsm4 {animation: ekas083utsm4_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm4_c_o { 0% {opacity: 0} 23.333333% {opacity: 0} 33.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm5 {animation: ekas083utsm5_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm5_c_o { 0% {opacity: 0} 16.666667% {opacity: 0} 26.666667% {opacity: 1} 100% {opacity: 1} }#ekas083utsm6_ts {animation: ekas083utsm6_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_ts__ts { 0% {transform: translate(11.999646px,12.000690px) scale(1,1)} 40% {transform: translate(11.999646px,12.000690px) scale(1,1)} 46.666667% {transform: translate(11.999646px,12.000690px) scale(1,1)} 100% {transform: translate(11.999646px,12.000690px) scale(1,1)} }#ekas083utsm6 {animation: ekas083utsm6_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_c_o { 0% {opacity: 0} 10% {opacity: 0} 20% {opacity: 1} 100% {opacity: 1} }#ekas083utsm7 {animation: ekas083utsm7_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm7_c_o { 0% {opacity: 0} 13.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm8 {animation: ekas083utsm8_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm8_c_o { 0% {opacity: 1} 13.333333% {opacity: 0} 100% {opacity: 0} }]]></style><g id="ekas083utsm2_to" transform="translate(12.002080,12.003087)"><g id="ekas083utsm2_tr" transform="rotate(0)"><g id="ekas083utsm2_ts" transform="scale(1,1)"><g id="ekas083utsm2" transform="translate(-12.002080,-12.003087)"><path id="ekas083utsm3" d="M6.893152,9.100248C6.263414,8.006358,5.748447,7.098084,5.748782,7.081860C5.749916,7.026952,6.388112,6.335220,6.674968,6.077979C9.847697,3.232804,14.610825,3.359084,17.632808,6.368492C18.002685,6.736830,18.396066,7.222499,18.672990,7.652703L18.872875,7.963224L15.094864,7.984773C11.362080,8.006064,11.312995,8.007411,10.994583,8.097295C9.803582,8.433498,8.868201,9.221373,8.351817,10.323307C8.263881,10.510958,8.169878,10.760037,8.142922,10.876815C8.115966,10.993592,8.081361,11.089138,8.066022,11.089138C8.050682,11.089138,7.522891,10.194137,6.893152,9.100248Z" opacity="0" fill="rgb(221,67,55)" stroke="rgb(221,67,55)" stroke-width="1"/><path id="ekas083utsm4" d="M10.234525,19.764487C9.607878,19.618016,9.101147,19.436064,8.501461,19.142195C6.135889,17.982977,4.522722,15.789555,4.107518,13.167756C4.004330,12.516176,4.014051,11.345112,4.127946,10.706823C4.233548,10.115013,4.379835,9.584985,4.575574,9.084977C4.767152,8.595598,5.047633,8.052760,5.086897,8.095371C5.103856,8.113776,5.876971,9.442340,6.804930,11.047735C8.579143,14.117173,8.702594,14.319894,9.029981,14.701535C9.462846,15.206133,10.277307,15.703486,10.991668,15.899444C11.458071,16.027384,12.506825,16.028442,12.930968,15.901444C13.090041,15.853794,13.222268,15.818184,13.224805,15.822314C13.227305,15.826414,12.704941,16.733427,12.063913,17.837847C10.725013,20.144626,10.931277,19.927391,10.234525,19.764535Z" opacity="0" fill="rgb(16,157,88)" stroke="rgb(16,157,88)" stroke-width="1"/><path id="ekas083utsm5" d="M12.051067,19.965071C13.098824,18.164481,15.418787,14.116804,15.548451,13.863127C16.346433,12.301953,16.102919,10.509909,14.925362,9.277764L14.678059,9.018996L17.039715,9.018996L19.401370,9.018996L19.569476,9.526181C20.065328,11.022197,20.107745,12.531205,19.697201,14.070128C19.058907,16.462773,17.309042,18.443240,15.001705,19.384407C14.218591,19.703841,13.360807,19.897675,12.397911,19.972790C12.188608,19.989120,12.039012,19.985790,12.051067,19.965090Z" opacity="0" fill="rgb(255,206,65)" stroke="rgb(255,206,65)" stroke-width="1"/><g id="ekas083utsm6_ts" transform="translate(11.999646,12.000690) scale(1,1)"><path id="ekas083utsm6" d="M11.402172,14.912674C9.798878,14.569035,8.759147,13.006103,9.084853,11.429258C9.333488,10.225541,10.225541,9.333488,11.429258,9.084853C12.608782,8.841216,13.845499,9.372434,14.507297,10.406991C15.143585,11.401669,15.128430,12.655868,14.468117,13.649116C13.802027,14.651059,12.563346,15.161552,11.402169,14.912674Z" transform="translate(-11.999646,-12.000690)" opacity="0" fill="rgb(67,133,246)" stroke="rgb(67,133,246)" stroke-width="1"/></g><path id="ekas083utsm7" d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0.041403"/><path id="ekas083utsm8" d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" fill="rgb(186,192,198)" stroke="none" stroke-width="0.041403"/></g></g></g></g></svg>'; }
          else { return '<svg viewBox="0 0 24 24"><path fill="#bac0c6" d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>'; } ]]]
      styles:
        custom_fields:
          icon_monitors:
            [top: 9%, left: 7%, width: 48%, height: 48%, position: absolute]     
        card:
          - color: 'var(--text-color)'
          - background-color: var(--primary-background-color)      
          - padding-left: 10px
          - border-radius: 20px
        name:
          - justify-self: start
          - padding: 0px 10px          
          - font-weight: bold
          - font-size: 13px
        label:
          - color: 'var(--text-medium-color)'
          - font-size: 10px
          - font-family: Helvetica
          - padding: 0px 10px
          - justify-self: start
        state:
          - font-size: 10px
          - font-family: Helvetica
          - padding: 1px 10px
          - justify-self: start
          - text-transform: capitalize
          - font-weight: bold
        grid:
          - grid-template-areas: '"i" "n" "s" "l"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content
        img_cell:
          - justify-content: start
          - align-items: start
      state:
        - value: 'on'
          styles:
            card:
              - box-shadow: 0px 0px 3px 2px var        
            state:
              - color: lime
        - value: 'playing'
          styles:
            card:
              - box-shadow: 0px 0px 3px 2px var       
            state:
              - color: lime
        - value: 'paused'
          styles:
            card:
              - box-shadow: 0px 0px 3px 2px var          
            state:
              - color: 'orange'                
        - value: 'idle'
          styles:
            card:
              - box-shadow: 0px 0px 3px 2px var      
            state:
              - color: lime  
        - value: 'off'
          styles:
            card:
              - box-shadow: 0px 0px 3px 2px var
            state:
              - color: 'red'

The correct behavior before update:

The wrong behavior after update:

The partially corrected behavior after update:

My splitted "custom_fields" code after update:

      custom_fields:
        icon_monitors: >
          [[[ if (entity.state === 'playing') {
          return '<svg viewBox="0 0 24 24"> <style>@keyframes ekas083utsm2_to__to { 0% {transform: translate(12.002080px,12.003087px)} 3.333333% {transform: translate(12.002080px,12.003087px)} 100% {transform: translate(12.002080px,12.003087px)} }#ekas083utsm2_tr {animation: ekas083utsm2_tr__tr 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_tr__tr { 0% {transform: rotate(0deg)} 3.333333% {transform: rotate(0deg)} 13.333333% {transform: rotate(0deg)} 40% {transform: rotate(360deg)} 100% {transform: rotate(360deg)} }#ekas083utsm2_ts {animation: ekas083utsm2_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_ts__ts { 0% {transform: scale(1,1)} 3.333333% {transform: scale(1.100000,1.100000)} 6.666667% {transform: scale(1,1)} 10% {transform: scale(0.900000,0.900000)} 13.333333% {transform: scale(1,1)} 43.333333% {transform: scale(0.900000,0.900000)} 46.666667% {transform: scale(1,1)} 100% {transform: scale(1,1)} }#ekas083utsm3 {animation: ekas083utsm3_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm3_c_o { 0% {opacity: 0} 30% {opacity: 0} 40% {opacity: 1} 100% {opacity: 1} }#ekas083utsm4 {animation: ekas083utsm4_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm4_c_o { 0% {opacity: 0} 23.333333% {opacity: 0} 33.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm5 {animation: ekas083utsm5_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm5_c_o { 0% {opacity: 0} 16.666667% {opacity: 0} 26.666667% {opacity: 1} 100% {opacity: 1} }#ekas083utsm6_ts {animation: ekas083utsm6_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_ts__ts { 0% {transform: translate(11.999646px,12.000690px) scale(1,1)} 40% {transform: translate(11.999646px,12.000690px) scale(1,1)} 46.666667% {transform: translate(11.999646px,12.000690px) scale(1,1)} 100% {transform: translate(11.999646px,12.000690px) scale(1,1)} }#ekas083utsm6 {animation: ekas083utsm6_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_c_o { 0% {opacity: 0} 10% {opacity: 0} 20% {opacity: 1} 100% {opacity: 1} }#ekas083utsm7 {animation: ekas083utsm7_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm7_c_o { 0% {opacity: 0} 13.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm8 {animation: ekas083utsm8_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm8_c_o { 0% {opacity: 1} 13.333333% {opacity: 0} 100% {opacity: 0} }]]></style>
          <g id="ekas083utsm2_to" transform="translate(12.002080,12.003087)"><g id="ekas083utsm2_tr" transform="rotate(0)"><g id="ekas083utsm2_ts" transform="scale(1,1)"><g id="ekas083utsm2" transform="translate(-12.002080,-12.003087)">
          <path id="ekas083utsm3" d="M6.893152,9.100248C6.263414,8.006358,5.748447,7.098084,5.748782,7.081860C5.749916,7.026952,6.388112,6.335220,6.674968,6.077979C9.847697,3.232804,14.610825,3.359084,17.632808,6.368492C18.002685,6.736830,18.396066,7.222499,18.672990,7.652703L18.872875,7.963224L15.094864,7.984773C11.362080,8.006064,11.312995,8.007411,10.994583,8.097295C9.803582,8.433498,8.868201,9.221373,8.351817,10.323307C8.263881,10.510958,8.169878,10.760037,8.142922,10.876815C8.115966,10.993592,8.081361,11.089138,8.066022,11.089138C8.050682,11.089138,7.522891,10.194137,6.893152,9.100248Z" opacity="0" fill="rgb(221,67,55)" stroke="rgb(221,67,55)" stroke-width="1"/>
          <path id="ekas083utsm4"d="M10.234525,19.764487C9.607878,19.618016,9.101147,19.436064,8.501461,19.142195C6.135889,17.982977,4.522722,15.789555,4.107518,13.167756C4.004330,12.516176,4.014051,11.345112,4.127946,10.706823C4.233548,10.115013,4.379835,9.584985,4.575574,9.084977C4.767152,8.595598,5.047633,8.052760,5.086897,8.095371C5.103856,8.113776,5.876971,9.442340,6.804930,11.047735C8.579143,14.117173,8.702594,14.319894,9.029981,14.701535C9.462846,15.206133,10.277307,15.703486,10.991668,15.899444C11.458071,16.027384,12.506825,16.028442,12.930968,15.901444C13.090041,15.853794,13.222268,15.818184,13.224805,15.822314C13.227305,15.826414,12.704941,16.733427,12.063913,17.837847C10.725013,20.144626,10.931277,19.927391,10.234525,19.764535Z" opacity="0" fill="rgb(16,157,88)" stroke="rgb(16,157,88)" stroke-width="1"/>
          <path id="ekas083utsm5"d="M12.051067,19.965071C13.098824,18.164481,15.418787,14.116804,15.548451,13.863127C16.346433,12.301953,16.102919,10.509909,14.925362,9.277764L14.678059,9.018996L17.039715,9.018996L19.401370,9.018996L19.569476,9.526181C20.065328,11.022197,20.107745,12.531205,19.697201,14.070128C19.058907,16.462773,17.309042,18.443240,15.001705,19.384407C14.218591,19.703841,13.360807,19.897675,12.397911,19.972790C12.188608,19.989120,12.039012,19.985790,12.051067,19.965090Z" opacity="0" fill="rgb(255,206,65)" stroke="rgb(255,206,65)" stroke-width="1"/>
          <g id="ekas083utsm6_ts" transform="translate(11.999646,12.000690) scale(1,1)">
          <path id="ekas083utsm6"d="M11.402172,14.912674C9.798878,14.569035,8.759147,13.006103,9.084853,11.429258C9.333488,10.225541,10.225541,9.333488,11.429258,9.084853C12.608782,8.841216,13.845499,9.372434,14.507297,10.406991C15.143585,11.401669,15.128430,12.655868,14.468117,13.649116C13.802027,14.651059,12.563346,15.161552,11.402169,14.912674Z" transform="translate(-11.999646,-12.000690)" opacity="0" fill="rgb(67,133,246)" stroke="rgb(67,133,246)" stroke-width="1"/>
          </g><path id="ekas083utsm7"d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0.041403"/><path'; }
          if (entity.state === 'on') {
          return '<svg viewBox="0 0 24 24"> <style>@keyframes ekas083utsm2_to__to { 0% {transform: translate(12.002080px,12.003087px)} 3.333333% {transform: translate(12.002080px,12.003087px)} 100% {transform: translate(12.002080px,12.003087px)} }#ekas083utsm2_tr {animation: ekas083utsm2_tr__tr 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_tr__tr { 0% {transform: rotate(0deg)} 3.333333% {transform: rotate(0deg)} 13.333333% {transform: rotate(0deg)} 40% {transform: rotate(360deg)} 100% {transform: rotate(360deg)} }#ekas083utsm2_ts {animation: ekas083utsm2_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm2_ts__ts { 0% {transform: scale(1,1)} 3.333333% {transform: scale(1.100000,1.100000)} 6.666667% {transform: scale(1,1)} 10% {transform: scale(0.900000,0.900000)} 13.333333% {transform: scale(1,1)} 43.333333% {transform: scale(0.900000,0.900000)} 46.666667% {transform: scale(1,1)} 100% {transform: scale(1,1)} }#ekas083utsm3 {animation: ekas083utsm3_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm3_c_o { 0% {opacity: 0} 30% {opacity: 0} 40% {opacity: 1} 100% {opacity: 1} }#ekas083utsm4 {animation: ekas083utsm4_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm4_c_o { 0% {opacity: 0} 23.333333% {opacity: 0} 33.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm5 {animation: ekas083utsm5_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm5_c_o { 0% {opacity: 0} 16.666667% {opacity: 0} 26.666667% {opacity: 1} 100% {opacity: 1} }#ekas083utsm6_ts {animation: ekas083utsm6_ts__ts 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_ts__ts { 0% {transform: translate(11.999646px,12.000690px) scale(1,1)} 40% {transform: translate(11.999646px,12.000690px) scale(1,1)} 46.666667% {transform: translate(11.999646px,12.000690px) scale(1,1)} 100% {transform: translate(11.999646px,12.000690px) scale(1,1)} }#ekas083utsm6 {animation: ekas083utsm6_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm6_c_o { 0% {opacity: 0} 10% {opacity: 0} 20% {opacity: 1} 100% {opacity: 1} }#ekas083utsm7 {animation: ekas083utsm7_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm7_c_o { 0% {opacity: 0} 13.333333% {opacity: 1} 100% {opacity: 1} }#ekas083utsm8 {animation: ekas083utsm8_c_o 3000ms linear 1 normal forwards}@keyframes ekas083utsm8_c_o { 0% {opacity: 1} 13.333333% {opacity: 0} 100% {opacity: 0} }]]></style>
          <g id="ekas083utsm2_to" transform="translate(12.002080,12.003087)"><g id="ekas083utsm2_tr" transform="rotate(0)"><g id="ekas083utsm2_ts" transform="scale(1,1)"><g id="ekas083utsm2" transform="translate(-12.002080,-12.003087)">
          <path id="ekas083utsm3" d="M6.893152,9.100248C6.263414,8.006358,5.748447,7.098084,5.748782,7.081860C5.749916,7.026952,6.388112,6.335220,6.674968,6.077979C9.847697,3.232804,14.610825,3.359084,17.632808,6.368492C18.002685,6.736830,18.396066,7.222499,18.672990,7.652703L18.872875,7.963224L15.094864,7.984773C11.362080,8.006064,11.312995,8.007411,10.994583,8.097295C9.803582,8.433498,8.868201,9.221373,8.351817,10.323307C8.263881,10.510958,8.169878,10.760037,8.142922,10.876815C8.115966,10.993592,8.081361,11.089138,8.066022,11.089138C8.050682,11.089138,7.522891,10.194137,6.893152,9.100248Z" opacity="0" fill="rgb(221,67,55)" stroke="rgb(221,67,55)" stroke-width="1"/>
          <path id="ekas083utsm4"d="M10.234525,19.764487C9.607878,19.618016,9.101147,19.436064,8.501461,19.142195C6.135889,17.982977,4.522722,15.789555,4.107518,13.167756C4.004330,12.516176,4.014051,11.345112,4.127946,10.706823C4.233548,10.115013,4.379835,9.584985,4.575574,9.084977C4.767152,8.595598,5.047633,8.052760,5.086897,8.095371C5.103856,8.113776,5.876971,9.442340,6.804930,11.047735C8.579143,14.117173,8.702594,14.319894,9.029981,14.701535C9.462846,15.206133,10.277307,15.703486,10.991668,15.899444C11.458071,16.027384,12.506825,16.028442,12.930968,15.901444C13.090041,15.853794,13.222268,15.818184,13.224805,15.822314C13.227305,15.826414,12.704941,16.733427,12.063913,17.837847C10.725013,20.144626,10.931277,19.927391,10.234525,19.764535Z" opacity="0" fill="rgb(16,157,88)" stroke="rgb(16,157,88)" stroke-width="1"/>
          <path id="ekas083utsm5"d="M12.051067,19.965071C13.098824,18.164481,15.418787,14.116804,15.548451,13.863127C16.346433,12.301953,16.102919,10.509909,14.925362,9.277764L14.678059,9.018996L17.039715,9.018996L19.401370,9.018996L19.569476,9.526181C20.065328,11.022197,20.107745,12.531205,19.697201,14.070128C19.058907,16.462773,17.309042,18.443240,15.001705,19.384407C14.218591,19.703841,13.360807,19.897675,12.397911,19.972790C12.188608,19.989120,12.039012,19.985790,12.051067,19.965090Z" opacity="0" fill="rgb(255,206,65)" stroke="rgb(255,206,65)" stroke-width="1"/>
          <g id="ekas083utsm6_ts" transform="translate(11.999646,12.000690) scale(1,1)">
          <path id="ekas083utsm6"d="M11.402172,14.912674C9.798878,14.569035,8.759147,13.006103,9.084853,11.429258C9.333488,10.225541,10.225541,9.333488,11.429258,9.084853C12.608782,8.841216,13.845499,9.372434,14.507297,10.406991C15.143585,11.401669,15.128430,12.655868,14.468117,13.649116C13.802027,14.651059,12.563346,15.161552,11.402169,14.912674Z" transform="translate(-11.999646,-12.000690)" opacity="0" fill="rgb(67,133,246)" stroke="rgb(67,133,246)" stroke-width="1"/>
          </g><path id="ekas083utsm7"d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0.041403"/><path'; }
          else { return '<svg viewBox="0 0 24 24"><path fill="#bac0c6" d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>'; } ]]]

Your SVG codes are so clean compare to the one i export from SVGator, i can understand Chrome is more tolerant with them.

Thank you in advance for your help and again thanks for the fabulous inspiration you gave me and countless Home Assistant users.

Question for Synology use

Hi,

This is not an issue at all, but rather a question:

I am also running HA from a docker environment on my DS920+, but I am having big problems with the docker version being only v18.xx while HA requires v19 to work.
Recently that issue started to break integrations like ESPHome, Grafana on my installation.

Have you done anything to fix this issue on your side? Or is it not a problem for you?

Br
Martin

Editable Button Labels

Hi Mattias,

Love this config, it's really awesome. Would it be possible for you to supply (an) un-flattened, document form template/s/ for us to create our own labels, preferably as a Photoshop document, or whatever you used to create these originally.

I tried to edit some of these using Photoshop, however I could not quite get close to the level of design work you have achieved here.

Many thanks.

How to add custom_sidebar?

I love the custom sidebar idea you have but the problem im facing is knowing where and how to install one like yours? it truly epic!

Icon Explanation

Hi,

First off all, I want to say what a great setup u have. Its really smooth and looks professional. Amazing!
I was wondering how you got these icons like the fan or the toilet working.

I want to do these animations also with a ceiling light and maybe later with other icons.

Could you explain it to me?

light-slider-card

Hi,
First, great setup, I love it.

I tried to implement some ideas of your setup into mine but I'm encountering some issue with the custom light-slider-card. I downloaded it from your github because I was unable to find it elsewhere - is it a custom element that you developed by yourself ?

Anyway, for now, this is totally unusable with an iPhone (probably the same with an iPad) since when trying to shifting the slider, it scrolls the page behind the popup instead of controlling the slider.

Also, I would love to be able to customize it a little bit - any chance you tell me more about this custom element ?

Thanks

Migrate to 1920x1200 tablet

Hi, @matt8707 you did a wonderful job. Inspired by your code I implemented my own view on an AsusZenpad with 1200x800 resolution. Today I switched on a Huawei T5 with a better screen and a better resolution. Unfortunately, the images are too big and I have to change their sizes. Which is normal. I want to ask you which is the simplest way to change the size of the:

1. button card sizes in order to fit in the screen
2. popup window in order to fit in screen and text size. I was wondering if it is a method to shrink the area?!
   Here are a few examples

The cards are too big and go outside of the visible area.
I tried to reduce the size from here but the text remains too big and the aspect was not ok

                style:
                  background: none
                  box-shadow: none
                  width: calc(400px + 485px + 300px)
                card:
                  type: custom:layout-card
                  column_num: 3
                  column_width: [400, 485, 300]
                  layout: vertical

The card is too big and I want to reduce it but I could not identify the code part that controls his size

The card is too long/big and it should be resized. I could not identify the code that controls the card size

Installation Guide

I absolutely love this design but do you have any tips for installing it please? or point me in the right direction.

I have tried installing via Home Assistant via a custom repository but im being denied 404?

Studio part not showing with Theme enabled

Everything else around it works fine. When I disable the tablet theme, then the Studio one shows up. If I enable the tablet theme, it's no longer ther

e.

Tablet Theme

Hello @matt8707,

Really love what you did with this dashboard, have looked at many alternatives, but this one is by far one of the sleekest designs I've seen. Therefore I would like to take the leap and use this dashboard and enjoy the many hours of customization.

But until that's ready, I would like to use my old dashboard/theme. I have already put this one next to it, by adding the following configuration:

 lovelace:
   mode: storage
   dashboards:
     lovelace-yaml:
       mode: yaml
       title: Dashboard
       icon: mdi:tablet-dashboard
       show_in_sidebar: true
       filename: ui-lovelace.yaml

The only thing that bugs me is that I can't apply your tablet-theme only on the ui-lovelace.yaml. I've added "theme: tablet" there, but it doesn't seem to work. Only when I change the complete backend theme of HomeAssistant it seems to work, but this will override my old dashboard's theme as well.

TL;DR
Is there any way to apply your tablet-theme on your ui-lovelace.yaml dashboard only, without having to set it as the global theme?

Thanks in advance.

Request - svg icons

Where do you pick svg icons? I would like to add some more!

Adapt to vertical view

I have a screen that I use in vertical view, how can I adapt the background to fit this?

switch.fan, skånetrafiken

Hi.

1. I copied your switch.fan setup (button_card), but I can't get it to function properly. When I edit the card, it rotates a bit. When I turn the fan on, the image turns blue and some text appears above it.. [object i object]. But static image. When I turn the fan off, it turns black again and spins from fast to static. Am I missing a plugin? Where does it get the fan image from?

2. I really need som help with skanetrafiken, and since you use it maybe you can help. What do I put in selPointFr and selPointTo? I tried to experiment, but could'nt get it to work. For example, from a station in Vellinge to a station in Malmö, Regionbuss.

Unknown type encountered: image.

This is the best repo ever. I'm trying to copy so many things, but I'm a big noob, so maybe the question is stupid. I'm first trying with a fan. But I cannot find the "image" card.

I've done:

    resources:
      - type: js
        url: /community_plugin/rgb-light-card/card.js
      - type: js
        url: /community_plugin/state-element/state-element.js
    title: Home
    views:
      - badges: []
        cards:
          - entity: switch.plug_1
            state_image:
              'off': /local/images/fan_off.gif
              'on': /local/images/fan_on.gif
              unavailable: /local/unknown.png
            style:
              left: 80.05%
              top: 37.9%
              width: 10%
            tap_action:
              action: toggle
            title: null
            type: image

But I keep getting Unknown type encountered: image. solid start. I cannot find an image in HACS or the add-ons. What are you using there?

Thanks a lot!

Nested popup browser_mod action not firing

First of all, awesome work. This was not created over night. Thanks for sharing it to the community, appreciate it. I encountered a problem with the nested browser_mod light-entity-card dom event action inside light-popup-card(see L588 below). And I have not been able to trace this, my js knowledge is limited. But maybe you've encountered it?

• The svg image is not rendered in light-entity-card, if I set a color instead it renders.

• Error in console and HA-log when action is called in frontend:
  light-popup-card.js:3996:54:
  Uncaught TypeError: Cannot read properties of undefined (reading 'split')

If I use the the light-entity-card as a initial popup on the custom-button-card it works as intended.
EDIT: Using lastest versions of all dependencies.

hass-config/button_card_templates.yaml

Line 588 in 21aed6e

- action: fire-dom-event

Combine custom:button-card with custom:slider-button-card

Hi,

is it possible to integrate the custom:slider-button-card and combine it with the custom:button-card to use templates, etc.?

https://github.com/mattieha/slider-button-card

thanks!

markdown/html issues with the theme

Hi @matt8707,

Since the recent update of frontend and integrations of hacs, i have added your newest code to my hass config.

I got your last themes.yaml to my config. The tablet theme is activated

I have cleared the cache, force reload the website. Nothing really happens

Dynamic Grid column count with mediaquery?

I'm trying to change the layout for the mobile view to get "Övrigt" over the full screen width with 3 or 4 tiles . Is there a way to set the grid columns from 2 to 1 only for devices with max-width: 800px (with media query)?

      # - type: grid
        # title: Övrigt
        # view_layout:
          # grid-area: övrigt
        # columns: 2
        # cards:

Thanks!

Where are the Fonts

You reference SF Text and several other fonts but I don't see them in your repo. Where do you find them and where do you install them to be picked up?

Popup not displaying full

Hi,

I am trying to get a popup to display full, it works ok on a mobile but not on a desktop.

When I open on a desktop this is how it is displayed:

code used it:

action: fire-dom-event
browser_mod:
  command: popup
  title: Security System
  style:
    .: |
      :host .content {
        width: calc(385px + 385px + 385px);
        max-width: 90vw;
      }
      /* phone */
      @media screen and (max-width: 800px) {
        :host .content {
          max-width: 100vw;
        }
      }
    layout-card:
      $grid-layout$:
        hui-entities-card:
          $: |
            .card-content {
             
            }
            ha-card {
              border-right: 1.5px solid rgba(0, 0, 0, 0.2);
              border-radius: 0;
              transition: none;
            }
            /* phone */
            @media screen and (max-width: 800px) {
              ha-card {
                border-right: none;
                border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
              }
            }
          $hui-horizontal-stack-card:
            $: |
              #root {
                justify-content: space-evenly;
                margin-top: 1.9em;
                max-width: 82vw; /* iphonex */
              }
  card:
    type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: repeat(2, 1fr)
      grid-template-rows: 1fr
      grid-template-areas: |
        "windows doors sensors key_cupboard"
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-template-columns: 1fr
          grid-template-rows: repeat(2, 1fr)
          grid-template-areas: |
            "windows"
            "doors"
            "sensors"
            "key_cupboard"
            
    cards:

      #################################################
      #                                                                                                           #
      #                Windows                                                                           #
      #                                                                                                          #
      #################################################

      - type: entities
        view_layout:
          grid-area: windows
        title: Windows
        show_header_toggle: false
        card_mod:
          class: header
          style: |
            ha-card {
              margin: 0px !important;
            }
        entities:
          - entity: binary_sensor.kitchen_window
          - entity: binary_sensor.kitchen_windows_shock
          - entity: binary_sensor.landing_window_shock
          - entity: binary_sensor.landing_window_shock
          - entity: binary_sensor.rh_loft_window
          - entity: binary_sensor.lh_loft_window  

      #################################################
      #                                               #
      #                Doors                          #
      #                                               #
      #################################################

      - type: entities
        view_layout:
          grid-area: doors
        title: Doors
        show_header_toggle: false
        card_mod:
          class: header
          style: |
            ha-card {
              margin: 0px !important;
            }
        entities:
          - entity: binary_sensor.front_door
          - entity: binary_sensor.lh_patio_doors
          - entity: binary_sensor.rh_patio_doors
          - entity: binary_sensor.lh_patio_door_shocks
          - entity: binary_sensor.rh_patio_door_shocks
          - entity: binary_sensor.garage_door

      #################################################
      #                                               #
      #                Sensors                        #
      #                                               #
      #################################################

      - type: entities
        view_layout:
          grid-area: sensors
        title: Sensors
        show_header_toggle: false
        card_mod:
          class: header
          style: |
            ha-card {
              margin: 0px !important;
            }
        entities:
          - entity: binary_sensor.living_room_pir
          - entity: binary_sensor.dinning_room_pir
          - entity: binary_sensor.kitchen_pir
          - entity: binary_sensor.utility_room_pir
          - entity: binary_sensor.landing_pir
          - entity: binary_sensor.driveway_beam_1

      #################################################
      #                                               #
      #                Key Cupoard                    #
      #                                               #
      #################################################

      - type: entities
        view_layout:
          grid-area: key_cupboard
        title: Key Cupoard
        show_header_toggle: false
        card_mod:
          class: header
          style: |
            ha-card {
              margin: 0px !important;
            }
        entities:
          - entity: binary_sensor.key_cupboard_doors
          - entity: binary_sensor.safe_door

Thanks

pop up resize without scroll bar

hello and sorry for the inconvenience, I can't get a pop up without the scroll bar, can you kindly tell me which parameter I should change?

synologydsm_baseoid

I LOVE your UI! Looks awesome!
I started rebuilding some of your components and one is the Synology-DSM-Info-Panel.
I saw that you use synologydsm_baseoid in the runtime (Drifttid) sensor... could you tell me what that is? I couldn't figure it out yet ;)
Have a great day,
Cheers,
Georg

darksky

Hi.

Do you have any replacement weather API for darksky. Its going to shutdown its API.
Service to existing users and subscribers will continue until July 1, 2020

hello, can you help me please?

i have problem with hass_dev_release, i connect it like this on sensor.yaml
and its always unknown

I don't use docker, any idea why its not working? because other your scrips working
Please let me know if you can help, thank you
see attached

image

  hass_dev_release:
    icon_template: mdi:dev-to
    friendly_name_template: >
      {% if ((as_timestamp(state_attr('calendar.home_assistant_devs', 
      'start_time')) - as_timestamp(states.sensor.time.last_changed | as_local)) / 86400) > 20 %}
        Planerad beta
      {% else %}
        {{ state_attr('calendar.home_assistant_devs','message') }}
      {% endif %}
    value_template: >
      {% set dev = ((as_timestamp(state_attr('calendar.home_assistant_devs', 
      'start_time')) - as_timestamp(states.sensor.time.last_changed | as_local)) / 86400) %}
      {% if dev < -1 %} Released
      {% elif dev < 0 %} Today
      {% elif dev < 1 %} Tomorrow
      {% elif dev > 20 %} No
      {% else %} {{ dev | int + 1 }} days
      {% endif %}

some problem about the tab A

HI,I got the same tab A,but there is a problem with WIFI.
Every time I closed the screen a little minutes and the WIFI Automatic shutdown and the Fully kiosk will reload the page.
sorry to ask but with this pad how do i prevent the WIFI sleep?I`m treid every settings in system and in the fully kiosk. not work
Or I can only keep the screen on?

Great repo

Is there any installation guide in detail?

This is a great project, thank you. Rated Star.

Fit content

Hello,

Thanks to share your idea and theme with us but I didn't achieve to fit content of all my cards:

As you can see I must scroll to see footer and last part of my second row...

I tried lot of things but css and js are not my hobbies 😄 I prefer java / scripting shell
Do you have an idea, a tips or somthing like that can help me to have all my cards in one block and doesn't need to scroll to see all my cards

hacs

where i can find it on hacs?

Light-slider-card component on HACS

Hi,
i really love the custom component light-slider-card. There will be any chance to see it on HACS?
Thank you

Mark

Installation troubles with lovelace surface

hello matt,

great work! unfortunately i have troubles with the lovelace surface after setting up your configuration.

the cards show up but the Lovelace background is still light grey with default side and top bar.

thanks
simon

Licence, Terms & Conditions

Hey Matt, I love the Project!

I am Setting it up myself, but i was wondering under which licence you handle it, since on the Github is no Licence found.

Thanks :)

Not an issue

Not an issue, just wanted to say that this is basically the most awesome HA dashboard on the entire vast internet.
Thanks for sharing it! I basically just want to copy it over.

Person pop up card not showing

Using the pop-up card for who's home and not is not showing details anymore (no wifi Bluetooth device tracker map information anymore) since around 13 November.

Problem with remote.send_command

Hello, sorry for stupid questions again but i have this problems and don't really know what the problem.
remote i have its RM pro and i connect it to secrets like this
or should i install "broadlink manager" to PC and set it up there?

broadlink_host: 111.111.111.111
broadlink_mac: '11:1a:11:1a:1a:1a'

also for example i have switch.yaml code:

      tv_lg:
        friendly_name: Tv
        icon_template: custom:tv
        value_template: "{{ is_state('media_player.lg_webos_tv_e03c', 'on') }}"
        turn_on:
          - service: input_boolean.turn_on
            entity_id: input_boolean.lg_webos_tv_e03c
          - service: remote.send_command
            data:
              entity_id: remote.lg_webos_tv_e03c
              command: menu
        turn_off:
          - service: input_boolean.turn_on
            entity_id: input_boolean.lg_webos_tv_e03c
          - service: media_player.turn_off
            entity_id: media_player.lg_webos_tv_e03c

when i trying to press turn on TV from this switch its giving error, photo attached 'failed to call service' and I check, I dont have this service in 'Services menu'

All the other components in Zip

Hi there,

I am relatively new to HA and I was wondering if you could answer my question. I have copied the contents of the custom_components folder to my HA config under custom_components. What about all the other folders and files?

Do I not need these? Where should these go?

Once I have copied the folder to custom_components, do I need to do anything else?

Thanks!

Square cropped in sliders

Hey man,

thanks for your share, your lovelace is awesome :)
But I have a problem with it, squares in slider cards are cropped, have you any idea of how to fix it ?
https://i.imgur.com/aO7zSwP.jpg

Thanks