Hi again,
I tinkered around once again and built some shutter cards… now looks like this:
What do you think? Not so fancy… but a first try
What do you think? Not so fancy… but a first try
Really like the clean look, would you mind to share your code from the first page?
Looks good right? Would probably give the buttons more spacing between then (thus making them smaller) and the colors more pastel, but that is personal preference.
Further great job, would def implement them if I had shutters! 
@Roy75 my front page changed a bit, let me know if you still want the code. Although not very happy with the scene buttons though.
Hi Damian,
thanks for the feedback! Will tinker again, also because the number of cards does not fit yet perfectly my phone’s screen…
Your homepage looks really great indeed! How did you manage to set the menu buttons to the bottom? Is it kiosk mode? Would you also mind sharing the page(s)?
Thanks in advance!
1 Like
He,
The navbar on the bottom is a custom card, but I also hid the default HA navbar with Kiosk mode indeed.
I’m not home at the moment, but when I’m back later today I will place the code for the menu here. Also credits to @fredrikpersson92 who helped me with this.
The other stuff and pages I will place on my GitHub. Need to make some changes so the code is more readable. Will try that this week.
I think it is very nice
So this is the code for my navbar. Its a card-template so you either create it as a template or copy the whole style in the card.
Template
custom_card_navigationbar:
variables:
color1:
color2:
color3:
color4:
styles:
grid:
- grid-template-areas: '". item_1 item_2 item_3 item_4 item_5 ."'
- grid-template-columns: 1fr repeat(5, min-content) 1fr
- grid-template-rows: 1fr
- column-gap: 2.5rem
card:
- height: 70px
- width: 100vw
- border-radius: 20px 20px 0px 0px
- box-shadow: 0px 0px 12px rgba(0,0,0,.2);
- background: var(--background)
- overflow: visible
- position: fixed
- margin: 0
- bottom: 0
- left: 0
- z-index: 4
- padding-bottom: 70px
- margin-top: 150px
custom_fields:
item_1:
card:
type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: 'home'
styles:
card:
- height: 55px
- width: 55px
- margin: 0
- padding: 10
- background: none
- align-self: start
icon:
- color: '[[[ return variables.color1 ]]]'
item_2:
card:
type: custom:button-card
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: 'rooms'
styles:
card:
- height: 55px
- width: 55px
- margin: 0
- padding: 10
- background: none
- align-self: start
icon:
- color: '[[[ return variables.color2 ]]]'
item_3:
card:
type: custom:button-card
icon: mdi:devices
tap_action:
action: navigate
navigation_path: 'devices'
styles:
card:
- height: 55px
- width: 55px
- margin: 0
- padding: 10
- background: none
- align-self: start
icon:
- color: '[[[ return variables.color3 ]]]'
item_4:
card:
type: custom:button-card
icon: mdi:play
tap_action:
action: navigate
navigation_path: 'media-controls'
styles:
card:
- height: 55px
- width: 55px
- margin: 0
- padding: 10
- background: none
- align-self: start
icon:
- color: '[[[ return variables.color4 ]]]'
Card
- type: custom:button-card
template: custom_card_navigationbar
variables:
color1: var(--color-cerise)
So a bit of an explanation, but there are 4 variables. Color1 through Color4. Where color1 is the first item and color 4 the last. In my example I have a button for home, rooms, devices and media. So when I’m on the homepage, I will set color1 to purple. That is because color1 is item1 and item1 is the homepage button. If i’m on the devices tab (which is item3) I would set color3 to purple in the variables, so the card would look like this:
- type: custom:button-card
template: custom_card_navigationbar
variables:
color3: var(--color-cerise)
You also need to add the navbar to all the views or if you only have one view, you need to add it one time (obviously).
Also, to prevent the navbar covering a part of the last card in the view, I added a blank card on the bottom of every view with a height of 50px.
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- height: 50px
Bit of an explanation but I hope this helps!
EDIT: Here is my github repo. It only contains the cards and the dashboard itself.
Thanks, i will take a look at it.
This is cool… but do you have any idea on how i could show 3 icons at once?
If they are collecting: food, carboard and plastic one day, and the week after they pick up glass, then i want all 3 icons to be flashy and smooth
That’s great! Will give it a try this evening
Berris,
as far as I understand you, you will be showing more than one type of waste in “alarm”… Where I live, typically they collect different waste types on different days… but sometimes they happen on the same day… then my sensors show up simultaneously … i.e. paper and recycle will be collected tomorrow(1 day ahead) and both icons show up in color and animated…
You can find the implementation of the card in my GitHub…
Btw: the implementation I am using is from @JKW and running since years…
1 Like
Thank you sir!
Ziet er goed uit! Can’t wait 
1 Like
hi… can you share your code this card from your screen ?
Thanks
Its on my github!
When I make dashboard.yaml my default dashboard gets wiped… how to solve this?
It does not need to be named exacly dashboard.yaml, it can be named whaterer you wish to name it