HABPanel widget: Virtual Thermostat/OnOff Appliance scheduling

nepotu · December 27, 2017, 2:55pm

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.

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.

I have tested it only on Chrome (desktop), Firefox (desktop) and Chrome (Android), having OH 2.2 running on a Raspberry Pi 2B. It might not be rendered/work correctly on all browsers/devices.

TL;DR

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

Requirements:

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 …)
The running modes list can be configured (an array of values should be passed); if not (correctly) defined, then the built-in modes will be used
Disable target temperature change from the Status view/tab (will not apply if operating mode is MANUAL).
Options to hide the Status tab and the Running Mode selector (basically only the scheduling part will be displayed/used)

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.

Widget resources:

Sample Items, should be stored in <openhab_config>/items/:

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)

Please note that the lines 11,13 and 15 end with “{}”. There you should put your binding config for the temperature items. If no such binding available, and you want to set the item value manually (e.g. from rules for testing purposes) then you should remove those curly braces.

Rules, should be stored in <openhab_config>/rules/:

OHSchedulerHVAC.rules - rules file for virtual thermostat
OHSchedulerOnOff.rules - rules file for OnOff appliances

Widget JSON to be imported in HABPanel:

OHScheduler.widget.json - the widget that should be imported in HABPanel

Widget resources (js, css, svg and html) should be stored in <openhab_config>/html/habpanel/scheduler/:

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.tpl.html - the widget html template used by the widgetScheduler directive
ohscheduler.css , ohscheduler.svg - resources used by the widget
vis.min.js - VisJS visualization library
angular-vis.js - AngularJS directive module for VisJS components

What is missing/nice to have:

~~[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/hold the current target temperature).
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. In case of issues please share also the entire log from the browser console (-F12-), preferably after you have ticket the box “Enable Debug” from the widget config.

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.

Versions / Changelog:

ohscheduler@GitHub: https://github.com/nepotu/ohscheduler

Use the above repository in order to get the latest version. All the previous releases are no longer available for download (the GDrive links were disabled)!

v0.1 Beta ~~GDrive link for OHScheduler-Beta_v0.1.zip~~

Initial release

v0.2 Beta ~~GDrive link for OHScheduler-Beta_v0.2.zip~~

“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

v0.3 Beta ~~GDrive link for OHScheduler-Beta_v0.3.zip~~

The schedule is now displayed using VisJS.

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

Round the temperature values to 1 decimal place.
Persistence is no longer required for rules

[LATEST] v1.0 RC ~~GDrive link for OHScheduler-v1.0RC.zip~~

Options to hide the status tab and the running mode selector
Always select the first (Status/Schedule) tab when the widget is loaded
Reset to default values on Add/Edit tab selection
Target Temperature not parsed correctly
Temperature value decimal points now linked to Temperature Step: one decimal no decimals (if step=1)
Timeline schedule fix for items with empty schedule
Add an AngularJS directive in order to expose the html template
Converted factories to constructor functions
Removed global variables (now they are integrated in the corresponding constructors)
Subscribe to ‘openhab-update’ event in order to refresh the widget, instead of EventSource
Code rearrangement, plus variables changed to camelCase for unity (instead of underscores)
Converted widget file names to lowercase
Reworked the controller (used Prototype methods for readability)
Other bug fixes
New packing
Rules error management and JSONPATH transform checks update for nonexistent items/days

Few snaps.

Widget Settings:

Thermostat Status:

Thermostat Status small screen:

Thermostat View Schedule:

Thermostat Add/Edit:

OnOff Status:

OnOff Add/Edit:

Hollako · January 3, 2018, 9:34pm

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.

Confused · January 4, 2018, 7:46am

Wow, this looks fantastic!

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

nepotu · January 7, 2018, 3:35pm

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

nepotu · January 18, 2018, 4:41pm

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

bulletprooffool · January 19, 2018, 4:51pm

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.

bulletprooffool · January 19, 2018, 5:56pm

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

RTFM.

Nice work

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

Thanks again - great work!

waspie · January 19, 2018, 6:23pm

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

nepotu · January 19, 2018, 8:46pm

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.

bulletprooffool · January 19, 2018, 11:45pm

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
Away
Holiday

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

Manual
Home
Away
Holiday

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

bulletprooffool · January 20, 2018, 12:00am

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.

nepotu · January 20, 2018, 8:42pm

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

bulletprooffool · January 20, 2018, 11:27pm

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 …

schedule deletes don;t appear to work on an iPhone (ie, I seem unable to get to the delete option)
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?

hmerk · February 9, 2018, 10:21pm

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

nepotu · February 10, 2018, 9:18am

@bulletprooffool
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).

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

the “label” option is missing
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.

savalli · February 11, 2018, 10:10pm

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

nepotu · February 12, 2018, 10:12am

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.

savalli · February 13, 2018, 8:57am

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

savalli · February 15, 2018, 9:02am

Hello,
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?

jjdm · March 10, 2018, 9:28pm

Hi all,

I cannot see the control and the menu is incomplete. I have reviewed all the steps and I think I done it correctly. Any ideas?