I made a lovelace compass card to point out the way the wind is blowing, the sun is at or where lightning is coming from.
Install it with HACS (search for compass) or check the readme in on github for manual installation if you don’t have HACS.
Love to hear your feedback.
Edit: updated screenshot to match v0.2.0
I installed via HACS, followed instructions exactly (and I have used HACS and custom cards extensively).
However when I try to add the card I get Custom element doesn't exist: compass-card.
Also it doesn’t appear in the resources page.
Running HA supervised on debian with HA 0.113.3 and HACS 1.3.3.
That will be HACS not adding it to resources I’d say…
(Just added myself and all ok. I did have to press CTRL+R to refresh) HACS has been a bit quirky lately with updating cards… maybe related.
I agree, but is this a HACS problem or a problem with @tomvanswam’s repo or a problem with my machine?
HACS IMO or just a glitch. It is HACS that adds the resources, not the card. Or maybe just a glitch with your install… It installed fine for me. HACS threw a warning that the resource was not added but when I checked resources it was there and it worked fine.
puzzling, I’ll have a play again later.
I had a play with it. Works for me. And I will be replacing my current hacked together compass with it as soon as I’m able to set the compass background colour to transparent to fit better with my theme (it’s on the list of things to be done on github).
Im running HA 0.113.3 on Home Assistant OS myself and I don’t have any problems with installing it over HACS (other than this issue).
As others mentioned it could be HACS related. You could try the manual approach though.
I’m not sure how to debug this and help you out unfortunately.
Also when adding the card via yaml, I think the correct type is custom:compass-card, the error you mention seems to indicate the type is set to compass-card
I saw the feature request you opened on the pointer color based on windspeed.
Thanks for trying the card out and providing feedback.
Could you share the theme you are using? First of all, I’d like to try it for my HA install, second it could help with development a lot (especially for the transparent background).
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;
}
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 
Thanks for sharing!
Lets get this in my dev environment. 
You will require card mod 2.0 or the classes wont work.
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.
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.
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:
(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 
Need to think about how to prevent that
