Hi all, my name is Horesh Lopian, and I am currently working as a Tulip Engineer for Bow and Stern, a Tulip system integrator and technical partner, specializing in SAP integration to Tulip.
I am currently working on a suite of apps to help manage and log time out of refrigeration for materials and ingredients used within the pharmaceutical industry.
One of the features we wanted to add was a visual time bar to show the running time allocation of specific materials or handling units, and I wanted to share the custom widget I made for this purpose as I thought it could benefit a lot of other people and many different use cases:
The time bar allows you to control the following:
- Total time (how much time does the bar represent)
- Time left (how much of the total time do we have left)
- Threshold at which warning stage begins (warning stage is when the bar changes colour and
an event could occur which is done in percentage out of 100%, we used it to warn users and
send Team messages) (Threshold set by the app builder to indicate a critical point has been
crossed and to allow an evet to occur as well as the colour of the bar to change)
- Pause and Start/Reset (Allow the timer to be paused and restarted)
- Choose the colour of the bar (the original colour of the running bar)
- Choose the colour the bar will change to once threshold is crossed (the colour which the bar
changes to in warning stage)
Events are permitted when:
- Threshold set by user is crossed
- Time has fully elapsed
In addition, HTML, Java Script and CSS sections are all heavily annotated to allow other users to change or add things if they wish to.
The app we are currently working on uses this widget and the widget is working perfectly, so hopefully this could be beneficial to some of you too.
Hope this helps, and please do tell us if there is anything we can help you with regarding this widget.
Following is the attached code and video example of what the widget looks like.
customWidget-BownStern Timer V4 .json (5.5 KB)
I am also attaching screenshots of the code file, to help users who are finding it hard to implement it:
