Compass Card - Points you in the right direction šŸ§­

Share your Projects! Dashboards & Frontend
,
81

Hi @monkey-house, you can remove those points from the graph card using the option

show:
    points: False
82

v1.0.0-alpha1 is out (enable pre-releases on HACS).

To soften the pain of the breaking changes, a semi-auto update procedure is available.

Check the README.md Options section for the advanced config thatā€™s now available.

Still some finetuning to do, and implement the dynamic styling before ready for 1.0.0 release, but weā€™re getting there.

83

Well this doesnā€™t work and looks identical to previousā€¦

          - type: 'custom:compass-card'
            header:
              title:
                value: Wind Direction
            indicator_entities:
              - sensor: sensor.bom_gosford_wind_direction
                indicator:
                  type: arrow_inward
            value_entities:
              - sensor: sensor.bom_gosford_wind_speed_kmh
            compass:
              north:
                show: true
                offset: 0

Missing direction entity
image

Previous config:

          - type: 'custom:compass-card'
            entity: sensor.bom_gosford_wind_direction
            secondary_entity: sensor.bom_gosford_wind_speed_kmh
            direction_offset: 0
            name: Wind Direction
            compass:
              indicator: arrow_inward
              show_north: true

looks like this:
image

84

Ah I see the error.

If I do the semi-auto it does this:

type: 'custom:compass-card'
indicator_sensors:
  - sensor: sensor.bom_gosford_wind_direction
    indicator:
      type: arrow_inward
value_sensors:
  - sensor: sensor.bom_gosford_wind_speed_kmh
compass:
  north:
    show: true
header:
  title:
    value: Wind Direction

So if it IS indicator_sensors the docs need to say that instead of indicator_entities etcā€¦

85

image
So missing the units for the elevation and can we change the decimal places?

          - type: 'custom:compass-card'
            header:
              title:
                value: Wind Direction & Sun
            indicator_sensors:
              - sensor: sensor.bom_gosford_wind_direction
                indicator:
                  type: arrow_inward
              - sensor: sun.sun
                attribute: azimuth
                indicator:
                  type: circle
            value_sensors:
              - sensor: sensor.bom_gosford_wind_speed_kmh
              - sensor: sun.sun
                attribute: elevation
            compass:
              north:
                show: true
                offset: 0

Looks good otherwise though

86

Styling has all changed again.

Before:
Screenshot_2020-10-07 Mobile View - Home Assistant

After:
Screenshot_2020-10-07 Overview - Home Assistant

Card mod classes:

    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;
    }
87

Thanks for trying both upgrade paths! And even more for letting me know where I messed up.

I corrected the YAML examples in the readme to show the correct manual config options.

The second value-sensor will show units when available. However, attributes have no own units_of_measurement to get the units from and using the same units as the state is not always correct. Also some attribute values are string based, with the units in the string, so those will show, however those units will not be independantly configurable from the value.
When you use the state of a sensor, you will see the units.

Aditionally, the abbreviation for all indicator-sensors exept the first one are hidden. When you change the second sensor node to:

              - sensor: sun.sun
                attribute: azimuth
                indicator:
                  type: circle
                state_abbreviation:
                  show: true

It will also show the second sensors abbreviation.
You can also add the value and/or units with

              - sensor: sun.sun
                attribute: azimuth
                indicator:
                  type: circle
                state_abbreviation:
                  show: true
                state_value:
                  show: true
                state_units:
                  show: true

Adding more than 2 indicator-sensors or value-sensors will result in a layout mess.

Iā€™ll add configurable units and rounding to my todolist for v1.0.0.

88

I was expecting this to happen.

The semi-auto upgrade procedure does not add the class node in the updated config, so please make sure it is present in the upgraded config.

Please upgrade to v1.0.0-alpha2 (it will be up later today) and add this to theme:

    ha-card.top-level-graph.compass-card .name {
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
    }

    ha-card.top-level-graph.compass-card .icon,
    ha-card.top-level-graph.compass-card .name,
    ha-card.top-level-graph.compass-card .indicator-sensors .abbr {
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .name {
      margin-top: -2px;
    }

    ha-card.top-level-graph.compass-card .value-sensors {
      top: 56px;
      font-weight: 400;
    }

    ha-card.top-level-graph.compass-card .value-sensors .value {
      font-size: 2.4em;
      line-height: 1.2em;
      font-weight: 300;
    }

    ha-card.top-level-graph.compass-card .value-sensors .measurement {
      font-size: 1.4em;
      font-weight: 400;
      line-height: 1.6em;
      opacity: 0.6;
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors {
      top: 24px;
      font-weight: 400;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors .abbr  {
      font-size: 14px;
      opacity: 0.75;
      color: var(--primary-text-color) !important;
    }

My result is:
192.168.2.50_8123_lovelace_test (3)

The placing of everything is a bit different to version v0.x.x, but this is intentional.

89

Would you mind sharing your theme? Looks very clean!

90

Add or replace?

I actually missed a few class options, I actualy have this:

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

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

And I canā€™t work out why the border is not showing for the compass on the non alpha version (only just noticed).
Thanks for taking the time and effort to write all that btw.

91

Itā€™s the iOS Dark mode blue red - in hacs ios themes dark mode and light mode repo.

1 Like
92

Took quite a bit of experimenting and inspection of elements but I got it looking like I had it originally (better actually):

Screenshot_2020-10-07 Overview - Home Assistant

Does this new setting mean we can change the pointer colour with wind value: https://github.com/tomvanswam/compass-card/tree/dev#dynamic-style-object-wip ?

Do you have an example?

1 Like
93

Yes it does!

No examples yet, as it still is work in progress.

Youā€™ll be able to change color and visibility for:

  • North indicator
  • All indicators for entities
  • The compass circle
  • indicator abbreviation (only visible by default for first indicator) for all entities separately
  • indicator value (default hidden for all indicators) for all entities separately
  • Indicator units (default hidden for all indicators) for all entities separately
  • value-sensor value for all entities separately
  • value-sensor units for all entities separately

Each is configurable independantly and for everything you can pick the entity to listen to for.

1 Like
94

Hi,
I received an error:
Missing direction entity
type: ā€˜custom:compass-cardā€™
entity: sensor.openweathermap_wind_bearing
secondary_entity: sensor.openweathermap_wind_speed
compass:
language: pl

What is wrong?

95

You upgraded to v1.0.0 (a non stable alpha version) which has a different yaml config. The old config is not valid anymore, so an error is shown.

Open the card in the editor and save it. It will update the config and the card will work again. Please note there will be some layout changes.

96

Ok, thanks.

97

I hope you already upgraded to alpha2 or otherwise it does not break your layout again.

I made some more css selectors, so styling with card mod can be more finetuned then before.

1 Like
98

Yep, no worries, I had already updated to alpha 2. :+1:

99

Tomā€¦ any way to change this so the degree symbol in in the top right corner not the middle?
192.168.2.50_8123_lovelace_test (3)

100

Itā€™s a different font size. The units are typically smaller and on the same ā€˜lineā€™ as the value but with a smaller fontsize.

Cardmod should be able to fix it but youā€™ll need to find the element properly.

I donā€™t use the card so I canā€™t inspect the element, but it seems like this is what others have used:

ha-card.top-level-graph.compass-card .indicator-sensors .abbr

change the font size to match the value. If thatā€™s not it itā€™s the .measurement one

1 Like