My Lovelace UI - Custom Button and Browser Mod

My design is heavily based off of @Mattias_Persson design. Being I am not a programmer, or a UI/UX designer going through all the intricate stuff that Mattias had done was way above my comprehension level. But I am no slouch! It took me about a year but I did it. With the backing of this wonderful community, a little inspiration pep talk from my twin sis, a UX designer, I am PUMPED! to show off my work.

I could not be more thankful to Mattias for sharing his work and configuration. @thomasloven, of course, because my design would not be possible without his superb Layout card, Browser Mod, and Card Mod. Of course I cannot forget @RomRider for custom button card, the core of my design.

Being in a small 2 bedroom I knew I wanted to keep it simple but detailed and sharp. After many iterations I was able to boil it down to this:

All of my buttons trigger on double tap. On single tap they bring up a pop up. I wanted this because I do not want people tuning shit on by doing single taps, or turning AC’s on in winter, lights when kids are sleeping, etc.

Home Assistant OS running on Raspberry Pi 4, while I await my Blue.
Custom Wall with a magnetically held Samsung s6 Lite
Fully Kiosk Browser
Supporting Nabu Casa
Home made ESP8266 BME280 temperature sensors running Tasmota
Home made ESP8266 Thermostat (BME280 and relay) running Tasmota
Sonoff Fan03 with changed out capacitors for fan control running Tasmota
Sonoff switches running Tasmota
Vesync smart switches for individual ACs
Lutron Caseta light control
Nvidia Shield TV
Wyze Cams running RTSP firmware

Integrations

  • Android TV media platform
  • Broadlink
  • IQVIA
  • MQTT
  • Google Cast
  • Lutron CasĂ©ta Smart Bridge PRO/RA2 Select
  • Dark Sky :crying_cat_face:
  • Scheduler Component and Card for Climate Control
  • Spotcast
  • Subaru

Front End

  • Picture Elements Card
  • Light Popup Card
  • Calendar Card
  • Mini Graph Card
  • Search Card
  • Layout Card
  • Weather Card
  • Light Entity Card
  • Spotify Lovelace Card
  • Simple Thermostat
  • Card Mod
  • Button Card
  • Hui- Element
  • Lovelace Clock Card
  • Slider Entity Row
  • Kiosk Mode
  • Card Tools

I definitely want to share my configuration, not exactly sure how to best do it yet. I would need to redact sensitive stuff and secrets file. I am sure someone can give me some pointers or share some instructions.

11 Likes

Is your car parked in your bedroom? :stuck_out_tongue_winking_eye:
Joking aside, that looks really fantastic.
Great work!

What does the design look like on a smartphone? Or is it rather intended for tablet use only and not/less responsive?

very inspiring and amazing !!

I was waiting for someone to comment on that… Lol. It’s there because u don’t have another entity for the bedroom. Couldn’t come up with a different header name so that’s where I left it.

As far as the scaling, it scales down fine for the most part. Definitely usable, but the design was made with tablet only in mind.
Ill have something much simpler on phone. Don’t need weather, calendar, sidebar…

Please share your configuration when you are ready!
Thanks