NdR UI based on SoftUI

NdR · October 10, 2020, 10:11am

Hello Guys,

This is my first thread here.
I decided to share with you my “UI Project”, which reached a “sharable” point I guess.

This is still a work in progress, so every suggestion is accepted and, of course, you can use this code for your own setup.

The UI is based on two themes: Clear and Slate. Please, refer to @N-l1 instructions to find out how to set up the whole stuff.

The custom cards used are the following:

Layout Card Gridder (a temporary fork of Layout Card)
Card Mod
Button Card
Mini Graph Card
Bar Card
Light Popup Card NEW
Security section with Camera Stream Popup NEW

The intent was to create a simple and minimalistic UI, with a scalable design (for smartphone and tablets, but also for PC monitors). I achieved this thanks to Layout Card Gridder, which allows you to set 2 breakpoints and relative cards layout.

My code: NdR UI

############## UPDATED: see the thread for more info! ##############

Here below some screenshots:

Smartphone - Light & Dark Mode

More Screenshots

Tablet Light & Dark Mode

Screenshots

.

Popup

Uwe_Walkowiak · October 16, 2020, 2:18pm

Sieht gut aus gefällt mir.
Teilen sie den Code

Gruss Uwe

NdR · October 16, 2020, 2:48pm

I totally forgot to mention the Github Repo

Here it is: NdR UI

I added it to the main thread too

Uwe_Walkowiak · October 17, 2020, 3:53am

danke und einen schönen tag

NdR · October 20, 2020, 8:02am

Repo Updated!

Changes:

Added:

Security section inside Home View;
Popups for Camera Stream and Presence Detection.
no-header Theme;
no-top-header Theme;

Removed:

Custom Header code;

Changes:

Home View now has only one Breakpoint since I don’t need the third column (gridaeas 50% - 50% and 100%).
Clear and Slate Theme now have two options: you can decide if you want a Compact Header or hide it at all. Please check the yaml files and see the comments.

github.com

NdR91/NdR-HomeAssistant/blob/master/README.md

# NdR UI
## This UI is (mostly) inspired by [SoftUI](https://github.com/N-l1/lovelace-soft-ui)

Hello everibody, after some tests I decided to post my UI setup.
This is still a work in progess, so every suggestion is accepted and, of course, you can use this code for your own setup.

The UI is based on two themes: [Clear](https://github.com/naofireblade/clear-theme) and [Slate](https://github.com/seangreen2/slate_theme). Please, refer to [@N-l1](https://github.com/N-l1) instructions to find out how to set up the whole stuff.

Custom cards and Features:

- [Custom Header](https://github.com/maykar/custom-header) (which is acrchived, I'll figure out how to replace it)
- [Layout Card Gridder](https://github.com/kdw2060/hassio-custom-cards/tree/master/layout-card-griddier) (a temporary fork of Layout Card)
- [Card Mod](https://github.com/thomasloven/lovelace-card-mod)
- [Button Card](https://github.com/custom-cards/button-card)
- [Mini Graph Card](https://github.com/kalkih/mini-graph-card)
- [Bar Card](https://github.com/custom-cards/bar-card)
- [Light Popup Card](https://github.com/DBuit/light-popup-card) **NEW**
- Security section with Camera Stream Popup **NEW**

The intent was to create a simple and minimalistic UI, with a scalable design (for smartphone and tablets, but also for PC monitors).

This file has been truncated. show original

NdR · October 23, 2020, 3:04pm

New Release

No new features in this Release, only some little improvement

Changes:

Fixed the more-info popup for weather. Now it shows an animated weather card (Thanks to bramkragten)

Screenshot

Splitted the popups code into another file for better organization.
Used CSS min for better visualization on mobile, thanks to KTibow

Code Changes

From

- type: 'custom:button-card'
  entity: light.entity # Change this to the entity you want to control
  icon: 'mdi:led-strip-variant'
  name: Light
  size: 30%
  styles:
    img_cell:
    # You can adjust padding of the icon
      - padding-left: 30px
      - justify-content: start
    card:
      - margin: 5px
      - width: 100px
      - height: 100px
      - ...

To

- type: 'custom:button-card'
  entity: light.entity # Change this to the entity you want to control
  icon: 'mdi:led-strip-variant'
  name: Light
  size: 30%
  styles:
    img_cell:
    # You can adjust padding of the icon
      - padding-left: 30px
      - justify-content: start
    card:
      - margin: 5px
      - width: min(25vw, 100px)
      - height: min(25vw, 100px)
      - ...