Lovelace UI & Dashboard: my Project

[Gilganik (Nik)]

Hi everybody!, I’m sharing my recent dashboard I’ve created. I took inspiration by the community. This is running a wall mounted tablet with Kios Mode.

How it looks like (V2!) 01-05-2022:

Home-Assistant

Right now I’m running Home-Assistant on a Raspberry Pi4 Model B + Raspbee II for Zigbee

Custom Frontend componenets

• Button Custom Card
• Weather Card
• Bar Card
• Mini Graph Card
• Simple Thermostat
• Vertical Stack in Card
• Auto Entities
• Card Mod
• Layout Card
• State Switch

Custom Integration componenets

• Browser Mod
• PfSense Integration

Features

• Popups to manage the system
• Notification based on sensors alerts for all the house
  * CSS Animation for entities
  * Custom designed buttons
• Settings mode to access high impact sensors and freeze Automation in the house. All accessed by a code

The Sidebar

• Custom clock sensor
  * Custom grid to access main shortcuts with CSS animation, notification for errors, and loading for slow responding entities
• Weather card with additional details inside
  * Sensors to identify system warning or issues (RIGHT)
  * Sensor to identify system updates (LEFT)

Widgets

• Room widgets have room temperature, air quality sensor + on lights
• Home widget has summarized sensor status
• Additional details can be found inside

Details

• Light: Mainly managed by Shelly 1 V3 and Shelly 2.5. I also have the Zigbee gateway to manage Ikea lights;

• Energy: Energy consumptions is managed by shelly sensors (1PM + 2.5);

• Sensors: Aqara Sensors for doors, windows, water and air quality. Temp sensors are Sonoff;

• Heating: Tado Thermostat

• Nuki Door Lock for the main door

• Broadlink Mini 3 to manage the Air Conditioning, a spare Vacuum cleaner and some other remotes.

• Amazon Fire Stick as a Media Player in parallel with my TVs

• Amazon Echo as a Speaker for announcements and music. I’ve setup Alexa in order to power her on or off based on time.

• PfSense My Firewall is a PfSense based; I’ve used the PfSense integration available on HACS to manage rules and statistics from my network.

• Pi-Hole Is my tool to block ads from the TV

• Qnap is my nas configured as a media server

What i’m working to

* Additional information to be displayed to the Sidebar

• Move to Raspberry Pi 4 with SSD
• Integrate the floorplan to the dashboard
  * Vaccum cleaner integration
• Rhasspy Integration
• Still working on the UI design because every time I look it, I change it

Thanks

I really have to thank all of you for the huge contents you bring every day, for the custom components and for the all of this. This community & Home Assistant break the limits of the imagination.

for my project I took a lot of inspiration by these people: (Thanks gents!)

Mattias Persson Topic
for CSS code, and very clean and detailed design!

A different take on designing a Lovelace UI

Hey, I’m sharing my configuration https://github.com/matt8707/hass-config Home Assistant Container on a Synology DiskStation DS918+ NAS. Wall mounted tablet (Galaxy Tab A 10.1) using Fully Kiosk Browser. My configuration is exposed to HomeKit with Apple TV acting as a hub for remote connection. [dash] Update 2023.7 Workarounds for known issues: add state translations · matt8707/hass-config@7df57ea · GitHub add state translations, issue 2023.1.0 broke entity state display in local langu…

danieljarhult Topic
for the UI design, theme and the overall system!

Neon Lovelace UI & Theme for tablets

[1] [2] [3] Landscape [4] UPDATE SEPTEMBER 2021 Now using layout-card and a css-grid for changing between portrait and landscape. I always use this in porttrait so this one is only for you guys Browser_mod is now used for popups ! Added a footer with som stocks and news info. Added a “photoframe” popup that autoplays images with the swipe card. Did some clean-up and added some stuff in the theme-file. Added the ability to write notes straight on the dashboard.…

Tben Topic
For the cleanest design and buttons!

Lovelace UI • Minimalist

My Home Assistant Hi, my name is Thomas and I’m a UX designer and have been using Home Assistant for 4 years. After showing a little bit of my interface on Bokub’s post, I had several requests for more details on my configuration. I drew a lot of inspiration from 7ahang’s work that I found on Behance. [HA] Interface composition I use my phone most of the time to access the interface. I chose to use only one column to facilitate maintenance between the different devices. I have bee…

V2 Changes

• Removed CSS Animation and merged configuration with Minimalist Setup
• Aligned all the custom buttons with Minimalist
• Brand new clean and fresh layout
• Moved to Raspy 4!
• Improved Sidebar display of information

