Salvaged an old tablet for a wall display, in need of Lovelace dashboard inspiration

I recently salvaged a broken tablet for use as a wall mounted smarthome dashboard display. I’ve written up how I achieved this:

https://webworxshop.com/salvaging-a-broken-tablet-for-a-smarthome-dashboard/

There are still some rough edges and things I need to work on. I’m in particular need of inspiration on the dashboard side. Feel free to share yours!

3 Likes

First and foremost, I would switch to Fully Kiosk Browser once you get the brown-out issues resolved. It will provide a motion sensor to turn on the screen like you are getting with Tasker and a whole lot more. I have 2 8" Samsung Galaxy Tab 4s that were originally running Android 4.4.2 and I upgraded them manually to Android 5.1.1. FKB runs smoothly and provides a lot of sensors, a camera, and more.

As for my dashboards…


This is the screen from the one on my nightstand. I am using a simple phone / tablet stand I found on Amazon to keep it upright. This is the daytime theme (yes I know it says it is after 11pm, but I changed it for you). See below for night time theme.

======================================================================


This dashboard is hanging on the wall in my living room right beside the doorway from my entry hall. This is the night mode view of the dashboard. Both tablets use this theme at night and the other theme during the day.

When motion is detected at my front door, Browser-mod will popup a larger view of the camera that is in this dashboard on BOTH tablets and will return to normal view after 60 seconds or on screen tap.

I hope this helps!!

2 Likes

Hi !

First, thanks for your blog, it’s been a huge inspiration for me.
Now onto the subject itself, I’d advise you to first answer those questions :

  1. Who will use the dashboard ?
  2. How often will it be used ?
  3. Is this something you want to be displayed in your house, or hidden in a closet somewhere ?
  4. What level of reliability do you want to achieve ?

Depending on this, you’ll have the option to either go with something crazy and shiny (but unreliable at first until you debug the mess), or a little more conservative but also more reliable (and you can always spice things up later on).

Think UX first, and then have a look at dribble, medium and so on for UI inspiration (that might make your current UI looks like potato … well it did that to me :stuck_out_tongue: ).

As for my setup, which design is blatantly ripped of from somewhere I can’t remember, I have a main tab that’s used almost everyday by me and the wife :

The view I use to monitor & control plant related stuff (WIP, it’s unreliable as hell for the moment) :

And the chore tab that is used for household maintenance. Quite new but so far it’s been working flawlessly :

That’s diplayed on a dell tablet which should be mounted on the wall but is sitting on the countertop for now …

1 Like

@atomicpapa Thanks for that, your dashboards look pretty cool. I especially like the camera popup idea, but I don’t have a door camera yet. Regarding the browser, I’m already using WallPanel, which is similar to FKB but Open Source. It integrates with HASS via MQTT and also supports the sensors and camera features. I’m currently using it for motion detection (not Tasker, although that’s installed for future stuff).

@Vlavonvidden Thanks for that, your dashboards look great! I’m glad you like the blog and find it useful/inspiring. The tablet in question is located in our open plan kitchen/dining/living room area so it’s pretty much “public”. Right now that means myself and my wife will use it. I really like your main tab, I’ll have to steal some ideas from that!

Hi,

Would the chores tab be a fancy styled entitities card, or is it a dedicated custom card of sorts?

I like the state side of it, so please share if you would? very interested in how you made this.
thanks!

@robconnolly Thanks for the feedback. Main tab is mostly made out of button cards & css using card mod for the rest. I still need to find a way to make the vacuum map pretty, but so far I’m pretty happy with the result, it looks okay and it works.

@Mariusthvdb Okay so this one is a bit tricky. Since it’s not the main topic here I’ll stay brief (if needed, I’ll create a new post on the forum) :

  • Each core is a button-card.
  • Each “room” is a vertical-stack.
  • I’m using mqtt sensors (inspired by check button card) for the background stuff, and a LOT of templating to minimize code length.

Button card is pretty handy :

  • Click to update the chore (with confirmation if needed).
  • Click and hold to have access to the chore settings:
    image
    (I rely on templating so I only need 2 input numbers even if I have 60 chores)
  • I’m working on double-click to cancel the latest action …

PM me if you want the details or the config. It still messy however ^^.

ps : At this point I’m pretty sure creating a dedicated card would be a better idea, but I lack the skills to do so.

1 Like

Thanks for the tip on the button card. Just another awesome HASS community project with tons of features that I knew nothing about!

cool that would be indeed.
If you d have a spare moment anywhere please do, maybe create a dedicated topic indeed, and combine it all in a package :wink:

Would be most interested in the chores side of things, dont have that yet, and dont find it often in the community.

thanks in advance!

What weather card is this?

@aFFekopp This one, with some css tweaks applied to the main grid.

@Mariusthvdb Understood, I’ll try to come up with something in a forum post !

I’ve posted a further update to this. Unfortunately, I couldn’t fix the power issues despite a valiant effort with a new power supply. In the end I managed to find a new tablet at a reasonable price and went for that. I’ve also fixed the brackets so they don’t obscure the screen (STL files in post), completed the MQTT integration and improved my dashboard:

https://webworxshop.com/home-assistant-wall-mounted-tablet-update/

Pleas let me know what you think!

Wow, your first screen looks amazing, I’m trying to make something like that myself!
I really like how you have organized sections with headers and cards inside.
Would you mind sharing some templates?

Thanks for your comment. Unfortunately, this config past away a long time ago so I can’t share any template.

However it should be quite simple to replicate, here’s what you need :

Headers

Markdown cards with some css tweaks using card mod :

  • Transparent background.
  • Dropped shadow removed.
  • Font adjusted.

Sections

If you want to get really fancy, use a grid layout (see layout card doc) to adjust the position of each item. This will be a nightmare to maintain, so I’d recommend defining a few blocks, then organize those using the vertical or horizontal layout option for the layout-card.

Use a vertical-stack for each block, the first card should be the header, then put anything you want in there (including hoorizontal stacks if you want button rows).

When your block are defined, adjust the layout depending on your screen size (use grid-mode with media queries if you want full control) and you should be fine.

Finally, I’d recommend using lovelace_gen for any attempt to customize the UI except for minor changes. Use and abuse of includes statements, and keep your lovelace config files as simple an organized as possible. This can be a good starting point if you don’t want to define a hierachy yourself.

1 Like