Compass Card - Points you in the right direction 🧭

tom_l · August 12, 2020, 7:41am

I actually did a bit of theme tweaking and am more than happy enough to add it now:

Day:

Night:

Card:

class: top-level-graph
direction_offset: 0
entity: sensor.bom_hobart_wind_direction
name: Wind Direction
secondary_entity: sensor.bom_hobart_wind_speed_kt
type: 'custom:compass-card'

Themes:

#################################################################
## Day
#################################################################

day:
  ### Main Interface Colors ###
  primary-color: "#93abca"
  light-primary-color: "#5F81B0"
  primary-background-color: "#F0F5FF"
  secondary-background-color: var(--primary-background-color)
  secondary-background-color-alpha: "rgba(220, 225, 235, 0.6)"
  divider-color: "#D6DFEB"
  lovelace-background: 'center / cover no-repeat url("/local/background/day.jpg") fixed'

  ### Text ###
  primary-text-color: "#395274"
  secondary-text-color: '#5294E2'
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#88A1C4"

  ### Sidebar Menu ###
  sidebar-icon-color: "#395274"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FF6262"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  sidebar-background-color: var(--primary-background-color)

  ### States and Badges ###
  state-icon-color: "#395274"
  state-icon-active-color: "#ebb307"
  state-icon-unavailable-color: var(--disabled-text-color)

  ### Sliders ###
  paper-slider-knob-color: "#FF6262"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)

  ### Labels ###
  label-badge-background-color: "#FFFFFF"
  label-badge-text-color: "#395274"
  label-badge-red: "#FF8888"

  ### Cards ###
  # ha-card-background: 'url("/local/background/card_bg_Day.png")'
  card-background-color: "rgba(255, 255, 255, 1)"
  paper-listbox-background-color: '#F0F1F3'
  mdc-theme-surface: var(--primary-background-color)
  ha-card-border-radius: 10px
  border-color: 'var(--primary-text-color)'

  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF6262"
  paper-toggle-button-checked-bar-color: "#FF6262"
  paper-toggle-button-unchecked-button-color: "#395274"
  paper-toggle-button-unchecked-bar-color: "#9CB2CE"
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

  restriction-regular-lock-color: '#e45e65'
  restriction-lock-row-margin-left: 78%
  restriction-lock-margin-left: 40%
  restriction-lock-opacity: "0.9"

  sc-background-filter: none                      # sun card bg

  mini-media-player-button-color: "rgba(255, 255, 255, 0.0)"
  mini-media-player-accent-color: "var(--paper-slider-knob-color)"
  mini-media-player-overlay-color: "var(--primary-color)"


## Card Mod Day
###############

  card-mod-theme: day
  card-mod-card: |

    .card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.media-player {
      border: solid 1px var(--primary-color);
    }

    ha-card.media-player mmp-shortcuts {
      $: |
        mmp-button {
          box-shadow: none ;
          background: none;
          border: solid 1px var(--primary-color);
          border-radius: 10px;
        }
    }

    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-no-border {
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-red {
      border: solid 1px #FF6262;
      --ha-card-background: rgba(0, 0, 0, 0);
      --primary-text-color: rgb(250,98,98);
      box-shadow: 0px 0px 10px 3px #FF6262;
    }

    ha-card.inline-card-red div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }

    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: url("/local/background/card_bg_Day.png");
    }
    ha-card.top-level-card div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }

    ha-card.top-level-graph {
      border: solid 1px var(--primary-text-color);
      background: url("/local/background/card_bg_Day.png");
    }

    ha-card.top-level-graph .name > span {
      color: var(--primary-text-color);
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      opacity: 1 !important;
    }

#################################################################
## Night
#################################################################

