Thanks! I added the version tracker.
Found a few CSS issues. Cleaned a few things up, rendering has been tested on firefox, opera, edge, and chrome on windows 10, opera, samsung internet and chrome on android.
Firefox had to follow the guide in the FAQ at https://www.home-assistant.io/lovelace
Hopefully I’ve got that fixed.
same issue here - running latest chrome version … I tried emptying the cache and running thru incognito mode too with the same result. I get the same stacked icons in the IOS app too.
I’m still figuring our lovelace, so this may be a dumb question. I have two ecobees. I got this working pretty easily, but the card does not seem to support title, which I kinda get. But of course I need to know which one is which, so what would be the best way to add the name of the thermostat to this card?
I get the same thing as well, using chrome on both my PC and phone.
Maybe copy this guys code: Lovelace: Thermostat card (BETA)
It worked in my configuration but it lacks in features.
He doesn’t use an external CSS file, I think there’s something with the CSS not being connected in hassio.
I’m using this card and it works fine with Chrome on my PC and my phone. There is an ecobee-card.css file that you have to put in the same folder as the ecobee-card.js file. It’s not mentioned in the instructions.
Thanks for you efforts. Worked great on HASSIO once I figured out the js and css files are to be put in “/config/www/custom_ui”. Cheers!
Yeah I did that and made sure the CSS path in the JS code matched it’s location. I think if you have several custom cards in lovelace there is a conflict within CSS files. None of my custom cards with external CSS files work…
I am using several custom cards, but the ecobee card is the only one with an external .css file. Maybe that’s why it works.
Are you using it directly from the /config/ui-lovelace.yaml or do you have it in an include file?
I have it called from an include file, this is what I have under /config/ui-lovelace.yaml :
title: Home Control Panel
resources:
- url: /local/tracker-card.js
type: js
- url: /local/card-tools.js
type: js
- url: /local/card-modder.js
type: js
- url: /local/compact-custom-header.js
type: module
- url: /local/state-switch.js
type: js
- url: /local/layout-card.js
type: js
- url: /local/thermostat-card.js?v=1
type: module
- url: /local/custom_ui/ecobee-card.js
type: js
views:
- !include lovelace/Main.yaml
- !include lovelace/doors.yaml
- !include lovelace/lights.yaml
- !include lovelace/alarm.yaml
- !include lovelace/remote.yaml
- !include lovelace/settings.yaml
- !include lovelace/testing.yaml
This is what I have in my lovelace/Main.yaml file:
title: Main
icon: mdi:weather-cloudy
type: vertical-stack
cards:
- type: weather-forecast
entity: weather.dark_sky
- type: horizontal-stack
cards:
- type: custom:ecobee-card
title: Ecobee
entity: climate.my_ecobee3
- type: custom:thermostat-card
title: Guest Room
entity: climate.stelpro_stzw402_electronic_thermostatI don’t use any include files for Lovelace. In /config/www/custom_ui I have
(I’m not actually using card-modder at the moment)
and my /config/ui-lovelace.yaml file contains
resources:
- url: /local/custom_ui/dark-sky-weather-card.js?v=7.4
type: module
- url: /local/custom_ui/popup-card.js?v=2
type: js
- url: /local/custom_ui/ecobee-card.js
type: js
- url: /local/mini-graph-card-bundle.js?v=0.2.2
type: module
- url: /local/custom_ui/slider-entity-row.js?v=1.0
type: js
and then later on - not in a vertical or horizontal stack, not sure if this makes any difference, but you could try taking it out of the stack in your instance -
- type: custom:ecobee-card
entity: climate.main_floor
I noticed you have
title: Ecobee
as an option under your custom ecobee card, and that isn’t given as an option in the instructions. Perhaps take that out and see if it makes any difference?
OK so by moving the code directly into /config/ui-lovelace.yaml rather than having it in an include worked.
Great, glad you got it to work!
Is it possible to add a name to the cards. I have two ecobee a and would love to use this but need to be able to determine which one is which.
Edit:
I’m no css or .js developer, but maybe just an option to display friendly name? It seems like it would be pretty easy. I’ve looked at the code a bit trying to guess and see if I could figure it out, I “kinda” see what’s happening behind the scenes, but not enough to add friendly name.
I’m not opposed to trying to figuring it out. Anyone have any good starting points for this sort of stuff?
Anybody here know how to change the background color of this card? It’s awesome and I love it but it doesn’t go with my HA theme.
I’ve changed all the Black hex color codes in the CSS file but it doesn’t do anything. I’ve also changed the rgba code as well at the end of the file too.
I’d love to actually be able to use the slider to change the temp, and also to be able to display the name of the thermostat
Mine doesn’t work anymore…
Yeah same here, this card doesn’t seem to work properly anymore with the latest update.