Languages

Menu
Sites
Language
TAU circular progress setup and css styling on wearable web app

Hi,

I am just starting building my first app on Tizen.

My intention is to create a page that has 4 circular progress components in the corners, each covering about 20% of the full screen each having a different color.

I was able to create a first working page using an example with a full screen progress bar using TAU which is working fine. 
But I am completely stuck on how to further define the layout of the circular progress bars, I cannot find any reference to tau methods/CSS/HTML that can be used to change size, colors etc.

An example or pointing me to a reference or an example would be appreciated. 

Thx,
Jeroen

Edited by: Jeroen V on 16 Dec, 2018

Responses

2 Replies
Armaan-Ul- Islam

API Reference for TAU: Circular ProgressBar resides here, Check this out If you haven't already...

https://developer.tizen.org/development/api-references/web-application?redirect=https://developer.tizen.org/dev-guide/4.0.0/org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm

 

If TAU: Circular ProgressBar doesn't work out for your requirement, You are free to explore all the jQuery or JavaScript libraries for ProgressBar over the Intenet. Just Some Examples:

https://www.npmjs.com/package/jquery-circle-progress

https://kimmobrunfeldt.github.io/progressbar.js/

https://codepen.io/uoryon/pen/XNPjWE

http://ignitersworld.com/lab/radialIndicator.html

...

Jeroen V

Hi,

Thx for your response.

I did find the API but there is no description on any method to cange color or appearance. Maybe this is not possible? 

Thx for the links, took a quick look and this should definitely help me!!

Regards,

Jeroen