Git Product home page Git Product logo

hass-config-public's Introduction

Madelena's Home Assistant Configs

The Maximalist Dashboard + The Ambient Smart Display

This is a redacted version of my personal dashboard configuration for Home Assistant, an open source home automation server that integrates nearly 2000 existing IoT services into one powerful, private, and unified user interface.

ko-fi

My design is based on these principles:

  • Expressive: The design should display the information clearly and boldly.
  • Contextual: The design should adapt to the environment where it is used.
  • Information First: The design should focus on the information, not the ornaments.

There are mainly two types of dashboards in this configuration:

  • Maximalist Dashboards: Intentionally dense with information. Used for control centers.
  • Ambient Dashboards: Succinct and sparse with information. Used for smart displays.

It uses my own Metrology theme, based on Metro design system, to reduce visual clutter, create a sense of visual hierarchy, and focus on the data.

Table of Contents

The Maximalist Dashboard

Contrary to conventional UX design, the dashboard is intentionally dense with information and not minimalist, because it is designed for only one power user: me.

My goal is to create a sense of awareness of my surroundings and my resources through information, while my second priority is to be able to control and fine-tune all aspects of my living space. This is not designed for convenience since I already have physical buttons and switches for such purpose.

HA Config - Summary

The dashboard is designed to maximize the amount of information displayed without additional user interactions, acting as an ambient display in the background. Information is not hidden or tucked away from view but is instead shown in its full glory for those who love to look at real-time data visualizations.

Animation is toned down so that it still feels responsive but not distracting. Colors are used to draw attention to things that I need to attend to, and the monochromatic color scheme keeps the visual priority clear. The wireframe aesthetic for illustrations and flat icons keeps visual noise to the minimum.

The Ambient Dashboard

It started as a thought experiment: How little information can I show on a screen and the design will still be useful? The other extreme of maximalism bequeaths an ultraminimalist layout that only shows just one sensor at a time.

This layout is perfect as a replacement for the ad-filled slideshows of smart home displays such as Amazon Echo Show devices and Google Home devices. With Home Assistant as its backbone, the main slideshow is infinitely customizable and the controls are tailored for my home, unlike their corporate counterparts.

Designed to achieve the “pre-attentiveness” of the human brain, ambient displays make it possible for the user to process information without diverting the attention toward background tasks.

There are two main components to the dashboard: the "Slides" and the "Apps". The Slides acts as the home screen that constantly and leisurely rotates each sensor information on a relaxing video backdrop. The Apps each act as a hub for controlling or monitoring a particular aspect of my home with touch-friendly and clean UI elements.

Features

Data Visualizations - Make it Expressive

Data is beautiful! Data in HA is used to render some unique, eye-catching, and informative graphs as the visual focus of each page.

HA Dataviz - Axonometric Floor Plan
Axonometric Floor Plan
HA Dataviz - Network Map
Network Rail Map
HA Dataviz - Energy Sankey
Energy Use Sankey Diagram
HA Dataviz - Psychrometry Chart
Psychrometry Chart
HA Dataviz - Weather History
Weather History + Forecast Chart
Music Chart
Last.fm Music Charts

All visualizations adhere to theme colors and light/dark modes.

Additional visualizations are embedded from third-party sources.


The Weekendest Subway Map

Bing Traffic Static Map

Weather Underground Radar Map

jsOrrery Solar System Map

Astropheric Weather Chart

Responsive Design - Make it Versatile

Grid columns reflow depending on screen width and device type. Since I use the dashboard in multiple form factors, the design needs to fit everything.

The dashboard in many different sizes on many different screens.

Live Tiles - Make it Tidy

Perfect square grid with tiles in all sizes Rotating cube animation to subtly catch the right amount of attention
Variations based on states Layouts for cameras, pictures, media players, etc.

Contextual Showxatings - Make it Handy

Show the right amount of information in the right context.

An e-Paper display using ESPHome shows just what is needed before heading outside. A stretched bar LCD display running a custom server works as an ambient clock.
An always-on display with the Maximalist Dashboard works as a command center of the home. An Amazon Echo Show showing a simplified dashboard makes it easy to mark chores as done.

Screenshots

View all the dashboards in detail here.

Summary view
Network view
Energy view
Light view
Maintenance view
Environment view
Neighborhood view
Me view
Astrometrics view (TBD)

