Timeline for Basic UI

Tutorials & Examples
,
15

Hi everyone!

I managed to extend and (I think) improve the Timeline, modifying @patrik_gfeller’s excellent scripts!
Additions/modifications:

  • added Item parameter to display timeline for a single item;
  • added Hours parameter to specify the timeframe to display – much like period parameter of Chart element – if not present, default to 24h;
  • added the ability to plot empty time bar for items which do not have state changes in the interval;
  • added serviceId to specify persistence service to use;
  • added support for Contact items;
  • pad with leading 0 the day, month, minute, etc. of the date when accessing rest/persistence/items/;

Examples:

Webview url="/static/Visualization/Timeline.html?Item=Gas_Boiler_Actuator_Switch" height=4

image
image.png1290×285 9.74 KB 

Webview url="/static/Visualization/Timeline.html?Group=gPresence&Hours=12" height=6

image
image.png1235×452 15 KB 

Webview url="/static/Visualization/Timeline.html?Group=Lights&serviceId=jdbc&Hours=24" height=12

image
image.png1255×792 28.5 KB

As I cannot post a zip archive to this forum, here’s a link to download html.zip. The contents of this archive needs to be placed in conf/html folder like this:

html
|- css
|    |- visualizationStyle.css
|-  javascript
|    |- date.js
|    |- jquery.csv.js
|    |- jquery.csv.min.js
|    |- openHAB.js
|- Visualization
     |- Timeline.html

Once more, many, many thanks to @patrik_gfeller!!!

7 Likes