That looks great! Nice to see you managed to create your own version that suits your needs 
1 Like
Hi! Lovely UI interface, and i’ve started to try it out myself aswell
But for someone who’s a first timer using templates, and trying to read up on the official docuements i’m still baffled of how to use it.
I’m trying to use it together with Vertical Buttons Card
together with the sensor you’ve mentioned :
{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}
I’ve created a light.all_mylights as a entity
Where do i add that template? And how do i write it? Do i need to add it in Configuration.yaml first or?
Hi @Ryssk,
The template is used to count how many lights are on. Which can be used directly with the card or created into a sensor like this:
# Example configuration.yaml entry
sensor:
- platform: template
sensors:
lights_on:
friendly_name: "Lights On"
value_template: "{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}"
Hope this helps!
does anyone have a idea to solve this ? The last tile does not appear as it should on my phone screen. On the pc it’s fine tho
Im also interested in this. To only way I handled it was removing the last tile. So I was able to use just 4 tiles. I then adjusted the size of the 4.
As @fitim mentioned, removing the last tile would be the easiest choice. There might also be some implementation of resizing the cards when the screen gets smaller using state-switch. That is however more complicated. In a future version, I might update my config for the cards to resize.
Hope this helps!
Just found this. Great idea for my Dashboard!
Will have a deeper look into this!
Thanks!
/ Ralf
1 Like
(Sorry for the self-promotion)
I took this design and made a custom card for it. It’s called Button Text Card and is now available on HACS:
Makes your Lovelace config a lot cleaner. It also has support for templating, it has a large version and you can tweak the colors.
Let me know what you guys think (and if you have suggestions) 
4 Likes
This is amazing!
Awesome! Great work! 
I’m playing around with it now … since I’m not good in javascript maybe I just don’t understand, but:
How do i configure it with a tap_action? Isn’t it possible to toggle lights with this?
The tap_action should behave like all other cards. To toggle a light, you can use:
type: 'custom:button-text-card'
icon: 'mdi:lightbulb-outline'
subtitle: Subtitle
title: Title
entity: light.dressing
tap_action:
action: toggle
Just make sure to correctly set the entity_id.
Other things are also possible, like opening another tab in Lovelace:
tap_action:
action: navigate
navigation_path: /lovelace/switches
Ok thx.
Another thing:
I use a dark theme for evening, and a white theme for the day.
Is it passive to change the shadow of the box dependent from the theme?
Actually it is just working for the white theme.
Perfect …
Another TODO can then be the small boxes without text 
Quick update: I fixed the shadow
About your other request: this should already be possible.
icon: 'mdi:comment-alert'
type: 'custom:button-text-card'
Renders:
(Make sure you have the latest version. Older versions required you to define an entity)
Sounds great! Thx for your work.
With the smaller boxes it would be great if we could define let’s say up to 4 little boxes. And each of them with own actions, and colorchange dependent from the state etc. … like the Buttons of this Original work …
btw. what do you mean with “you fixed the shadow”? I don’t see any difference, except that there is no “deep look” anymore…
I think that there are also a lot of things to do, if you want to make a plugin with all abilities of the original work of @N-l1:
- Make horizontal and vertikal stacks with more than 1 button.
- give the option to use other shadow effects (for dark themes and light themes). This shouldn’t be as hard … I would make this dependent of the sun state.
- give the option to show the buttons pressed and depressed. this is one of the thing I like most.
I like your plugin really much … that’s why I give you this input. I hope its not annoying for you.
I meant that the color of the shadow is now determined by your current theme. I feel like this is the best way to implement it because then it really works for all themes and doesn’t look out of place.
As for your other remarks:
- Horizontal and vertical stacks should be possible by using the built-in
horizontal-stackandvertical-stack. Example with horizontal stack:
type: horizontal-stack
cards:
- icon: 'mdi:format-title'
type: 'custom:button-text-card'
- icon: 'mdi:format-title'
type: 'custom:button-text-card'
- icon: 'mdi:format-title'
type: 'custom:button-text-card'
Result:
While this does work, it’s not ideal. Putting 4 cards side-by-side gives a pretty bad result because the cards have some margin. This margin shouldn’t be there when there is no title or subtitle. Noted!
-
You’re correct. I already give users the ability to control background and text color. Shadow color would be a nice addition. GitHub issue opened.
-
I think this should be relatively easy to implement as well. Stay tuned!
I’m pretty new to Home Assistant (but loving it) and this is my first custom component. So feedback is always appreciated. I’ll keep you posted on my progress
2 Likes
Thank you man! I really appreciate your effort! 
With “2.” I meant the shadow, wich you already implemented somehow… For now I see a problem here, because either im doing something wrong, or its not working as expected. I’m up to date and this is how it looks for now with a dark theme:
If you say that the shadow is grabbed by the current theme, I don’t know if this works out. I thought more about something like this as result (this is how the original work did it):
Thanks again for your work and welcome to Home Assistant!