Change attributes in real-time of canvas-gauge for solar panel (triple) gauge

Share your Projects! Dashboards & Frontend
1

Hi
I use the canvas-gauge-card to create a gauge with 3 values: the needle is the overall power consumption, green (on the left) is the power that is generated by the solar panels and red (on the right) is the total power consumption in my house.
image
The needle works fine but how to I change the attributes for coloring green and red on the gauge? This is the “from” in the first highlights and “to” for the second.

card_height: 125
entity: sensor.analyze_2_eandis
font_size: 1em
gauge:
  borders: false
  height: 220
  highlights:
    - color: 'rgba(0,255, 33, .3)'
      from: -11
      to: 0
    - color: 'rgba(200, 50, 50, .3)'
      from: 0
      to: 8
  majorTicks:
    - '-20'
    - '-15'
    - '-10'
    - '-5'
    - '0'
    - '5'
    - '10'
    - '15'
    - '20'
  maxValue: 20
  minValue: -20
  minorTicks: 2
  startAngle: 90
  strokeTicks: true
  ticksAngle: 180
  title: stroom (A)
  type: radial-gauge
  valueBox: true
  width: 220
type: 'custom:canvas-gauge-card'

Mario

2

You will have to use this to set a template for the “from” value:

1 Like
3

hi tom
tx it worked!! iou man!!!

1/ downloaded card-tools.js from https://github.com/thomasloven/lovelace-card-tools + put it in the root of www-folder + entry in ui-config from lovelace. I had to chmod 777 the file otherwise error messages.
2/ installed card-templater from hacs
3/ put

type: 'custom:card-templater'
entities:
  - sensor.analyze_2_eandis
  - sensor.analyze_2_zonnepanelen
  - sensor.analyze_2_verbruik
card:
  type: 'custom:canvas-gauge-card'

before original card and then used in the original card with _template suffix for naming,
eg

        from_template: '{{ states(''sensor.analyze_2_zonnepanelen'')|float}}'
        to_template: '{{ states(''sensor.analyze_2_verbruik'')|float}}'
    title_template: '{{ state_attr(''sensor.analyze_2_eandis'',''friendly_name'') }}'
1 Like