Compass Card - Points you in the right direction 🧭

[tomvanswam]

@tom_l is is what I get in my dev env:

However I might not have the latest css for the day/night

[tomvanswam]

With the following css added to the night theme yaml

ha-card.type-custom-compass-card {
  --state-icon-color: var(--paper-item-icon-color, var(--state-icon-color));
  --secondary-text-color: var(--primary-text-color, var(--secondary-text-color));
}

ha-card.type-custom-compass-card .header .name {
    opacity: 0.65;
}

ha-card.type-custom-compass-card .compass .direction p span {
  font-size: 2.4rem;
  line-height: 1.2rem;
  font-weight: 300;
}

ha-card.type-custom-compass-card .compass .direction p {
  font-size: 0.7em;
  line-height: 1.2rem;
}

I get the following result:

Unfortunately the units don’t have a separate css handle to work with to make it more inline with both other cards. Will add this in the future.

[tom_l]

Added the last two lines to the class I use for graphs and the compass card:

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

And it works without messing up the graph card. Thank you.

Will have a play with the font sizes now.

[tomvanswam]

You’re welcome, happy to help.

Looking forward to what you make of it!

[tom_l]

It was actually the wind speed I wanted to increase the font of to match the other cards:

[tomvanswam]

My example, doesnt show the speed, but degrees, but this is the secondary entity shown large in degrees.

I made the second line the same as the state value in the mini-graph-card. To get the extrema size should not be to difficult.

If you rightclick on the extrema in the mini-graph-card, and check what css is applied and you can copy those to the ha-card.type-custom-compass-card .compass .direction p span in your theme. If the extrema has sizes in em, use rem instead. If you cant get it to work, leave a message and I’ll see what I can do

[tom_l]

Perfect!

I took those two lines out of my graph card class once I realised you were applying them to the card type:

    ha-card.type-custom-compass-card .compass .direction p span {
      font-size: 14px;
      opacity: 0.75;
      font-weight: 400;
    }

    ha-card.type-custom-compass-card {
      --state-icon-color: var(--paper-item-icon-color, var(--state-icon-color));
      --secondary-text-color: var(--primary-text-color, var(--secondary-text-color));
    }

    ha-card.type-custom-compass-card .compass .direction p {
      font-size: 2.4em;
      line-height: 2rem;
      font-weight: 400;
    }

Thanks again.

[tomvanswam]

Small update/preview. SVG compass is progressing nicely:

Next up the other indicators, and the color setting from config and the configurable color ranges.

[monkey-house (Ced)]

Hey @tomvanswam,
Thanks for this great integration. Using it with the Ecowitt custom integrations and it works & looks great.
I have a feature idea that I believe would make this the ultimate card for wind info. I’d love to be able to see at a glance both wind direction in letters (N) and degrees (0°), wind speed and gust speed. Something like in this image (screen grab from Misol weather station).

[tomvanswam]

I’m glad you like the card.

On the github, some more idea’s have been mentioned to get more info in the card, so I will take your examples into consideration when working on the open issues.

Currently I’m changing the compass on the card to be svg based, instead of css, which would make it easier to implement multiple indicators on 1 compass, and change colors depending on the secondary entity provided.
Currently I’m at this stage (availavle as v0.5.0-dev pre-release in HACS):

I try to make the card use as much styling from the vanilla sensor-card and try not to get to much different fonts/font-sizes/font-weights and stuff because the clean look of the card will dissapear quite quickly. Putting more emphasis on the secondary entity was an idea from github which made sense and did not mess to much with the clean look.
Adding more info is mostly a layout trade-off, e.g. adding the degrees of an indicator to the abbreviation seems easy, however in some languages the abbreviations are quite a bit longer than a max of 3 letters. So this could end up overflowing outside the compass.
Using the left/right side of the card could be a possibility, but when viewing on a smaller screen, of (as in the screenshot) using the card in a horizontal-stack leaves no room for additional info to the left and right.

