Lovelace UI & Dashboard: my Project

[Gilganik]

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. Use cases are a Galaxy Tab A 10.1 (wall mounted) tablet with Fully Kiosk Browser and homeassistant-desktop on macOS. My configuration is exposed to HomeKit with Apple TV acting as a hub for remote connection. I also support Nabu Casa. [screenshot] Update 2022.3 New Footer Removed the sidebar footer to make space for additional sidebar content. The new foo…

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]

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]

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