Skip to content

Adding responsive to the Style Controls Table #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bibinhoxok wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Adding responsive to the Style Controls Table #12

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
103a253
Implement responsive scaling for style controls table and improve cod…
bibinhoxok Mar 30, 2026
3db14bd
replaced old varibles
bibinhoxok Mar 30, 2026
22a933a
fixed the bug where clicking on the horizontal scrollbar
bibinhoxok Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 62 additions & 47 deletions src/rguistyler.c
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@
#include "styles/style_genesis.h" // raygui style: genesis

#define RPNG_IMPLEMENTATION
#define RPNG_DEFLATE_IMPLEMENTATION
#include "external/rpng.h" // PNG chunks management

// Standard C libraries
Expand Down Expand Up @@ -239,7 +240,7 @@ static const char *toolDescription = TOOL_DESCRIPTION;

// Controls name text
// NOTE: Some styles are shared by multiple controls
static char *guiControlText[RAYGUI_MAX_CONTROLS] = {
static const char *guiControlText[RAYGUI_MAX_CONTROLS] = {
"DEFAULT",
"LABEL", // LABELBUTTON
"BUTTON",
Expand Down Expand Up @@ -411,7 +412,7 @@ static int SaveStyle(const char *fileName, int format); // Save style binary
static char *SaveStyleToMemory(int *size); // Save style to memory buffer
static void ExportStyleAsCode(const char *fileName, const char *styleName); // Export gui style as properties array

static void DrawStyleControlsTable(int posX, int posY); // Draw style controls table
static void DrawStyleControlsTable(int posX, int posY, int width); // Draw style controls table
static Image GenImageStyleControlsTable(int width, int height, const char *styleName); // Generate controls table image

// Auxiliar functions
Expand Down Expand Up @@ -738,7 +739,7 @@ int main(int argc, char *argv[])
GuiSetStyle(DEFAULT, BORDER_COLOR_NORMAL + i, ColorToInt(GetImageColor(imTable, 12 + i*8, 46)));
}

int controlPalOffsetX = 11 + 100; // TABLE_CELL_PADDING
int controlPalOffsetX = 11 + 100;

// Get control-specific color palette
for (int i = 0; i < 13; i++) //TABLE_CONTROLS_COUNT
Expand Down Expand Up @@ -770,7 +771,7 @@ int main(int argc, char *argv[])
}
}

controlPalOffsetX += (controlWidth[i] + 2*8 - 1); //TABLE_CELL_PADDING
controlPalOffsetX += (controlWidth[i] + 2*8 - 1);
}

// Update guistyler font size
Expand Down Expand Up @@ -1492,8 +1493,11 @@ int main(int argc, char *argv[])
//----------------------------------------------------------------------------------------
if (showTableImage)
{
// Update style table width to fill the screen if it's bigger than base width (1920)
styleTableRec.width = (GetScreenWidth() > 1920)? (float)GetScreenWidth() : 1920.0f;

// Style table panning with mouse logic
if (CheckCollisionPointRec(GetMousePosition(), (Rectangle){ 0, GetScreenHeight() - styleTableRec.height - 28, GetScreenWidth(), styleTableRec.height }))
if ((styleTableRec.width > GetScreenWidth()) && CheckCollisionPointRec(GetMousePosition(), (Rectangle){ 0, GetScreenHeight() - styleTableRec.height - 28, GetScreenWidth(), styleTableRec.height }))
{
if (IsMouseButtonPressed(MOUSE_BUTTON_LEFT))
{
Expand All @@ -1502,6 +1506,7 @@ int main(int argc, char *argv[])
prevStyleTablePositionX = styleTableRec.x;
}
}

if (styleTablePanningMode)
{
if (IsMouseButtonDown(MOUSE_BUTTON_LEFT)) styleTableRec.x = prevStyleTablePositionX - (GetMouseX() - styleTableOffsetX);
Expand All @@ -1513,11 +1518,15 @@ int main(int argc, char *argv[])
}

// Calculate the slider bar width proportional to the image panel size and viewing part
GuiSetStyle(SLIDER, SLIDER_WIDTH, (int)(((float)GetScreenWidth()/1920.0f)*GetScreenWidth()));
GuiSlider((Rectangle){ 0, GetScreenHeight() - 24 - 12 + 1, GetScreenWidth(), 12 }, NULL, NULL, &styleTableRec.x, 0.0f, (float)styleTableRec.width - GetScreenWidth());
GuiSetStyle(SLIDER, SLIDER_WIDTH, 16);
if (styleTableRec.width > GetScreenWidth())
{
GuiSetStyle(SLIDER, SLIDER_WIDTH, (int)(((float)GetScreenWidth()/styleTableRec.width)*GetScreenWidth()));
GuiSlider((Rectangle){ 0, GetScreenHeight() - 24 - 12 + 1, GetScreenWidth(), 12 }, NULL, NULL, &styleTableRec.x, 0.0f, styleTableRec.width - GetScreenWidth());
GuiSetStyle(SLIDER, SLIDER_WIDTH, 16);
}
else styleTableRec.x = 0.0f;

DrawStyleControlsTable(-styleTableRec.x, GetScreenHeight() - 264);
DrawStyleControlsTable((int)-styleTableRec.x, GetScreenHeight() - 264, (int)styleTableRec.width);
}
//----------------------------------------------------------------------------------------