night:
  # Main colors
  primary-color: '#39679e'                                                        # Header
  accent-color: '#E45E65'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
  lovelace-background: 'center / cover no-repeat url("/local/background/night.jpg") fixed'

  # Text colors
  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value

  # Background colors
  primary-background-color: '#1b3163' # '#383C45'                                             # Settings background
  secondary-background-color: '#656e82'                                           # Main card UI background
  secondary-background-color-alpha: "rgba(101, 110, 130, 0.2)"
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider
  sidebar-background-color: var(--primary-background-color)

  # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative

  # Nav Menu
  paper-listbox-color: 'var(--primary-text-color)'                                # Navigation menu selection hoover
  paper-listbox-background-color: '#041D42'                                       # Navigation menu background (Input Selects)
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection

  # Cards
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  card-background-color: "rgba(0, 0, 0, 1)"                                     # Card background colour, also pop-up box header
  # ha-card-background: 'url("/local/background/card_bg_Night.png")'      # Card background
  mdc-theme-surface: '#041D42'                                                    # Pop-up background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: 'var(--secondary-text-color) #'         # List box item select
  paper-tabs-selection-bar-color: 'green'
  ha-card-border-radius: 10px
  border-color: 'var(--secondary-text-color)'
  # ha-card-border: solid 1px var(--border-color)

  # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

  # Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--secondary-background-color)'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

  # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

  sidebar-selected-icon-color: 'var(--secondary-text-color)'
  sidebar-selected-text-color: 'var(--secondary-text-color)'
  markdown-code-background-color: 'var(--primary-color)'

  restriction-regular-lock-color: '#e45e65'
  restriction-lock-row-margin-left: 78%
  restriction-lock-margin-left: 40%
  restriction-lock-opacity: "0.9"

  sc-background-filter: none                      # sun card bg

  mini-media-player-button-color: "rgba(255, 255, 255, 0.0)"
  mini-media-player-accent-color: "var(--paper-slider-knob-color)"
  mini-media-player-overlay-color: "var(--secondary-background-color)"


## Card Mod Night
#################

  card-mod-theme: night
  card-mod-card: |

    .card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.media-player {
      border: solid 1px var(--primary-color);
    }

    ha-card.media-player mmp-shortcuts {
      $: |
        mmp-button {
          box-shadow: none;
          background: none;
          border: solid 1px var(--primary-color);
          border-radius: 10px;
        }
    }

    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-red {
      border: solid 1px #FF6262;
      --ha-card-background: rgba(0, 0, 0, 0);
      --primary-text-color: rgb(250,98,98);
      box-shadow: 0px 0px 10px 3px #FF6262;
    }

    ha-card.inline-card-red div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }

    ha-card.inline-card-no-border {
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.top-level-card {
      border: solid 1px var(--secondary-text-color);
      background: url("/local/background/card_bg_Night.png");
    }

    ha-card.top-level-card div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }

    ha-card.top-level-graph {
      border: solid 1px var(--secondary-text-color);
      background: url("/local/background/card_bg_Night.png");
    }

    ha-card.top-level-graph .name > span {
      color: var(--primary-text-color);
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      opacity: 1 !important;
    }

nickrout · August 12, 2020, 7:44am

In the end I installed via HACS and manually added the resource, and it worked. Weird.

I was using custom:compass-card. The resources not being added by HACS seems to be the problem. I am over trying to work out why.

Thanks for the card

tomvanswam · August 12, 2020, 7:48am

Thanks for sharing!

Lets get this in my dev environment.

tom_l · August 12, 2020, 7:49am

You will require card mod 2.0 or the classes wont work.

Mariusthvdb · August 12, 2020, 7:51am

hey Tom, those are nice card backgrounds you use with the curved headers, would you please share these here? (together with the lovelace backgrounds ) I’d like to give that beautiful theme of yours a try, really like it.

tom_l · August 12, 2020, 8:18am

Here you go: https://www.dropbox.com/s/1zhqvywrvc46zhx/background.zip?dl=1

Note that the card backgrounds are excessively long to cover some of my more excessive folded entity rows. You may be able to shorten them.

tomvanswam · August 14, 2020, 6:40pm

Quick preview of v0.1.0:

Coming in 15 minutes!

tom_l · August 14, 2020, 10:16pm

