Google inspired Home Assistant on Mobile

[Philipp089 (Philipp Kinder)]

Hi together,

just wanted to show my google inspired UI for Home Assistant on Mobile Device and Desktop. As i had to spend some time at home during Lockdown i thought i build myself a smart home. Luckily i went with Home Assistant, such a great community and spirit. I just love it.

Find some impressions below. The full documentation is on my Github-Page.

The Home - Tab

The Light - Tab

The Media - Tab

The Plugs - Tab

The Climate - Tab

The Raspberry - Tab

The Desktop - PC - Tab

The Playstation - Tab

The Weather - Tab

The Camera - Tab

The Smartphone - Tab

The Battery - Tab

The Alarm - Tab

The Automations - Tab

If you have questions or feedback, feel free to ask.

Special thanks to Thomas Lovén, Karl Kihlström and Jérôme W. for the Plug-Ins used in this UI. It would not have been possible without their work.

Cheers,
Philipp

[valvex]

Very nice UI!
Since you’re using card-mod, maybe try

style: |
  ha-card {
    box-shadow: 0px 0px 0px 0px
 }

[Philipp089 (Philipp Kinder)]

thank you very much.

i tried the following without success:

artwork: full-cover
entity: media_player.sonos_wohnzimmer
icon: 'mdi:play-box-outline'
name: Sonos Play One Wohnzimmer
style: |
  ha-card {
    box-shadow: 0px 0px 0px 0px
  } 
type: 'custom:mini-media-player'

with and without ; at the end as i am still not sure when to use it and even with :host instead of ha-card

[JoramH (Joram)]

Looks awesome Philipp!

I was looking around for inspiration for google inspired buttons and here we are, just perfect! Would you mind sharing the code for the buttons?

If you’re interested here are some pictures of my mobile setup:

[Philipp089 (Philipp Kinder)]

reinstalled card-mod and it works as expected now with:

artwork: full-cover
entity: media_player.sonos_wohnzimmer
icon: 'mdi:play-box-outline'
name: Sonos Play One Wohnzimmer
style: |
  ha-card {
    box-shadow: 0px 0px 0px 0px;
    webkit-shadow: 0px 0px 0px 0px;
  } 
type: 'custom:mini-media-player'

not sure if webkit-shadow is needed

[Philipp089 (Philipp Kinder)]

here you go:

aspect_ratio: 1/1
color: '#f4b400'
custom_fields:
  brightness: |
    [[[
      var bri = Math.ceil(states['light.lichtgruppe_wohnzimmer_deckenleuchte'].attributes.brightness / 255.0 * 100.0);
      return `<ha-icon
        icon="mdi:brightness-7"
        style="width: 12px; height: 12px; color: #b3b3b3;">
        </ha-icon>` + ' '+ (bri ? bri : '0') + '%';
    ]]]  
  switch: |
    [[[
      if(entity.state == 'on') return `<ha-icon
        icon="mdi:toggle-switch"
        style="width: 60%; height: 50px; color: #4285f4;">
        </ha-icon>` ;
    else
      return `<ha-icon
        icon="mdi:toggle-switch-off"
        style="width: 60%; height: 50px; color: #b3b3b3;">
        </ha-icon>` ;
    ]]] 
entity: light.lichtgruppe_wohnzimmer_deckenleuchte
hold_action:
  action: more-info
icon: 'mdi:lightbulb-outline'
name: Deckenleuchte
show_icon: true
show_name: true
show_state: true
size: 100%
state:
  - styles:
      icon:
        - color: 'rgb(180,180,180)'
    value: 'off'
styles:
  card:
    - text-transform: uppercase
    - color: 'rgb(140,140,140)'
    - font-size: 10px
    - font-family: Roboto
    - border-radius: 2px
    - padding: 10%
    - '-webkit-box-shadow': 0px 0px 0px 0px
    - box-shadow: 0px 0px 0px 0px
  custom_fields:
    brightness:
      - align-self: start
      - justify-self: end
      - text-transform: uppercase
      - color: 'rgb(180,180,180)'
      - font-size: 10px
      - font-family: Roboto
      - font-weight: regular
    rgb:
      - align-self: start
      - justify-self: start
    switch:
      - align-self: start
      - justify-self: middle
      - margin-right: '-50%'
      - margin-top: '-16%'
  grid:
    - grid-template-areas: '"i switch" "n n" "s brightness" "rgb rgb"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content
  icon:
    - margin-top: '-40%'
    - margin-left: '-10%'
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  name:
    - text-transform: uppercase
    - color: 'rgb(140,140,140)'
    - font-size: 12px
    - font-family: Roboto
    - font-weight: regular
    - justify-self: start
  state:
    - text-transform: uppercase
    - color: 'rgb(180,180,180)'
    - font-size: 10px
    - font-family: Roboto
    - justify-self: start
type: 'custom:button-card'

but as i started two weeks ago, just let me know if there is unneccesary stuff in it. I would like to do a template in the near future but i have to read about that first.

[minsuke]

thx for your code sharing : )

I can use it for my family. thx

[JoramH (Joram)]

Thanks Philipp!

[spadoinkle]

Looks awesome Philipp!

Would it perhaps be possible for you to share your entire Lovelace configuration? That would be great!

[Philipp089 (Philipp Kinder)]

Thank you. A little late, but better late then never:
ui-lovelace.yaml

Cheers

[Philipp089 (Philipp Kinder)]

And finally the fitting Desktop-UI, made with TileBoard:

You can find both UI’s at GitHub.