Add transparent background config option

[sstefanowski]

This thermostat looks awsome. I tried to use it but has minor issue - It's not a bug - just useful extension maybe...

Can we have an option to make it "transparent" - just control to control opacity?

I'm asking as I'm using picture backgrounds in my current thermostat controls (overriding background and unfortunately your control is not transparent and..... I cannot figure out which CSS to override - hmmm.... maybe you could just suggest, which CSS style to override (and how) to make it transparent? (I'm using card-mod from thomasloven to override CSS styles)

Please see the two attachments showing the options: a) standard thermostat card (with overwritten CSS - background) b) your version without transparency

I guess you know what I want to achieve :)

Maybe size control would be also nice-to-have, but not necessarily :)

Anyway, good job!

[ciotlosm]

Can you please post a sample config for your card setup so I can test when getting to implementing this?

[sstefanowski]

Sure....

Just install card-mod from thomasloven and use "style" modificator.

BTW. To make your thermostat transparent I guess... just some CSS style need to be overriden (just like ha-card.background below), but I cannot figure out, what style is controling the circle. I tried to inspect using Chrome DevTools but I was unable to find it quickly - do you know?

This is my config. I just changed the type of the card to your (custom:....).

    entity: climate.nnnnnnnnnnnn
    name: ' '
    style: |
      ha-card {
        background: url("/local/nnnnnnnn.jpg") center no-repeat;
      }
    theme: Dark - Blue/Purple
    type: thermostat

Also.... when I was inspecting CSS I think I found that background circle may change colors depending on the Thermostat state (on, off, heating, cooling) so when we have transparent background it would be nice to change the colors of the numbers or icons (instead of background).

[ciotlosm]

@sstefanowski the css is here: https://github.com/ciotlosm/lovelace-thermostat-dark-card/blob/master/src/thermostat-dark-card.ts#L184

You might try (until I get to testing) to redo:

      ha-card svg.dial {
        --thermostat-off-fill: #555;
        --thermostat-idle-fill: #222;
        --thermostat-path-color: rgba(255, 255, 255, 0.3);
        --thermostat-heating-fill: #e36304;
        --thermostat-cooling-fill: #007af1;
        --thermostat-path-active-color: rgba(255, 255, 255, 0.8);
        --thermostat-path-active-color-large: rgba(255, 255, 255, 1);
        --thermostat-text-color: white;
      }

To achieve color on numbers & icons you might try:

   ha-card .dial--state--off .dial_ticks {
        fill: var(--thermostat-off-fill);
      }

   ha-card .dial--state--off .dial__lbl {
        fill: var(--thermostat-off-fill);
      }

Update: The parameter below does not work properly. You can try it, but don't expect good results

There is also one undocumented sizing parameter diameter:

entity: climate.living
type: 'custom:thermostat-dark-card'
diameter: 400

See https://github.com/ciotlosm/lovelace-thermostat-dark-card/blob/2362a1e8498207d692d62d453f9c8d22d5c3db92/src/thermostat-dark-card.ts#L114

[sstefanowski]

Thanks for all hints. I'm nearly there. This is what I achieved:

And I guess you don't have to deal with transparency if there is good setup with card-mod (My current config on the bottom of the page).

Now, I think there are still issues. I'm using climate devices integrated via TuyaSmart integration. Unfortunatelly, this is just a heater iwth single HVAC mode "off". Here are all attributes available:

min_temp: 5
max_temp: 40
target_temp_step: 0.5
current_temperature: 20
temperature: 16
friendly_name: Sypialnia
supported_features: 1

and my Tuya climate devices have just two states:

• "unknown" when the device is turned-on (alternative integration called Tuya-Custom calls this state "heat_cool")

• "off" when the device is turned off.

The problems are:

1. I'd like to change colours of the ico_thermo (or dial__ticks) when the device is turned off. Unfortunately, the colours do not change when I turn off the device from Tyua Android App (the regular "thermostat card" detects the change and grey outs the controls). Is this something which cannot be controlled with card-mod but must be controlled by the card?
2. Is class .dial__ticks path.active applicable for ticks on the path between the "current" and "target" temps? If yes, then I was trying to modify the colours of these tick marks and it's not working...

Any help or further suggestions?

Here is my current setup of styles:

    style: |
      ha-card {
        background: url("/local/Sypialnia.jpg") center no-repeat;
      }
      ha-card .dial__shape  {
        opacity: 0
      }
      ha-card .dial--state--idle .dial__ico__thermo  {
        opacity: 1;
        fill: var(--thermostat-heating-fill);
      }
      ha-card .dial--state--off .dial__ico__thermo  {
        opacity: 1;
        fill: var(--thermostat-off-fill);
      }
      ha-card .dial--state--idle .dial__ticks path {
        fill: var(--thermostat-path-color);
      }
      ha-card .dial--state--off .dial__ticks path {
        fill: var(--thermostat-off-fill);
      }
      ha-card .dial .dial__ticks path.active {
        fill: var(--thermostat--heating-fill);
      }

The last issue is... the control (and card) is too wide. The auto-layout of cards can never switch to 4 columns. Can you make it just smaller a bit? Should I leave it here or you want me to open separate issue as "bug"?