Best tablet dashboard 2022 - lovelace

Hello everyone.

Im looking for some advise to running a tablet dashbaord on HA. Im looking to undertsand what others are doing for this mainly on the lovelace side of things? Are people using themes like mushroom/ minimalist or something different?

I’m using the Picture Elements card to produce an interactive 3D floor plan.

3 Likes

how did you do this? @templeton_nash

This dashboard took a lot of time and effort and has been through many stages of evolution. The basic explanation of how I did this is:

  1. I used SweetHome3D to create a 3D model of my home
  2. I used SweetHome3D to render images of:
    • my home in various natural lighting conditions - morning, noon, afternoon, dusk, night and dawn.
    • my home with each room lit by different lights
  3. For the lit rooms I used Paint.Net to cut out each room and fill the remainder of the image with transparency. This enables me to overlay several lit room images and create the effect of any combination of lit rooms. Having all the images, including naturally lit backgrounds, the same size makes lining up all the images easy.
  4. I use the Picture Elements card in HA to build the dashboard.

For the Picture Elements card (PEC) I have:

  1. Created a separate Template Sensor which produces states of morning, noon, afternoon, dusk, night and dawn depending on the time of day and if the sun is above or below the horizon.
  2. In the PEC I select which background image to show based on this sensor.
  3. The PEC then shows or hides images for lit rooms based on the state of lights.

There’s also stuff to add buttons and state icons and various modal overlay pannels for things like Alarm, Energy, Climate etc.

My PEC code stretches to about 2,000 lines of yaml!

3 Likes

I’ve been there, done that.

My wife didn’t like it :stuck_out_tongue:

Just an FYI the custom:floor3d-card lets you do this with a single sweethome3D render and then you link entities to items in the render. It deals with lights etc coming on and the lighting rendering so no need to do every combo and overlays etc etc

1 Like

Hello Nash

Are you interested in working for me and doing the same for me? I have already drawn my house with Sweethome 3d. But I do not know enough about home assistant

Hi @ingranu

Making dashboards like these takes a great deal of time and effort. Even though I know my HA configuration and what I want to achieve it has still required many hours of work.

I don’t know your HA configuration and I don’t know what you want to achieve. I’m sorry but I don’t have the time to invest in your system.

Sorry if that comes as a disappointment.

I hope you’re able to advice what you want. If you do it yourself you’ll get a great deal of satisfaction.

Good luck.

Hi all,

I’m desperately trying to get my floorplan on my iPad Pro 2, but unfortunately I’m not getting the size I want.

Below is a picture of my dashboard currently, looks awfull and have no idea how to fill the screen in a good way

I’m using picture element card in panel mode, but still have issues. There is also no way of changing the picture to fit the screen (just as the background of the sidebar)

Is there anyone who can point me in the right direction ?

Thanks in advance,

Kr,

Bart

hi @templeton_nash, how did you make the entities background transparent?
mine have a white box around them that I can’t get rid of.

1 Like

Hi @tiotuba

I don’t know why my state icons have a transparent surround. An example of my code is:

  - type: state-icon
    icon: mdi:lightbulb
    state_color: true
    entity: light.bedroom_2_table_light_level_on_off
    tap_action:
      action: toggle
    style:
      left: 76.5%
      top: 67%

What did you use to create your 3d floor plan? It looks a lot nicer than others I’ve seen