Hi Keith, I’m reading about what you have done with your UI. Planning to go this direction. Thank you in advance already for posting all what you have done.
I’m planning to use a bit of all of your ideas for my one… Did you ever have a look at lovelace_gen https://github.com/thomasloven/hass-lovelace_gen ?
Because it looks like you have a lot of different templates defined in your UI-lovelace or am I missing something ?
1 Like
I’m glad you found my UI elements inspirational 
I’m aware of lovelace_gen, but I haven’t needed to use it. My dashboards are almost completely made up with the custom button card, which has its own templating mechanism. I think it’s best to use the custom button card’s built-in templating mechanism because it’s tuned to what the custom button card is capable of.
I do, however, have my dashboard sections organized as separate yaml files so that I can re-use them on different dashboards. That technique has worked well for my wall tablets, where I have a dedicated dashboard and user for each tablet so that each tablet is appropriate for its location. The re-usable sections don’t require adjustable configuration based on where they are displayed, so the split yaml approach is working well for me.
I have been keeping lovelace_gen in the back of my mind for when I need more templating.
If you haven’t found them, here are some other posts on my UI elements:
Hi Keith,
Thank you for your quick reply. I’ve been playing with the cluttering card to make 5 custom remote controls. So I’ll probably stay with what I know and go in the same direction as you did. Templating and separating the yaml files.
I’m still in the exploration phase and have a bunch of questions
- I’m thinking of having one view that summarizes the rests of the views and linking this summary to the detailed views. Did you explore this ? If so, how can I group devices together ?
- I read that in the end you didn’t use the banner card. Is there a reason for that ? I’ve used if for my remotes, and it worked quite well.
- What about custom icons ? I don’t find all what I’m looking for with mdi.
- You wrote that you have different dashboards per device. Can you link me to where I find more information on this ? Or give me some pointers ?
child-views
I haven’t needed to do any child-view navigation yet. My goal with each dashboard was to get everything relevant to that location in one view that doesn’t require scrolling or navigation. I had to get fairly compact with my design to achieve that, hence my using the custom button card everywhere to maximize control of the styles and layout.
Dialogs are a good UI element as well. It lets me reduce my dashboard down to just the indicators and buttons, but long-pressing a button can give me more options if I need it. Mostly that’s the built-in more-info dialog, but it can just as easily be a custom card if you use browser-mod.
The thing I like about dialogs is that they are intuitive, don’t have to use the whole display when they don’t have a lot to show. They also don’t need a UI element of their own to take you back to the main view, since that is automatic when you dismiss them.
If I had a case where I might leave the child view open for long periods of time, then I would definitely go with a view-linking scenario like you are considering. For that, I think you can simply make each child-view a tab of the dashboard and use links to the desired tab view. There are ways to hide the tabs if needed.
banner card
If you mean banner-card, it simply wasn’t compact enough. It didn’t give enough control of margins and font size and such. It also didn’t let me do my own UI for each device. It has a nice look, and I used it for a few months, but I needed more and eventually discovered the custom button card. The custom button card was the magic unicorn that unleashed my UI creativity LOL
custom icons
I’ve been limiting myself to the material design icons simply because I haven’t had a chance to figure out how to do custom icons yet. I have found a few things mentioning that it can be done, but haven’t dug into it to figure it out. I use this resource for finding mdi icons and have usually found something close enough to get the job done. When it opens, close the dialog and use the search to filter the icons.
dashboard per device
Basically, I have a separate yaml dashboard for each device, and all the views in that dashboard have their visible config set to myself and a dedicated user I set up in home assistant for that dashboard (the view’s visible setting takes an array of - user: user-id). On each tablet I log in as the tablet-specific user and navigate to the appropriate dashboard. I also use fully-kiosk to further lock down my tablets, but that’s not necessary for just limiting what dashboards are available for the tablet.
Here is a view of one of my dashboards, to help see my overall vision. Everything on it was made with a custom button card, except for the pool view being an image element. Even the items on the image element are custom button cards. The main grid is done with horizontal and vertical stack cards, but beyond that everything is a custom button card. The custom button card has allowed me unprecedented control of layout, styles and animations in lovelace dashboards. It takes a while to fully understand all the options of the custom button card, but it’s worth it.
1 Like
I made a simpler version of this that shows just a temperature sensor value. During the Texas freeze crisis I wanted monitor my attic and garage temperatures on my main dashboard because my water heater is in the attic and my unheated garage has an exterior hose faucet. There was room for the decimal value, so I included that as well. I also added an animation to flash the background if the value is above or below a range that I can adjust via the config (default is 32 to 100 F).
bigtemp-sensor template
type: custom:button-card
show_state: true
show_icon: false
show_name: true
show_label: true
state_display: '[[[ return parseInt(entity.state) + "°" ]]]'
label: '[[[ return "." + entity.state.split(".")[1] ]]]'
extra_styles: |
[[[ return `
@keyframes pulse {
5% {
background-color: rgba(240,52,52, 0.9);
}
}
`]]]
state:
- index: cold-cutoff
value: 32
operator: '<='
styles:
card:
- animation: pulse ease-in-out 1s infinite
- index: hot-cutoff
value: 100
operator: '>='
styles:
card:
- animation: pulse ease-in-out 1s infinite
styles:
grid:
- display: contents
img_cell:
- display: contents
card:
- background-color: rgba(0, 64, 255, 0.3)
- -webkit-backdrop-filter: blur(4px)
- backdrop-filter: blur(4px)
- display: flex
- padding: 2px 0 5px 2px
- width: fit-content
- overflow: visible
state:
- color: var(--primary-text-color)
- font-size: 3.5em
- line-height: 0.75em
- text-shadow: 0 0 2px black
- overflow: visible
- z-index: 1
name:
- color: var(--primary-text-color)
- text-shadow: 0 0 2px black
- overflow: visible
- font-size: 0.75em
- font-weight: 600
- position: absolute
- transform: rotate(90deg)
- transform-origin: right bottom
- bottom: 0
- right: 0
- z-index: 10
label:
- color: var(--primary-text-color)
- position: absolute
- bottom: 0
- left: 2.4em
- font-size: 1.6em
- font-weight: 600
- text-shadow: 0 0 2px black
- overflow: visible
Example using the template below. Expand the section above to see the template. The state section is only needed if you want to override the default 32 to 100 F defaults for the flash animation.
type: custom:button-card
template: bigtemp-sensor
entity: sensor.office_motion_temperature
name: Attic
state:
- index: cold-cutoff
value: 40
- index: hot-cutoff
value: 120
1 Like
Hi Keith,
I really like your dashboard and the fact that you share your projects.
I’m just a noob who copies and alters some code for my own benefit 
This way I was able to ‘build’ my dasboad with the button-card.
Now I want to integrate your climate button but the size does not match.
I would like to change it a bit, so that the name positions horizontal at the bottom and the size matches my other buttons.
This is my current ‘work in progress’ dashboard :
The mismatch :
my code :
jja_standaard:
hold_action:
action: more-info
aspect_ratio: 1/1
size: 80%
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
show_label: true
show_name: true
state: null
styles:
card:
- border-radius: 15px
- margin: 5px 5px 5x 5x
- padding: 0px 0px
- '--paper-card-background-color': 'rgba(40, 40, 40, 0.7)'
- '--mdc-ripple-color': green
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 10px
- white-space: normal
state:
- font-size: 10px
- white-space: normal
label:
- font-size: 10px
- white-space: normal
jja_gloed_geel:
template: jja_standaard
state:
- styles:
card:
- box-shadow: '0px 0px 10px 3px #F9C536'
icon:
- color: '#F9C536'
name:
- color: '#F9C536'
- font-size: 11px
value: 'on'
Thank you in advance!
It’s not set up to size the same as other buttons, but you can probably get close to what you want by modifying the bigtemp template.
The width is based on the size of the main temp display, so you can increase the font size from 3.5em to something bigger that gets you the width you need. It’s the only 3.5 value in the template, so search for that to find where to change it. It’s in the state styles config. Note, that may not match the widths on different devices. It’s a limitation of how the text is unable to scale to match the card size, so we are letting the card scale to contain the font size.
The rotated name can be moved to the bottom by removing - transform: rotate(90deg) and transform-origin: right bottom from the name styles config. To push it down below the card so it doesn’t overlap the other content, change bottom: 0 to bottom: -15px (adjust negative value as needed). To make it centered you can add left: 0. You’ll also want to change - margin-right: 15px to - margin-bottom: 15px in the card styles section to ensure there is a gap on the bottom for the name, since it’s technically outside of the card when absolutely positioned that way and other cards would overlap with the name if the margin wasn’t there.
Thanks for your help.
It is a pity that the button is not scalable, but it is fine to use for display on a tablet.
@Plaatjesdraaier, that looks good.
Just to avoid confusion, I’d like to clarify that the custom button card normally scales quite well. It’s the way I am using it in my template based on a font size that is causing the scaling challenges. My normal use of this template is an overlay on a picture elements card, so the relative scaling isn’t an issue.
hey @ktownsend-personal these look amazing. I’m pretty new to home assistant and was wondering if you had any step by step out there on how you do these? I would love to mimic your pool one in particular
@scautomation, my post in this thread on January 12th has a link to my post about the pool UI. There is a lot going on in that UI, but it’s basically a picture elements card with other cards positioned on it.
I finally got around to working on this. You spend a lot of time on the design which is amazing. One part doesn’t work with me though which I would like. The fact when a HVAC is working that you see an animation of the fan like in example 1. What do i need to do to make this work ?
I assume this part of the code makes it work or not
state:
- id: value_any
operator: "!="
value: all
spin: true
...
- display: >-
[[[ return entity.attributes.fan_state &&
entity.attributes.fan_state == 1 ? "block" : "none" ]]]
it would be great to understand what these parts of the code do, so i can adjust them accordingly.
Regards,
Jens
@Jens_Wymeersch, that’s the right spot. The logic in - display: is showing (block) or hiding (none) the icon based on whether the thermostat is reporting that the blower is on. For my thermostat, that’s a fan_state attribute. It might be a different attribute on your thermostat, or it might use a different value to indicate on/off, or your thermostat might not have an attribute for the blower. You can modify that to use a different attribute or state value.
Keith, thanks for your quick reply. I understand what you say, but I don’t understand the coding logic. Can you please explain me in plain English what this code block means and what I should change ?
@ktownsend-personal I’m already on the way to simplifying the design a little. I’ll send the code shortly. I want all my buttons to be of a similar size and look&feel.
The syntax I had used in the template is a ternary, which returns either what’s after the ? or the : depending on whether the first part is true or false. Here is a page about it: Conditional (ternary) operator - JavaScript | MDN
Here is the same logic, but formatted as a standard if/else, and explicitly comparing the first part to undefined instead of the shorthand that treats an undefined value as false:
if (entity.attributes.fan_state != undefined && entity.attributes.fan_state == 1)
return "block";
else
return "none";
Thank you so much for the clarification !
Please have a look at what I’ve done. I’m stuck with the changing of the mode. Can you please advise?
@Plaatjesdraaier I’ve reworked the code from Keith to a card. You can find it here Lovelace: Button card - #5538 by Jens_Wymeersch.
and looks like
