Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only Half of Linear Gauge appearing in Home Assistant #260

Open
wipatters opened this issue Aug 2, 2022 · 1 comment
Open

Only Half of Linear Gauge appearing in Home Assistant #260

wipatters opened this issue Aug 2, 2022 · 1 comment

Comments

@wipatters
Copy link

wipatters commented Aug 2, 2022

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
Copy link

PeterKawa commented Aug 11, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants