Lovelace: performance-card prototype

[Dynamix72]

here is my yaml. I tried to set the height and width, then the cauge is smaller, but not alligned to the card.

type: horizontal-stack
cards:
  - type: custom:canvas-gauge-card
    entity: sensor.buienradar_humidity
    font_size: 1em
    gauge:
      type: radial-gauge
      title: Humidity (%RH)
      width: 320
      height: 320
      minValue: 0
      maxValue: 100
      startAngle: 45
      ticksAngle: 270
      valueBox: true
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 0
          to: 39
          color: rgba(239, 93, 13, .75)
        - from: 41
          to: 69
          color: rgba(4, 205, 24, .75)
        - from: 71
          to: 100
          color: rgba(74, 123, 180, .75)
      borders: true
      colorPlate: '#ddd'
      animationRule: bounce
      valueDec: 0
  - type: custom:canvas-gauge-card
    entity: sensor.buienradar_wind_direction_azimuth
    font_size: 1em
    gauge:
      type: radial-gauge
      title: Wind direction
      width: 320
      height: 320
      minValue: 0
      maxValue: 360
      majorTicks:
        - 'N'
        - NE
        - E
        - SE
        - S
        - SW
        - W
        - NW
        - 'N'
      minorTicks: 22
      ticksAngle: 360
      startAngle: 180
      strokeTicks: false
      highlights: false
      colorPlate: '#ddd'
      valueBox: false
      valueTextShadow: false
      borders: true
      borderShadowWidth: 0

[Trypticon (Frans Labuschagne)]

Mine is 3 gauges in a normal horizontal stack card. Maybe adjust the width & height

type: custom:canvas-gauge-card
entity: sensor.solar_weather_v3_sea_pressure
card_height: 150
gauge:
  type: radial-gauge
  title: Pressure (hPa)
  width: 150
  height: 150
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: 960
  maxValue: 1070
  startAngle: 45
  ticksAngle: 270
  valueBox: true
  majorTicks:
    - '960'
    - '970'
    - '980'
    - '990'
    - '1000'
    - '1010'
    - '1020'
    - '1030'
    - '1040'
    - '1050'
    - '1060'
    - '1070'
  minorTicks: 2
  strokeTicks: true
  highlights:
    - from: 960
      to: 1000
      color: rgba(74, 123, 180, .75)
    - from: 1000
      to: 1050
      color: rgba(4, 205, 24, .75)
    - from: 1050
      to: 1070
      color: rgba(239, 93, 13, .75)
  borders: false

[GlennHA (Glenn)]

Add style and change the scale for bigger or smaller. Like 1.1 or 2 or 0.5

@GlennHA

    style:
      top: 50%
      left: 50%
      width: null
      heigth: null
      box-shadow: none
      background-color: transparent
      transform: scale(1,1) translate(-50%,-50%)

[Dynamix72]

Found the problem. The problem is in the caching from the browser.
if you have different sizes of the gauges on different tabs in home assistant, you have to refresh the page hard to get it right. Can that be solved in css or is this a bug?

@GlennHA I tried your suggestion, but i can’t style the gauge.

[Dubak (Lion®)]

nice dials, pity they can’t be used

[Markii2430]

How did you put icon on your card ?

[GlennHA (Glenn)]

The “- type: image” section below is how I handle the icons. Icons (in my case) are in the ‘www’ directory.

type: picture-elements
image: /local/gauge/AQI_Index.png
elements:
  - type: state-label
    style:
      top: 84%
      left: 50%
      box-shadow: none
      background-color: transparent
    entity: sensor.purpleair_description
    prefix: ''
    attribute: ''
    title: null
  - type: custom:canvas-gauge-card
    entity: sensor.purpleair_aqi_a
    style:
      top: 50%
      left: 50%
      width: null
      heigth: null
      box-shadow: none
      background-color: transparent
    gauge:
      type: radial-gauge
      title: AQI
      width: 230
      height: 230
      minValue: 0
      maxValue: 500
      startAngle: 40
      ticksAngle: 280
      valueBox: true
      majorTicks:
        - '0'
        - '50'
        - '100'
        - '150'
        - '200'
        - '250'
        - '300'
        - '350'
        - '400'
        - '450'
        - '500'
      minorTicks: 5
      strokeTicks: true
      highlights:
        - from: 0
          to: 50
          color: rgba(104, 225, 67, .75)
        - from: 50
          to: 100
          color: rgba(255, 255, 85, .75)
        - from: 100
          to: 150
          color: rgba(239, 133, 51, .75)
        - from: 150
          to: 200
          color: rgba(234, 51, 36, .75)
        - from: 200
          to: 300
          color: rgba(140, 26, 75, .75)
        - from: 300
          to: 500
          color: rgba(115, 20, 37, .75)
      borders: 'no'
      needleType: arrow
      needleWidth: 4
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear
      valueBoxBorderRadius: 10
      colorValueBoxRect: '#222'
      colorValueBoxRectEnd: '#333'
      valueDec: 0
      valueInt: null
  - type: image
    image: /local/gauge/AQI_Logo.png
    style:
      top: 50%
      left: 50%
      width: 25%
      box-shadow: none
      background-color: transparent

https://github.com/GlennGoddard/CanvasGaugeBackgrounds

[Markii2430]

Thank you

[sirfrogman]

I can’t figure out how to only display the value box. The use case is a car odometer. Does anyone know if this is possible/how to do it?