Created an Ecobee card to mimic the design of the ecobee.
6 Likes
Ah this looks perfect… having an issue though trying to use it…
Getting dimmed out values and null in the sidebar thing. Not seeing any errors popup, but the temp is correct.
what is the value under your climate.xxx attribute: target_temp_high and target_temp_low? I linked auto mode to those settings.
Also just to verify are you running the Ecobee in auto mode?
Thanks for sharing this - super excited for it! Not getting any rendering on my side, but as you mentioned I think it’s because my target_temp_high and target_temp_low are both null. I live in Seattle, WA and most folks here don’t have air conditioning (it gets hot for maybe a week or two in the summer). So I don’t have Auto mode - I have only Heat or Off.
hmm Im in Canada… I am using heat as shown in my screenshot. When in heat mode target_temp goes null and is expected. In heat mode it looks at climate.xx.attributes.temperature
I am running an ecobee3 this is what my climate.home looks like:
fan_min_on_time: 0
operation: idle
away_mode: off
fan: off
hold_mode: temp
operation_list: auto,auxHeatOnly,cool,heat,off
temperature: 19.4
fan_list: auto,on
operation_mode: heat
climate_mode: Home
fan_mode: auto
max_temp: 35
current_temperature: 20.2
supported_features: 3575
min_temp: 7
friendly_name: Home
aux_heat: off
target_temp_low: null
actual_humidity: 64
target_temp_high: null
climate_list: Away,Home,Sleep
do you mind sharing yours?
updated the ecobee-card.css on github to color the font white as default. Line #6 color: #ffffff
I am running an ecobee3 as well:
current_temperature: 68
min_temp: 45
max_temp: 95
temperature: 68
target_temp_high: null
target_temp_low: null
fan_mode: auto
fan_list: auto,on
operation_mode: heat
operation_list: auto,auxHeatOnly,cool,heat,off
hold_mode: null
away_mode: off
aux_heat: off
actual_humidity: 58
fan: off
climate_mode: Home
operation: idle
climate_list: Away,Home,Sleep
fan_min_on_time: 0
friendly_name: Thermostat
supported_features: 3575
update your ecobee-card.js and ecobee-card.css with the changes on my github.
make sure you entered the right entity in lovelace-ui.yaml
my example was
- type: custom:ecobee-card
entity: climate.home
I believe yours will be
- type: custom:ecobee-card
entity: climate.thermostat
but you might need to verify that in the dev-state page on homeassistant
I updated the ecobee-card.js and ecobee-card.css on github. Should fix up automatic setpoints showing as null. Coloring improvements and other cleanup of the ui to further look like the ecobee
Keep getting custom element doesn’t exist: ecobee-card
I have my ecobee-card.css and .js file in www/custom-ui
this is my lovelace yaml file
title: Home
resources:
- url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.1.2
type: js
- url: /local/custom_ui/ecobee-card.js
type: js
# This file was automatically generated by lovelace_migrate.py
# https://github.com/dale3h/python-lovelace
views:
- title: Home
cards:
- type: custom:ecobee-card
entity: climate.thermostat
Looks like this for me.
Nice one, looks really good!
how did you add it to lovelace?
This happens to me as well, where no CSS is being applied and it only shows a vertical stack of data. You wouldn’t happen to be using Firefox, would you? This happens to me in Firefox, but it renders appropriately in Chrome. There may be a compatibility issue in the CSS.
I’m using Chrome.
Another thing to try would be removing / moving around other cards in your view. I found that this impacted rendering for me. There may be some sort of conflict with styling between cards.
Thanks @jknoflook! Consider adding a tracker to your repo so you can bump the versions and folks can easily upgrade. Here’s an example:
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.