Repository files navigation

A minimalist and user-friendly design, combined with an mobile first approach for the Home Assistant dashboard.

About three years ago, a friend introduced me to Home Assistant. I was drawn to the idea and its open-source nature, so I purchased a Raspberry Pi 4 and quickly became enamored with the platform.

I’m now happy to share my personal setup with the community and hope it inspires you.

There isno easy installation process, as this is my personal setup uploaded as is.

But here is a step-by-step guide that will show you where to start.

You need to install the following dependencies using HACS (more details below). Note that you may not need all of them depending on what you want, but these are the ones that I use in my setup:

• lovelace-card-mod
  This is a custom component that allows modifying the appearance of any Lovelace card using CSS styles.
  This one is mandatory.

• button-card
  This is a button card that allows creating buttons with icons, text, actions, and styles.
  This one is mandatory.

• vertical-stack-in-card
  This is a custom card that allows stacking multiple cards vertically.
  This one is mandatory.

• decluttering-card
  This is a card that allows you to reuse multiple times the same configuration in your lovelace configuration to avoid repetition.
  This one is mandatory.

• lovelace-paper-buttons-row
  This is a custom row that shows multiple buttons with icons and actions on the same row.
  This one is mandatory.

• slider-button-card
  This is a button card that shows and controls numeric values of entities with a slider and an action button.
  This one is used for my room light sliders.

• light-entity-card
  This is a light card that shows and controls the brightness, color, and color temperature of light entities.
  This one is used on any of my room views.

• rgb-light-card
  This is the buttons that controls the color of RGB light entities with a color wheel.
  This one is used on any of my room views.

• mini-graph-card
  This is a customizable graph card that can display multiple entities on the same graph.
  This one is for the header and my energy card.

• atomic-calendar-revive
  This is a calendar card that shows events from various calendar platforms with advanced customization options.

• frigate-hass-card
  This is a card that displays live video and records from Frigate.

• lovelace-multiple-entity-row
  This is a custom row that shows multiple attributes or entities on the same row.

• lovelace-slider-entity-row
  This is a slider to adjust numeric values of entities.

• lovelace-xiaomi-vacuum-map-card
  This is a map card that shows and controls Xiaomi vacuum cleaners with live map and zones support.

• mini-media-player
  This is a media player card that supports various media sources and controls.

• weather-card
  This is a card that shows the weather and forecast from various weather providers.

1. Download HACS following the instructions onhttps://hacs.xyz/docs/setup/download
2. Proceed to the initial configuration following the instructions onhttps://hacs.xyz/docs/configuration/basic
3. On your sidebar go toHACS >Frontend and click on the+ button at the bottom right corner. Search for each dependency you want to install and click on it. Then click onDownload twice.
4. After installing all the dependencies, go toConfiguration >System to restart Home Assistant.

1. Download the files from this repository by clicking onCode >Download ZIP.
2. Copy thethemes folder in your Home Assistant configuration directory (you can do that with the Samba share add-on or the File editor add-on for exemple).
3. Copy theicons folder from thewww folder to yourwww folder.
4. Add the following lines to yourconfiguration.yaml file:

frontend:themes:!include_dir_merge_named themesextra_module_url:    -/hacsfiles/lovelace-card-mod/card-mod.js

5. Go toConfiguration >System to restart Home Assistant.
6. After restarting, go to your profile and select the Noctis theme from the drop-down menu.

Please note that my version of Noctis from @aFFekopp is heavily modified and you will need to replace the original one if you have it already installed.You can use the servicefrontend.reload_themes to refresh it.

Here is the tricky part, because you will need to edit a lot of my code to fit your configuration and entities.

Also note that I'm using the UI mode and this is the way that I will cover in the next part of this guide.

1. First you need to add the following lines to yourconfiguration.yaml and translate it to the language you want, then save it and restart Home Assistant.

sensor:  -platform:templatesensors:jour_fr:value_template:"{{ ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'][now().weekday()] }}"date_fr:value_template:"{% set months = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'] %} {{ now().day | string + ' ' + months[now().month-1]}}"

