Custom Widget: Ecobee thermostat

Thanks for all of this, but my question is how do I use that? Currently I have the ecobee bindings from the bindings section and working on basic ui, but I’d prefer this and I’m unsure how to incorporate this into my sitemap.

thank you

Why is mine like this?

Also when I change settings from the HABPanel it changes on the thermostat. But when I change temperature on the thermostat it doesn’t update on the HABPanel. What could be causing that?

I think there is a refresh interval in the ecobee config that sets it to
read every few min. I’m guessing you have to wait that out?

The now its correct its showing 72 and holding but the slider is still at 74.

degree ecobee
Also does anyone know why there is a “A” with a arrow above it before the degree symbol?

Yes, it’s a problem in the widget itself. I’ve made some update, if the op doesn’t mind. Now, it use the “UseCelcius” properly, and doesn’t display bad info. Also, the slider for cool and heat have been modified to have dynamic value. You need to set the min and max value for heat and cool in the widget settings. On auto, it use the min value of cool and the max value of heat. These value should match the value from your ecobee settings. Using these settings instead of fixed value prevent the problem that using Celcius, you get a NaN in the slider because the value aren’t converted to Celcius.

Now, the only thing I can’t get working is the display decimal. I’ve changed the step of the slider for 0.5 and it still only display full number. Since I’m using celcius, I want 0.5 step.

Modification to the slider:

<div ng-init="heatslider = {
              value: itemValue(config.user_heat),
              options: {
                floor: (config.heat_low),
                ceil: (config.heat_high),
                step: 1,
                hideLimitLabels: true,
                vertical: true
              }
            };"></div>
<div ng-init="coolslider = {
              value: itemValue(config.user_cool),
              options: {
                floor: (config.cool_low),
                ceil: (config.cool_high),
                step: 1,
                hideLimitLabels: true,
                vertical: true
              }
            };"></div>
<div ng-init="autoslider = {
              min: itemValue(config.user_cool),
              max: itemValue(config.user_heat),
              options: {
                floor: (config.cool_low),
                ceil: (config.heat_high),
                step: 1,
                hideLimitLabels: true,
                vertical: true
              }
            };"></div>

