HABPanel widget: Virtual Thermostat/OnOff Appliance scheduling

Tags: #<Tag:0x00007f6ce94dc468>

(Geo Magadan) #1

Happy holidays to everyone!

I have created a small HABPanel widget to simulate a scheduling interface for Virtual Thermostats and On Off appliances. Most of the parameters can be changed from the widget settings. IMHO it reached the beta phase and I decided to share it.

A word of caution! When I started working on this I had almost zero knowledge about: JavaScript, AngularJS, Xtend/Xbase. Now I am pretty much at the same level, hence it should not be used on your daily system without proper testing.:wink:

The interface is just a proof of concept, but the theme/page arrangement change shouldn’t be a problem for those familiar with the HABPanel custom widgets. I have tested it only on Chrome (desktop), Firefox (desktop) and Chrome (Android), having OH 2.2 runing on a Raspberry Pi 2B. It might not be rendered correctly on small devices/screens.


The schedule data is stored in a JSON object, which is passed to an openHAB item. The JSON is structured using the next model (an example for a virtual thermostat):

{“Target_Temp_1”: {“D1”: {“T0500”: 24,“T0800”: 20},“D2”: {…},…“D7”: {…}},“Target_Temp_2”: {“D1”: {…},…}}

  • Target_Temp_1 - the item which will receive the target temperature
  • D1-D7 - week days
  • Thhmm - time of the day
  • value - target temperature to be set


  • OH 2.2 (should work with all 2.x releases)
  • Eclipse SmartHome Transformation Service (JSonPath)
  • Persistence binding (I am using jdbc + MySQL DB); some small changes are required on the rules files if persistence is not used.

Widget customizable parameters:

  • Scheduler Type: Thermostat or On/Off Appliance
  • Temperature min, max, step, unit and default target temperature
  • Time hour and minute step
  • Item that stores the schedule
  • Item that contains the operating mode (manual, automatic …); currently the running modes are hardcoded in OHScheduler.js (OHSFactory)
  • Option to allow target temperature (temporary) change from the Status view if operating mode is not MANUAL.

There is only one parameter that needs more attention: the Items parameter. This parameter contains an array of objects defined as follows:

[{“setItem”: “TargetItem”, “label”: “Item Label”, “readItem”: “ReadItem”}, {…}]

Items object properties:

  • setItem: this is the item that will be changed on execution (e.g. the item that stores the target temperature or the appliance switch state)
  • label: the object/item label that will be displayed on the widget
  • readItem: used only for virtual thermostat; current temperature item

Few words regarding the rules:

  • The rule that parses the JSON containing the schedule is executed using a cron set to fire each minute. Additionally the rule will be fired if the item that stores the JSON is updated or if the operating mode item changes (for those I used the persistence binding as currently there is no way to see what triggered the rule).
  • To avoid unnecessary CPU cycles the schedule processing will be put to sleep using timers. Here is a small difference between the thermostat (HVAC) rules and the OnOff ones.
  • Changes are sent on a “queue” item (HVAC_Queue / OnOff_Queue)

For HVAC: the code parses the JSON schedule and sets the current target temperature, if none set. Then it determines the next change in schedule. If multiple items share the same day-time pair then those are added in the queue item, along with the new target temperature and then it sleeps until next change should occur. Once the timer expires the new values are set and the queue is populated with the next change.

OnOff: is built on the same model. The difference is the OnOff schedule model contains only the time when the switch item should be turned ON and the ON duration. The queue is used again, but this time it will trigger the OFF state.

I have uploaded the following files:

  • OHScheduler.widget.json - the widget that should be imported in HABPanel
  • OHScheduler.js - the JavaScript that does the heavy lifting for the above widget (used lots of factories as initially I wanted to split it in multiple files/controllers).
  • OHScheduler.css , OHScheduler.svg - resources used by the widget
  • vis.min.js - VisJS visualization library
  • angular-vis.js - AngularJS directive module for VisJS components
  • OHScheduler.items - sample items for both virtual thermostat and off appliances (it contains also the array of objects that should be used in the widget configuration with those items)
  • OHSchedulerHVAC.rules - rules file for virtual thermostat
  • OHSchedulerOnOff.rules - rules file for OnOff appliances

Versions (since this is a BETA release, only the latest version will be available for download):

The js, css and svg resources (habpanel_resources.zip) should be stored in “/static/habpanel/scheduler/”, where /static represents the <openhab_config>/html folder (e.g. for apt-get install: static = /etc/openhab2/html).

