List of day timers

[tillykeats (tilly)]

In OH2.5 what would be the most appropriate way of including, within the sitemap, a list of timers for central heating such that each timer has:

• A day (Mon,Tue,Wed,Thu,Fri,Sat,Sun)
• a sublist of Times (0 to max 3) where each sublist item has:
  • a Start time (24hr clock)
  • an End time (24hr clock)
  • a Switch (on/off)
  • a method of deleting the sublist item
• a method of adding a sublist item to the day

So effectively, there would be a vertical list of days, where each day has a “+” sign to add a proigramme itime , plus zero to 3 programme times, where each programme has an ON time, an OFF time, and a clickable icon to delete it.

I do not use HABpanel and so sitemap is where the widgets need to go; I use mobile devices to view and interact with OH. I’ve noticed the LSP in sitemap allows “List seperator= …” but this is not documented? I’m kind of hoping there is a way but I cannot help feeling I will need to use a webview ?? which will mean Im stuffed.

[rossko57]

You want a click-for-subpage effect?

Sitemap group of video streams

Text label=“click here for videos” icon=“camera” { Whatever you do for video from string A Whatever you do for video from string B Whatever you do for video from string C }

[tillykeats (tilly)]

I’m not following you , sorry?

[Bassdriver (Markus)]

Look at these two.

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 setu…

Timeline for Basic UI

Hi all, another small inspiration for how to use timeline diagrams in basic UI: [image] Again this needs my common openhab utility .js: // *** // * Required definitions: // * - var baseURL = "../"; // * // *** // * Required API // * - Google jQuery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js // * - jQuery CSV: https://github.com/evanplaice/jquery-csv // * - date.js: http://www.datejs.com/ // *** function GetGroupItemNames(groupItem) { var groupUrl = base…

I hope i could help you

[rossko57]

@tillykeats

I’m not following you , sorry?

You want to click on a one-line visible display for Monday and have it pop-out a multiline set of related sub-Items?
That was a pointer to a sitemap method.
It gives a fresh new page. This is the simplest method.

If you do not like that, and want instead to insert extra lines in the existing page in response to a click, you will have to use visibility= options and introduce a dummy Item for each sub-group to determine when clicked or un-clicked.

[tillykeats (tilly)]

Thanks. I should have mentioned that I tried the timeline picker, downloading this and that from various sites, running scripts, editing files, took a few hours to remove all the errors I encountered, then when I ran it ona mobile it looked hopeless and totally unusable.

I will have a look as timeline for basic UI

thankyou muchly

EDIT: Darn , nope , they will not be useable on a mobile device screen, to small. Can’t help feeling I need to do some trickery in a sitemap - but how , I dunno.

[tillykeats (tilly)]

Ah right, yes I did something similar from your tips on cameras.
So yes I can set up groups of visible items under a group label, thing is how do I get the On , Off , and delete icon all on one line in sitemap?

[rossko57]

@tillykeats

thing is how do I get the On , Off , and delete icon all on one line in sitemap?

You can’t.
Sitemaps are deliberately simplistic.
For fancy graphical UI, HABpanel is the way to go.

You can create dummy Items based on an amalgamation of other Items, useful for text like “Temperature 22.5 heating ON” all in one line.
But each line gets one icon, one Item to target with clicks.

EDIT -Or have I misunderstood? You want a line like -

<icon> 10:00 to 12:00 [clear]

You could do that with a a dummy String type Item.
Using rules, load its state with text derived from your timing stuff, to get the 1000-1200 text
In sitemap, use a Switch widget to display and mappings to create a button

Switch item="myDummy" label="Times XX [%s]" mappings=["bananas"="CLEAR"]

A rule can listen for command “bananas” to Item myDummy, and do whatever it is you want to in response.

You’re not going to have muc luck actually deleting things. It is possible to delete Items from rules with REST API. But then you’d need to edit the sitemap too. This is possible, but the UI won’t refresh. Dynamic sitemap structure is not supported. Simplistic, remember.

[tose (torsten)]

Hi @tillykeats, the timeline picker is complete responsive so i’m not clear with your problems with a mobile. A lot of people is using this widget. Have you followed the guide to install?
It would be hit your task.

[tillykeats (tilly)]

Mmm, some things to go with there guys.

I’d rather keep it basic for now, simple sitemap stuff; I may have to get creative as @rossko57 alludes to.

