Tasharen Entertainment Forum

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 22, 2013, 02:44:14 AM

Title: UIProgressBar
Post by: ArenMook on November 22, 2013, 02:44:14 AM
Overview

UIProgressBar is the base class that both the UISlider (http://www.tasharen.com/forum/index.php?topic=6715) and the UIScrollBar (http://www.tasharen.com/forum/index.php?topic=6733) inherit from. You can also use it by itself to create progress bars -- sliders without a thumb.

(http://www.tasharen.com/ngui/uiprogressbar.jpg)

The only thing a UIProgressBar requires to function is a refrence to the Foreground widget. This widget should be of the absolute maximum dimensions the progress bar will be allowed to occupy, which is what happens when its Value is at 1.0 (100%).

To create a very simple progress bar, just create a sliced sprite (http://www.tasharen.com/forum/index.php?topic=6704) and give it a width of 300 with the height of 20.

Next, add a UIProgressBar script to that sprite (the background), and set up the Foreground field accordingly. At this point you can hit Play and adjust the values in the Inspector window, and the sprite should react accordingly.

To change the direction in which the progress bar will increase as its value goes from 0 to 1, change the Direction field.

If you want the progress bar to be interactable, have a look at the UISlider (http://www.tasharen.com/forum/index.php?topic=6715) component.

In the OnValueChange section you can specify a function that will be called when the progress bar's value changes. If you've added the label somewhere, you can easily reference its SetCurrentPercent function, and the label's value will show the Progress Bar's value in percent. To do this, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentPercent function from the drop-down list.

To make a custom function eligible for On Value Change, simply make it of type "public void FuncName ()" like so:
  1. public void MyFunc () { Debug.Log(UIProgressBar.current.value); }

Pro-Tip #1

You are not limited to using sprites for the progress bar's foreground. One interesting example would be to use a UILabel (http://www.tasharen.com/forum/index.php?topic=6706) set to "ClampContent" overflow and Max Lines of 1. The label's text will be filled as the progress bar's value increases.

Pro-Tip #2

You can add OnChange delegate listeners via code by using EventDelegate.Add, just like with everything else:
  1. public class Test : MonoBehaviour
  2. {
  3.     void Awake()
  4.     {
  5.         UIProgressBar pg = GetComponent<UIProgressBar>();
  6.         EventDelegate.Add(pg.onChange, MyFunc);
  7.     }
  8.  
  9.     void MyFunc ()
  10.     {
  11.         Debug.Log(UIProgressBar.current.value);
  12.     }
  13. }

Class Documentation

http://tasharen.com/ngui/docs/class_u_i_progress_bar.html

If you have a question regarding this component or would like me to clarify something, just post a reply here.
Title: Re: UIProgressBar
Post by: niosop on December 12, 2013, 12:50:48 AM
UIProgressBarEditor.cs seems to be missing from the latest Asset Store release.  As well as UISliderEditor.cs and possibly others, but I haven't searched through to see which are missing.
Title: Re: UIProgressBar
Post by: ArenMook on December 12, 2013, 05:58:31 AM
You likely didn't follow upgrade instructions from the Readme file that involve deleting the NGUI folder.
Title: Re: UIProgressBar
Post by: niosop on December 12, 2013, 11:47:36 AM
That's very possible, I don't know who did the NGUI update commit.  Doing a clean reinstall fixed it right up.  Thank you so much for your time, it is appreciated.
Title: Re: UIProgressBar
Post by: nzen on May 15, 2014, 02:29:03 AM
Is there any need for an Alpha setting on the progress bar at all? It seems to auto get its value from the Foreground sprite's alpha.

It's stopping me being able to customise any child sprite alpha colour.
Title: Re: UIProgressBar
Post by: ArenMook on May 15, 2014, 12:11:45 PM
It's a convenience method. If you look inside UIProgressBar.alpha you will see where it actually comes from and what it affects.
Title: Re: UIProgressBar
Post by: Edy on June 06, 2014, 11:13:32 AM
I don't see the logic on the UIProgressBar.alpha property either. UIProgressBar is a component made of widgets (UIWidgetContainer), not a widget itself. When I want the referred widgets to be affected by the alpha uniformly, I just arrange them in the proper hierarchy (I.e. making all them children of the same UIWidget). UIProgressBar.alpha looks to have been useful on past versions (< 3), but now I feel it more a constraint than a helper.

BTW, the ability of using UILabel as foreground seem not to be working (as per version 3.6.2). The label is always displayed in full no matter the value of the UIProgressBar.
Title: Re: UIProgressBar
Post by: Edy on June 06, 2014, 11:25:48 AM
I've just realized that the alpha property is used when showing or hidding the Scroll Bars from a UIScrollView component. Instead of directly modifying the alpha of the fore/back/thumb widgets, I think it might be more correct to just modifying the alpha in the UIWidget component in the same GameObject as the UIProgressBar.

For instance, modifying the UIProgressBar property to something like this:

  1.         public float alpha
  2.         {
  3.                 get
  4.                 {
  5.                         UIWidget w = GetComponent<UIWidget>();
  6.                         if (w != null) return w.alpha;
  7.                         return 1f;
  8.                 }
  9.                 set
  10.                 {
  11.                         UIWidget w = GetComponent<UIWidget>();
  12.                         if (w != null) w.alpha = value;
  13.                 }
  14.         }
  15.  

This introduces the requirement of an UIWidget to be adjacent to the UIScrollBar component for using the "auto-hide scroll bars" feature from the Scroll View. Probably there are better solutions (maybe just using NGUI.SetActive for enabling/disabling scroll bars from the scroll view?). I'm just thinking loud.
Title: Re: UIProgressBar
Post by: chiphuc113 on June 18, 2014, 10:35:36 AM
Can I use UIProgressBar to make a Circle Progress Bar ?
Title: Re: UIProgressBar
Post by: ArenMook on June 18, 2014, 08:25:40 PM
If you set the sprite to be Filled 360, sure.
Title: Re: UIProgressBar
Post by: chiphuc113 on June 18, 2014, 09:43:19 PM
I was create a progress bar by Widget Wizard. And I changed type of ForeGround by Filled 360. But i only can change the value thought Fill Amount. Anytime I change value thought UISlider it will change type of ForeGround to Horizontal. Have anyway to change the value thought UISlider. Please help me, I m stuck.
Title: Re: UIProgressBar
Post by: ArenMook on June 19, 2014, 06:55:11 PM
Don't use the progress bar at all in this case. Just change the sprite's Fill Amount (UIBasicSprite.fillAmount).
Title: Re: UIProgressBar
Post by: chiphuc113 on June 19, 2014, 09:41:47 PM
Thank you ArenMook. I did it.
Title: Re: UIProgressBar
Post by: schneidb on July 18, 2014, 01:06:44 PM
Regarding Pro-Tip #1...

I can't get this to work, as described...

It does work if the Foreground field is a UISprite, but not when the Foreground field is a UILabel.  I am using the "Unity" style font (used to be called dynamic) rather than NGUI.  Is this why it isn't working or am I missing something?
Title: Re: UIProgressBar
Post by: ArenMook on July 19, 2014, 12:50:37 PM
Yup, you're right -- seems I broke that functionality at some point. I'll look into fixing it.
Title: Re: UIProgressBar
Post by: skatola on September 12, 2015, 06:50:06 PM
Hi! can u help me to setup a progress bar for filling while receive a www data package?
i never did something like that :\
For now i have a scene, when i enter in it just my logo and a label "updating" appear and disappear when the downloading is finished, i want to try to use your progress bar for give a feedback to the user, so he know how much he have to wait : )
Title: Re: UIProgressBar
Post by: ArenMook on September 13, 2015, 06:19:40 AM
It's not an NGUI question. NGUI's side of it begins and ends with
  1. slider.value = www.progress;
Write a function that yields while waiting for the www to finish, and not just "yield www" but something like
  1. while (!www.isDone) { slider.value = www.progress; yield return null; }
Title: Re: UIProgressBar
Post by: skatola on September 13, 2015, 02:17:02 PM
thank you for your help : )