Hass Config Versions Save

✨ A different take on designing a Lovelace UI (Dashboard)

2023.9

7 months ago

Workarounds for known issues:

2023.7

10 months ago

Workarounds for known issues:

2023.4

1 year ago

2023.1

1 year ago

Card borders

https://github.com/matt8707/hass-config/commit/2699776ef688c9d3358b23a25bf1da28e088dab2 - Card borders were introduced in Home Assistant 2022.11. This dashboard hides all card borders but if you add additional cards you'll have to hide the borders yourself. Closes https://github.com/matt8707/hass-config/issues/118

Examples

- type: custom:button-card
  styles:
    card:
      - border-width: 0

- type: entities
  entities:
    - sun.sun
  card_mod:
    style: >
      :host {
        --ha-card-border-width: 0;
      }

Icons fix

https://github.com/matt8707/hass-config/commit/30fc6cb7a89df47ea3f26f36dbf98cbbdb0a79a9 - Long-standing issue with wiggling icons on small screens has been resolved. When tapping, the animated icons moved back and forth a couple of pixels. Closes https://github.com/matt8707/hass-config/issues/137

https://github.com/matt8707/hass-config/commit/63aacb8f50ae907862e5456c02f8e2d874a39f9d - Brings back the previous look with vertically centered popups when using browser_mod 2.2.0

Media title

https://github.com/matt8707/hass-config/commit/d8f8f97c81b856cc4373bbafea33657ac810ad95 - Found a way to escape a card and access parent cards. This example tracks swipe-card and sets the grid title from conditional_media

gridtitle

Youtube thumbnail

https://github.com/matt8707/hass-config/commit/ad624e0da9520a2b304f82a57b92c2b6f289a4ad - "youtube-watching" is now faster and works without a container. matt8707/youtube-watching for more info

Climate popup

climate

2022.9

1 year ago

No new features but pushing this because of the new browser_mod 2 update

browser_mod 2 notes

  • Faster, and many new cool features, thanks @thomasloven
  • Kiosk Mode is not needed anymore
  • 2.1.1 - style in data is reserved for --css variables and card_mod will not work. However, what does work really well now is to use card_mod (and where needed mod-card) inside content.
  • 2.1.1 - card-mod-more-info-yaml in themes.yaml is dead, use theme variables. That said, I couldn't get --popup-header-background-color to work at all.
  • 2.1.0 - browser_mod.toast is completely gone

Screenshot

nas

Migration

https://github.com/thomasloven/hass-browser_mod

2022.8

1 year ago

Circle Slider

A quick way to adjust brightness. Bypasses default tap_action. Only implemented for lights.

Source code with comments

Light Popups

🍄 Mushroom. Popups are still auto-generated. If you're using light groups all lights within the group will also populate. This change removes DBuit/light-popup-card and ljmerza/light-entity-card.

File Structure

Themes & Sidebar

themes.yaml and sidebar.yaml are now located in the root folder and manually included in configuration.yaml

Button Card Templates

All templates in a single file → Folder with each template in separate files

button_card_templates.yaml      button_card_templates/
...                             ├── base.yaml
                                ├── circle.yaml
                                ├── climate.yaml
                                ├── ...

Packages

Folder "include" merged by domain → Folder "packages" merged by device or area

include/                        packages/
├── automation.yaml             ├── balcony_lights.yaml
├── binary_sensor.yaml          ├── climate_electrolux.yaml
├── camera.yaml                 ├── computer_imac.yaml
├── ...                         ├── ...

Popups in subfolder called "footer" → Popups are prefixed with "footer_"

popup/                          popup/
├── footer/                     ├── footer_history.yaml
│   ├── history.yaml            ├── footer_nas.yaml
│   ├── nas.yaml                ├── footer_router.yaml
│   ├── router.yaml             ├── ...
│   ├── ...

Appearance

Modernize dashboard with (slightly) more distinct colors and text. A lot of css variables in button-cards-templates are moved to themes.yaml.

All hold_action's are replaced with double_tap_action

Note: On touch devices, pressing two buttons in quick succession will fail to toggle! The last pressed button will register as a double tap and open the popup for that card. This bug is also present in stardard type button.

Noteworthy Changes

2022.3

2 years ago

Removed the sidebar footer to make space for additional sidebar content. The new footer is placed at the bottom of the main layout and collapses on mobile.

footer

Notifications

Using the notify variable you can add notifications to the footer. More examples here ui-lovelace.yaml#L476-L605

Default (false) Exclamation (true) Number (int)
return 1 !== 1; return 1 === 1; return 1 + 1;
false true int

Media Marquee

Scrolls the text if the title is longer than the width of the card

int

Button Tilt

Adds a 3D effect to any button-card using https://micku7zu.github.io/vanilla-tilt.js/

tilt

Fixes for HA 2022.3

Noteworthy changes

All releases - matt8707/hass-config/releases All changes - matt8707/hass-config/commits/master

If you want, you can buy me a beer :blush:

2021.12

2 years ago

This is now the top thread of all time 😮

Buttons custom:button-card

Theme custom:card-mod

Sidebar

Database

💡 SQL command to list worst offenders. I managed to decrease my db size by ≈ 80%

docker exec -it mariadb \
  mysql homeassistant -u"root" -p"password" \
  -e"SELECT entity_id, COUNT(*) AS count FROM states GROUP BY entity_id ORDER BY COUNT(*) DESC LIMIT 10;" \
  -e"SELECT JSON_VALUE(event_data, '$.entity_id') AS entity_id, COUNT(*) AS count FROM events WHERE JSON_VALUE(event_data, '$.entity_id') IS NOT NULL GROUP BY JSON_VALUE(event_data, '$.entity_id') ORDER BY COUNT(*) DESC LIMIT 10;"

Other

If you want, you can buy me a beer :blush:

2021.8

2 years ago

If you want, you can buy me a beer :blush:

Retroactive release

2021.6

2 years ago

While picture elements is still a valid card for layouts that doesn't follow a specific grid, this dashboard does. Instead of placing button cards using coordinates, it's now placed onto a grid that is responsive.

Layout custom:layout-card

  • CSS grid everything and as a bonus...
  • Mobile and portrait dashboards

https://user-images.githubusercontent.com/36163594/120789256-ad825000-c531-11eb-97c2-18904c48efdd.mp4

Buttons custom:button-card

  • Loader template doesn't need any input_boolean helpers anymore
  • Icons will only animate on state change to prevent all icons animating on dashboard refresh
  • Some entity checks for undefined entities, no errors on restarts
  • Added a bounce effect to the button when pressed

Theme custom:card-mod

  • Reworked themes with focus on performance
  • Wrote a tool to help with styling card-mod-helper

Deprecated If you're looking for picture elements, browse this repository before March 2021 https://github.com/matt8707/hass-config/tree/c9dd19e04bd4fde2322e610a42f4e246b58ee19a

Includes Since this configuration is split into several yaml files, I'm using lovelace-gulp-watch, which auto updates lovelace if an included file is changed.

Known issues

  • card-mod randomly not applying markdown styling on 2021.6.0 #130
  • swipe-card not updating size unless resizing window #32 #147

Support If you want, you can buy me a beer :blush:

Retroactive release