Aleborg Frontend

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!

Table of Content

Aleborg Frontend

CHANGELOG

Read the latest changelog here!

Updates

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!

Requirements

Frontend (HACS)

_{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}

Integrations (HACS)

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}

Installation

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...

configuration.yaml

These are changes that you need to make after you've installed all plugins.

Lovelace configuration

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: false

Theme configuration

Included 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 themes

Resources

Add 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

Aleborg / homeassistant-aleborg-frontend

readme

Aleborg Frontend

Table of Content

CHANGELOG

Updates

Requirements

Frontend (HACS)

Integrations (HACS)

Installation

configuration.yaml

Lovelace configuration

Theme configuration

Resources

Settings

/includes/lovelace/aleborg_frontend/settings.yaml

Folders and descriptions of files

/includes/lovelace/aleborg_frontend/common

/includes/lovelace/aleborg_frontend/templates

/includes/lovelace/aleborg_frontend/views

Screenshots

Home

All lights

Lights in a room

Multimedia in a room

Calendar in a room

Power usage in a room