Modification to the overall display of C or F with the  fix:

			<td class="main-temperature-sign">
  		  <div ng-if="itemValue(config.use_celsius) == 'ON'"> &nbsp;°C</div>
  		  <div ng-if="itemValue(config.use_celsius) == 'OFF'"> &nbsp;°F</div>
      </td>
    </tr>
    <tr><td colspan=2>
      <div ng-if="itemValue(config.running_event) == 'hold'">
        <table class="heatcool-value-table">
           <tr>
             <td class="heatcool-value-table-text">
               <div ng-if="itemValue(config.hvac_mode) == 'heat' && itemValue(config.use_celsius) == 'ON'">
                 <font color="#FFAA00">{{'%.0f' | sprintf:itemValue(config.desired_heat)}}°C</font> and holding
               </div>
               <div ng-if="itemValue(config.hvac_mode) == 'heat' && itemValue(config.use_celsius) == 'OFF'">
                 <font color="#FFAA00">{{'%.0f' | sprintf:itemValue(config.desired_heat)}}°F</font> and holding
               </div>
               <div ng-if="itemValue(config.hvac_mode) == 'cool' && itemValue(config.use_celsius) == 'ON'">
                 <font color="#0DB9F0">{{'%.0f' | sprintf:itemValue(config.desired_cool)}}°C</font> and holding
               </div>
               <div ng-if="itemValue(config.hvac_mode) == 'cool' && itemValue(config.use_celsius) == 'OFF'">
                 <font color="#0DB9F0">{{'%.0f' | sprintf:itemValue(config.desired_cool)}}°F</font> and holding
               </div>
               <div ng-if="itemValue(config.hvac_mode) == 'auto' && itemValue(config.use_celsius) == 'ON'">
                 <font color="#0DB9F0">{{'%.0f' | sprintf:itemValue(config.desired_cool)}}°C</font> -
                 <font color="#FFAA00">{{'%.0f' | sprintf:itemValue(config.desired_heat)}}°C</font> and holding
               </div>
               <div ng-if="itemValue(config.hvac_mode) == 'auto' && itemValue(config.use_celsius) == 'OFF'">
                 <font color="#0DB9F0">{{'%.0f' | sprintf:itemValue(config.desired_cool)}}°C</font> -
                 <font color="#FFAA00">{{'%.0f' | sprintf:itemValue(config.desired_heat)}}°C</font> and holding
               </div>
             </td>
             <td>
               <button class="resume-schedule"ng-click="sendCmd(config.schedule, 'resume')">
                 <i class="glyphicon glyphicon-remove" id="resume-schedule"></i>
               </button>
             </td>
          </tr>
        </table>
      </div>
    </td></tr>  
    <tr><td class="remote-sensor" colspan=2>
       <div ng-if="itemValue(config.remote_sensor_occupied) == 'ON' && itemValue(config.use_celsius) == 'ON'">
          {{config.remote_sensor_name}}: {{'%.0f' | sprintf:itemValue(config.remote_sensor_temp)}}°C
       </div>
      <div ng-if="itemValue(config.remote_sensor_occupied) == 'ON' && itemValue(config.use_celsius) == 'OFF'">
          {{config.remote_sensor_name}}: {{'%.0f' | sprintf:itemValue(config.remote_sensor_temp)}}°F
       </div>
       <div ng-if="itemValue(config.remote_sensor_occupied) != 'ON' && itemValue(config.use_celsius) == 'ON'">
          <font color="#777">{{config.remote_sensor_name}}: {{'%.0f' | sprintf:itemValue(config.remote_sensor_temp)}}°C</font>
       </div>
      <div ng-if="itemValue(config.remote_sensor_occupied) != 'ON' && itemValue(config.use_celsius) == 'OFF'">
          <font color="#777">{{config.remote_sensor_name}}: {{'%.0f' | sprintf:itemValue(config.remote_sensor_temp)}}°F</font>
       </div>

Ecobee.widget.json (13.0 KB)

Hi @Nodiaque,

It looks like you branched off @Signal11’s original work, but since then he updated a version and I built upon that.

I attempted to do something similar to you, do you want to try and merge them into one solution?

Sure, I didn’t found it in the widget gallery so that’s why I started from that. You should add the tag in the post so we can see it in the gallery

I think this post already has a widgetgallery tag, do I have to add it to my reply somehow?

To be honest I don’t know how this tagging work for the gallery, I just read fast on how it work

Do you have a thread for that? Even my version doesn’t show, you could start a new thread

I think it links only to the original post.
Looks like its up to @Signal11 to update his post with the latest version

-SergeD

Well, we could also fork into a new thread with our version? I’ll have to check yours, unsure what you did yet (haven’t had time to check it)

Can you attach the widget file with your reply so I can download it and set it up?

Here is a link to my version (build on @Signal11’s 2nd version)

Here is a link to @Nodiaque’s version (built on @Signal11’s 1st version)

1 Like

Thanks Man!! Got it working

.

What I’ll work on next is to have fan control and profile like on the ecobee. I’m still unsure if I want that directly on the widget itself or different item. I also want the ability to add other remote sensor and list them when clicking on the widget. I just have much HTML learning to do, haven’t done that since before CSS existed.

I also got to learn how to use a checkbox settings in the ngif condition

I’m working on a quick settings widget to be able to set any of the custom
climates you have created

-SergeD

I have been away from the site for a while, so I’m sorry for any delay in my response. I just downloaded the fix by @RedOranges and it works for me using Fahrenheit as well, so I would suggest everyone use that. Great fix, and I will update the top of this post with that version.

In addition, I would also like to add that I hereby grant permission to anyone to modify, reuse, or incorporate all or any part of any widget I have added to the site for any purpose, whether related to the original widget or not. If people find bugs, feel free to fix them, and create a new thread with any improved version. If you want, you can give me credit, or not, for any parts of any code you re-use, but don’t let a lack of response from me stop anyone from using parts of widgets that work when making anything new.

1 Like