How to install

The code is not meant to be installed as sensitive information had been redacted from the configuration. It is meant to be used as a reference to do some pretty wonderful things using lots of clever or ugly codes, tips, tricks, and hacks. Copy and paste stuff to your own dashboard config as you see fit.

A few requisities will help you use these codes:

Major HACS frontend mods

Template libraries

Include these lines in your dashboard YAML to use most of the templates defined in the config:

decluttering_templates: !include cards/decluttering_templates.yaml
button_card_templates: !include cards/button_card_templates.yaml
apexcharts_card_templates: !include cards/apexcharts_card_templates.yaml

Tools Used

Credits

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Additionally, I would appreciate proper credits back to me if redistributed or modified. That would help my livelihood since design is my career.

hass-config-public's People

Contributors

madelena avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hass-config-public's Issues

OpenSky extended sensors

Ok!
So I had time to play a little bit with your magnificent dashboard!
I'm really liking it so far but I was wondering how you created the sensors for opensky integration...
It's this part in your neighborhood.yaml file;

`- type: conditional
    conditions:
      - entity: sensor.opensky_flight_in_vicinity
        state_not: 'off'
    card:
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - entity: sensor.opensky_flight_friendly_name
              type: 'custom:multiple-entity-
![Capture](https://user-images.githubusercontent.com/4710453/171213264-d716895d-ad3e-413f-a19c-7bf714545cac.PNG)
row'
              name: ' '
              show_state: false
              secondary_info:
                entity: sensor.opensky_flight_friendly_name
        - type: horizontal-stack
          cards:
            - type: vertical-stack
              cards:
                - type: entity
                  entity: sensor.opensky_origin_airport_code
                  name: Origin
                - show_name: false
                  show_icon: false
                  show_state: true
                  type: glance
                  entities:
                    - entity: sensor.opensky_origin_city
                      card_mod:
                        style: |
                          div {text-align: left;}
                  style: |
                    .entity {padding: 0 !important; margin: -16px 0}
            - type: vertical-stack
              cards:
                - type: entity
                  entity: sensor.opensky_destination_airport_code
                  name: Destination
                - show_name: false
                  show_icon: false
                  show_state: true
                  type: glance
                  entities:
                    - entity: sensor.opensky_destination_city
                      card_mod:
                        style: |
                          div {text-align: left;}
                  style: |
                    .entity {padding: 0 !important; margin: -16px 0}
        - type: entities
          entities:
            - entity: sensor.opensky_flight_in_vicinity
              type: 'custom:multiple-entity-row'
              name: ' '
              secondary_info:
                attribute: movement
              show_state: false
              entities:
                - attribute: altitude
                  name: Altitude
      in_card: true`

Chore Tracker notifications

Hello,
First of all thanks for your amazing work!
Is there a way we could easily send a notification when a task is return 'To do soon'?

Question on Layout

I really liked the layout of your HA. I have never done the UI version of HA just used the default dashboard. Could your design work with the default lovelace that is in the standard HA verses the UI version? Or is the UI version better to use for the ultimate design factory? I would like to create a similar design with your template but I was not sure about using the UI mode of lovelace. Now I noticed you folder structure is difference than the regular HA with the www folder outside the config folder, as well as the UI folder. Is this something you direct in your configuration.yaml? Also any way you can post a redacted version of your configuration.yaml if it has info you don't want to get out? Just curious to see how you have all of it structured. Thank you ahead for any help.

configuration.yaml

Hi Amazing!

Can you please share your configuration.yaml i am absolutely a beginner

where i must enter

decluttering_templates: !include cards/decluttering_templates.yaml
button_card_templates: !include cards/button_card_templates.yaml
apexcharts_card_templates: !include cards/apexcharts_card_templates.yaml

and where i must include:

lovelace-dashboards.yaml
lovelace-resources.yaml

sorry for that newbie question but yaml not easy

please share your configuration.yaml

Chore tracker Done/To Do/Overdue error fix

I've been having a hard time getting "There are X chores done, X to do soon, and X overdue." to show. In the template file, I noticed that Chores Done was the only one of the three with " unit_of_measurement: "Tasks"", so I removed it, and it works now.