I seem to have a title overflow and alignment issue with this latest version on mobile screens. Honestly not sure if this was the case with the previous version.

Same vertical issue on desktop:

Screenshot_2020-08-15 Overview - Home Assistant

(compare to screenshot in my previous post).

Edit: just checked previous version on mobile, looks ok:

tomvanswam · August 15, 2020, 7:46am

I’ll look into it, thanks for letting me know.

tomvanswam · August 15, 2020, 8:56am

v0.2.0 is out, with the overflow fixed (or at least a lot better again) and an extra optional north indicator.

As the compass is full css, it’s not easy to scale, so if the cards get to small, the compass will go off-center and eventually overflow
Need to think about how to prevent that

tom_l · August 15, 2020, 9:19am

That was quick. All fixed.

ptdalen · August 15, 2020, 2:20pm

Very nice. I like the simplistic approach, and really like how you can use track multiple things. I will use this every weekend.

What would be nice, and this is not something I think is possible at the moment, would be if you could use your phones compass as a sensor in the App. So that you’d know where north was. Most of the time it’s obvious, but still would be pretty cool.

tom_l · August 15, 2020, 2:34pm

I’m trying to see a situation where opening home assistant and all its baggage to view a compass would be more efficient than just opening a compass app. Help me out here.

Mariusthvdb · August 15, 2020, 2:47pm

cool, thanks!

ptdalen · August 15, 2020, 3:08pm

It would be cool if the lovelace card was tied to a real compass. So when you show wind from the east, you could point your phone to the north so you’d know where the east was. I was not saying I want a compass itself in HA. I was saying if I had a compass in HA, I could overlay other direction related information on top of that compass. I do think that’s a bit much to ask though. More of a, wouldn’t that be cool

sender · August 15, 2020, 8:16pm

Hi, where do you get the information for the entities:
sensor.wind_dir
sensor.wind_speed
sun.azimuth
sun.elevation

from?

tomvanswam · August 15, 2020, 8:32pm

Honestly they are placeholders, just to show what you could do with the card.

However, different weather integrations will hook you up with sensors for wind speed.
As for the sun, what I personally did is make some template sensors to get the azimuth and elevation from the default sun entity in Home Assistant. Here is the yaml to put in your configuration.yaml for that:

sensor:
  - platform: template
    sensors:
      solar_angle:
        friendly_name: "Elevation"
        unit_of_measurement: '°'
        icon_template: "mdi:axis-y-rotate-clockwise"
        value_template: "{{ state_attr('sun.sun', 'elevation') }}"
      solar_azimuth:
        friendly_name: "Azimuth"
        unit_of_measurement: '°'
        icon_template: "mdi:axis-z-rotate-clockwise"
        value_template: "{{ state_attr('sun.sun', 'azimuth') }}"

Then you can use sensor.solar_elevation and sensor.solar_azimuth in your card.

Extra note, the sun entity only gives valid values for your location when you set the correct location in the Configuration->General settings.

davefi · August 15, 2020, 10:26pm

Do you have any info on your astro panel @tom_l, e.g. how the season, moon phase, astro dawn/dusk are obtained? Tried looking for a astro component in HA and HACS, but didn’t have much luck! Thanks in advance

DavidFW1960 · August 16, 2020, 12:43am

Season, moon phase are in core of HA. For other Astro stuff look for Phil Bruckners sun2 custom component (not in HACS as default but can be added as a repo)

tomvanswam · August 17, 2020, 6:14pm

For some obscure reason the entities-card and glances-card (and maybe more) use the card-header class, and the entity-card and sensor-card (and maybe more) use the header class.
In the default theme, the first is black, less weight and taller, and the latter is gray, bolder and smaller.

I thought all header titles would be the same (card-header class), so I changed the card to that when fixing the overflow. However the request was made to revert the header to match the sensor card header so I did, it made sense to me as the card is more a sensor kind of card.

Consider this a heads-up on a possible broken header for your theme in v0.3.0
If it does, reach out and we can see what is a good way to get it right.