Compass Card - Points you in the right direction 🧭

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;
    }
6 Likes

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 :slight_smile:

1 Like

Thanks for sharing!

Lets get this in my dev environment. :nerd_face:

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

1 Like

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

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.

1 Like

Quick preview of v0.1.0:


Coming in 15 minutes!

2 Likes

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:

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

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 :frowning:
Need to think about how to prevent that

That was quick. All fixed. :+1:

1 Like

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.

1 Like

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.

1 Like

cool, thanks!

1 Like

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

1 Like

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

from?

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.

2 Likes

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 :+1:

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)

3 Likes

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 :wink:
If it does, reach out and we can see what is a good way to get it right.

1 Like