2. Go to your dashboard and click on the 3 dots icon in the top right corner of the page then click onEdit Dashboard.
3. Click on the+ button to add a new view.
4. Fill in the first fields (the icon is optional, I don't use it) and select Noctis in the theme drop-down menu.
5. Important: For the view type selectSidebar (for every additional views you will need to turn on theSubview toggle button), click on Save.
6. Click on the 3 dots icon in the top right corner then click onRaw configuration editor.
7. In the folder you downloaded earlier, open thelovelace.yaml file with a text editor.
8. Copy all the lines of code fromdecluttering_templates: to the last line right beforetitle:.
9. Paste this code in the top of yourRaw configuration editor in Home Assistant.
10. Edit the following lines to fit your actual configuration:

Forheader_live_weather_background:

# Your camera for the live weather view.camera_image:camera.camera_sonnette_mjpeg# You can change this to 'live' if you want a true live view.camera_view:auto# You will probably need to play with these values to have a perfect crop of your sky.style:|    ha-card {      ...      width: 1500px;      top: 0px;      right: 0px;      ...

Forheader_temperature_graph:
This one need you to havemini-graph-card.
This is optional and you can remove it if you don't use it.

# The temperature sensor you want to show for the header graph.  -entity:sensor.temperature_interieure

Forheader_main:

# You can edit jour_fr (day in french) and date_fr to fit the sensors that you have added before.name:'{{ states(''sensor.jour_fr'') }}, {{ states(''sensor.date_fr'') }}'# A temperature sensor that you have inside your house, you can change °C if you need to.name:⌂ {{ states('sensor.temperature_interieure') }}°C# A temperature sensor for outside, you can use {{ states('sensor.your_sensor') }}state:'{{ state_attr(''weather.openweathermap'',''temperature'') }}°C'# Your weather integration for the state of the weather icon in the header.{% set state = states('weather.maison_2') %}

Forheader_conditional_camera:
This one need you to have Frigate andfrigate-hass-card.
This is optional and you can remove it if you don't use it.

# Your motion sensor from Frigate.  -entity:binary_sensor.sonnette_motion# Your camera entity and a title for it  -camera_entity:camera.sonnette_pirlive_provider:frigate-jsmpegtitle:Entrée

Forfooter_sticky_menu:

# This is the first icon of the footer, this is where you want to put a toggleable entity for a fast access.# I'm using a Mute input_boolean in some of my automations that mute my music, tv, vacuums, tts notifications or anything that can emit sound.  -entity:input_boolean.mode_silencieuxlayout:iconname:Silence# These are shorcuts to other views that you will need to create after.  -layout:iconicon:mdi:window-shuttername:Voletstap_action:action:navigatenavigation_path:/lovelace/volets

11. Now add the following lines to your new view (take a look at the# commented lines), this should look like this:

...  -theme:noctisicon:''path:default_viewtitle:HOMEvisible:      -user:12345678901234567890type:sidebarbadges:[]cards:# These are the lines that you need to past for the header.      -type:custom:decluttering-cardtemplate:header_live_weather_background      -type:custom:decluttering-cardtemplate:header_temperature_graph      -type:custom:decluttering-cardtemplate:header_main# This is optional and you can remove it if you don't use it.      -type:custom:decluttering-cardtemplate:header_conditional_camera# These are the lines that you need to past at the bottom of this view for the footer.# This card need to always be at the bottom of your view.# The sticky position don't work with Decluttering card. This is why I have to add a part of the CSS style here.      -type:custom:vertical-stack-in-cardcards:          -type:custom:decluttering-cardtemplate:footer_sticky_menustyle:|          :host {            position: sticky !important;            bottom: 26px;            margin-bottom: 10px !important;            animation: 1.2s position ease-in-out;          }          @keyframes position {            0% { bottom: -80px; }            20% { bottom: -80px; }            70% { bottom: 26px; }            90% { bottom: 24px; }            100% { bottom: 26px; }          }          ha-card {            background: none;            border-radius: 26px !important;          }          :host:before {            content: '';            display: block;            position: absolute;            bottom: -26px;            left: -8px;            padding-right: 16px;            height: 130px;            width: 100%;            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);            pointer-events: none;            animation: 1.2s opacity ease-in-out;          }          @keyframes opacity {            0% { opacity: 0; }            20% { opacity: 0; }            100% { opacity: 1; }          }

12. Click onSave then onX.
13. You should now have a working header and footer.

If you have errors please take a look at this link:https://hacs.xyz/docs/faq/status_not_loaded/

Please note that the footer need more content to stay at the bottom of the page.

I can't cover every details of my huge configuration but at this point you should now have the skill to keep going by yourself.

Have fun ❤️

Also please note that this guide may not be perfect at this time, if you see something that is missing or if you notice any error you can take a look at the point below.

If you have specific questions or if you have noticed any error in this guide, feel free to post a commenthere on the Home Assistant community forum and I will try to answer as soon as possible.

Thank you all for your support and motivation!