Expand Down Expand Up @@ -2670,13 +2679,16 @@ static void ExportStyleAsCode(const char *fileName, const char *styleName)
}

// Draw style controls table
static void DrawStyleControlsTable(int posX, int posY)
static void DrawStyleControlsTable(int posX, int posY, int width)
{
#define TABLE_LEFT_PADDING 12
#define TABLE_TOP_PADDING 20
float scale = 1.0f;
if (width > 1920) scale = (float)(width - 195)/1725.0f;

int tableLeftPadding = (int)(12*scale);
int tableTopPadding = 20;

#define TABLE_CELL_HEIGHT 40
#define TABLE_CELL_PADDING 8 // Control padding inside cell
int tableCellHeight = 40;
int tableCellPadding = 8; // Control padding inside cell

#define TABLE_CONTROLS_COUNT 13

Expand All @@ -2699,26 +2711,26 @@ static void DrawStyleControlsTable(int posX, int posY)

// Controls grid width
int controlWidth[TABLE_CONTROLS_COUNT] = {
100, // LABEL
100, // BUTTON
100, // TOGGLE
200, // CHECKBOX
100, // SLIDER
100, // SLIDERBAR
100, // PROGRESSBAR
200, // TOGGLESLIDER
140, // COMBOBOX,
160, // DROPDOWNBOX
100, // TEXTBOX
100, // VALUEBOX
101, // SPINNER
(int)(100*scale), // LABEL
(int)(100*scale), // BUTTON
(int)(100*scale), // TOGGLE
(int)(200*scale), // CHECKBOX
(int)(100*scale), // SLIDER
(int)(100*scale), // SLIDERBAR
(int)(100*scale), // PROGRESSBAR
(int)(200*scale), // TOGGLESLIDER
(int)(140*scale), // COMBOBOX,
(int)(160*scale), // DROPDOWNBOX
(int)(100*scale), // TEXTBOX
(int)(100*scale), // VALUEBOX
(int)(101*scale), // SPINNER
};

int tableStateNameWidth = 100; // First column with state name width
int tableStateNameWidth = (int)(100*scale); // First column with state name width

//int tableHeight = 256;
//int tableWidth = TABLE_LEFT_PADDING*2 + tableStateNameWidth;
//for (int i = 0; i < TABLE_CONTROLS_COUNT; i++) tableWidth += ((controlWidth[i] + TABLE_CELL_PADDING*2) - 1);
//int tableWidth = tableLeftPadding*2 + tableStateNameWidth;
//for (int i = 0; i < TABLE_CONTROLS_COUNT; i++) tableWidth += ((controlWidth[i] + tableCellPadding*2) - 1);

// Controls required variables
int dropdownActive = 0;
Expand All @@ -2731,7 +2743,7 @@ static void DrawStyleControlsTable(int posX, int posY)

// Draw left column
//----------------------------------------------------------------------------------------
rec = (Rectangle){ posX + TABLE_LEFT_PADDING, posY + TABLE_TOP_PADDING + TABLE_CELL_HEIGHT/2 + 20, tableStateNameWidth, TABLE_CELL_HEIGHT };
rec = (Rectangle){ posX + tableLeftPadding, posY + tableTopPadding + tableCellHeight/2 + 20, (float)tableStateNameWidth, (float)tableCellHeight };

// Draw style palette as small rectangles for easy color reference
for (int i = 0; i < 12; i++) DrawRectangle(rec.x + 8*i, rec.y - 14, 8, 8, GetColor((unsigned int)GuiGetStyle(0, i)));
Expand All @@ -2742,18 +2754,18 @@ static void DrawStyleControlsTable(int posX, int posY)

// Draw style rectangle
GuiSetState(i); GuiLabelButton((Rectangle){ rec.x + 28, rec.y, rec.width, rec.height }, tableStateName[i]);
rec.y += TABLE_CELL_HEIGHT - 1; // NOTE: Add/remove 1px to draw lines overlapped!
rec.y += tableCellHeight - 1; // NOTE: Add/remove 1px to draw lines overlapped!
}
//----------------------------------------------------------------------------------------

