HAAG - Home At A Glance

Of all the dashboards I’ve seen, mine may well be the “least cool” looking. However, it is my most used. Here is the use case - I want to be able to see the entire status of my house “at a glance”. I don’t want to read and evaluate graphs etc. I want quick confirmation that a) everything is being monitored and b) readily see if anything is outside of normal parameters.

Three objectives:

  1. Confirm everything is being monitored (and all sensors are working properly)
  2. Highlight any issues - and give easy access to additional details
  3. Fit a significantly large amount of information on a single screen and also be easy to quickly review on a cell phone.

My dashboard is almost 100% markdown cards - there is a lot of logic behind every line on the view - and yes it took an enormous amount of coding over many months.

The colouring is:
blue - OK and normal
green - OK but an alternate state of normal
orange - things are out of normal range, not critical, but I should take note
red - things that need attention.

Each section has an icon after the title - which takes you to detailed views (that uses more traditional lovelace cards). So if issues are detected this view will indicate that by colour and a different message, plus in some cases offer remedial actions (for example if a door lock is open too long the option to lock it is offered). If any sensor is potentially faulty, this will also be indicated. I also detect strange behaviour patterns - for example power draw patterns from a furnace that are unusual given climactic conditions (for example I detected a plugged furnace exhaust pipe by finding the power draw pattern was unusal - so it was shown in red and an extra line then added explaining the situation.

I have been away from my house for 4 months now and I “glance” at this dashboard a few times a day (more than necessary but who can stand to be away from HA for more than a few hours?? :slight_smile: This extended absence has allowed me to continually refine this and prove it meets my HAAG requirements.

It’s simple to look at the screen and just look for anything in red. Of course, I also use notifications for critical items - but sometimes situations arise that I didn’t anticipate so didn’t have a alert notification set up - but this lets me see any unusual activity or situation.

8 Likes

I like it.

It looks like a project that would be useful to learn how to fashion (for me at least). One can get a lot out of the front end alone, but I’d like some fluency with customizing. Nice.
:upside_down_face:

1 Like

Very cool, very swag, i like it.

1 Like

One thing I learned is that markup cards are finicky - when they have many hundreds of lines of code they are especially difficult to manage and edit. The fact that some process changes / removes the line feeds in them exacerbates the existing complexity of editing them.

1 Like

Can you share any of your code, e.g. one of the markup cards?

I can

Below is my HVAC card

And as I mentioned, it’s not pretty as the system removes my line feeds (designed to make the code readable) and converts it into something very hard to maintain.

I don’t know if it is possible, but it would be great if the markdown card could do something to fix this (not sure if it’s an editor issue or not)

type: markdown
content: >
  ## HVAC status [<ha-icon
  icon=mdi:snowflake-thermometer></ha-icon>](/climate-and-temperatures/thermostatic-climate-controls)

  <font color = 'blue'> Control Setting:
  {{states('input_text.house_climate_state')}} <br><font color = 'black'>
  <br>Upstairs (2nd floor) <br> {% if
  is_state('input_text.climate_master_bedroom_temp_acceptable','Unacceptable')
  %} <font color = 'red' > Temp NOT OK at
  {{states('sensor.master_bedroom_temperature') ~ ('C (set:' )}}
  {{state_attr('climate.upstairs','target_temp_low') ~ (' - ') ~
  state_attr('climate.upstairs','target_temp_high') ~(')')}} {% else %} <font
  color = 'blue'> Temp is OK at {{states('sensor.master_bedroom_temperature') ~
  ('C (heat / cool set at') }}
  {{state_attr('climate.upstairs','target_temp_low') ~ (' - ') ~
  state_attr('climate.upstairs','target_temp_high') ~ (')') }} {% endif %} <br>
  Master bedroom humidity {{state_attr('climate.upstairs','current_humidity')}}
  % <br> {% if is_state('climate.upstairs','unavailable') %} <font color = 'red'
  > Thermostat is NOT OK {{states('climate.upstairs') }} {% else %} <font color
  = 'blue'> Thermostat is OK in {{states('climate.upstairs') }} mode {% endif %}
  <br> {% if is_state('sensor.furnace_upstairs_instantaneous_demand.','off') %}
  <font color = 'red' > 2nd floor furnace is NOT OK
  {{states('sensor.furnace_upstairs_instantaneous_demand') }} {% else %} <font
  color = 'blue'> Furnace is drawing  {{states('sensor.furnace_upstairs_9_1min')
  }} W {% endif %} <font color = 'black'> <br><br> Main floor & Basement <br> 
  {% if
  is_state('input_text.climate_living_room_temp_acceptable','Unacceptable') %}
  <font color = 'red' > Temp (main flr) NOT OK at
  {{states('sensor.living_room_temperature') ~ ('C (set:' )}}
  {{state_attr('climate.main_floor','temperature')  ~(')')}} {% else %} <font
  color = 'blue'> Temp (main flr) is OK at
  {{states('sensor.living_room_temperature') ~ ('C (heat set at') }}
  {{state_attr('climate.main_floor','temperature') ~"C)"}} {% endif %} <br> {%
  if
  is_state('input_boolean.climate_basement_freezer_room_temp_acceptable','off') 
  %} <font color = 'red' > Temp (bsmnt freezer rm) NOT OK at
  {{states('sensor.temp_humidity_sensor_freezer_rm_temperature') ~ ('C' )}} {%
  else %} <font color = 'blue'> Temp (Bsmnt Freezer room) is OK at
  {{states('sensor.temp_humidity_sensor_freezer_rm_temperature') ~ ('C') }}  {%
  endif %} <br> Living Room humidity
  {{state_attr('climate.main_floor','current_humidity')}} % <br> Freezer Room
  humidity {{states('sensor.temp_humidity_sensor_freezer_rm_humidity')}} % <br>
  {% if is_state('climate.main_floor','unavailable') %} <font color = 'red' >
  Thermostat main floor is NOT OK {{states('climate.main_floor') }} {% else %}
  <font color = 'blue'> Thermostat is OK in {{states('climate.main_floor') }}
  mode {% endif %} <br> {% if
  is_state('sensor.furnace_main_instantaneous_demand','off') %} <font color =
  'red' > 2nd floor furnace is NOT OK
  {{states('sensor.furnace_main_instantaneous_demand') }} {% else %} <font color
  = 'blue'> Furnace is drawing  {{states('sensor.furnace_main_basement_10_1min')
  }} W {% endif %} <br> <br> <font color = 'blue'> {% if
  is_state('switch.plug_furnace_air_cleaner_state','on') %} Air Cleaner is
  {{states('switch.plug_furnace_air_cleaner_state') }} drawing
  {{states('sensor.plug_furnace_air_cleaner_state_power')}} W {%- else %} Air
  cleaner is {{states('switch.plug_furnace_air_cleaner_state') }} {% endif %}
  <br> {% if states('sensor.power_monitor_air_conditioner_8_1min')|float(0)   >
  5 %} Air Conditioner is on at
  {{states('sensor.power_monitor_air_conditioner_8_1min')}} W {% else  %} Air
  Conditioner is off ({{states('sensor.power_monitor_air_conditioner_8_1min')}}
  W) {% endif %}

@kenwiens
Your dashboard is also nice - I created something similar a few days ago - that I also use with MD cards:
[Next generation dashboard system? - Share your Projects! - Home Assistant

For alerts I use the ha-alert - cards - have you ever thought of using them? Best regards, schBenedikt!

https://design.home-assistant.io/#components/ha-alert