Compass Card - Points you in the right direction 🧭

@tomvanswam I am particularly impressed that you have developed a gui for adding this card, so many custom cards have to be done by yaml.

2 Likes

Thanks!

The example code I used to make the card already included the visual editor stuff, and since Home Assistant itself is moving more away from yaml config, and I can imagine the yaml configuration might be a bridge to far for some I kept it in.
Although when I start working on making the indicator change color for different values, this might be yaml config only.

2 Likes

My minor annoyance was that my wind speed indicator is in m/s, which is not what I find intuitive. More used to km/h, or knots. How about the ability to use a templates in defining the secondary_entity?

Or am I just being lazy in not wanting to take the intermediate step of defining a template_sensor?

2 Likes

What weather integration are you using for the wind speed sensor?

weatherbit.io.

+1 km/h is more intuitive in my opinion as well.

Great card btw, I was using button card before with a giant list of templates inside of it to show the correct arrow

1 Like

Definitely a great card.

Yeah the template sensor wasn’t too hard though. Mine is

      weatherbit_wind_speed_kmh:
        friendly_name: "Weatherbit Wind Speed KMH"
        value_template: "{{ ((states('sensor.weatherbit_wind_speed') |float) * 3.6 )|round(1)}}"
        unit_of_measurement: "km/h"

if it helps anyone.

1 Like

The screenshot above I posted is km/h which is what the BOM weather Tom & I use has as the units… so it’s your weather provider not this card.

I’m using template sensors myself to change the m/s to Bft (as this is used at all the weather forecasts at the radio/tv), but looking at it beeing able to use the templating engine would be a nice feature.

This would also make it possilble to easily use an attribute value, instead of the state of a entity.

This might take some time to figure out though, as the card is written in Typescript and I think the templating engine is in Python and I don’t know if there is any way to call that from typescript. Probably there is, I just have to find it.

If you really want this feature, please create a new feature request issue at the Github site, this way I have a single source of stuff to keep in mind.

I think on reflection that there seems little point in recreating the whole template engine when we have template sensors already. No point in reproducing it. I think.

I just installed the Weatherbit.io integration this morning and it gives the wind in Beaufort (so maybe you need to reinstall it to get that value). It works perfect with your compass card!

image

1 Like

Thanks, however I’m not using weatherbit, but a local Oregon Sientific wgr800 wind meter that outputs only m/s, so I’m stuck with converting it myself.

The knots feature in weatherbit is very new.

For those interested.

I’m currently working on the color changing indicator by windspeed (or seconday-entity-value). Unfortunately the css route currently used for displaying the compass and indicator are not configurable enough to get this done.
So I’m rebuilding everything to an svg shape, which makes it easier to manipulate the colors and get more indicators on the compass at once (and maybe even implement custom indicators :scream:)
This will take a bit more time then all previous updates, so bear with me :wink:

4 Likes

Weatherbit brings Beaufort Value and Beaufort Text in you language (I helped translating).
2020-08-31_22-51

1 Like

Ok so I am actually going to need a little assistance making this fit my themes.

I use the custom mini-graph card rather than the sensor card. My day theme looks ok, I can live with the odd coloured ellipsis (…) when using a mobile device that has thin columns. The main issue is the title icon seems to fade away in my night theme for some reason. I am not styling the heading or icon at all.

Also would it be possible to increase the font size of the secondary text to match other cards?

Could you check if the colors on the compass card are identical to the ha native sensor card? That was the intended working. The mini-graph-card isn’t inline with the sensor card i think. But if the compass card is not behaving as te sensor card this is a bug.

I’ll setup your theme in my dev env and whip up some extra css for your theme.

I’m currently working on a way to change colors/fonts/sizes for almost all objects on the card, so the css would be a temporary band-aid. This is taking a bit longer though then previous updates.

1 Like

The title in the sensor card is the same colour as the elipsis and a different size to all my other cards.

Ok thanks, this is with your theme? Or default theme?

With my theme. Even with this class added:

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