Lovelace UI & Dashboard: my Project

:wave: 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

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

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

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

  • :hotsprings: Heating: Tado Thermostat

  • :lock: Nuki Door Lock for the main door

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

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

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

  • :safety_vest: 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 :slight_smile:

  • 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 :smiley:

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!

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

Tben Topic
For the cleanest design and buttons!

V2 Changes

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

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!

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

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?

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

thanks, anyway solved with tesla card

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!

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.

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

Hello, would you be able to share your project

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

Hey,

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

1 Like

would be great to see

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

Thanks, Steffen

Hi,

Are you ready to share now?

Thanks

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 :frowning:

Zrzut ekranu 2023-01-13 211104

Hi @Gilganik !

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

Thank you

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 :slight_smile:

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

BR

Hey,

Popup is based on the component Browser mod:

My dashboard is totally based on tat component :slight_smile:

BR

1 Like

@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

1 Like