Timeline picker to setup heating, light and so on

Can you get me an example?
Does another element already exist that does something similar?

You might get some inspiration in the HABpanel repository.

Can i get some more info on this please.

I have it so i can see the time picker in my sitemap. But how do i link it to anything?
I have 4 sprinkler zones. If i send OFF or ON to each zone, it runs rules.
How can i set this up so that I can have 5 states (OFF, Zone1,Zone2,Zone3,Zone4)

And how do i link it to my items?

@Christopher_Hemmings
The webview url in your sitemap should looks like so:
http://ip-addr:8080/static/time-line-picker/index.html?ip=xx.xx.xx.xx:8080&transferItem=TransferItem&states=0,1,2,3&yAxisLabel=1,2,3,4,5,6,7

You set for ip-addr the ip from your openHAB server.

The Parameters you can set with this values:
ip= also the ip adress from your openHAB server
transferItem= TransferItem (defined in your item file as String item
states=OFF,1,2,3,4
yAxisLabel=1,2,3,4,5,6,7 (see description above, table url parameter3)

I would suggest don’t replace the code in example.rules file and write a second rule.
This is clearer. The HashMap in example.rules files looks like so:

val HashMap<String,ArrayList<String>> timePicker = newHashMap(
    "transferItem"   -> newArrayList('spirincklerZone'),
)

The second rule:

rule "manipulate sprinckler"
when
  Item sprincklerZone changed
then
  // deactivate all sprinckler zones
  switch ((spricklerZone.type).toString) {
    case "1" : {
      // activate zone 1
    }
    case "2" : {
      // activate zone 2
    }
    case "3" : {
      // activate zone 3
    }
    case "4" : {
      // activate zone 4
    }
  }
end

The item spricncklerZone is a second proxy item, wich you must define as String Item.

I hope I haven’t forgotten anything.

@hmerk
It’s intresting to integrate this widget. I would wait some time and see how it is used.

1 Like

Thanks, but Im hoping you can help me more.

I have the time picker in my sitemap by the following line

Frame label="heating Example" {
   Webview url="/static/time-line-picker/index.html?ip=192.168.0.143:8080&transferItem=TransferItem&states=OFF,1,2,3,4&yAxisLabel=1,2,3,4,5,6,7" height=13
	}

when i use http://192.168.0.143:8080/static/time-line-picker/index.html it doesn’t load the picker.
if i just use /static/time-line-picker/index.html it works

And it loads fine, I can select everything and then click accept and sure.

But when i reset the page, the timepicker is back to normal. with the selections not there.
Also, I am running logs in the rule. And the log shows that TransferItem.state is set to NULL.

This is my items file

Group gTimepicker (All)

//*********************************
//Time PIcker
//***********
String TransferItem "[%s]"      (gTimepicker)
String SprinklerZone "[%s]"		

This is my rules

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

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

val HashMap<String,ArrayList<String>> timePicker = newHashMap(
    "transferItem"   -> newArrayList('SprinklerZone'))

rule "check switchpoints 1"
when
//    Time cron "0 0/15 * 1/1 * ? *"
	  Time cron "0/5 * * ? * * *"            // for debug, trigger eatch 15 seconds
then
    var Number currTimeInterval = ((now.getMinuteOfDay() / 15) + 1).intValue
    var Number currDay = now.getDayOfWeek()
	
	logInfo("Rule","Running Rule")
	
    gTimepicker.members.forEach[ currSwitchPlan |
		logInfo("Rule",currSwitchPlan.state.toString)
        if (currSwitchPlan.state !== NULL) {
            var String switchPlan = (currSwitchPlan.state as StringType).toString
            var String currKey = currDay.toString

            // check the differnt week plans 15,17,67; e.g mo-fr, ...
            if (switchPlan.contains('"key":"17"')) currKey = "17"
            if (switchPlan.contains('"key":"15"') && (currDay > 0 && currDay < 6)) currKey = "15"
            if (switchPlan.contains('"key":"67"') && (currDay > 5 )) currKey = "67"

            // determine the scale number in transfer string
            var Number countScale = 1
            var Boolean stopLoop = false
            while ((countScale < 9) && (!stopLoop)) {
                if (switchPlan.contains(countScale.toString + '":')) {
                    if (transform("JSONPATH", "$." + countScale.toString + ".key", switchPlan) == currKey) {
                        countScale = countScale -1
                        stopLoop = true
                    }
                    countScale = countScale + 1
                } else {
                    // error in transfer string
                    logError("timepicker","error in transfer string")
                    countScale = (-1)
                    stopLoop = true
                }
            }

            if (countScale != (-1)) {
                var String[] switchPoints = (transform("JSONPATH", "$." + currKey + ".value", switchPlan)).split(',')
                var String[] switchStates = (transform("JSONPATH", "$." + "99", switchPlan)).split(',')
                var ArrayList<String> itemToSwitch = new ArrayList(timePicker.get(currSwitchPlan.name))

                if (!(itemToSwitch.size() == 1 && "".equals(itemToSwitch.get(0)))) {
                    itemToSwitch.forEach [ iTS |
                        var currItem = ScriptServiceUtil.getItemRegistry.getItem(iTS) as GenericItem
                        var newState = switchStates.get(Integer::parseInt(switchPoints.get(currTimeInterval)))
                        // send only commands when current state differenced from new state
                        if (currItem.state.toString != newState) currItem.sendCommand(newState.toString)
                    ]
                }
            }
        }
    ]
end

//*************************************************************************
rule "manipulate sprinckler"
when
  Item SprinklerZone changed
then
  // deactivate all sprinckler zones
  switch ((spricklerZone.type).toString) {
    case "1" : {
      // activate zone 1
	  logInfo("Zone1","Turning on Zone 1")
    }
    case "2" : {
      // activate zone 2
	  logInfo("Zone2","Turning on Zone 2")
    }
    case "3" : {
      // activate zone 3
	  logInfo("Zone3","Turning on Zone 3")
    }
    case "4" : {
      // activate zone 4
	  logInfo("Zone4","Turning on Zone 4")
    }
	case "0" : {
	  // turn off zones
	  logInfo("Zone","Turning off Zones")
	 }
  }
end

I have the HTML Files placed in

openhab2-conf/html/time-line-picker

please tell me what im doing wrong

First:

val HashMap<String,ArrayList<String>> timePicker = newHashMap(
  "transferItem"   -> newArrayList('SprinklerZone'))

Please write the first letterfrom TransferItem in uppercase.

Second:
You wrote the html files, but you mean the only index.html. The *js files are placed in the folder js and the *css file is placed in the css folder. Right?

Yes, JS files and CSS files where they are supposed to be, in js and css folders right under index.html

ive updated transferItem to TransferItem but its still set to NULL.
And the time picker still does not save settings in my sitemap when i select times

Can you open the dev tools in your browser?
Go to the console and then reloadload the site.

You will get an error message in the console.

When no error is shown, then set one or two points and save this.

Access to XMLHttpRequest at 'http://192.168.0.143:8080/rest/items/TransferItem/state' from origin 'http://xxxxxxxxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
VM297 switchPointSet.js:168 error in API request to openHAB
VM295 vue.js:8542 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
VM295 vue.js:8553 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
index.html:1 Access to XMLHttpRequest at 'http://192.168.0.143:8080/rest/items/TransferItem/state' from origin 'http://xxxxxxxxxxxxxxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
switchPointSet.js:168 error in API request to openHAB
vue.js:8542 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:8553 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

I have removed my public IP

This is the CORS problematic - line 1.
How is your enviroment and your access to the openHAB server?
Is openHAB installed in a docer container?

Im sorry what do you mean

Is there a way i can private message you

You wrote that you delete the public ip. So i think that you call the openHAB server from remote.
Have you the possibility to call the basic ui from a local device?

Oh yes. Ill try that

I get no errors when using local IP.

and it saves the times.

But do you know how i can fix this to be able to call from public IP/

Unfortunately not in the moment.
I have the same problem with control of nanoleaf aurora light panels.

I’m experimented with an cors proxy. This proxy add a cors-header at the requested data. But I couldn’t find a solution.

At the moment the setup is only possible from local IP’s.
Perhaps some one here in the forum had the same problem in conjunction with the rest interface?
I will looking for a solution and when posting these here.

Ok. An update.

Seems to be working so far, I am experimenting with different states.
But one question.
How can i change the naming of the days to english?
Where is that controlled.

yes of course, you’re right.
You can open the file SwitchPointSet.js. In the lines 121 to 130 you can replace the german names in english names.

What is a good point and i will add a further url parameter in the future.

Thank you very much for this. Ill definitely be using it, Ive been waiting for this since the start of openhab.
One thing though, is there a way to have multiple switch points on at the same time?

I have 4 sprinkler zones. I would like to run more than 1 at a time. Instead of having multiple pickers for each zone, the one picker for all zones would be good.