Timeline picker to setup heating, light and so on

Tags: #<Tag:0x00007faed62c08f8>

openhab timeline picker

This project extends openHAB basicUI by a sitemap component to setup timebased processes. (e.g. heating control, light control or rollershutter)

In the component you can edit one or multiple scales. The scales represent the day’s of the week and the time of day from 0.00am to 12.00pm. By url parameter you can specify the displayed day’s of the week and whose grouping. It’s possible to choose monday to sunday, monday to friday, saturday to sunday and each day one at a time. The final processing occured in a openhab rule.
The communication takes place via the REST- interface. When you have problems with CORS, add the following line in the file services/runtime.cfg: org.eclipse.smarthome.cors:enable=true

sitemap samples:

Preparation and example

files and locations

First create the following directorys at the spezified position:

location directory
openhab-conf/html/ time-line-picker
openhab-conf/html/time-line-picker/ js
openhab-conf/html/time-line-picker/ css

Download vue.js under this link: https://vuejs.org/v2/guide/installation.htm
Copy the file at this location: openhab-conf/html/time-line-picker/js/

hint: download the Development Version

Next download vue-resource.js under this link: https://github.com/pagekit/vue-resource
Extract the file vue-resource.js at this location: openhab-conf/html/time-line-picker/js/

Download this project from https://gitlab.com/RNTs_3/openhab-timeline-picker and save:

location file
openhab-conf/html/time-line-picker/ index.html
openhab-conf/html/time-line-picker/js/ switchPointSet.js
openhab-conf/html/time-line-picker/css/ switchPointSet.css
openhab-conf/rules timeLinePicker.rules

declare item, persisst, rule and sitemap

To communicate with openHAB rules we must declare a string item.
note: This item must be persisted. So, after a restart of openHAB switch points will be restored. MapDB is a good solution.

Example files are placed in the GitLab repository:


Group  gTimepicker
Group  gTimepickerObserver
String TransferItem1 "[%s]"      (gTimepicker)
String TransferItem2 "[%s]"      (gTimepicker)


Strategies {
  default = everyUpdate

Items {
  gTimepicker* : strategy = everyChange, restoreOnStartup

timeLinePicker.rules (it’s an extract and shows the config part, download the complete file from gitlab):

import org.eclipse.smarthome.model.script.ScriptServiceUtil
import java.util.HashMap
import java.util.ArrayList

// timeline/ timepicker control
// version 0.6
// ToSe 
// init values & customize for you own enviroment
// -----------------------------------------------------------------------------------------------------------
// requirements: MapDB, JSONpath transformation
// -----------------------------------------------------------------------------------------------------------
//  String xxxSwitchPoints                   "xxxxxx [%s]"                                               (gTimepicker)
//  Group  gTimepicker
//  Group  gTimepickerObserver
// data structure
// -----------------------------------------------------------------------------------------------------------
// val HashMap<String,  ArrayList<String>> timePicker = newHashMap(
//     "TransferItem1" -> newArrayList('item1','item2',...),                // enum all items to control
//     "TransferItem2" -> newArrayList('item3')
//     ...                                                                  // enum all TransferItems
//     // you control as many widgets as you need
// )

// -------------------- part of config -----------------------------------------------------------------------

val HashMap<String,ArrayList<String>> timePicker = newHashMap(
    "TransferItem1" -> newArrayList('Thermostat1','Thermostat2'), 
    "TransferItem2" -> newArrayList('LightSwitch45')

// -------------------- end of config ------------------------------------------------------------------------

// -------------------- don't change anyone ---------------------------------------------------------------
val HashMap<String,String> oldStates = newHashMap()

rule "timeLine picker 1"
when .....


Frame label="heating Example" {
    Webview url="http://ip-addr-openHAB:8080/static/time-line-picker/index.html?ip=xx.xx.xx.xx:8080&transferItem=TransferItem1&yAxisLabel=1,2,3,4,5,6,7" height=14


The heating is switched in the example above (Item’s Thermostat1 and Thermostat2 in example.rules).
You can set the various switch states (0,1,2,3) by select a state end then click and move over the scale.
When you select a other state you will overwrite the existing state in the scale.

The webview url is declared as follow:

http://ip-addr-openHAB:8080/static/time-line-picker/index.html?urlParameter (ip-addr: ip from your openHAB instance)

url parameter necessary values description example
ip required user defined server-ip openHAB and port &ip=
transferItem required user defined characterizes the item to communicate with openHAB rule &transferItem=TransferItem1
states optional
default: OFF,ON
user defined define switch states; maximum count is six &states=
yAxisLabel optional
default: mo,tu,we,th,fr,sa,su
1, 2, 3, 4, 5, 6, 7 = monday, thusday, wednesday, thursday, saturday, sunday
17 = monday to sunday
15 = monday to friday
67 = saturday to sunday
characterizes the assignment scales to days
monday, thusday, wednesday, thursday, friday, saturday, sunday
lang optional
default: de
de - german
en - english
pt - portuguese
it - italian
language for y-axis &lang=en
event optional
default: no
no,yes action will triggert when state is set, the manuell state is ‘passiv’ and you can control the item manuell, after a complete action interval the item state befor will recoverd &event=yes
dark optional
default: no
no,yes switch widget in dark mode &dark=yes
since 0.7.x
default: auto
auto, no, force control zoom slider for mobiles and tablets &zoom=force
*since 0.7.2
default: 1
hexValue1,hexValue2,…, hexValue7
select one of three predefined colorsets or select your own colors as hex value (the ‘#’ in front of hex value is not nessesary)
Then event parameter is yes, the hexValue1 is for maunal mode.

complete example for url:,1,2,3&yAxisLabel=1,2,3,4,5,67&lang=en&event=no&dark=no&zoom=force&colorset=555E7B,B7D968,B576AD,E04644,FDE47F,7CCCE5,D486E8

When you change the state parameter and it’s exist a saved value you will get a warn messages.
I mean, this should be protected from unintentional changes.

So, you can set the switch intervall in 15min steps by click or touch the scale.
Finally you must tranfer the new date by press the save button and confirm.

version 0.7.x

  1. Especially for small devices exist now a zoom function. As standard the zoom is activ on mobiles and tablets. On desktops you must force the zoom witch an url- parameter. Where are no breaking changes in the data structur. All scheduling definition is retained.
    In order to recognize the correct orientation on the mobiles and tablets, it is necessary to choose a greater value for height in the sitemap.

  2. Portuguese language as axis label is added.

Replace only the index.html, switchPointSet.js, switchPointSet.css files.
note: After replacing the files one must clear the browser cache.

version 0.7.2
[enhancement] It is posssible to define own colors for the single switch states or select various predefined colorsets. (merged in master branch)

If you found a bug or have a good idea for a new feature just open a new issue at gitlab. https://gitlab.com/RNTs_3/openhab-timeline-picker/issues

edit 09.11.2018: updated to version 0.4 - multiple states in setup
edit 10.11.2018: update screenshots
edit 05.12.2018: update new functions (dark mode, event scheduling)
edit 10.03.2019: update new functions (portuguese, zoom)
edit 18.05.2019 update new function (userdefined colorsets)


Will try this for my Xmas-Lights.

Does it work in Adroid App as well?

Thaks a lot

Nice to hear.
In Android App its work well in landscape direction.
I will look in portraitformat for a better presentation but it’s working.

Sounds like the perfect idea. Will do the same.

Thanks a lot.
I’ll use this for my x-mas light

Nice! I implemented something similar the other day, event scheduling through google calendar to control heating, tts volume etc via calendar events. It works very nicely but haven’t done the UI yet, i hope i can pimp the gcal iframe content with some css

(the grey entries are some kind of activity log, phone calls etc)

I have updated example.rules to V0.2 in the first post.
The V0.1 unfortunately had a bug. :tired_face:

Hi Torsten, looks very nice. Is it also possible so send different states to the item, for example 1, 2, 3, with a third color?

Hi Johannes,
nice that you like it. It’s not possible in the moment to send more then two states.
You can define the states in the rule file

"Thermostat1" -> newHashMap(
            "include" -> "ON",
            "exclude" -> "OFF"

e.g. ON/OFF for switch items or 0…100 for dimmer items.
It was my idea to find a general, simple solution. Let me a little time and i will look for a possibility to define more then 2 states.

Can you please explain your intention for a third state?

I have a heating controller which have 3 different states:
The Komfort temperature is defined in the controller and the other states have defined delta values, e.g. standby -2K.
So I have only to change between the states during the day.

Thanks for your effort


Okay. I’ll think about it.

The part to define the states in the rule is not the real problem.
I need to figure out how to keep it easy to use.
Then I’ll get back to you.

1 Like

So, some short nights later:

I have rewrite the widget. Now you can define as fa as 6 various states wich can be switched.
@johannesbonn Is this helpfull for you?
Additional is it possible to use each command (e.g. ON/OFF, numbers or UP, DOWN). Rollershutter control should no longer be a problem.

The first post is upgraded to this new version.

1 Like

Hi Torsten,

Thank for your effort. Tomorrow I will give it a try and come back to you.

Now, i have substitute the screenshot.
The new ones are better self explaining of the extended functunialtity.

Call me stupid, but I’m lost in here!
I downloaded the files “vue.js” and “vue-resource.js”, but which project to download and save (the whole vue-resource project, but only using some files of it?), where should/could I find the files “index.html”, “switchPointSet.js”, “switchPointSet.css”? (Not in the vue-resource project!)

I’m updated the first post and was inaccurate, sorry.

You wll find the three files index.html, switchPointSet.js and switchPointSet.css on my gitlab repository.

Nice idea, ever thought of extending it to be an openhab.ui.timelinePicker package ?
Like HABpanel e.g.

Thank you a thousand times, exactly what I am looking for. Seems to work.

Thank you very much!

1 Like

What do you mean with extending?
You mean a more and from ui configurable widget.

Not just a widget, but somehow an administrative UI package, installable trough paperUI and also configurable there. The rules could eveb be injected into the new rule engine through REST API.