GuiSetState(STATE_NORMAL);

int offsetWidth = TABLE_LEFT_PADDING + tableStateNameWidth;
int offsetWidth = tableLeftPadding + tableStateNameWidth;

// Draw basic controls
for (int i = 0; i < TABLE_CONTROLS_COUNT; i++)
{
rec = (Rectangle){ posX + offsetWidth - i - 1, posY + TABLE_TOP_PADDING + 20, (controlWidth[i] + TABLE_CELL_PADDING*2), TABLE_CELL_HEIGHT/2 + 1 };
rec = (Rectangle){ posX + offsetWidth - i - 1, posY + tableTopPadding + 20, (controlWidth[i] + tableCellPadding*2), tableCellHeight/2 + 1 };

// Draw grid lines: control name
GuiGroupBox(rec, NULL);
Expand Down Expand Up @@ -2783,8 +2795,8 @@ static void DrawStyleControlsTable(int posX, int posY)
}
}

rec.y += TABLE_CELL_HEIGHT/2;
rec.height = TABLE_CELL_HEIGHT;
rec.y += tableCellHeight/2;
rec.height = (float)tableCellHeight;

float tempFloat = 40.0f;

Expand All @@ -2803,12 +2815,12 @@ static void DrawStyleControlsTable(int posX, int posY)
switch (i)
{
case TYPE_LABEL: GuiLabelButton((Rectangle){ rec.x, rec.y, controlWidth[i], 40 }, "#10#Label"); break;
case TYPE_BUTTON: GuiButton((Rectangle){ rec.x + rec.width/2 - controlWidth[i]/2, rec.y + rec.height/2 - 24/2, controlWidth[i], 24 }, "#2#Button"); break;
case TYPE_BUTTON: GuiButton((Rectangle){ rec.x + rec.width/2 - (float)controlWidth[i]/2, rec.y + rec.height/2 - 24/2, controlWidth[i], 24 }, "#2#Button"); break;
case TYPE_TOGGLE: GuiToggle((Rectangle){ rec.x + rec.width/2 - controlWidth[i]/2, rec.y + rec.height/2 - 24/2, controlWidth[i], 24 }, "#39#Toggle", &tempBool); break;
case TYPE_CHECKBOX:
{
GuiCheckBox((Rectangle){ rec.x + 10, rec.y + rec.height/2 - 15/2, 15, 15 }, "NoCheck", &tempBool);
DrawRectangle(rec.x + rec.width/2, rec.y, 1, TABLE_CELL_HEIGHT, GetColor(GuiGetStyle(DEFAULT, LINE_COLOR)));
DrawRectangle(rec.x + rec.width/2, rec.y, 1, tableCellHeight, GetColor(GuiGetStyle(DEFAULT, LINE_COLOR)));
tempBool = true;
GuiCheckBox((Rectangle){ rec.x + rec.width/2 + 10, rec.y + rec.height/2 - 15/2, 15, 15 }, "Checked", &tempBool);
} break;
Expand All @@ -2824,10 +2836,10 @@ static void DrawStyleControlsTable(int posX, int posY)
case TYPE_TOGGLESLIDER:
{
GuiSetStyle(SLIDER, SLIDER_PADDING, 2);
GuiToggleSlider((Rectangle){ rec.x + rec.width/2 - controlWidth[i]/2, rec.y + rec.height/2 - 24/2, controlWidth[i]/2 - TABLE_CELL_PADDING, 24 }, "#87#OFF;#83#ON", &tempInt);
DrawRectangle(rec.x + rec.width/2, rec.y, 1, TABLE_CELL_HEIGHT, GetColor(GuiGetStyle(DEFAULT, LINE_COLOR)));
GuiToggleSlider((Rectangle){ rec.x + rec.width/2 - controlWidth[i]/2, rec.y + rec.height/2 - 24/2, (float)controlWidth[i]/2 - tableCellPadding, 24 }, "#87#OFF;#83#ON", &tempInt);
DrawRectangle(rec.x + rec.width/2, rec.y, 1, tableCellHeight, GetColor(GuiGetStyle(DEFAULT, LINE_COLOR)));
tempInt = 1;
GuiToggleSlider((Rectangle){ rec.x + rec.width/2 + TABLE_CELL_PADDING, rec.y + rec.height/2 - 24/2, controlWidth[i]/2 - TABLE_CELL_PADDING, 24 }, "#87#OFF;#83#ON", &tempInt);
GuiToggleSlider((Rectangle){ rec.x + rec.width/2 + tableCellPadding, rec.y + rec.height/2 - 24/2, (float)controlWidth[i]/2 - tableCellPadding, 24 }, "#87#OFF;#83#ON", &tempInt);
GuiSetStyle(SLIDER, SLIDER_PADDING, 1);
} break;
case TYPE_COMBOBOX: GuiComboBox((Rectangle){ rec.x + rec.width/2 - controlWidth[i]/2, rec.y + rec.height/2 - 24/2, controlWidth[i], 24 }, "#40#ComboBox;ComboBox", 0); break;
Expand All @@ -2839,12 +2851,12 @@ static void DrawStyleControlsTable(int posX, int posY)
}
GuiSetState(STATE_NORMAL);