What is missing:

  • [Fixed in Beta v0.2] Widget refresh if the value changes for any of the used items (e.g. room temperature change).
  • [Fixed in Beta v0.2] A nice theme/page arrangement.
  • [Fixed in Beta v0.2] Use “controller as” in widget and JavaScript code.
  • [Fixed in Beta v0.3] Schedule view: responsive design and display all events if there are more than one scheduled for the same hour (currently it will display only the last for each item).
  • Add/Edit view: items list responsive design.
  • Mode: handle other operating modes (like holidays).
  • OnOff scheduling validation: no other event scheduled between (schedule start time) and (schedule start time + duration). Please note that this shouldn’t affect the rules.
  • Code optimization (this is placed on the nice to have list due to my lack of knowledge/experience).

Hope I managed to stir your interest. Take it for a spin and share your thoughts.

PS: I know this does not match the openHAB design pattern, but since there is no way to manage a virtual thermostat from a simple web interface this is the best solution I could think of. I have chosen to use this model because it doesn’t need too many additional OH items and it allows a dynamic number of intervals. Moreover it is scalable and items can be easily added or removed without changing the underlying code.

Few snaps.

Widget Settings:

Thermostat Status:

Thermostat Status small screen:

Thermostat View Schedule:

Thermostat Add/Edit:

OnOff Status:

OnOff Add/Edit:

Overwrite device specific rule
(Hollako) #2

Great Job Geo !! no doubt that you did a great effort. i will try it and help as much as possible to get this POC with bugs-less.

Thank you again.

(Garry Mitchell) #3

Wow, this looks fantastic!

I’ll certainly be taking a look at this over the next few days :slight_smile:

(Geo Magadan) #4

Happy new year to everyone!

@Hollako, @Confused (Garry Mitchell) thnaks! I hope this will be usefull for others as well.

In the past couple of days I had some spare time and I have worked a bit on this. A new beta is now ready. I have updated the OP with new snaps and a fresh download link from Google Drive.

What is new/fixed:

  • “Controller as” in widget and JavaScript code
  • JavaScript code to remove missing items from schedule (e.g. item removed from widget configuration)
  • A light theme and proper bootstrap layout (responsive design)
  • Widget model refresh if the value changes for any of the used items (e.g. room temperature change)
  • Fixed initial state for switch items from OnOff status view
  • Other small fixes

[LATEST] Beta v0.2 : GDrive link for OHScheduler-Beta_v0.2.zip

(Geo Magadan) #5

A new beta is now ready. This version should be stable enough. There will not be another update soon, as I won’t have time to work on this for a while.

What is new/fixed:

  • The schedule is now displayed using VisJS.

[LATEST] Beta v0.3 : GDrive link for OHScheduler-Beta_v0.3.zip

(Alan van Wyk) #6

Hi - any ideas why I may be failing to get a picture?

JSONPath Transformation installed
Files copied to : /etc/openhab2/html/scheduler
Ownership and execution rights verified
Stylesheet in Habpanel set to /static/scheduler/OHScheduler.css
items and rules files copied to items / rules
Template imported and added to panel
Config set to point HVAC mode and HVAC Schedule to the matching items from the item file copied
Items on widget set to:
[{"setItem":"KRVW_Heating_TargetTemp","readItem":"KR_Room_HT_Temperature","label":"KR Bedroom"},{"setItem":"KLVW_Heating_TargetTemp","readItem":"KL_Room_HT_Temperature","label":"KL Bedroom"},{"setItem":"LR_Heating_TargetTemp","readItem":"Lounge_HT_Temperature","label":"Living"}]

Can you see anything obvious that I may have missed?

I don’t get the widget appearing at all (your gui) - although I am able to edit the widget properties.

Any help, very much appreciated.

(Alan van Wyk) #7

Never mind - had it in /html/scheduler instead of /html/openhab/scheduler


Nice work :slight_smile:

Now to rewrite your heating modes to cater for home / away / holiday etc

Thanks again - great work!

(scott dee) #8

i like those dial indicators. could you possibly offer a separate little widget that’s just one of those?

(Geo Magadan) #9

Alan van Wyk (@bulletprooffool), I am glad that you managed to make it work. For the time being the running modes cannot be customized from the UI. However this is an trivial task, as the arrays are defined in the OHSFactory (file OHScheduler.js) : lines 157, 158.

