Simple but information rich UI. What you guys think?

Configuration
1

This is something that works for me. The idea is to get a snapshot view of the entire home at a single glance. would love to know what you guys think.

hass-macos
hass-macos1018×1974 329 KB
hass-macos-labels
hass-macos-labels1018×1974 373 KB

  1. When something turns on, it wiggles for a second. On startup/reload all items in ‘on’ state will wiggle like in the below gif.

hass-win-gif
hass-win-gif496×1080 1.06 MB

  1. The small circle on (upper-right) the icon indicates how long it has been in that state. The small circle background indicates the units of duration. Blue for minutes, grey for hours and red for days and so on. for example 28 with blue background means it is been in that state for 28 minutes. Or 2 with grey background mean, its been 2 hours.
  2. It looks same on both desktop and mobile. On desktop it meant to be used as a web-app like below.

hass_win_4
hass_win_41920×1080 641 KB

here is my ui-lovelace file link
here is my custom icons file

4 Likes
2

1920×921 531 KB

If it works for you, that’s all that matters.

12 Likes
3

@123
c’mon, its not that bad :rofl:

4

I think Apollo’s controls only wiggled during liftoff (when the astronauts’ eyeballs were being jostled around).

5 Likes
5

I could see it’s potential usefulness. But I definitely wouldn’t want it as the main UI. It’s WAY too busy. I could see it used as an “overview” screen.

It would be more helpful to others if you posted the code (or at least a link to where to find it). Even if they didn’t want to use it exactly as you did it might inspire other ideas.

1 Like
6

@cpuram - I like the layout and wiggling for a summary screen. Could you share your code for the wiggling and time indicator on the icons?

1 Like
7

You can use keyframes to animate wiggling, either using rotation or changing x.

1 Like
8

thanks. added the file link at the end of the original post

9

@cdopp
added the file link at the end of the original post

10

You can make your wiggle shorter if you do wiggle 0.1s and remove the extra stuff

11

@KTibow
didn’t get it. could you please elaborate a bit. thanks.

12 
  toggles:    
    aspect_ratio: 1/1
    state:
      - value: unavailable
        color: 'red'
      - value: 'on'
        styles:
          icon:
            - color: var(--accent-color)
          card:
            - animation: wiggle 1s
    extra_styles: |
      @keyframes wiggle {
        0% { transform: rotate(0deg); }
        5% { transform: rotate(10deg); }
        10% { transform: rotate(-10deg); }
        15% { transform: rotate(0deg); }
        25% { transform: rotate(10deg); }
        30% { transform: rotate(-10deg); }
        35% { transform: rotate(0deg); }
        40% { transform: rotate(10deg); }
        45% { transform: rotate(-10deg); }
        50% { transform: rotate(0deg); }
        55% { transform: rotate(10deg); }
        60% { transform: rotate(-10deg); }
        65% { transform: rotate(0deg); }
        70% { transform: rotate(10deg); }
        75% { transform: rotate(-10deg); }
        80% { transform: rotate(0deg); }
        85% { transform: rotate(10deg); }
        95% { transform: rotate(-10deg); }
        100% { transform: rotate(0deg); }
      }

turns in to

  toggles:    
    aspect_ratio: 1/1
    state:
      - value: unavailable
        color: 'red'
      - value: 'on'
        styles:
          icon:
            - color: var(--accent-color)
          card:
            - animation: wiggle 0.16s
    extra_styles: |
      @keyframes wiggle {
        0% { transform: rotate(0deg); }
        33% { transform: rotate(10deg); }
        66% { transform: rotate(-10deg); }
        100% { transform: rotate(0deg); }
      }
1 Like
13

@KTibow
that is awesome. thanks mate. I will test and update the file.

14

@KTibow

I just tested it. It wiggles just once. Barely noticeable. I needed to wiggle it 5-6 times.

15 
  toggles:    
    aspect_ratio: 1/1
    state:
      - value: unavailable
        color: 'red'
      - value: 'on'
        styles:
          icon:
            - color: var(--accent-color)
          card:
            - animation: wiggle 0.16s 6
    extra_styles: |
      @keyframes wiggle {
        0% { transform: rotate(0deg); }
        33% { transform: rotate(10deg); }
        66% { transform: rotate(-10deg); }
        100% { transform: rotate(0deg); }
      }

should work

1 Like
16

@KTibow perfect. thanks mate. updated the file.

17

I am guessing the icons are your own creations because it looks like you are using https://github.com/hulkhaugen/hass-bha-icons but you have icons that I can’t see in this package?

18

@klogg yes, added the file link in the original post above

19

thanks. added it in the original post.

1 Like
20

The number for duration is neat. As others have said though, it’s too busy for my taste. For my main page, I use an entity-filter for my on/off sensors so that the things that are off don’t clutter. I realize that changes the information available when glancing at it though, so I have a other tabs/views which has everything in more detail, for when I want that detail.

2 Likes