Timeline

I’m in the process of migrating to OH3 and have taken the opportunity to upgrade some of the base functionality in my home automation setup. To that end I’ve discovered the great timeline component created by Torsten (details at Torsten / openhab timeline picker · GitLab)

To make is easier, I’ve created a widget to encapsulate the timeline functionality and parametrize the URL argument. YAML code below.

Install Timeline code per the instructions. I installed mine in the recommended /static/time-line-picker location. However since I access my OH3 instance via difference URLs from inside and outside my firewall, I had to modify the code to automatically pick up the hostname from the URL.

In switchPoint.js replace

let openHAB_ip = urlParams.get('ip');

with

let openHAB_ip = urlParams.has('ip')? urlParams.get('ip'): location.host;

edit - @ysc: Added screenshot from post #3

Widget YAML Code:

uid: widget_timeline
tags: []
props:
  parameters:
    - description: Title to display on widget
      label: Timeline Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Transfer Item
      label: transfer_item
      name: transfer_item
      required: true
      type: TEXT
    - description: Normal, Drop, Raise, ... ON, OFF...
      label: States
      name: states
      required: false
      type: TEXT
    - description: default - 1,2,3,4,5,6,7
      label: Axis Label
      name: axis_label
      required: false
      type: TEXT
    - description: 1-3 or 555E7B,B7D968,B576AD
      label: Colorset
      name: colorset
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 29, 2021, 6:14:23 AM
component: oh-webframe-card
config:
  src: ="/static/time-line-picker/index.html?transferItem="+ props.transfer_item + ((props.states)?("&states="+props.states):"")+"&yAxisLabel="+((props.axis_label)?props.axis_label:"1,2,3,4,5,6,7")+(props.colorset?"&colorset="+props.colorset:"")
  height: 600
  title: = props.title
2 Likes

Thanks for posting! This widget I think will get a lot of use.

It would be nice to post a screen shot or two for how it looks.

I’ve moved it to the Add-ons UIs section as that seems to be where most people are posting custom widgets like these.

As requested – this is how the timeline looks like. I used to control my HVAC and irrigation portions of OH.

4 Likes

hi Fady, made some changes to ur widget, added all of the possible parameters. maybe will be of use for someone else.

uid: widget_klokthermostaat
tags: []
props:
  parameters:
    - description: Titel klokthermostaat
      label: klokthermostaat naam
      name: title
      required: false
      type: TEXT
    - context: item
      description: Transfer Item
      label: transfer_item
      name: transfer_item
      required: true
      type: TEXT
    - description: On,Off,Up,Down,Nacht,Dag,Comfort,Boost,...
      label: States
      name: states
      required: false
      type: TEXT
    - description: default - 1,2,3,4,5,6,7
      label: Axis Label
      name: axis_label
      required: false
      type: TEXT
    - description: 1-3 or ffea00,2D83C4,d000ff,1eff00,ff0000
      label: Colorset
      name: colorset
      required: false
      type: TEXT
    - description: deactivation clock
      label: deactivation
      name: deactivation
      required: false
      type: TEXT
    - description: zoom
      label: zoom
      name: zoom
      required: false
      type: TEXT
    - description: language:nl,en,de,fr,...
      label: language
      name: language
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 6, 2021, 9:33:25 AM
component: oh-webframe-card
config:
  src: ="http://192.168.0.219:8080/static/time-line-picker/index.html?ip=192.168.0.219:8080?transferItem="+ props.transfer_item +"&states="+((props.states)?props.states:"Nacht,Dag,Comfort,Boost") +"&yAxisLabel="+((props.axis_label)?props.axis_label:"1,2,3,4,5,6,7") +"&zoom="+((props.zoom)?props.zoom:"force") +"&lang="+((props.language)?props.language:"nl") +"&colorset="+((props.colorset)?props.colorset:"ffea00,2D83C4,d000ff,1eff00,ff0000") +"&deactivation="+((props.deactivation)?props.deactivation:"true") 
  height: 600
  title: = props.title

1 Like

There is a typo in one line of the YAML:
There is a % instead of & in the URL-Parameterlist. Just if anyone is wondering, why this is not working, like me :slight_smile:

  src: ="http://192.168.0.219:8080/static/time-line-picker/index.html?ip=192.168.0.219:8080&transferItem="+ props.transfer_item +"&states="+((props.states)?props.states:"Nacht,Dag,Comfort,Boost") +"&yAxisLabel="+((props.axis_label)?props.axis_label:"1,2,3,4,5,6,7") +"&zoom="+((props.zoom)?props.zoom:"force") +"&lang="+((props.language)?props.language:"nl") +"&colorset="+((props.colorset)?props.colorset:"ffea00,2D83C4,d000ff,1eff00,ff0000") +"&deactivation="+((props.deactivation)?props.deactivation:"true")