Timeline picker to setup heating, light and so on

openHAB timeline picker v3

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

In the component you can set and change intervals by mouse or touch and combine them with any switching states. An alias for each switching state is possible, which is displayed in the legend. (e.g. heating control: 23°C - alias: comfort). By combination with sunrise and sunset relative switching points are possible. The setup of the timeline picker is done by url parameters when calling it in the sitemap and/or in the setup of the timeline itself.

The second part is a rule, which actually does the switching. In the default configuration this rule is called in 2min intervals. This is the smallest value of a state change switching for sun position dependent processes. For switch events the smallest interval in the timeline is 15min.

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

Whats new in V3

There is a possibility to switch states depending on the position of sun. The installation of the widget is much easier. You must not define helper item and groups. The persistence setup is also obsolete. All adjustments are included in openHAB backups (values stored in JsonDB). The internal datastructur is much more flexible for further features.

In addition, a setup area is introduced with v3.

There is only support for javascript. (you will find older versions here in ‘Get started’)

sitemap samples:

tlp-slides-small

Get started

Dependencies

  • JS Scripting Add-ON must be installed for OH >= 3.0

  • Astro Binding (only for sun events)

  • create a token for your OH REST- Interface

  • new Rule Engine for OH <= 2.4

Download

Download and extract the complete project from here: timeline picker on GitLab

Files and Locations

v3 for openHAB 3.x (JS Scripting Add-ON)

Copy the following files and folder with all included sub folders and files to your openhab config location (usually found here: $OPENHAB_CONF)
For the full path execute the following command: echo $OPENHAB_CONF

location folder file
$OPENHAB_CONF/html/tlp-jsr/ complete
$OPENHAB_CONF/automation/js/RNTs-tlp3.js file
$OPENHAB_CONF/automation/js/conf/00_RNTs-tlp3_conf.js file

[depricated] v3 for openHAB <= 2.4 (new Rule engine)

Download this project from gitlab for openHAB 2.x time-line-picker and save it on your drive.

or execute the following command if git is installed on your system:
git clone -b develop_v3.x_for_OH2.4 https://gitlab.com/RNTs_3/openhab-timeline-picker.git

Previous versions

click here
v2 for openHAB <= 2.4 New Rule engine (javascript)

see on GitLab
Please see the readme in the repository for install, use and instructions.

v1 for openHAB 3.x RuleDSL

see on GitLab
Please see the readme in the repository for install, use and instructions.

v1 for openHAB <= 2.4 RuleDSL

see on GitLab
Please see the readme in the repository for install, use and instructions.


Parameter and Examples

items, sitemap and conf file (optional)

Each single timeline is spezified with an unique id.

example.item:

Switch  demoItem1
Switch  demoItem2
Dimmer  demoItem3
Dimmer  demoItem4

00_RNTs-tlp3_conf.js (optional):
Here you can assoziate items to control. It is also possible to make the mapping as parameter in the url. See parameter table below. After changing this config the

const tlp_ids = {
  'uniqueID': 'demoItem1, demoItem2',
  'heating_central': 'demoItem3',
  'x1': 'demoItem4',
  // ...
}

module.exports = {
  tlp_ids
}

example.sitemap:

Frame label="timeline example" {
    Webview
      icon="none"
      url="/static/tlp-jsr/index.html?id=uniqueID&mode=1,2,3,4,5,6,7&token=oh.TimeLinePicker.xxxxxxxxxxx"  // place your own token
      height=14
}

The webview url is declared as follow: /static/tlp-jsr/index.html?urlParameter

Parameter: id, required

value: user defined
unique identfier for this timeline
example: &id=uid_123

Parameter: token, required

value: generated in OH main UI - copy and past, without encoding!
example: &token=oh.TimeLinePicker.xxxxxxxxxxxxxxxxx

Parameter: conf, optional, default: params

value: params, ui
params … main configurations only with ui
ui … configuration with ui, for the first call or changing you can use params and init this

example: &conf=ui

Parameter: mode, optional, default: 1,2,3,4,5,6,7

value: 1,2,3,4,5,6,7 = monday, thusday, wednesday, thursday, saturday, sunday
15 = monday to friday
67 = saterday to sunday
17 = monday to sunday
characterizes the assignment scales to days
example: &mode=15,6,7

states, optional, default: OFF,ON

value: user defined
define switch states (maximum count is six)
example: &states=0,15,50,100, &states=INCREASE,DECREASE, &states=OFF,ON, &states=value1,value2,value3 (strings for use in own rules)

