search

custom-cards / canvas-gauge-card

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

PR #5 messed up previous styling and card styling attributes aren't documented #10

Closed rpitera closed 4 years ago

rpitera commented 5 years ago

Had a beautiful compass going and although it wasn't centered it still looked great. Updated to the latest version via HACS and now I have a white background. Not sure how to change the background of the card back to the previous transparency because there's no documentation on the new card styling attributes. Could use some help. I mean, I appreciate that it's centered now, but the white bg is killing me.

Tried using:

style:
  background-color:

with both a color name and with rgba coloring, neither worked.

      - type: custom:canvas-gauge-card
        entity: sensor.wind_compass
        gauge:
          type: "radial-gauge"
          height: 250
          width: 250
          minValue: 0
          maxValue: 360
          majorTicks: ["N", "NE", "E", "SE", "S", "SW", "W", "NW", "N"]
          minorTicks: 22
          ticksAngle: 360
          valueBox: false
          startAngle: 180
          strokeTicks: false
          highlights: false
          colorPlate: "rgba(0, 0, 0, .1)"
          colorMajorTicks: "#447BC3"
          colorMinorTicks: "#ddd"
          colorNumbers: "#447BC3"
          colorNeedle: "rgba(240, 128, 128, 1)"
          colorNeedleEnd: "rgba(255, 0, 0, .9)"
          valueTextShadow: false
          colorCircleInner: "#000"
          colorNeedleCircleOuter: "#ccc"
          needleCircleSize: 1
          needleCircleOuter: false
          animationRule: "linear"
          needleType: "line"
          needleStart: 75
          needleEnd: 99
          needleWidth: 3
          borders: true
          borderInnerWidth: 0
          borderMiddleWidth: 0
          borderOuterWidth: 5
          colorBorderOuter: "#447BC3"
          colorBorderOuterEnd: "#447BC3"
          colorNeedleShadowDown: "#222"
          borderShadowWidth: 0
          animationDuration: 1500
rpitera commented 5 years ago

For the moment, I have reverted to the previous release in hopes that this will be addressed at some point. I don't think a custom card should dictate a background color unless that attribute can be overridden by the user.

chipriley commented 5 years ago

I second @rpitera ‘s sentiments. The white is horrendous.

rpitera commented 5 years ago

I'm not sure why a background for the card was necessary as the gauge faces have their own background attribute, but if so at least document the attribute it so it can be adjusted to the user's liking.

jrnhrmn commented 5 years ago

I changed line 70 in canvas-gauge-card.js from: background-color: white !important; to background-color: var(--paper-card-background-color, white); Works fine for now

rpitera commented 5 years ago

When I tried that it didn't seem to work but maybe I didn't clear the cache enough. I suppose I could try it again but I'd rather stick with official releases if possible and see this resolved.

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. You can now use yaml setting background_color to set the color of the background. See docs!