[jlambert121 (Justin Lambert)]

Just wanted to say thanks for posting this. I’m actively working on a dashboard and collecting ideas from other people to see what works best for us!

[Gilganik (Nik)]

Hey happy to hear! Mine is always evolving so taking ideas from the forum is great

[gojonny (Giovanni)]

how can i take the lovelace code of the energy card? I can see it in the side bar with the energy icon but to fetch the code as you did, where do I find it?

[Gilganik (Nik)]

Hey! here the code to get it (you need to add the additional components for the fossil fuel)

type: vertical-stack
cards:
  - type: 'custom:button-card'
    template: card_title
    name: "Energia"
  - type: energy-distribution
    tap_action:
      action: none
    card_mod:
      !include /config/dashboards/template/style_template.yaml
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - entity: sensor.it_no_grid_fossil_fuel_percentage
            state_not: unavailable
        card:
          type: custom:bar-card
          card_mod:
            !include /config/dashboards/template/style_template.yaml
          name: Fossil
          height: 2em
          width: 70%
          decimal: 0
          max: 100
          unit_of_measurement: '%'
          positions: 
            icon: 'off'
            indicator: 'off'
            name: outside
          severity: 
              - color: green
                from: 0
                to: 49
              - color: orange
                from: 51
                to: 79
              - color: red
                from: 80
          entities:
            - entity: sensor.it_no_grid_fossil_fuel_percentage
      - type: conditional
        conditions:
          - entity: sensor.it_no_co2_intensity
            state_not: unavailable
        card:
          type: custom:bar-card
          card_mod:
            !include /config/dashboards/template/style_template.yaml
          name: Co2
          height: 2em
          width: 70%
          decimal: 0
          max: 1000
          unit_of_measurement: 'g'
          positions: 
            icon: 'off'
            indicator: 'off'
            name: outside
          severity: 
              - color: green
                from: 0
                to: 200
              - color: orange
                from: 201
                to: 599
              - color: red
                from: 600
          entities:
            - entity: sensor.it_no_co2_intensity

[gojonny (Giovanni)]

thanks, anyway solved with tesla card

[antonio1475 (Antonio)]

Hi @Gilganik !
I’m a bit confused. Did you achieve the room cards (big rounded squares, eg. Homy) without Minimalist UI?

I have Minimalist exclusively for the Room Cards, so I’d be very interested in knowing if there’s a way to have them without M UI and/or using them in a normal dashboard instead of a yaml one.

Thank you!

[aljrob]

@antonio1475

I’d be very interested in knowing if there’s a way to have them without M UI and/or using them in a normal dashboard instead of a yaml one.

I love these buttons too - any chance @Gilganik you could give more details on how you achieved them, or point us in the direction of your inspiration? I love the look of your dash but am still too much of a beginner to know where to start really.

[Gilganik (Nik)]

Hi @antonio1475 @aljrob ,
I’ve used “Minimalist UI” but without installing it from HACS. I’ve downloaded all the cards and custom cards and used them in my setup.

BR

[boutXIII (Bouthier Valentin)]

Hello, would you be able to share your project

[kdober]

Looks very nice!
Do you have the YAML files on some git repo we can look at? Would be really nice to use your dashboard as base to create mine!

thanks

[Gilganik (Nik)]

Hey,

My code is not shared in github i’m still working on it

[wifispray]

would be great to see

[SteffenDE (Steffen)]

@Gilganik

Settings mode to access high impact sensors and freeze Automation in the house. All accessed by a code

Hi,
can you shre this? I’m searching such a function too, to expose Automations with one button.

Thanks, Steffen

[s-e-t-h]

Hi,

Are you ready to share now?

Thanks

[fifrak]

I must say I love they how you organize your dashboard.
Could you give me a tint how did you solve this card where you see RPi parameters like CPU, temp, RAM and disk to show it as a percentage, so do how to create this round nice looking graph. I marked it below on screen.

Also another question how to add RPi sensor to HA? I made fresh installation and I can’t find them into entities

[thermosiphonas]

Hi @Gilganik !

Really love the project!
How did you do the pop up widgets?

Thank you

[Gilganik (Nik)]

Hey,

You can find the card and the complete code here:
https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_apexcharts/

I’ve just added another field

For the Pi sensors you can take a look at this page:

System Monitor

BR

[Gilganik (Nik)]

Hey,

Popup is based on the component Browser mod:

GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn...

My dashboard is totally based on tat component

BR

[Markii2430]

@Gilganik Hello sir, your dashboard is amazing!
is there anyway to download your code? im new with home assistant and want to try your dashboard

thank you sir