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
1 Like

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