Timeline

Add-on Marketplace UI Widgets
1

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;

2021-01-29
2021-01-292560×1165 130 KB

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
4 Likes
2

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.

3

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

2021-01-29
2021-01-292560×1165 130 KB

4 Likes
4

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
5

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")
6

Hi Fabian,
I installed your widget with the Timeline-JSR Version Files · develop-migrationToJSR223_javascript · Torsten / openhab timeline picker · GitLab
On my first try on a separate Testpage I could configure it for TransferItem1, that seems to be OK, but only for that. When I tried to use a second timeline for TransferItem2 it crashes.
The YAML Code of the page is incomplete for the second widget.

7

The widget also does not work for me even with the new version v3 for openHAB 3.x (graalVM).

My solution is to create a WebFrame with the appropriate data

 - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-webframe-card
                      config:
                        src: /static/tlp-jsr/index.html?id=234&mode=15,67&linkedItems=Raum1Kugelhahn_Betrieb_Auto
                        title: Timeline