GuiProgressBar() style BORDER_WIDTH issues

[pmHaugen]

This might be me just being confused. This is the first time I ever submit a issue on git, so im sorry if I failed to find existing information about this or if I did something wrong.

I am getting weird ProgressBar height issue when changing the BORDER_WIDTH. This is the only code I have that alters the style for PROGRESSBAR

GuiSetStyle(LABEL, TEXT, ColorToInt(BLACK));
GuiSetStyle(PROGRESSBAR, BORDER_COLOR_NORMAL, ColorToInt(BLACK));
GuiSetStyle(PROGRESSBAR, BORDER_COLOR_FOCUSED, ColorToInt(BLACK));
GuiSetStyle(PROGRESSBAR, BASE_COLOR_PRESSED, ColorToInt({74, 197, 53, 255}));
GuiSetStyle(PROGRESSBAR, BORDER_WIDTH, 10);
GuiSetStyle(PROGRESSBAR, PROGRESS_PADDING, 0);


GuiProgressBar(Rectangle{200.0f, static_cast<float>(GetRenderHeight())-350.0f, static_cast<float>(GetRenderWidth()/2)-400, 30.0f}, "Health", 
  TextFormat("%.0f", *HealthStat), HealthStat, 0.0f, 10000.0f);
GuiProgressBar(Rectangle{200.0f, static_cast<float>(GetRenderHeight())-300.0f, static_cast<float>(GetRenderWidth()/2)-400, 30.0f}, "Offence", 
  TextFormat("%.0f", *OffenceStat), OffenceStat, 0.0f, 1000.0f);
GuiProgressBar(Rectangle{200.0f, static_cast<float>(GetRenderHeight())-250.0f, static_cast<float>(GetRenderWidth()/2)-400, 30.0f}, "Defence", 
  TextFormat("%.0f", *DefenceStat), DefenceStat, 0.0f, 1000.0f);
GuiProgressBar(Rectangle{200.0f, static_cast<float>(GetRenderHeight())-200.0f, static_cast<float>(GetRenderWidth()/2)-400, 30.0f}, "Speed", 
  TextFormat("%.0f", *SpeedStat), SpeedStat, 0.0f, 1000.0f);
GuiProgressBar(Rectangle{200.0f, static_cast<float>(GetRenderHeight())-150.0f, static_cast<float>(GetRenderWidth()/2)-400, 30.0f}, "Brains", 
  TextFormat("%.0f", *BrainsStat), BrainsStat, 0.0f, 1000.0f);

And all the progressbar gets a weird shrinking in height. The more BORDER_WIDTH I have, the smaller the fill rectangle becomes and the border edges on the right gets offset weirdly. It also overflows the border on the right. The bar and border also shrinks on the right side when the bar is filled.

I were able hack together something that works, probably not helpfull since it might have some bugs, but to display my point I submit it anyway

// Progress Bar control extended, shows current progress value
int GuiProgressBar(Rectangle bounds, const char *textLeft, const char *textRight, float *value, float minValue, float maxValue)
{
    int result = 0;
    GuiState state = guiState;

    float temp = (maxValue - minValue)/2.0f;
    if (value == NULL) value = &temp;

    // Progress bar
    Rectangle progress = { bounds.x + GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) + GuiGetStyle(PROGRESSBAR, PROGRESS_PADDING),
                           bounds.y + GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) + GuiGetStyle(PROGRESSBAR, PROGRESS_PADDING),
                           0,
                           bounds.height - GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) - 2*GuiGetStyle(PROGRESSBAR, PROGRESS_PADDING) -1 };

    // Update control
    //--------------------------------------------------------------------
    if (*value > maxValue) *value = maxValue;

    // WARNING: Working with floats could lead to rounding issues
    progress.width = ((float)*value / (maxValue - minValue)) * (bounds.width - 2 * GuiGetStyle(PROGRESSBAR, BORDER_WIDTH));
    //--------------------------------------------------------------------

    // Draw control
    //--------------------------------------------------------------------
    if (state == STATE_DISABLED)
    {
        GuiDrawRectangle(bounds, GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), GetColor(GuiGetStyle(PROGRESSBAR, BORDER + (state*3))), BLANK);
    }
    else
    {
        if (*value > minValue)
        {
            // Draw progress bar with colored border, more visual
            // Top Bar
            GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y, (int)progress.width + (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) }, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_FOCUSED)));
            // Left Bar
            GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 1, (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.height - 2 }, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_FOCUSED)));
            // Bottom Bar
            GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + bounds.height - 1, (int)progress.width + (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) }, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_FOCUSED)));
        }
        else GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y, (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.height+GuiGetStyle(PROGRESSBAR, BORDER_WIDTH)-1 }, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_NORMAL)));
                                // Right Bar
        if (*value >= maxValue) GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x + progress.width + (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.y, (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.height+GuiGetStyle(PROGRESSBAR, BORDER_WIDTH)-1}, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_FOCUSED)));
        else
        {
            // Draw borders not yet reached by value
            //Top Bar
            GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x + (int)progress.width + (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.y, bounds.width - (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) - (int)progress.width - 1, (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) }, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_NORMAL)));
            //Bottom Bar
            GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x + (int)progress.width + (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.y + bounds.height - 1, bounds.width - (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) - (int)progress.width - 1, (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH) }, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_NORMAL)));
            // Right Bar
            GuiDrawRectangle(RAYGUI_CLITERAL(Rectangle){ bounds.x + bounds.width - (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.y, (float)GuiGetStyle(PROGRESSBAR, BORDER_WIDTH), bounds.height+GuiGetStyle(PROGRESSBAR, BORDER_WIDTH)-1 }, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BORDER_COLOR_NORMAL)));
        }

        // Draw slider internal progress bar (depends on state)
        progress.width -= 2*GuiGetStyle(PROGRESSBAR, PROGRESS_PADDING);
        GuiDrawRectangle(progress, 0, BLANK, GetColor(GuiGetStyle(PROGRESSBAR, BASE_COLOR_PRESSED)));
    }

[raysan5]

@pmHaugen Thanks for the review and excuse the late response! Definitely there could be some inconsistencies with GuiProgressBar(), afair, it was reviewed a while ago to support the border color change with progress.

Please, could you send a PR for integrating the improvements?

[pmHaugen]

No worries, thanks for reviewing my issue! Certainly I can do that : )