Canvas-gauge-card not on center?

lpt2007 · August 5, 2021, 5:51pm

canvas-gauge-card not on center and not shows as half? Why?

Here is test:
align_center_problem

Here is my config:

type: horizontal-stack
cards:
  - type: custom:canvas-gauge-card
    entity: sensor.bathroom_esp_sensor_temperature
    card_height: 100
    background_color: '#FFF'
    gauge:
      type: radial-gauge
      borderShadowWidth: 0
      borderOuterWidth: 0
      borderMiddleWidth: 0
      borderInnerWidth: 0
      width: 100
      height: 100
      minValue: 0
      maxValue: 100
      startAngle: 90
      ticksAngle: 180
      valueBox: false
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 80
          to: 100
          color: rgba(200, 50, 50, .75)
      colorPlate: '#ddd'
      borders: false
      needleType: arrow
      needleWidth: 2
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear
  - type: custom:canvas-gauge-card
    entity: sensor.bathroom_esp_sensor_temperature
    card_height: 100
    background_color: '#FFF'
    gauge:
      type: radial-gauge
      borderShadowWidth: 0
      borderOuterWidth: 0
      borderMiddleWidth: 0
      borderInnerWidth: 0
      width: 100
      height: 100
      minValue: 0
      maxValue: 100
      startAngle: 90
      ticksAngle: 180
      valueBox: false
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 80
          to: 100
          color: rgba(200, 50, 50, .75)
      colorPlate: '#ddd'
      borders: false
      needleType: arrow
      needleWidth: 2
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear
  - type: custom:canvas-gauge-card
    entity: sensor.bathroom_esp_sensor_temperature
    card_height: 100
    background_color: '#FFF'
    gauge:
      type: radial-gauge
      borderShadowWidth: 0
      borderOuterWidth: 0
      borderMiddleWidth: 0
      borderInnerWidth: 0
      width: 100
      height: 100
      minValue: 0
      maxValue: 100
      startAngle: 90
      ticksAngle: 180
      valueBox: false
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 80
          to: 100
          color: rgba(200, 50, 50, .75)
      colorPlate: '#ddd'
      borders: false
      needleType: arrow
      needleWidth: 2
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear

GlennHA · August 5, 2021, 6:00pm

I used to have this issue periodically, one thing I found that fixes the problem is putting it as an element on a picture-elements card. This may not be the answer you are looking for but it helps with displaying on different types of displays such as from phone and desktop.
I have several examples here:
Canvas Gauge Backgrounds

lpt2007 · August 6, 2021, 3:06pm

Can you share example configuration?

GlennHA · August 6, 2021, 3:58pm

The above link has several examples on GitHub along with the pictures.
Here is one example thou:

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

Example_AQI

GlennHA · August 6, 2021, 4:13pm

I just reread your question and missed the part of the half, that is because your starting angle is 90.

lpt2007 · August 6, 2021, 4:21pm

Thx, I wanna display as half, but I have whole circle.

I wanna have look like this:
stevec

GlennHA · August 6, 2021, 5:07pm

https://github.com/custom-cards/canvas-gauge-card
In that case you want to change your card_height: to 57 and see if that is what you want.

lpt2007 · August 6, 2021, 5:18pm

I try this but not working. I see no difference.

GlennHA · August 6, 2021, 5:19pm

post your yaml again as it is now.
Ah, you might have to clear cache and reload after you change your settings for the gauge (sometimes you do, sometimes you don’t) try Ctrl-F5

lpt2007 · August 6, 2021, 5:25pm

Thx @GlennHA now is ok.

3_gauge

GlennHA · August 6, 2021, 5:25pm

Was it the Ctrl-F5?

lpt2007 · August 6, 2021, 5:26pm

Yes

GlennHA · August 6, 2021, 5:30pm

Yep, that bits me every now and then. I make changes and I don’t see any changes, so I make more, then I realize…probably need to clear the cache and try it. I have almost just got in the habit of clear cache every change whether it worked already or not. Clear the cache on the phone apps sometimes needs to be done, which is a little more difficult (not hard, just a lot of sub sub sub sub menus).

I would still post your updated yaml so others can see the code and it might help them. You could edit and add it to the post with the pics above so it is all together.

lpt2007 · August 6, 2021, 5:42pm

Working card

3_gauge

type: horizontal-stack
cards:
  - type: custom:canvas-gauge-card
    entity: sensor.bathroom_esp_sensor_temperature
    card_height: 57
    background_color: '#FFF'
    gauge:
      type: radial-gauge
      borderShadowWidth: 0
      borderOuterWidth: 0
      borderMiddleWidth: 0
      borderInnerWidth: 0
      width: 100
      height: 100
      minValue: 0
      maxValue: 100
      startAngle: 90
      ticksAngle: 180
      valueBox: false
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 80
          to: 100
          color: rgba(200, 50, 50, .75)
      colorPlate: '#ddd'
      borders: false
      needleType: arrow
      needleWidth: 2
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear
  - type: custom:canvas-gauge-card
    entity: sensor.bathroom_esp_sensor_temperature
    card_height: 57
    background_color: '#FFF'
    gauge:
      type: radial-gauge
      borderShadowWidth: 0
      borderOuterWidth: 0
      borderMiddleWidth: 0
      borderInnerWidth: 0
      width: 100
      height: 100
      minValue: 0
      maxValue: 100
      startAngle: 90
      ticksAngle: 180
      valueBox: false
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 80
          to: 100
          color: rgba(200, 50, 50, .75)
      colorPlate: '#ddd'
      borders: false
      needleType: arrow
      needleWidth: 2
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear
  - type: custom:canvas-gauge-card
    entity: sensor.bathroom_esp_sensor_temperature
    card_height: 57
    background_color: '#FFF'
    gauge:
      type: radial-gauge
      borderShadowWidth: 0
      borderOuterWidth: 0
      borderMiddleWidth: 0
      borderInnerWidth: 0
      width: 100
      height: 100
      minValue: 0
      maxValue: 100
      startAngle: 90
      ticksAngle: 180
      valueBox: false
      majorTicks:
        - '0'
        - '10'
        - '20'
        - '30'
        - '40'
        - '50'
        - '60'
        - '70'
        - '80'
        - '90'
        - '100'
      minorTicks: 2
      strokeTicks: true
      highlights:
        - from: 80
          to: 100
          color: rgba(200, 50, 50, .75)
      colorPlate: '#ddd'
      borders: false
      needleType: arrow
      needleWidth: 2
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear