custom-cards / canvas-gauge-card

The card makes it possible to use gauges from https://canvas-gauges.com/
173 stars 25 forks source link

Cannot add property borderShadowWidth, object is not extensible #18

Closed volshebniks closed 4 years ago

volshebniks commented 4 years ago

After upgrade to 0.106.0 a have this Error: Cannot add property borderShadowWidth, object is not extensible

bmorgan99 commented 4 years ago

I got the same thing initially, removed all the border* options and got "Custom element doesn't exist: canvas-gauge-card."

volshebniks commented 4 years ago

I'vу temporarily set border = true. It's works without any errors, but I don't like such design.

rpitera commented 4 years ago

@volshebniks - So with the ugly border though, it does still load properly in 0.106.0? I can live with design faults until the card is updated per Thomas comments in #15 as long as I'm still able to use the card.

bmorgan99 commented 4 years ago

I stripped all but the essentials out, cleared the cache and restarted HA but still no love.

aerastov commented 4 years ago

borders: true borderOuterWidth: 0 borderMiddleWidth: 0 borderInnerWidth: 0 borderShadowWidth: 0

helto4real commented 4 years ago

@aerastov , @rpitera can you please test the version by copy the "canvas-gauge-card.js" in the v106fix branch to the correct place in Home Assistant. Make sure that your browser is not caching by clearing cache.

The ugly border can be removed by using:

          borderShadowWidth: 0
          borderOuterWidth: 0
          borderMiddleWidth: 0
          borderInnerWidth: 0

The fix is here (not merged to the master yet, needs testing) https://github.com/custom-cards/canvas-gauge-card/tree/v106fix

helto4real commented 4 years ago

What I did was remove the code that got the error. I really dont need to access the configuration. The reason I did in the first place was to compensate for a bug in gauge code that did not remove borders on borders: false config. There are a fix to remove borders by setting

- type: "custom:canvas-gauge-card"
        card_height: 125
        entity: sensor.memory_use_percent
        gauge:
          borderShadowWidth: 0
          borderOuterWidth: 0
          borderMiddleWidth: 0
          borderInnerWidth: 0
...

I recon people want to get the gauges working again and I will look for a more permanent solution when I get the time... Not making promises.

rpitera commented 4 years ago

@aerastov , @rpitera can you please test the version by copy the "canvas-gauge-card.js" in the v106fix branch to the correct place in Home Assistant. Make sure that your browser is not caching by clearing cache.

The ugly border can be removed by using:

          borderShadowWidth: 0
          borderOuterWidth: 0
          borderMiddleWidth: 0
          borderInnerWidth: 0

The fix is here (not merged to the master yet, needs testing) https://github.com/custom-cards/canvas-gauge-card/tree/v106fix

Simply adding the lines @aerastov suggested worked fine for me, but I wanted to test anyway.

I downloaded the fix version and put it in /www/test/, then I commented out my /community_plugin/ instance in ui-lovelace.yaml and then added a separate line for it in my resources as follows:

- url: /local/test/canvas-gauge-card.js?v=1
  type: module

Unfortunately, it won't load at all and redboxed as "Custom element doesn't exist: canvas-gauge-card." I checked and my perms are fine. Also I verified that I downloaded raw and have a .js file format so no mistake there either.

helto4real commented 4 years ago

@aerastov , @rpitera can you please test the version by copy the "canvas-gauge-card.js" in the v106fix branch to the correct place in Home Assistant. Make sure that your browser is not caching by clearing cache. The ugly border can be removed by using:

          borderShadowWidth: 0
          borderOuterWidth: 0
          borderMiddleWidth: 0
          borderInnerWidth: 0

The fix is here (not merged to the master yet, needs testing) https://github.com/custom-cards/canvas-gauge-card/tree/v106fix

Simply adding the lines @aerastov suggested worked fine for me, but I wanted to test anyway.

I downloaded the fix version and put it in /www/test/, then I commented out my /community_plugin/ instance in ui-lovelace.yaml and then added a separate line for it in my resources as follows:

- url: /local/test/canvas-gauge-card.js?v=1
  type: module

Unfortunately, it won't load at all and redboxed as "Custom element doesn't exist: canvas-gauge-card." I checked and my perms are fine. Also I verified that I downloaded raw and have a .js file format so no mistake there either.

Can you please verify that in the file the following lines are like this: https://github.com/custom-cards/canvas-gauge-card/blob/v106fix/canvas-gauge-card.js#L240-L248

Those lines are commented and was causing the problem. Also make sure you clear cache of the browser. Did you keep rest of the files in the folder? There should be two files in the folder image

Just want to make sure it is the correct file. Thanks in advance.

rpitera commented 4 years ago

File is the same and I did a full cache clear. My problem with it not loading was likely due to missing the minified file gauge.min.js... I'm sorry I forgot about that!

I will test a little later and get back to you - I'm dealing with some ZWave issues at the moment.

helto4real commented 4 years ago

Working copy now published, I changed the build system so the actual js file is in release not in src folder. Also now just need the one file since all dependencies are merged in build.