Search code examples
matlabgraphprogress-barprogress

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

Solution

  • 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]);
    drawnow;
end

    enter image description here