I know it's an old guide, but you may also want to add a way to have categories of chores in the guide. When I first installed it, I was confused on how your guide only had a way to set a whole chore group, but your screenshots had them categorized. So I named all of my chores e.g. 'chore_kitchen_' and set up individual automations for each category to set groups for object_id that start with 'chore_kitchen_' etc, then later learned that I could combine those into a single automation with multiple service calls. In your new code merge, I saw that you had a yaml file setting chore groups, which I've now incorporated and changed the automation back to just set a group for all chores, though I don't know which method makes more sense in this setting.

As a side note, I added a confirmation to completing chores with the tap action, because I was often accidentally marking chores as done while scrolling through the column on mobile.

confirmation: text: Are you sure you want to mark this as done?

Just for some context, I have no idea what I'm doing with code - I'm just fumbling through all this using patchwork code from various people and playing with it a bit, so I hope this is actually helpful. This chore tracker is probably the most useful thing I've had on Home Assistant, and my wife loves it. Thank you for putting it together!

Edit: Could you point me in the direction of changing how it calculates "to do soon"? I think I've found the bit that does it, but have no idea what to do with it. Asking because we have some things that we're tracking for a month+ and something for a full year, so it's coming up as a to-do task for weeks/months.

The chores summary does not work

Dear Madelena

I used your dashboard configuration as a base and think it's really awesome. Clear and everything in the place where you need it.
The relatively simple way of integrating tasks is exactly what I was looking for, but I have a problem with it.

I can't get the code from config/templates/chores.yaml to work.

Unbenannt

Furthermore, I cannot assign the tasks to the rooms. It's certainly simple, but I have no idea how to break it down right now.

Questions about weather integrations.

Hi and thanks so much for sharing all of your dashboards Madelena! I do have a few questions about how you have you have some of your weather sensors setup, in particular I would like to know what integrations you're using for these...

weather.valhalla_hourly
weather.valhalla <-- assuming this is accuweather integrations
weather.valhalla_2

another questions, are you using their paid API? I've already dropped the multiscrape accuweather sensors down to 7200 seconds but still seem to be over using the API calls if I so much as restart HA more than a couple times a day. Just curious.

I should probably add how much I am digging your new weather dash! I love the forecasts, i just have to sort out how everything lines up. Also would be helpful to know if there are any other things that may need to be added to get all the other functionality of your dashboards going, that might not be able to be reverse engineered from what you've shared. Thanks again!

Missing snippet

Hey, thanks very much for this awesome HA config! I have been playing around with it to get inspiration for my own installation, but I noticed that the snippet layout-page-title-with-2-badges.yaml, which is used on the `lights' view is missing. Any chance you could add it? There may be others, but that's the first one I've noticed. Thanks!

auto-entities, scenes requires unique ID

Hello from munich!

i've no idea how to get hue scenes up and running as you did.
your setup/config works ... for someone with more know how then me.

Thanks anyway
Cheerio

Floorplan

I need like a short tutorial on how to create a floor plan svg like yours. What is the process? All I figured out was that it was designed in Sketchup, but what do you do after that, how do you make it usable?

I'd like to see the example of ../shared/secret/summary-cameras.yaml

Hi @Madelena , I'm really appriciated you to opening this repo as public.

This inspired me to update my HA lovelace.

During, investigating your lovelace and adjusting my HA lovelace, I wonder ../shared/secret/summary-cameras.yaml contents.

https://github.com/Madelena/hass-config-public/blob/main/ui/views/summary.yaml#L695C33-L695C70

If you don't mind, could you give the example of ../shared/secret/summary-cameras.yaml by removing your private data?

Very Thanks!

Hue Scenes in the Lights Section not showing

Hi Madelena,

First of all just want to praise your unbelivably great work! I'm also kind of perfectionist and no dashboard could scratch the itch until I saw yours and decided I absolutly have to have it, thank you for all your efforts and sharing!

Quite new with the Home Assistant and YAML but learning fast. Managed to adjust all other things in the lights section but I am having a problem with the Hue Scenes not showing when clicking on the Scenes button...

image

This is how my scenes.yaml looks like...

- type: custom:popup-card
  entity: popup.living_room_scenes
  title: Living Room Scenes
  card:
    type: "custom:auto-entities"
    filter:
      template: |
        {% for state in states.scene -%}
          {%- if state.entity_id | regex_match('scene.living_room_',ignorecase=False) -%}
            {%- set NAME = state_attr(state.entity_id,"friendly_name") | regex_replace(find='Living Room ', replace='') -%}
            {{
              { 'entity': state.entity_id,
                'type': 'custom:button-card',
                'template': 'hue_scene_card',
                'variables': {
                  'name': NAME
                },
              }
            }},
          {%- endif -%} 
        {%- endfor %}
    sort:
      method: friendly_name
    card:
      type: "custom:layout-card"
      layout_type: "custom:grid-layout"
      layout_options: !include ../views/snippets/layout-live-tile.yaml
    view_layout:
      grid-column: 1/-1

And this is how my lights.yaml looks like...

      # [Column] Living Room

      - type: "custom:layout-card"
        layout_type: "custom:grid-layout"
        layout:
          margin: -1
        cards:
          - type: "custom:button-card"
            template: header_card
            variables:
              name: LIVING ROOM / DINNING
              label: Scenes
              action: more-info
              link: popup.living_room_scenes

          - type: "custom:layout-card"
            layout_type: "custom:grid-layout"
            layout: !include snippets/layout-live-tile.yaml
            cards: !include columns/lights-living-room.yaml

And this are my scenes (made in Hue App) which are automaticaly imported in HA.

image

Two days already I am strugling to make it work but I dont have any idea what is wrong. Do I have to maybe create popup.living_room_scenes entity with helper or is it specified in the configuration.yaml or is something completly different? I was trying to find answers online but no luck...

Thank you for your precious time any help is much appreciated :)

Chore Tracker configuration error

Hi!
I tried setting up the chore tracker but I ran into an issue. I'm at this point in your guide:

Double check that the chores are loaded in the States tab of Developer Tools by searching for the entity group.chores. There should be a list of your chores in the attributes of the entity.
However, I do not see any entities of type ``input_buttonorinput_text`. Here is my `configuration.yaml`:

# Loads default set of integrations. Do not remove.
default_config:

# Text to speech
tts:
  - platform: google_translate

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/lovelace-auto-entities/auto-entities.js
      type: module
    - url: /hacsfiles/button-card/button-card.js
      type: module

http:
  use_x_forwarded_for: true
  trusted_proxies:
    - 127.0.0.1
    - 172.16.0.0/12

# FOR SOME REASON REQUIRED OTHERWISE GROUPS IS NOT DEFINED
# DUMMY GROUP
binary_sensor:
  - platform: group
    entities:
      - binary_sensor.bunphone_focus

input_button: # FOR SOME REASON REQUIRED OTHERWISE INPUT BUTTON IS NOT DEFINED
input_button chores: !include chores.yaml

input_text: # FOR SOME REASON REQUIRED OTHERWISE INPUT TEXT IS NOT DEFINED
input_text chores: !include chores.yaml

As you can see there is not much that could interfere. I did find that, if I don't include the input_button: line, I get errors while parsing the configuration. This is a fresh install of HaOS (2022.6.7).
Likewise, I needed to create a "dummy" group, or the automation would complain that the service "group.get" was not defined.

I'm really new to HomeAssistant so I don't really know how it works. Can you help me?

Eagerly awating Astronomics

I saw your Astronomics dashboard when looking for a new HA theme and stubble across the Metrology Theme. While the Theme is Cool, what really caught my attention is your Astronomics dashboard. I came to this github repo hopeing to learn more. Alas, it is still in development. I will check back frequently as I would really like to incorporate this is my HA instance as it is super cool.

psychrometric humidity translations

Hello there.

First of all great work. I was trying to use your psychrometric illustration to plot my stuff.

This is the code you use when performing the style transformation for each idnicator

style: | > var x = (parseFloat(entity.state) + 20) / 65 * 1007 - 11; var y = 665 - (parseFloat(states['sensor.lumi_lumi_weather_humidity_ufficio'].state) / 35 * 665) - 155; returntransform: translate(${x}px, ${y}px);;

The x translation seems to work just fine but y provides me negative values. I suspect you have some kind of absolute humidity computation that gives the value to make the formula works.

Can you share the computation formula or point me to the right direction?

Template: bar_row

Hi, where i find template: bar_row?, thx

      - type: entities
        style: *style-maintenance-entities
        entities:
          - entity: sensor.astralplane_hue_sensor_battery
            type: custom:button-card
            template: bar_row
            name: Astralplane
            label: 2×AA
            show_label: true

Theme

Where can i have the pink theme ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.