Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.56k stars 393 forks source link

Only Half of Linear Gauge appearing in Home Assistant #260

Open wipatters opened 1 year ago

wipatters commented 1 year ago

I love the look and feel of these gauges! I'm using the latest Home Assistant where radials are working great but Linears get cut in half, either the top in a vertical mode or the left in a horizontal. The bottom example is using your own code with my title of "Black Ink". The top example is using a Manual Card. The bottom is using a Grid Card. On my mobile phone, the top displays nicely yet the bottom appears exactly the same (half) Linear

PeterKawa commented 1 year ago

This is the best I can make of it. I fiddled with the width and height values Screenshot from 2022-08-12 01-42-03

Vertical:

type: custom:canvas-gauge-card
entity: sensor.buienradar_temperature
gauge:
  type: linear-gauge
  width: 160
  height: 161
  units: °C Home
  title: null
  minValue: -40
  maxValue: 50
  majorTicks:
    - '-40'
    - '-30'
    - '-20'
    - '-10'
    - '0'
    - '10'
    - '20'
    - '30'
    - '40'
    - '50'
  minorTicks: 5
  strokeTicks: true
  ticksWidth: 10
  ticksWidthMinor: 5
  highlights:
    - from: -40
      to: 0
      color: darkblue
    - from: 0
      to: 50
      color: orangered
  colorMajorTicks: '#ffe66a'
  colorMinorTicks: '#ffe66a'
  colorTitle: '#eee'
  colorUnits: '#ccc'
  colorNumbers: '#eee'
  colorPlate: '#2465c0'
  colorPlateEnd: '#327ac0'
  borderShadowWidth: 0
  borders: false
  borderRadius: 7.5
  needleType: arrow
  needleWidth: 6
  animationDuration: 2000
  animationRule: linear
  colorNeedle: white
  colorNeedleEnd: white
  colorBarProgress: lightblue
  colorBar: darkgrey
  barStroke: 8
  barWidth: 4
  barBeginCircle: false
  valueBox: false

For Horizontal I only changed this:

width: 161
height: 160