linkedItems

value: item names defined in openHAB
define the items to be controlled
example: &linkedItems=demoItem1,demoItem2,demoItem3

Parameter: lang, optional, default: en

value: en - english, de - german, pt - portuguese, it - italian, nl - dutch, fr -french, hr - Croatian
select a language for the widget
example: &lang=de
Hint: Partial translations are still missing. Please help to complete this and translate your language: language file

deactivation, optional, default: not selected

ability to deactivate the timeline in ui, this parameter is a flag in parameterlist
example: /static/tlp-jsr/index.html?id=uid123&deactivation

event, optional, default: not selected

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
example: /static/tlp-jsr/index.html?id=uid123&event

zoom, optional, default: auto

value: auto, no, force
control zoom slider for mobiles and tablets
example: &zoom=force

colorset, optional, default: 1

value: 1,2,3 or 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 set, the hexValue1 is reserved for maunal mode.
example: &colorset=2; &colorset=555E7B,B7D968,B576AD; &colorset=555E7B,B7D968,B576AD,E04644,FDE47F,7CCCE5,D486E8

dark, optional, default: light mode

switch widget in dark mode
example: /static/tlp-jsr/index.html?dark

complete example for url:
/static/tlp-jsr/index.html?id=111&conf=params&mode=15,67&states=0,1,2,3&linkedItems=demoItem1,demoItem2&lang=en&deactivation&event&dark&zoom=force&colorset=555E7B,B7D968,B576AD,E04644,FDE47F,7CCCE5,D486E8

When you change relevant parameter from an initalized timeline you will get a warn messages.
This should be protected from unintentional changes.

setup in timeline (gear icon)

headline for widget

In the example below you can see a headline. This headline will displaedy inside the ui- widget. It’s helpfull when you use multiple timelines on a single padge. The headline is optional.

events depending of position of the sun

Example for thursday:

In the upper left you see the three icons for sun ignored, switch only when not sun and switch only when sun. The selection of this conditions is pretty simply. As first select you desired switch state and now you can select one of the three sun options. In the timeline you see additional icons and a yellow band for the sun releated interval.

  • from 6am to 10am the state with alias xyz will only activated when sun rised
  • when at 6am the sun is not rised, the condition will be checked every 2 minutes
  • when sun is rised in this intervall the state will be activated

activation: Set the checkbox activate.

offsets: For both, sunrise and sunset you can define a separat offset. The offset is only valid for this single timeline. It’s not global in your installation.

alias for commands

You can define an alais for each switch state. The linked icons to control will receive the state defined in the url.

admin area

This area is an extra widget to set the item names for sunrise and sunset. Also you can remove existing timelines. Then you remove the last existing timeline all data created from the timelinepicker will be removed in jsonDB.

Frame label="timeline example admin" {
    Webview icon="none" url="/static/tlp-jsr/index.html?admin&token=oh.TimeLinePicker.xxxxxxxxxxx"   // place your own token
}

version 3.0.0

[new]

  • sun events
  • admin widget added
  • headline in single timeline
  • alias for switch states
  • translations for complete timeline picker (not finished, help is nessesary)

[improvement]

  • dependencies removed (vueresource)
  • touch support added
  • set parameter changed: event, dark, deactivation … - one must only set the key to apply

[enhancement]

note: After replacing the files you must clear the browser cache.

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

breaking changes to v2

  • parameter yAxisLabel is changed to mode

to do: (contributions are welcome)

  • translations are not complete
  • rework dark mode - especialy new dialogs
  • headline as parameter

edit 24.01.2023: update to v3
edit 04.01.2021: insert link for openHAB 3 and RulesDSL
edit 10.03.2020: fix readme
edit 16.12.2019: update new language - dutch
edit 16.11.2019: update new function (temporary deactivation timeline)
edit 18.05.2019: update new function (userdefined colorsets)
edit 10.03.2019: update new functions (portuguese, zoom)
edit 05.12.2018: update new functions (dark mode, event scheduling)
edit 10.11.2018: update screenshots
edit 09.11.2018: updated to version 0.4 - multiple states in setup

57 Likes

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.

1 Like

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)

4 Likes

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?

1 Like

I have a heating controller which have 3 different states:
1=Komfort
2=Standby
3=Night
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

3 Likes

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.
https://gitlab.com/RNTs_3/openhab-timeline-picker

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

2 Likes

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

Thank you very much!

2 Likes

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.