Help with displaying a position on a scale (wind speed on Bft scale)

Configuration Frontend
1

Can anyone help me improve my wind speed display? I’ve collected data on current wind direction speed and gusts and computed the wind on the Beaufort scale. I currently display them all as numbers but want to show it on the bft scale like this:
image
(or using some arrows maybe)
I have template sensors that say “WSW15” (ie a 15kt wind from the WSW) is a 4Bft wind and the 24kt gusts (“G24”) is 6bft.
I had imagined this would be easy with a picture elements card like this:

type: picture-elements
elements:
  - type: state-label
    entity: sensor.wind_speed
    style:
      top: 20%
      left: {{ states('sensor.wind_bft')|int * 10}}
image: /local/images/bft.jpeg

but nothing I have tried in the left: section works as a variable position. I’ve tried making the template return a string like 40% and that doesn’t work either.
Would anyone spare a moment to point me in the right direction?
Thanks in advance.

2

I recently implemented this, seems to work well and has lots of customixation.

3

Hi, I looked at yours and it is very beautiful!
I’m trying yo do something different which is to display current conditions more prettily. If I can crack the variable positioning I’ll do something similar with sea states.

4

Very few core dashboard cards support templating.

You will need a third party solution.

5

Thanks for this. I think I’ve installed Config Template Card but after hours of trying to use it I clearly need more help, if anyone is willing. This is my lovelace card so far:

type: custom:config-template-card
entities:
  - sensor.wind_speed
variables:
  xpos: (states('sensor.wind_bft').split('F')[1].split('-')[0])+'0%'
card:
  type: picture-elements
  image: /local/images/bft.jpeg
  elements:
    - element: null
      type: state-label
      entity: sensor.wind_speed
      style:
        top: 20%
        left: '${xpos}'

But after trying with many variants of this I can’t get the left: dimension to depend on the state of another sensor.

6

I found a different way of doing this using custom:card-templater, in case anyone wants to try something similar. This is still work-in-progress but it’s a start:

type: custom:card-templater
entities:
  - sensor.wind_speed
  - sensor.wind_bft
  - sensor.wind_dir
card:
  type: picture-elements
  image: /local/images/weather.jpg
  elements:
    - element: ''
      type: state-label
      entity: sensor.wind_dir
      prefix_template: '{{ "At "+states("sensor.wind_location")+" wind is:"}}'
      transform: none
      style:
        top: 10%
        left: 30%
        bold: true
    - element: ''
      type: state-label
      prefix: 'Viz: '
      entity: sensor.met_viz
      transform: none
      style:
        top: 15%
        left: 70%
    - element: ''
      type: state-label
      entity: sensor.wind_time_relative
      transform: none
      style:
        top: 4%
        left: 80%
    - element: ''
      type: state-label
      entity: sensor.wind_speed
      transform: none
      style:
        top: 20%
        left_template: >
          {% set windspeeds = [0, 3.5, 6.5, 10.5, 16.5, 21.5, 27.5, 33.5, 40.5, 47.5, 55.5, 63.5, 999] %} 
          {% set idx = windspeeds.index(windspeeds|select('>',states('sensor.wind_speed')|float)|list|first)%} 
          {{ (10*(idx-1+(states('sensor.wind_speed')|float - windspeeds[idx-1])/(windspeeds[idx] - windspeeds[idx-1])))|string+"%"}}
    - element: ''
      type: state-label
      entity: sensor.wind_gusts
      transform: none
      style:
        top: 20%
        left_template: >
          {% set windspeeds = [0, 3.5, 6.5, 10.5, 16.5, 21.5, 27.5, 33.5, 40.5, 47.5, 55.5, 63.5, 999] %} 
          {% set idx = windspeeds.index(windspeeds|select('>',states('sensor.wind_gusts')|float)|list|first) %} 
          {{ (10*(idx-1+(states('sensor.wind_gusts')|float - windspeeds[idx-1])/(windspeeds[idx]-windspeeds[idx-1])))|string+"%"}}

transform: none doesn’t prevent centering so it gets a bit messy at times, but I’m working on that.