I’m running HA on a raspi 5. I have an old samsung galaxy phone I want to use as a bedside dashboard (landscape) with a clock with two buttons. The buttons are to toggle the fan switch and to turn on/off the light. I want the clock to fill most of the screen and the two buttons on the side. The built in default clock only has three font size options, but they are all too small How do I make a dashboard where I can easily set the size of the clock to fill most of the screen and then make two small icons for toggling the fan and light?
I can think of several ways to do this so depending on who you ask they will all probably tell you something different. If it was me, I’d probably start by experimenting with the layout and try either a Panel (single view) layout with the buttons and clock inside of a horizontal stack card or maybe by using the lovelace-layout-card with the view type set to custom:grid-layout and then experiment with positioning the clock and button cards.
Are you going to use the browser in kiosk mode? Make sure it is on the supported list.
You could use a custom button-card like I show here:
Maybe this can be an inspiration.
Which supported list? It’s a galaxy S7 and I was able to install the companion app and then get the HACS installs working. I had to go into the app settings to clear the cache for some of the HACS, but it’s working for now.
The S7 Android level cannot be updated any more and may become a barrier to latest functionality.
It took me many many hours this weekend and it took a long way to get there, but I basically did what @almighty59 suggested: a custom grid layout, with a few added features. Thank you @anon60850888 because I used the thread you linked to find the card I ended up using. This was a lot for me to learn in a weekend, but I’m going to type up a summary and then share what I ended up with for those who need help in the future
First off, I’m quite disappointed with how difficult this was for a newbie. All I wanted was a clock and two buttons. The built in clock is horribly uncustomizable, and we should be able to just drag and resize cards all on the same screen. Why can’t I just drag a card and have it stay in it’s place? This was extremely frustrating.
CLOCK
I went with the PQINA Flip Clock since it was easy and looked good. I already had HACS installed so I was able to download it and get it on a dashboard easily.
LAYOUT
This was the most challenging part overall. I wanted two smaller buttons stacked vertically to the left of the clock. Putting the buttons on the left was the hard part. I tried nesting the default vertical and horizontal stack cards, but I was unable to resize the columns how I wanted. I then looked at Layout-card, Ultra Card, then went back to Layout-card. The big issue I had was getting things to resize between my laptop and the phone. Lesson learned: if you want multiple rows and columns, do NOT try to use nested stacked cards. Go straight to a custom grid card. I also never got the ‘place-content’ option to function correctly in the grid.
OTHER FEATURES
I wanted a cleaner design so I also grabbed the Custom Button Card, Kiosk-mode, and Card Mod. Each of these takes time to figure out, especially when you don’t know any CSS. Kiosk mode sounded great until I thought I locked myself out of editing the dashboard. I then needed to figure out how to automate showing and hiding the header.
This is what I ended with:
It resizes to my phone well, but I still have some tweaks to make. I could not figure out why there’s a larger gap between the cards than everywhere else. Overall this looks so simple and youtubers make it look easy, but wow is it a steep learning curve when you’re still new to HA and also don’t know things like CSS grid formats.
For those also new and looking to generate somethings like this:
- Install HACS
- Install Layout-Card within HACS
- Create a new dashboard using the default Panel layout, then add the custom grid card (at the bottom or the add card menu)
- Learn how the custom grid and CSS commands work
- Figure out your dashboard layout using placeholders
- Do NOT use the default vertical and horizontal stack cards!
- Install Custom Button Card and Card Mod within HACS
- Use Custom Button card to get any final size changes to buttons
- Replace all the placeholders with the final cards and buttons and modify how you want them to look.
- install Kiosk Mode within HACs
- Figure out how you are going to toggle on/off the header/sidebar from the dashboard, add the commands to the dashboard YAML, and test it works
- Update the dashboard YAML with the Kiosk Mode commands to hide the header
kiosk_mode:
hide_header: '{{ is_state("input_boolean.bedroomhideheader", "on") }}'
views:
- type: panel
path: ''
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 4fr
grid-template-rows: auto
grid-template-areas: |
"switch1 clock"
"switch2 clock"
margin: 0px 0px 0px 0px
padding: 0px 0px 0px 0px
cards:
- type: custom:button-card
entity: light.smart_rgbtw_bulb_2
section_mode: false
aspect_ratio: 1/1
show_name: false
styles:
card:
- background-color: transparent
view_layout:
grid-area: switch1
- type: custom:button-card
entity: switch.bedroom_fan_plug
icon: mdi:fan
section_mode: false
aspect_ratio: 1/1
show_name: false
styles:
card:
- background-color: transparent
view_layout:
grid-area: switch2
- type: custom:pqina-flip-clock-card
twentyFourHourFormat: true
hideBackground: true
view_layout:
grid-area: clock
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.bedroomhideheader
1 Like
I never said it would be easy. Lol. However, it looks like you figured it out and in my opinion it looks good.
FYI: You might be able to avoid using panel' as the view type and instead just use custom:grid-layout`.
views:
- type: custom:grid-layout
path: ''
layout:
grid-template-columns: 1fr 4fr
grid-template-rows: auto
grid-template-areas: |
"switch1 clock"
"switch2 clock"
margin: 0px 0px 0px 0px
padding: 0px 0px 0px 0px
cards:
- type: custom:button-card
entity: light.smart_rgbtw_bulb_2
section_mode: false