Hey. There’s the default one that I installed with hacs and the modded with my icons in /mod/ but starting with ha 0.110 we have to load icons like this instead:
The tv button? I drew that in illustrator. It’s basically just a rectangle but thanks haha
Yikes…
Hmm, I can’t find it in Hacs. What is the name or does the rep needs to be added?
I’m not at that level yet - but thx for the explanation 
What I’m trying to say is that you shouldn’t waste your time on that right now as the home assistant release tomorrow will break bha-icons. But yeah it’s a custom repo
I guess it was too late for playing around with it yesterday.
Will wait and see how you deal with it then :).
1 Like
I really like this layout and I am starting to build out my panel. I need to have multiple pages (views). I like how lukevink has got a side menu including navigation buttons here
https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights
I would like to have multiple pages (views) which I can navigate to using the links on the left. I am not sure how to implement as the sidebar I am working with is markdown.
Side menu buttons like these are what I am looking for but not sure how to implement in markdown
Also this layout is only one page so i need to add additional views.
I’m planning on a Climate page with all my fans, blinds, air conditioning etc. Then another for media control, another for lighting etc.
Thanks for any direction!
You can’t do that in markdown. What you’re describing is just images with navigation_path. Take a look at line 3198.
There’s also this https://github.com/DBuit/sidebar-card
1 Like
Thanks for the reply. Yeah, I had seen that code starting line 3198 and have the graphics etc already in my www directory. I’ll take a look at the sidebar-card, thanks. I will miss the markup though as I have spent time on getting it just how I wanted it.
Instead of the buttons being down the left hand markdown menu could I have buttons over on the right hand side that do navigation to different views?
regards,
You could, or even easier along the top/bottom
@Mattias_Persson Thank you very much for sharing your setup, it has been a real source of inspiration. I’m still building on our setup and there’s much more i’d like to incorporate, but so far i adapted this view to a phone-friendly one, and i gave both me and my wife separate views that we can adjust to our liking by giving it a “Settings” popup (especially my wife likes to change everything to her liking / mood / day / etc):
Here are some examples:
12 Likes
I’m looking to get several views available that are accessible from left hand menu buttons. I took inspiration (and the graphics) from lukevink
I have the Control rooms and Control Lights images working and they take me to different views. Perfect. Except… they are graphics and do seem to look grainy in certain circumstances.
My question is can I generate these buttons dynamically with real fonts and a long oval instead of have pre made graphics?
This is awesome. I’m a total noob so thank you for sharing. Am I able to use this setup as well? If so where do I find documentation on how to actually install/configure this?
This will make for a great look on my iPad
Yeah, you can use this too. There’s no specific documentation for this config but everything is documented.
WOW thats realy nice. Can you share your Settings for the Mobile view?
arh off course, and use the placeholder as the entity. thanks for assistance.
Seems the white X has gone from popups:
Any suggestions on what setting to check? I’m using your theme
Oh great so it shows me how to install and set it all up? I will watch the video and try it… Thanks so much.
It’s just a bunch of input_selects like this one:
input_select:
marlo_border_radius:
name: Border Radius
options:
- 0px
- 6px
- 12px
- 18px
And then the button-template is adapted to use these inputs:
button_card_templates:
light:
aspect_ratio: 1/1
show_state: true
show_icon: false
styles:
name: &button_style_name_state
[justify-self: start, padding-bottom: 0px, z-index: 1]
state: *button_style_name_state
custom_fields:
info: &circle_pos
[top: 8.5%, left: 61.5%, width: 30%, position: absolute, letter-spacing: 0.03vw]
card: &button_style_card
[font-family: "[[[ return states['input_select.marlo_font_selector'].state ]]]", letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: "[[[ return states['input_select.marlo_font_size_selector'].state ]]]",
background-color: var(--primary-color), opacity: 0.4, padding: 11vw 0.9vw 0.9vw 1.1vw, border-radius: "[[[ return states['input_select.marlo_border_radius'].state ]]]", box-shadow: "[[[ return states['input_select.marlo_box_shadow'].state ]]]", transition: none]
state: &button_card_state
- value: 'on'
styles:
card: [background-color: 'rgba(255, 255, 255)', opacity: 0.7]
name: [color: var(--primary-color)]
state: [color: var(--primary-color)]
2 Likes
I had wondered about the button-card. It says that “works with any toggleable entity” and for a menu I don’t have one. Would I just create a fake switch and tie it to that?