Modernize UI: Image tiles that are clickable in UI

Feature Requests
1

Hi all,

Before digging into this request I’d like to state that I love HA both for it’s customization and integration, which far surpasses any other platform in my opinion. :wink:

That being said I think the UI, although using the more modern polymer framework, quickly feels amaturistic, even after customizing the default theme. When you take a look at systems like Savant you can see that they have a nicely polished UI that make it more “attractive” to interact with the system, from a UX point of view. Hence, I’ve quickly been experimenting with changing theme colors as well as adding images to let people interact with our home. When I put all this together you get something like this…

screenshot
screenshot1080×1920 399 KB

Currently I’ve build the example by using a ‘local file camera’ component. Now, here’s the question. Is there a simple way to link a certain scene/scripts to the images (lounge scene, cinema scene, party scene) when the user clicks on them?

I’ve been looking into solutions like ‘custom ui tiles’ but so far this looks like a lot of work (to dig into) without even having the chance that this would work.

2

Tiles not a lot of work at all, it seems complicated but it is very easy if even I succeeded :slight_smile:
This what I did: Custom UI: Tiles

Generally there are 3 types of tiles:
1.text (only show data - for sensors)
2.button (send command without feedback - for script)
3.switch (on/off)

First you need to make dummy variable, for text “input_text”, for button “script”, for switch “input_boolean”

Then this variable customized, it can be one tile or table of tiles, each tile you can change background to your pictures

3

Thanks alot for referencing just the right topics within that thread! I got it working like I wanted. Some HTML/CSS had to be changed though. That’s how it looks like now:

In the light section:

screenshot2
screenshot21080×1920 406 KB

In the media section:

screenshot1
screenshot11080×1920 288 KB

4

Love this idea, looks great!

5

Hopefully one day. Unfortunately, UI doesn’t seem to be a priority at this stage of the project.

6

is your github page still active, getting 404

7

very nice looking scenes you have there, would you please care to share you’re code?
Im trying to get the interface to embellish somewhat and this is a real nice way of doing so.
cheers,
Marius

8

I’ll try to commit the code tonight. Upcoming weeks I’d like to still polish the code so that I can re-use it more easily.

9

is cool.
if you need coding examples for using scripts, and customizing these tiles based on the state of the depending entities (scripts are not-toggles so require some extra thought in customizing), feel free.

custom-ui Tiles is magic.

10

Here you go guys! https://github.com/TPX01/homeassistant_scene_tiles
I’ve also added all the different scene images I’ve made so far in it.

You can use this customization for following entities:

  • lock
  • cover
  • scene
  • “default on/off” entities

Improvements are welcome :slight_smile:

11

The new lovelace ui seems to have an answer to my question… :smiley:

I’m experimenting with the entity picture and picture glance feature as we speak. https://gist.github.com/ciotlosm/9508388876edf92c4c1f3579e740fbd5

1 Like