Search code examples
tizentizen-wearable-sdktizen-web-app

How to add endpoints to circle progressbar?


I would like to use the Circle-Progressbar in Tizen web as answering method for a questionnaire. It is important that the answering scale has poles (or endpoints) like "Low" for 0% and "High" for 100%. is there a possibility to somehow "pull" the beginning and end of the Progressbar apart and add a label to each, containing the mentioned words? It should look similar to that one on the picture below, found on http://ieeexplore.ieee.org/document/7545959/

Scale with enpoint-labels

Thanks in advance


Solution

  • I'm just posting how I solved this exactly, in case someone runs into the same situation.

    I imported the JQuery Plugin "roundSlider" from here: http://roundsliderui.com/ into the Tizen Project. (via .zip file and the import-feature)

    I chose the "pie" shape for my needs and added labels to the ends. Now it looks like this: Screenshot of Wearable with roundslider

    The value can be put in by turning the bezel or touching the slider at the desired position.

    Thanks to Soundar for the great help and thanks to Armaan for providing the hint into the right direction.