rec.y += TABLE_CELL_HEIGHT - 1;
rec.y += tableCellHeight - 1;
}

GuiSetStyle(LABEL, TEXT_ALIGNMENT, labelTextAlignment);

offsetWidth += (controlWidth[i] + TABLE_CELL_PADDING*2);
offsetWidth += (controlWidth[i] + tableCellPadding*2);
}

// Reset required styling properties
Expand All @@ -2861,16 +2873,19 @@ static Image GenImageStyleControlsTable(int width, int height, const char *style
BeginTextureMode(target);

ClearBackground(GetColor(GuiGetStyle(DEFAULT, BACKGROUND_COLOR)));
float scale = 1.0f;
if (width > 1920) scale = (float)width/1920.0f;
int tableLeftPadding = (int)(12*scale);

// Draw style title
GuiLabel((Rectangle){ TABLE_LEFT_PADDING, 15, 200, 20 }, TextFormat("raygui style: %s", styleName));
GuiLabel((Rectangle){ tableLeftPadding, 15, 200, 20 }, TextFormat("raygui style: %s", styleName));

DrawStyleControlsTable(0, 0);
DrawStyleControlsTable(0, 0, width);

// Draw copyright and software info (bottom-right)
GuiLabel((Rectangle){ TABLE_LEFT_PADDING, height - 26, 400, 10 }, "raygui style table automatically generated with rGuiStyler");
GuiLabel((Rectangle){ tableLeftPadding, height - 26, 400, 10 }, "raygui style table automatically generated with rGuiStyler");
GuiSetStyle(LABEL, TEXT_ALIGNMENT, TEXT_ALIGN_RIGHT);
GuiLabel((Rectangle){ width - 400 - TABLE_LEFT_PADDING, height - 26, 400, 10 }, "rGuiStyler created by raylib technologies (@raylibtech)");
GuiLabel((Rectangle){ width - 400 - tableLeftPadding, height - 26, 400, 10 }, "rGuiStyler created by raylib technologies (@raylibtech)");
GuiSetStyle(LABEL, TEXT_ALIGNMENT, TEXT_ALIGN_LEFT);

EndTextureMode();
Expand Down