// Factory to manage the OH Scheduler parameters
ohApp.factory("OHSFactory", function() {
        "hvac_modes": ["OFF", "MANUAL", "AUTO", "COOL", "HEAT"],
        "onoff_modes": ["MANUAL", "SCHEDULE"]

Scott dee (@waspie), the dial indicators/knobs are already available (look for the Knob widget). Yannick (@ysc) did an amazing job and added lots of useful widgets.

PS: I have restricted the access to the first two beta files. Until this is mature enough to be published on GitHub, the links for the previous versions will no longer be public. However I will definitely grant access to anyone interested.

(Alan van Wyk) #10

Thanks - saved me trawling through the files.

I already had a rough build going, but I was limited to 5 modes:
Home - 7am to 7pm
Home - 7pm to 10pm
Home - 10pm to 7am

The granular scheduling and simple gui means I’ll now elimate the first 3, for the granular scheduling and keep the latter 2.

I don’t have cooling, but I’ll probably keep


as my options, use the target temps as proxies and have static values for Away and holiday modes.

Irrespective, I like it.

Only issue I have with the gui is I am unable to delete items in the schedule.

Great work - thanks again

(Alan van Wyk) #11

Actually, I lie - I also have a small problem with the current temperature widgets - they seem to show as many decimal places as my item can present - i’ll Need to amend that to round to 1 decimal place.

Guess I can do this on either the widget, or in js.

No need for you to stresss about it, u less you already have coded it.

(Geo Magadan) #12

Hello Alan,

I have uploaded a version that rounds the temperature values to 1 decimal place. Additionally I have made some small change on the rules files. Persistence is no longer required. The Away and Holiday modes will not be implemented too soon as my spare time is limited (close to none).

Beta v0.3.1 : GDrive link for OHScheduler-Beta_v0.3.1.zip

(Alan van Wyk) #13

Hey - that’s amazing
I’m just rambling and feeding back - no need to do any dev on my behalf.

i’ll check the code changes out - though I did this as a temp bodge to get around the decimal rounding:
(OHScheduler.js line 450ish)

  if (option == "value") {
            ohs_knobs[member][option] = (parseFloat(Math.round(option_value * 100) / 100) || 0);
            ohs_knobs[member]["previous_value"] = (parseFloat(option_value) || 0);

I can handle the coding for home / away holiday etc myself.
In fact, I’ll probably procy the scheduler to my “Home” circuit and keep the others as static values.

Oh - two minor bugs …

  1. schedule deletes don;t appear to work on an iPhone (ie, I seem unable to get to the delete option)
  2. When you have an item with NO schedules set, if you change the scheduler dropdown to select this item, this previous item’s schedules stay on screen. This only happens until you add a single schedule item.

I had one question … the guages are great and I like that I am able to use them when scheduling temp changes, but what is the intention of them when they are all on the status page? from what I can tell, changing the value / setpoint on the status page has no real effect, as this gets reverted when the rules engine next runs, based on the defined schedule?

(Hans-Jörg Merk) #15

Is there any hidden option to make the labels visible ???

(Geo Magadan) #16

Thanks for feedback and sorry for the delayed reply. Unfortunately I don’t have any apples around, hence it will be hard to find a solution for this. The bug regarding the item with no schedules is solved for quite a while, but I did not had time to test all the changes (added a directive in order to load the html code from a template).

The only thing I could think of is an issue related to items parameter, and there might be two possible options:

  1. the “label” option is missing
  2. the label contains single quotes(apostrophes).

A new version that fixes some small bugs will be published in the near future, unfortunately I cannot say precisely when. For the time being I am quite busy changing diapers.

(Alessandro Savalli) #17

Hi, forgive my English, I hope I do not make serious mistakes.
congratulations on the work you have done.
I read the code but being new to this language, I think I miss something and I can not understand.
You would advise me some reading that introduces me to this language.
in particular I did not understand how to link the js code to the graphic part and how it was made.
As an exercise, I tried to translate the widget into my (Italian) language, believing that I find the texts in the code, but it does not.
for example how can I translate the tab labels (STATUS, SCHEDULE, ADD / EDIT)
thank you

(Geo Magadan) #18

Hello Alessandro,

Changing the name of the tabs is not that hard. You can edit the widget (OHScheduler.widget.json) file. Once you have replaced the tab names with the desired ones you can import it in HABPanel. Please note that the latest version still has some minor bugs. A new version will be published soon. In the new version the HTML code will be loaded as an external template, making it easier to perform such changes.

(Alessandro Savalli) #19

Thanks, I do not know why, but I had ignored the presence of this file.

(Alessandro Savalli) #20

I’m trying to use your thermostat at home.
everything is ok, but I do not change the temperature target.
I set auto and waited for the time to arrive, but I have no effect on the target temperature value.
I think I’ve misunderstood something.
an advice?