matlab progress bar not depanding on time

To explain my question i will give an example:

Let same i'm playing a game and i have 50Exp from 120Exp till i get my next level.

I would like to make a horizontal bar that shows 50/120 of the bar in green and the rest of it red. Just like progress bar but that depends on values and not on Matlab time calculation. I thought to use Barh graph but I don't need all the axis and stuff like this. I want it to look something like this.

enter image description here

If anyone knows i had like to know,

Thank you


Basically what you are looking for is:

draw a colored rectangle over another colored rectangle.

In MATLAB, a colored rectangle can be rendered with axes, bar, surf, patch, image, rectangle, or annotation('rectangle'), to name a few. The EXP bar can be drawn with a combination of the above mentioned graphical objects. I'll show you three ways to do it, but remember you at least have a dozen other choices of combinations.

  1. Draw both red part('R') and green part('G') as annotation('rectangle'). Pros: Does not need to be drawn on an axes; Cons: You may have less control over its appearance compared to other methods.

  2. Draw R as an axes, and G as patch (or surf, image). Pros: Greater appearance control. If you draw G as surf or image, you can even get 3D shading and pixel art effects. Cons: Axes is a little expensive to render. If you have a bunch of these bar around, it will cause significant lag.

  3. Draw both R and G as stacked barh on an invisible axes. Pros: Can render multiple bars at a time. Cons: Must be drawn on an axes. It is not intuitive to control the absolute value of bar width.

Sample code: You can see how the 3 methods are animated.

% Background axes. This is just for texts.
main = axes('Position', [0, 0, 1, 1], 'Visible', 'off')

% Method 1: Use a red annotation rectangle as background, and overlay a
% green annotation rectangle on top.
text(0.1, 0.9, 'Annotation BKG + Annotation Front', 'Parent',main) 
barbkg_an = annotation('rectangle', [0.1, 0.8, 0.8, 0.05], 'EdgeColor','black', 'FaceColor', 'red');
barfront_an = annotation('rectangle', [0.1, 0.8, 0.3*0.8, 0.05], 'EdgeColor','None', 'FaceColor', 'green');

% Method 2: Use a red axis as background, and draw green patch on it.
text(0.1, 0.7, 'Axes BKG + Patch Front', 'Parent',main) 
barbkg_axes = axes('Position', [0.1, 0.6, 0.8, 0.05], 'Color', 'red', 'XColor', 'black', 'YColor','black','box','on','XTick',[],'YTick',[],'XLim',[0 1],'YLim',[0 1]);
bar_pc = patch([0 0.3 0.3 0], [0 0 1 1], [0 1 0]);

% Method 3: Draw "stacked" barh (so that both foreground and background are
% drawn with one barh call) on an invisible axes
text(0.1, 0.5, 'Axes BKG + Barh Front(X2)', 'Parent',main)  
barbkg_barh = axes;
bar_barh = barh([0.2 0.4], [0.3 0.3; 0.7 0.7]', 0.25, 'stacked','ShowBaseline','off')
colormap([0 1 0; 1 0 0])
set(barbkg_barh, 'Position', [0.1, 0, 0.8, 1], 'Visible','off','XLim',[0 1],'YLim',[0 1]);

% Animate them
for i = 0:0.01:1
    set(barfront_an, 'Position', [0.1, 0.8, i*0.8, 0.05]);
    set(bar_pc, 'XData', [0 i i 0]);
    set(bar_barh(1), 'YData',[i i])
    set(bar_barh(2), 'YData',1-[i i]);

enter image description here

You can use bar or barh and just hide the axes elements you don't want to see.

For example:

function testcode()
% Initialize GUI
h.f = figure('MenuBar', 'none', 'NumberTitle', 'off', 'ToolBar', 'none'); = axes('Parent', h.f, 'Units', 'Normalized', 'Position', [0.1 0.45 0.8 0.1]);

myxp = 10;
totalxp = 120;

h.currentxpbox = uicontrol('Parent', h.f, 'Style', 'edit', ...
                           'Units', 'Normalized', 'Position', [0.1 0.2 0.3 0.1], ...
                           'String', myxp, 'Callback', @(o,e)updatebar(h.f));  % Ignore usual callback inputs
h.totalxpbox = uicontrol('Parent', h.f, 'Style', 'edit', ...
                         'Units', 'Normalized', 'Position', [0.6 0.2 0.3 0.1], ...
                         'String', totalxp, 'Callback', @(o,e)updatebar(h.f));  % Ignore usual callback inputs

% For whatever reason, MATLAB needs 2 bars in order to stack, so we can
% specify a dummy bar and render it outside of our axes limits
tmph = barh([1, 2], [myxp, totalxp-myxp; 1, 1], 'stacked');

h.expbar_L = tmph(1);
h.expbar_R = tmph(2);
barwidth = h.expbar_L.BarWidth; = [1-barwidth/2 1+barwidth/2];

h.expbar_L.FaceColor = 'g';
h.expbar_R.FaceColor = 'r';

% Turn off axes ticks = []; = [];

setappdata(h.f, 'handles', h);

function updatebar(fig)
h = getappdata(fig, 'handles');
newxp = str2double(h.currentxpbox.String);
totalxp = str2double(h.totalxpbox.String);

h.expbar_L.YData = [newxp, 1];
h.expbar_R.YData = [totalxp - newxp, 1];

Gives us the following:


You can manipulate the size and location of the axes object to suit your needs.


 ? JavaFX ProgressBar/ProgressIndicator: listen for change from multiple Sliders
 ? JavaFX ProgressBar/ProgressIndicator: listen for change from multiple Sliders
 ? JavaFX ProgressBar/ProgressIndicator: listen for change from multiple Sliders
 ? JavaFX ProgressBar: how to add an animation?
 ? JavaFX ProgressBar problems
 ? JavaFX ProgressBar Wont Reset
 ? How can you send information to the windows task bar from java o javafx
 ? How to add glow effect In JavaFX custom progressbar
 ? Recalculate the progress percentage according to potential errors
 ? Recalculate the progress percentage according to potential errors