This is a complete frontend for HomeAssistant
It automatically shows lights, multimedia, calendars and power usage for all areas(rooms), you only have to configure what areas to show in one file, settings.yaml.
I've tried to make this frontend as automated as possible. Due to restrictions in the frontend, a lot of things needs to be configured in the file /includes/lovelace/aleborg_frontend/settings.yaml.
This frontend doesn't have support for all types of devices and entities due to the fact that I don't have all different devices, such as covers. A list of my hardware can be found here.
There's still a lot to do in this frontend and my CSS skills sucks, so all contribution is welcome!
Have you install it? I would love to get some feedback!
- Aleborg Frontend
Read the latest changelog here!
When updating the dashboard, please be aware that the settings.yaml can be overwritten if you're not careful. Compare your current settings.yaml to the new to see what have changed!
If you choose to remove a component, you'll also have to remove the code that uses that component throughout the code. Sadly I had to use a lot of different components to automate this dashboard, hopefully I'll be able to minimize the amount in the future.
- layout-card by @thomasloven
Used throughout the code for the design - auto-entities by @thomasloven
Used throughout the code to automatically find entities in the different areas - card-mod 3 by @thomasloven
Used throughout the code to style the cards using CSS, all CSS values can be changed in aleborg-material.yaml - state-switch by @thomasloven
Used in the media_player_card.yaml to display the correct media player choosen in source of an receiver - Button Card by @RomRider
Used throughout the code for statistics and lights - ApexCharts Card by @RomRider
Used in home.yaml to display the graph for electrical prices. Can be removed - Config Template Card Card by @iantrich
Used in the media_player_card.yaml to display the correct media player choosen in source of an receiver (in combination with the component state-switch) - Digital Clock by @wassy92x
Displays the clock in the sidebar. Can be removed - HA Dashboard by @wassy92x
This component makes it possible to use the sidebar with the menu - Vertical Stack In Card by @ofekashery
Used throughout the code for the design - Mini Media Player by @kalkih
Used for all Media Players. Can be removed if you remove all media player code - Sonos card for Home Assistant's Dashboard UI by @johanfrick
Shows the control for Sonos integration Can be removed and replaced with a regular media player - Mushroom by @piitaya
Used throughout the code for the design - Mushroom Themes by @piitaya
Used throughout the code for the design - Kiosk Mode by @NemesisRE
Displays the dashboard without menu. Can be removed - Home Assistant Swipe Navigation by @zanna-37
Makes it possible to swipe between the pages. Can be removed - Tabbed Card by @kinghat
Makes it possible to have the tabs(icons) that allows us to display lights, media etc in each room/area - my-slider by @AnthonMS
Gives us the slider for the lights
- lovelace_gen by @thomasloven
This is what makes the magic happen, along side with auto-entities and Variable - fontawesome by @thomasloven
Is used for all custom icons that is used. Can be removed if you replace all icons in settings.yaml - Nord Pool integration for Home Assistant by @custom-components
Fetches electric prices in home.yaml. Can be removed
- Make sure all the Frontend plugins and Integrations are installed in HACS.
- Edit HomeAssistants configuration.yaml file.
- Copy all folders and files into your config folder in HomeAssistant
- Configure includes/lovelace/aleborg_frontend/settings.yaml for your own needs.
- Restart HomeAssistant
- Report any bugs...
These are changes that you need to make after you've installed all plugins.
Add to your configuration.yaml these lines:
#########################################################
# Lovelace #
#########################################################
lovelace_gen:
tablet: !include includes/lovelace/aleborg_frontend/settings.yaml
lovelace:
dashboards:
lovelace-aleborg: # Needs to contain a hyphen (-)
mode: yaml
filename: includes/lovelace/aleborg_frontend/tablet.yaml # or the path to where you added the folder
title: Aleborg Frontend
icon: mdi:tools
show_in_sidebar: true
require_admin: falseIncluded is a custom theme, it's placed in the directory config/themes, if it don't exist create it and add the following to your configuration.yaml
#########################################################
# Themes #
#########################################################
frontend:
themes: !include_dir_merge_named themesAdd following resource in Settings -> Dashboards, click on the three dots in the upper right corner and choose Resources, click on + ADD RESOURCE in the lower right corner.
URL: https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap
Resource type: Stylesheet
All configuration options for this frontend is defined here:
