Card width does not seem to work | gauge disappears

[xbmcnut]

Hi there,

Love this card so thank you for making it.

I had a gauge for my Weber iGrill configured in panel mode in its own LL tab with very large height and width so my wife could see it across the room. LL would switch to this tab when the bluetooth thermometer comes online. Lately, don't know when, the gauge disappeared and will only display if I reduce the height/width to 220/220 or something similar.

This is what I had working in panel mode. I'm running under HACS with version 0.4 sitting on HA 0.111.3

entity: sensor.igrill_thermometer
font_size: 1em
gauge:
  animatedValue: true
  borders: true
  colorBorderInner: '#111'
  colorBorderInnerEnd: '#333'
  colorBorderMiddle: '#222'
  colorBorderMiddleEnd: '#111'
  colorBorderOuter: '#333'
  colorBorderOuterEnd: '#111'
  colorNumbers: '#ccc'
  colorPlate: ''
  colorTitle: '#f5f5f5'
  colorUnits: '#f5f5f5'
  height: 720
  highlights:
    - color: 'rgba(0, 68, 255, .75)'
      from: 5
      to: 38
    - color: 'rgba(4, 205, 24, .75)'
      from: 38
      to: 41
    - color: 'rgba(239, 93, 13, .75)'
      from: 41
      to: 45
  majorTicks:
    - '5'
    - '10'
    - '15'
    - '20'
    - '25'
    - '30'
    - '35'
    - '40'
    - '45'
  maxValue: 45
  minValue: 5
  minorTicks: 5
  startAngle: 45
  strokeTicks: true
  ticksAngle: 270
  title: Spa Temp
  type: radial-gauge
  units: °C
  valueBox: true
  valueDec: 1
  valueInt: 2
  width: 600
type: 'custom:canvas-gauge-card'

[Olen]

Pretty sure this is related to #34
Sometihng odd is going on with the CSS bit of this card sometime around HA 110 or 111.

[Olen]

You can probably see it if you go into developer mode in your browser and "inspect element" of the gauge. I guess you will see that the

tags have the correct width/height in the actual tag, but looking at the css for the tags shows another width/height (actually it should probably be the width/height for the first canvas-gauge in the dahsboard).

I believe you can solve this exact issueif you move this gauge on a dedicatd dashboard (lovelace supports more than one dahsboard now) instead of a tab in another dashboard.

[xbmcnut]

Thanks. I tried moving my gauge onto its own tab with no other entities and that does not work. Let me try a complete new dashboard as I have not tried that.

[xbmcnut]

Sorry, tried new dash and does not work there either. Not much of a coder too sorry so unsure how to use the inspector to find what I'm looking for.

[xbmcnut]

I accidentally dragged some code around when trying to copy the problem code using the inspector and the bloody gauge popped back full size. Don't know what I did. Displays properly now in FF and Chrome but not in the Android app I use on my wall tablet. The code block I messed with is below and trying to me doing something, the width was reporting as 200px.

[helto4real]

Good to hear it all worked out. Yea I seen problems in the IOS app displaying gauges too

[xbmcnut]

Wish I knew what I did! 🥴

[GHSTUDIO1]

did you ever figure this out....I'm trying to do a display for a Maverick et-732 thermometer :)

[GHSTUDIO1]

There is an error in the code.

In /config/www/guage-card.js, there is a statement

}

  getCardSize() {
    return 1;
  }

which says essentially, the card size is one unit height. Change that 1 to a 2. It's not the right answer, but it's an effective temporary work around. It probably will effect all gauges which will now take 2 height units. Hopefully the developer will figure out the correct entry for getCarSize.

[xbmcnut]

did you ever figure this out....I'm trying to do a display for a Maverick et-732 thermometer :)

I moved to custom:flex-horseshoe-card which solved my requirement for a super large thermometer display.

[Olen]

I made it work here by editing canvas-gauge-card.js and removing the "width"-definitions from the CSS for #cardroot and #container around line 250 in the js-file.

         #cardroot {
-          width: ${this._gaugeWidth}px;

         #container {
-          width: ${this._gaugeWidth}px;

(Remove the two lines starting with "-")

There is also a typo in the code (see here: 41db5d5) and you can find it by searching for widht and replacing it with "width"
You need to "shift reload" before the new JS is replaced.
At least my gauges are now behaving correctly.

[helto4real]

Thanks I will check this out and deploy new version

[helto4real]

Made new version now, can anyone confirm it works?