First Custom Widget -- Timer Widget

I was able to create a simple timer widget that allows you to stop or start a timer on the screen, reset to 0 and save the current reading to a variable for later use.

It took a bit to get started, but the help doc helped and good old googling helped also. Something that was not clear in the document is how to add external libraries. To enable external lib, click on the 3 dots left of the cancel and save buttons. Moment.js is available but a plugin for duration formatting is not so I had to create a timer from scratch (where google helped :blush:).

One major thing that will need to be considered is multiple widgets on one step. We have a use case at ELO where we need multiple timers (one per machine – 6 in total) and they need to run independently. I tried a few tricks to get multiple timers working on the same page (assign random ID to the div, save props into object, etc.) but did not get it to work. I will keep trying (add a empty widget as a constructor to build out the code and the timer widgets that interact with the code).

So far this a very cool!! I am excited to be involved and keep learning.

2 Likes

Update to the widget.

Added blinking feature to the timer.

Added the functionality to provide a setpoint in secs when a triggers is fired and a bool to update the font size, color and blinking.

With this feature the timer can be shone in a different color or size or blinking after a predefined amount of second have passed.

IMPROVEMENT IDEAS:

  1. reorder the props – as a widget gets more features new props will be added, but we cannot reorder them (manual recreation). It would be nice to reorder them so when being used in an app they can be easy to understand

  2. Widget publish – when a widget is saved it reloads it on the app it is being used. This will make it hard to update / change widgets and will lead to many widgets (test, release, etc.). Ability to publish will make this better.

Thank you,
Parth

Hi Parth,

Looking great this is a nice first widget.

Can you say more about the multiple timers not working as you would expect on the same step?

Thanks for the feedback on the external libraries and props re-ordering.

On the widget publish/save point. The current state is that when the app is published the widget will be locked. To edit the widget you will need to duplicate. We are following a similar process to connectors. The team is working on feature with in the platform for versioning of all components within Tulip and was easiest to follow the same approach we use with connectors for now.

Good to hear about your progress. If you want you can download as JSON (from the widgets main page) and share your widget here.

Thanks
Eddy

Thanks for the feedback @parth.parmar. I just updated the Knowledge Base article to show how to enable external libraries, and showing how to import/export libraries.

Pete

2 Likes

@Pete_Hartnett – thanks for adding the info to the help article.

@eddy.atkins – Thank you

How the widget publishing works make sense. I have been testing without publishing and this is why I am able to make changes on the fly. Locking the widget once used on a published app is a good fail safe to ensure stable processing by the shop floor. I think component versioning will be very useful as a app designer (always adding features to enhance the capabilities).

After further testing it looks like multiple widgets is not an issue. I must have made a mistake when initially testing. What gave me pause was that each widget will be loaded onto the page and I am using document.getElementById(id) to get the element and update as needed using javaScript. I assumed if I have multiple widgets with the same id, the same functions and variables then when they load with the javaScript onto the page it would cause problems. I guess it’s not a problem (maybe the way the widget is added to the page the javaScript is scoped to just that widget div/canvas). I would love to learn more about how this works.

As you can see in the email below, multiple timer widgets work fine on the same page.

I will add some comments to the code and add it to this post so others can use this widget.

customWidget-Timer Widget - hh_mm_ss.json (5.9 KB)

current version of Timer Widget @eddy.atkins @EddyA

2 Likes

On the multiple widgets on a page. Each widgets runs with in its own iframe and is contained. So they won’t effect each other. :grinning: