Dashboard Layout Card V2 for Home Assistant
I created a V2 fork of the well-known lovelace-layout-card:
The card can be installed next to the original layout-card and does not overwrite it. All new elements use their own *-v2 names.
What Is It?
Dashboard Layout Card V2 is not just a single Lovelace card. It is more of a dashboard/view layout extension for Home Assistant. The goal is to build flexible dashboards with a side tab menu, linked subviews and extended layout options.
Features
- dedicated V2 layout types:
custom:sections-layout-v2custom:masonry-layout-v2custom:horizontal-layout-v2custom:vertical-layout-v2custom:grid-layout-v2
- optional side tab menu on the left or right
- optional hidden menu
- home entry in the menu
- linked subviews with shared menu settings
- support for Home Assistant Sections views
- digital or analog clock
- date and weekday display
- configurable clock and date text size
- colors for active and inactive tabs
- text colors for active and inactive tabs
- hover colors
- icon color and icon background
- icon shape: circle, rounded square or transparent
- tab border
- view/card border
- 3D effect for tabs and the view area
- spacer and divider entries in the menu
- divider color and optional divider 3D effect
- menu background as color or image
- optional hiding of the Home Assistant header/sidebar for selected users
Screenshots And Mini Video
There is a screenshot and a short mini video on my open-source documentation page:
Note: this documentation page is currently available in German only.
Background Images
Portrait images work best for menu backgrounds. A good practical aspect ratio is about:
1:2.5
Other formats also work, but because the menu uses cover, they may be cropped depending on the visible menu height.
Images must be stored in Home Assistant’s www folder, for example:
/config/www/image/back2.jpg
Use this path in the editor:
/local/image/back2.jpg
Please use only your own images or images with a compatible free/open-source license.
HACS Installation
Add this repository as a custom frontend repository in HACS:
https://github.com/rockbaer2007/lovelace-layout-card-v2
Home Assistant should then load this resource:
/hacsfiles/lovelace-layout-card-v2/dashboard-layout-card-v2.js
If Home Assistant still shows an older version:
- refresh HACS repositories
- clear the browser cache
- hard reload the dashboard
Example
views:
- type: custom:sections-layout-v2
path: home
title: Home
icon: mdi:home
layout:
dashboard_layout_v2:
menu:
position: left
title: House
show_home: true
home:
title: Home
path: home
icon: mdi:home
clock: analog
analog_hour_marks: false
analog_seconds: false
date: true
weekday: long
style:
icon_color: "#fbff00"
icon_background_color: "#ffffff"
icon_shape: circle
active_tab_color: "#333aff"
inactive_tab_color: "#bfbfbf"
hover_tab_color: "#33ffe7"
active_tab_text_color: "#ffffff"
inactive_tab_text_color: "#000000"
hover_tab_text_color: "#000000"
tab_border_color: "transparent"
tab_shadow_frame_color: "transparent"
card_border_color: "transparent"
shadow_frame_color: "transparent"
shadow_frame_offset: 4px
clock_size: 96px
date_size: 12px
weekday_wrap_size: 21px
background_mode: image
background_image: /local/image/back2.jpg
pages:
- title: Basement
path: basement
icon: mdi:view-dashboard
type: custom:sections-layout-v2
layout_type: custom:sections-layout-v2
max_columns: 6
- type: divider
color: "#ffffff"
shadow_frame_color: "transparent"
- title: Ground Floor
path: ground-floor
icon: mdi:view-dashboard
type: custom:sections-layout-v2
layout_type: custom:sections-layout-v2
max_columns: 4
sections:
- type: grid
cards: []
Status
The project is currently experimental, but already usable. Feedback, tests and ideas are welcome.
GitHub: