Skip to content

Progress Bar

wutname1 edited this page May 12, 2019 · 1 revision

Component stability: Beta

Progress Bar

StdUi:ProgressBar(parent, width, height, vertical)

Description:

Progress Bar is actually blizzard StatusBar which has additional features. Keep in mind that widget will not be visible if you will not provide width and height, it has no defaults.

Arguments:

  • parent Frame - object that should be a parent
  • width number (Optional) - Width of the progress bar
  • height number (Optional) - Height of the progress bar
  • vertical bool (Optional) - Indicates if progress bar should be vertical (default: false - horizontal);

Returns:

Named children:

  • progressBar.text - FontString - Font string that is used as progress bar text
  • progressBar.texture - Texture - Texture that is used as bar

Example:

local progressBar = StdUi:ProgressBar(window, 200, 20);

Methods:

StdUi adds 2 custom methods to this object

  • GetPercentageValue() - returns value in percentage, not rounded
  • TextUpdate(min, max, value) - returns formatted text to display on progress bar, override this if you wish to display custom text like this:
progressBar.TextUpdate = function(self, min, max, value) -- custom text, self is instance of progress bar
   return min .. ' - ' .. max .. ' (' .. value .. ')';
end;

In addition it has all StatusBar methods:

  • GetMinMaxValues() - Get the current bounds of the bar.
  • GetOrientation()
  • GetStatusBarColor()
  • GetStatusBarTexture() - Returns the texture object for the bar
  • GetValue() - Get the current value of the bar.
  • SetMinMaxValues(min, max) - Set the bounds of the bar.
  • SetOrientation(orientation) - 'HORIZONTAL' or 'VERTICAL'.
  • SetStatusBarColor(r, g, b[, alpha]) - Set the color of the bar.
  • SetStatusBarTexture('file' or texture[,'layer']) - Sets the texture of the bar.
  • SetValue(value) - Set the value of the bar.

It also inherits from Frame, so for rest of the methods check: Here

Events

  • OnValueChanged(value)

Warning: By default progress bar is already hooked on OnValueChanged script handler. So if you plan to override it. Make sure to update text yourself.

Other than that, StatusBar inherits from Frame so it has all event handlers from it. You can check list: Here.

Demo

Click to play video:

local StdUi = LibStub('StdUi');


local window = StdUi:Window(UIParent, 'Title', 300, 400);
window:SetPoint('CENTER');

local pb = StdUi:ProgressBar(window, 200, 20);
StdUi:GlueTop(pb, window, 20, -40, 'LEFT');
pb:SetMinMaxValues(0, 1000);
pb:SetValue(300);

local pb2 = StdUi:ProgressBar(window, 200, 20);
StdUi:GlueBelow(pb2, pb, 0, -10);
pb2:SetMinMaxValues(0, 1000);
pb2:SetReverseFill(true);
pb2.TextUpdate = function(self, min, max, value) -- custom text
   return min .. ' - ' .. max .. ' (' .. value .. ')';
end;
pb2:SetValue(700);


local pb3 = StdUi:ProgressBar(window, 30, 200, true);
StdUi:GlueBelow(pb3, pb2, 0, -10, 'LEFT');
pb3:SetMinMaxValues(0, 1000);
pb3:SetValue(700);
pb3:SetReverseFill(true);
pb3.text:Hide(); -- no text

local pb4 = StdUi:ProgressBar(window, 30, 200, true);
StdUi:GlueAfter(pb4, pb3, 10, 0);
pb4:SetMinMaxValues(0, 1000);
pb4:SetValue(300);
pb4:SetStatusBarColor(1,0,0,0.6) --custom color

local t1 = 0;
local val = pb3:GetValue();
window:SetScript('OnUpdate', function(_, elapsed)
      t1 = t1 + elapsed;
      if t1 > 0.1 then
         t1 = 0;
         val = val + 5;
         if val >= 1000 then
            val = 0;
         end
         pb:SetValue(val);
         pb2:SetValue(val);
         pb3:SetValue(val);
         pb4:SetValue(val);
      end
end);