Yes @tose , I did try the timeline picker funnily enough; about 2 weeks ago; but I had to dl this from here , that from there, then edit vue.js and hack other css and js files; then when trying to get it working it was creating more problems to fix than I could care about; I’d fix one thing only for something else to go wrong. Some of the download files didnt exist and the guide didnt work , in parts.Vue.js kept throwing exceptions in my chrome browser and despite debugging for half an hour, I gave up. It just “didnt work”. It was a high PITA. And, I did try three times with the same hassle. So end of, yes it looks great , but no not if you want something up and running quickly without having to spend hours in front of a screen and keyboard. Sorry…
It’s a great contribution and you have clearly spent a lot of [unpaid] time on it. Well done…but not for me:(

EDIT: Just to ensure we’re on the same train, I mean this:

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 setu…

[rossko57]

A crude time scheduler

item

Number nm_HoursBusiness "Business hrs start [JS(minstohours.js):%s]" <time> (gRestore,gHours)

sitemap

Setpoint item=nm_HoursBusiness minValue=300 maxValue=1320 step=15

transform js

/*
Javascript transform function to change a number
of minutes into a more readable time-like format
*/

(function(i) {
    if (i == 'NULL') { return i; }
    if (i == '-') { return 'Undefined'; }
    var val = parseInt(i); // The value sent by OH is a string so we parse into an integer
    var hours = 0;
    var minutes = 0;
    if (val >= 60) { // 60 minutes in an hour
       hours = Math.floor(val /60); // Number of hours
       val = val - (hours * 60); // Remove hours from val
    }
    minutes = Math.floor(val); // Number of minutes
    var stringHours = hours;
    var stringMinutes = minutes;
    if (hours < 10) {
        stringHours = '0' + hours;
    }
    if (minutes < 10) {
        stringMinutes = '0' + minutes;
    }
    var returnString =  stringHours + ':' + stringMinutes
    return returnString.trim(); // Removes the extraneous space at the end
})(input)

display

Of course, you need rules to do whatever it is you want with time-of-day-in-minutes values.

[tose (torsten)]

@tillykeats

EDIT: Just to ensure we’re on the same train, I mean this:

Yes, we talk about the same thing.

@tillykeats

but I had to dl this from here , that from there, then edit vue.js and hack other css and js files;

There are three locations and i checked the downloads → OK
The only file to edit is the timeLinePickers.rules → here you describe your own enviroment - thats nessesary
Don’t touch vue.js and the css file. It’s ready to use!

[tillykeats (tilly)]

Mate, if I could be bothered to expose myself to a repeat night of fruitless torture, I would commit to undertaking another attempt with timepicker, sadly I have neither the inclination nor the time. I can assure you 101% it failed and failed miserably when I tried (twice) and I even had to get into developer mode in Chrome to examine and resolve errors in scripts. I swear. I appreciate your efforts and it is a shame I was not able to experience the fruits of your labour.

[tose (torsten)]

I think you will find a good solution. Good luck.

[tillykeats (tilly)]

Ok @tose , it WORKS now and I need to test it, but before I do, I want to help you.
Here are some clarifications that you should be providing in your articles:

1. vue.js

It is not obvious what the user needs to do, there are many options on the page you link to, including big green buttons that download the wrong files. Instead, the user must go here https://cdn.jsdelivr.net/npm/vue/dist/ and download the vue.js file.

2. vue resource

Again, it is not obvious as different branches are selected on the landing page depending on the user GitHub settings - if indeed they have an account? The user must click on branch and select master because default is the latest which does not work.
Then the user must download and unpack the project and must then rename the directory to vue-resource because by default the downloaded and unzipped directory will be named as: vue-resource-devel or vue-resource-2.0 - if this isnt renamed it will not work !!

ALSO

In openhab-conf/html/timeline-picker/index.html there is an include for js/vue-resource.js however that file does not exist because when unzipped it creates a directory *vue-resource/… so the user needs to:

cp js/vue-resource/dist/vue-resource.js js/

3. OpenHAB app

The widget in the sitemap does not work with the OpenHAB app, when outside a grouping, but is fine if used in a browser.

4. Rules error

My VScode LSP is generating errors, such as regarding the rules - which I do not understand because I do not code in Java, HTML, CSS or JS.

{
	"resource": "/z:/rules/timeLinePicker.rules",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "org.eclipse.xtext.xbase.validation.IssueCodes.invalid_mutable_variable_access",
	"severity": 8,
	"message": "Cannot refer to the non-final variable currDay inside a lambda expression",
	"startLineNumber": 105,
	"startColumn": 51,
	"endLineNumber": 105,
	"endColumn": 58
}

+ several other similar errors at different src code lines.

5. Icons

None of the icons appear - I just get the usual block square image placeholder for the icon(s).

!
!
!

Apologies if the above is obvious to you, but I assure you it wasnt obvious to me and whilst I am useless at web apps, html, css and JS, I have been using linux for 35+ years ! As you can see, it is not as simple as following your guide - doing that verbatim will not work without the above changes.

Now that you have shown me what can be done by “a few scripts” and style files, I might learn HTML, JS, CSS, JAVA [cough cough] and so on LoL. I would like the background to be black not grey, as my sitemap and browser rendering is on black background. ah well
WELL DONE !!