The weatherstation looks great (what make/model is it?) Due to the responsive and configurable nature of the lovelace infterface it’s not as easy to make it like that and keep everyone using the card happy. (also because some people use the card for non wind related info).

Any ideas for a interface update are more than welcome, as I find it difficult to think of stuff like this on my own

[Tomahawk]

Is it possible to get the compass into a badge?

[tomvanswam]

What an excellent idea! (and a proper challenge)

I’ll add it to the todo list, but it might take some time as I need to finish the current update first and research how to do this.

[DavidFW1960 (David)]

So I don’t see the wind speed on that card now?

[tomvanswam]

Yes you will.

The screenshot has the secondary entity set to the same as the first entity. In my dev HA I use input_numbers for the secondary entities, however the sensor-card cannot display input_numbers. So to check if the secondary entity displays the same way as the state on the sensor-card I needed to set the secondary_entity to a sensor. Thinking of it now this might be a bit confusing in the context of the previous question.

[DavidFW1960 (David)]

Haha yeah well it for sure confused me… thanks for explaining.

[tomvanswam]

I’ll create template sensors for the input sensors, so I can screenshot with an ‘actual’ secondary sensor, and stop confusting everyone

[monkey-house (Ced)]

Cheers for getting back. Yup, your choice of not messing too much with default css makes sense. I guess adding one more line of text at the bottom would be doable and allow users flexibility in their choice of data to be shown.
Working with svg can be a pain as I found out with floorplan pre-lovelace. Am using the dev card and the result is great.

The weather station is a HP2550, Misol branded. Those guys manufacture for AmbienWeather and a bunch of brands than can be bought in the West. I believe this is a rebranding of FineOffset as menus and electronics look like they’ve been done by the same people.
I pull the sensor data into Hass via the Ecowitt website and a readily available custom component. I actually bought a GW1000 Wifi adapter thinking this would be needed, but realise the weather station could fo this direct. Not the first time i waste 15usd on something not needed… The website from the Ecowitt platform is great. On it, they do exactly what ypu suggested with different sensors cards in a horizontal stack. I may try to do something like this and post back here if it’s worth everyone’s time. See the link below:
Ecowitt

[tomvanswam]

Next prerelease I’m adding the degrees as optional next to the abbreviation (and will make the abbreviation hideable as well). The second line of additional info will have wait till upcoming release is done.

Thanks fotr the info on the weaterstation, mine is almost due for replacement and this looks like a good candidate for that.

[monkey-house (Ced)]

Aliexpress for 160usd
Although you can also just buy the sensor arrays and add a GW1000 to link with hass for just 100usd plus shipping…
In any case, it’s nice to be able to add soil moisture, temp/hygro, plus pm 2.5 sensors at ok rates.

[tomvanswam]

Instead of a minor version update (to v0.5.0), next release will be a mayor release (v1.0.0) as stuff is gonna break very badly
The config was not flexible enough to do what I wanted, so that needed a big overhaul.
Still have to add the style changing on entity updates, this is already forseen in the config change, so should be a fairly easy thing to do now.
And fix the visual editor, at least for the same stuff that was possible with the visual editor before. To implement all new options would be to much for the visual editor imo.

Whats in v1.0.0?

• Multiple indicators per card
• Multiple value entities per card
• Use attribute of entity for value, instead of state
• Color picking for almost everything (title, icon, circle, indicators, abbreviations, values, units (all separate, and all these things will be configurable with a dynamic color depending on a configurable entity(+attribute) value range)
• Show/Hide setting for almost everything (title, icon, circle, indicators, abbreviations, values, units (all separate, and all these things will be configurable with a dynamic show/hide depending on a configurable entity(+attribute) value range)
• Sneak peak:
  
  

What will break:

• Your current card
  • Complete yaml config structure is changed (I’ll add a v0.x.x to v1.0.0 instruction on the repository)
  • Sneak peak:
    

I know, the example screenshot looks like a carnival and I’m not going to configure mine like that, but if you want to, you can do so.
By default the plain/similar to the sensor-card look will stay. It’s up to you to make it as ‘expressive’ as you like