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: https://github.com/custom-cards/canvas-gauge-card/pull/37/commits/41db5d559c4b93db5b4bfecbfc1b2ae5d8def6d9) 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?

[Olen]

I don't think fixing the typo alone is enough to fix the issue with the width, unless that fix in the typescript file trickle down to multiple other fixes in the generated .js (I'll look at the new version later)

[GHSTUDIO1]

I can confirm that it doesn't work. Here's my lovelace configuration file....only part of the gauge shows. (pick the sensor of your choice to test it). Note: if I make width/height 200, the whole gauge shows.

views:
  - cards:
      - entity: sensor.acurite_temperature
        font_size: 1em
        gauge:
          animatedValue: true
          borders: false
          colorBorderInner: '#111'
          colorBorderInnerEnd: '#333'
          colorBorderMiddle: '#222'
          colorBorderMiddleEnd: '#111'
          colorBorderOuter: '#333'
          colorBorderOuterEnd: '#111'
          colorNumbers: '#ccc'
          colorPlate: ''
          colorTitle: '#f5f5f5'
          colorUnits: '#f5f5f5'
          height: 400
          maxValue: 350
          minValue: 50
          minorTicks: 5
          startAngle: 45
          strokeTicks: true
          ticksAngle: 270
          title: Grill Temp
          type: radial-gauge
          units: °F
          valueBox: true
          valueDec: 1
          valueInt: 2
          width: 400
        type: 'custom:canvas-gauge-card'

[Olen]

I really don't understand why the width specified in the div-tag and the one specified in the CSS for the same element are different. They seem to use the exact same variable in the TS-file. It almost looks like the CSS-part of the card is inherited from the first card, and overwritten after the card is initialized.

[GHSTUDIO1]

I believe the size of the canvas-gauge panel is determined the very first time you open canvas-gauge....and once you've done that, you can't increase (or decrease) the size of the meter panel even if you put it on a new page with larger height/width values. I did a complete reinstall for other reasons, and when I started the script above, the panel was larger than on the old install...and the full meter displayed. Trying to make it larger resulted in part being cut off because the panel size is now fixed. I then copied the configuration to a new page.....increased both height/width to 800 and tried the new page....the meter was cut off.

Clearly there is a way to get a panel resized.....vertical stack does it......so it's just a matter of figuring out where home assistant stores the size value and what triggers it to re-size the panel.

[Olen]

The CSS-part of a card:

And the DIV-tags:

Watch how #cardroot and #container has width: 220px in the CSS but the container div has `width="120" The cardroot-div does not specify a width.

I believe this happens because I have multiple canvas-gauges on the page, and some are 220 wide:

      - card_height: 225
        type: 'custom:canvas-gauge-card'
        entity: sensor.foo
        gauge:
          height: 220
          width: 220

(...)

while other cards are narrower:

          - type: 'custom:canvas-gauge-card'
            card_height: 223
            card_width: 120
            font_size: 1em
            shadow_top: 20
            entity: sensor.bar
            gauge:
              type: linear-gauge
              width: 100
              height: 200
(...)

And for some reason the narrow cards inherit the width from the wide cards, but only in the CSS, not in the div tag.

[GHSTUDIO1]

I have two pages configured with different gauge height/widths. I open the js file and make a change...any change....and save it. I go back and open one of the pages. That sets the panel size for all pages. If I then open the second page, the panel size remains the same as the first page. If I go back and change the JS again and save it again....and now open the other page first.....the panel size in that page is the new fixed size for all pages and when I open the other page...it still has the panel size from the first page.

I am making changes (like changing a small w to capital W in pageWidth) in the line that starts with: CANVAS-GAUGE-CARD \n%c although I'm not sure it matters.....if the js file changes, the panel size is recalculated....if it doesn't change then whatever the panel size was the first time the gauge panel was called is the panel size.

Wish I understood how to fix this...but I actually don't do much coding. I think I've isolated the problem......and actually given a temporary fix (set whatever size you want and make a change in the js file).

Looking forward to the fixed version......

Olen...it's picking up the panel size from the first gauge it sees.....that's consistent with what I say above. In your case, I guess it's seeing the smaller gauge first. Try changing the order of your page....change the js and retry. I bet it works :)

[Olen]

I know it does that (I have noted it in another comment). I am just gathering as much data as possible. I read somewhere something about a similar issue being related to the "clone Node" function. https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

But I don't know enough javascript to pinpoint the exact issue.

[GHSTUDIO1]

After more research, the issue is a common one, the browser caches the style sheet CSS. Easily demonstrated....change the height/width of the chart, open the page....see the panel too large or small......hit ctl/alt/R at the same time to reset the cache and you will get the right style sheet. There are many suggested solutions....which involve changing the style enough that the browser thinks it's new and gets the new version. Many add time to the code...because every time you call the page, the time will be different.

Perhaps the documentation could be updated to talk about how to change width/height and see the changes (hit ctl/alt/r)....once they are changed, the new style sheet will remain until someone changes something. I haven't tried changing a color....that might/might not cause a new style sheet to be cached..but ctl/alt/r would solve that as well.

Alternatively, the code could be changed so that every time the page is called, a new style sheet will be called as well...which will slow down the system. There is a trade off.

[Olen]

That can't be the issue, as the css is generated in the card, and part of the shadow root, not an external file that is loaded. Also look at my screenshots a few comments up. The css in the actual generated code for the card is wrong.

[GHSTUDIO1]

I tried ctl/alt/r after making a change and it worked…..panel expanded or contracted appropriately. Maybe it covers up the real issue….but it does work.

[Olen]

It might work if you only have one card on a tab, but if you have multiple cards with different sizes it won't help.

[3mta3]

Glad to see this is a known issue - considering it's 1.5 yrs old, any hope of a fix or are we stuck with the 'inherited' width/height issue? Solutions here don't appear to solve the issue with multiple gauges in the same dashboard.

[Dominik-1980]

I have the same problem with the card sizes...

I have 3 gauges on one page and all 3 sizes are changing depending on the first gauge in the yaml...

[tm24fan8]

Add another year, and I'm having this issue as well...none of the workarounds mentioned in this issue solve it for me either.

[shtrom]

I might have found a hackish workaround for this issue in https://github.com/custom-cards/canvas-gauge-card/issues/34#issuecomment-1500046478

[helto4real]

Might be fixed in #58 please try and report back!