maxamundsen/autosample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix scaling issues

Browse Source
This commit is contained in:
Max Amundsen
2026-03-03 11:35:29 -05:00
parent cde77e6ae6
commit bae74d7a96
9 changed files with 208 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/main.cpp
View File

@@ -100,6 +100,9 @@ struct AppState {
// Audio device selection
S32 audio_device_sel; // dropdown index: 0 = None, 1+ = device
S32 audio_device_prev; // previous selection for change detection
// UI scale (Cmd+/Cmd- to zoom)
F32 ui_scale;
};
////////////////////////////////
@@ -110,7 +113,7 @@ static void build_browser_panel(B32 show) {
CLAY(CLAY_ID("BrowserPanel"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIXED(200), .height = CLAY_SIZING_GROW() },
.sizing = { .width = CLAY_SIZING_FIXED(uis(200)), .height = CLAY_SIZING_GROW() },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = g_theme.bg_medium,
@@ -125,8 +128,8 @@ static void build_browser_panel(B32 show) {
CLAY(CLAY_ID("BrowserContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { 8, 8, 6, 6 },
.childGap = 4,
.padding = { uip(8), uip(8), uip(6), uip(6) },
.childGap = uip(4),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
@@ -152,8 +155,8 @@ static void build_main_panel(AppState *app) {
CLAY(CLAY_ID("MainContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { 16, 16, 12, 12 },
.childGap = 12,
.padding = { uip(16), uip(16), uip(12), uip(12) },
.childGap = uip(12),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
@@ -162,7 +165,7 @@ static void build_main_panel(AppState *app) {
CLAY(CLAY_ID("ButtonRow"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIT() },
.childGap = 8,
.childGap = uip(8),
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
) {
@@ -209,14 +212,14 @@ static void build_main_panel(AppState *app) {
CLAY(CLAY_ID("TextRow"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
.childGap = 8,
.childGap = uip(8),
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
) {
CLAY(CLAY_ID("TextCol1"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
.childGap = 4,
.childGap = uip(4),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
@@ -226,7 +229,7 @@ static void build_main_panel(AppState *app) {
CLAY(CLAY_ID("TextCol2"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
.childGap = 4,
.childGap = uip(4),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
@@ -244,7 +247,7 @@ static void build_main_panel(AppState *app) {
ui_label("LblDropdown", "Sample Rate");
CLAY(CLAY_ID("DropdownWrapper"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIXED(200), .height = CLAY_SIZING_FIT() },
.sizing = { .width = CLAY_SIZING_FIXED(uis(200)), .height = CLAY_SIZING_FIT() },
}
) {
static const char *rate_options[] = { "44100 Hz", "48000 Hz", "88200 Hz", "96000 Hz", "192000 Hz" };
@@ -261,7 +264,7 @@ static void build_main_panel(AppState *app) {
CLAY(CLAY_ID("WindowBtnRow"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIT() },
.childGap = 8,
.childGap = uip(8),
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
) {
@@ -296,8 +299,8 @@ static void build_right_panel(AppState *app) {
CLAY(CLAY_ID("PropertiesContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { 8, 8, 6, 6 },
.childGap = 4,
.padding = { uip(8), uip(8), uip(6), uip(6) },
.childGap = uip(4),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
@@ -309,8 +312,8 @@ static void build_right_panel(AppState *app) {
CLAY(CLAY_ID("MidiContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { 8, 8, 6, 6 },
.childGap = 6,
.padding = { uip(8), uip(8), uip(6), uip(6) },
.childGap = uip(6),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
@@ -319,12 +322,12 @@ static void build_right_panel(AppState *app) {
B32 refresh_hovered = Clay_PointerOver(refresh_eid);
CLAY(refresh_eid,
.layout = {
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(28) },
.padding = { 12, 12, 0, 0 },
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(uis(28)) },
.padding = { uip(12), uip(12), 0, 0 },
.childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
},
.backgroundColor = refresh_hovered ? g_theme.accent_hover : g_theme.bg_lighter,
.cornerRadius = CLAY_CORNER_RADIUS(3)
.cornerRadius = CLAY_CORNER_RADIUS(uis(3))
) {
CLAY_TEXT(CLAY_STRING("Refresh"), &g_text_config_normal);
}
@@ -344,7 +347,7 @@ static void build_right_panel(AppState *app) {
static Clay_TextElementConfig box_text_config;
box_text_config = {};
box_text_config.textColor = Clay_Color{255, 255, 255, 255};
box_text_config.fontSize = 12;
box_text_config.fontSize = FONT_SIZE_SMALL;
box_text_config.wrapMode = CLAY_TEXT_WRAP_NONE;
B32 has_inputs = 0;
@@ -411,8 +414,8 @@ static void build_right_panel(AppState *app) {
CLAY(CLAY_IDI("MidiIn", i),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
.padding = { 4, 4, 2, 2 },
.childGap = 6,
.padding = { uip(4), uip(4), uip(2), uip(2) },
.childGap = uip(6),
.childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
@@ -420,11 +423,11 @@ static void build_right_panel(AppState *app) {
// Note name box (colored by velocity)
CLAY(CLAY_IDI("MidiInNote", i),
.layout = {
.sizing = { .width = CLAY_SIZING_FIXED(36), .height = CLAY_SIZING_FIXED(18) },
.sizing = { .width = CLAY_SIZING_FIXED(uis(36)), .height = CLAY_SIZING_FIXED(uis(18)) },
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER },
},
.backgroundColor = box_color,
.cornerRadius = CLAY_CORNER_RADIUS(3)
.cornerRadius = CLAY_CORNER_RADIUS(uis(3))
) {
CLAY_TEXT(note_str, box_txt);
}
@@ -453,7 +456,7 @@ static void build_right_panel(AppState *app) {
CLAY(CLAY_IDI("MidiOut", i),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
.padding = { 4, 4, 2, 2 },
.padding = { uip(4), uip(4), uip(2), uip(2) },
}
) {
CLAY_TEXT(device_str, &g_text_config_normal);
@@ -472,7 +475,7 @@ static void build_log_panel(B32 show) {
CLAY(CLAY_ID("LogPanel"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(180) },
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(uis(180)) },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = g_theme.bg_medium,
@@ -487,8 +490,8 @@ static void build_log_panel(B32 show) {
CLAY(CLAY_ID("LogContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { 8, 8, 6, 6 },
.childGap = 4,
.padding = { uip(8), uip(8), uip(6), uip(6) },
.childGap = uip(4),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
@@ -506,7 +509,7 @@ static void settings_window_content(void *user_data) {
ui_label("SettingsLblTheme", "Theme");
static const char *theme_options[] = { "Dark", "Light", "Solarized" };
CLAY(CLAY_ID("SettingsThemeWrap"),
.layout = { .sizing = { .width = CLAY_SIZING_FIXED(180), .height = CLAY_SIZING_FIT() } }
.layout = { .sizing = { .width = CLAY_SIZING_FIXED(uis(180)), .height = CLAY_SIZING_FIT() } }
) {
ui_dropdown("SettingsTheme", theme_options, 3, &app->settings_theme_sel);
}
@@ -517,7 +520,7 @@ static void settings_window_content(void *user_data) {
// Separator
CLAY(CLAY_ID("SettingsSep1"),
.layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(1) },
.padding = { 0, 0, 6, 6 } },
.padding = { 0, 0, uip(6), uip(6) } },
.backgroundColor = g_theme.border
) {}
@@ -533,7 +536,7 @@ static void settings_window_content(void *user_data) {
}
CLAY(CLAY_ID("SettingsAudioWrap"),
.layout = { .sizing = { .width = CLAY_SIZING_FIXED(220), .height = CLAY_SIZING_FIT() } }
.layout = { .sizing = { .width = CLAY_SIZING_FIXED(uis(220)), .height = CLAY_SIZING_FIT() } }
) {
ui_dropdown("SettingsAudio", audio_options, audio_count + 1, &app->audio_device_sel);
}
@@ -551,7 +554,7 @@ static void settings_window_content(void *user_data) {
CLAY(CLAY_ID("SettingsAudioBtnRow"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIT() },
.childGap = 8,
.childGap = uip(8),
.childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
@@ -568,16 +571,16 @@ static void settings_window_content(void *user_data) {
Clay_ElementId btn_eid = CLAY_ID("BtnTestToneDisabled");
CLAY(btn_eid,
.layout = {
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(28) },
.padding = { 12, 12, 0, 0 },
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(uis(28)) },
.padding = { uip(12), uip(12), 0, 0 },
.childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
},
.backgroundColor = Clay_Color{50, 50, 50, 255},
.cornerRadius = CLAY_CORNER_RADIUS(3)
.cornerRadius = CLAY_CORNER_RADIUS(uis(3))
) {
static Clay_TextElementConfig disabled_text = {};
disabled_text.textColor = Clay_Color{100, 100, 100, 255};
disabled_text.fontSize = 15;
disabled_text.fontSize = FONT_SIZE_NORMAL;
disabled_text.wrapMode = CLAY_TEXT_WRAP_NONE;
CLAY_TEXT(CLAY_STRING("Play Test Tone"), &disabled_text);
}
@@ -619,7 +622,7 @@ static void build_ui(AppState *app) {
if (app->show_props || app->show_midi_devices) {
CLAY(CLAY_ID("RightColumn"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIXED(250), .height = CLAY_SIZING_GROW() },
.sizing = { .width = CLAY_SIZING_FIXED(uis(250)), .height = CLAY_SIZING_GROW() },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.border = { .color = g_theme.border, .width = { .left = 1 } }
@@ -689,6 +692,26 @@ static void do_frame(AppState *app) {
// Gather input
PlatformInput input = platform_get_input(app->window);
// Cmd+= / Cmd+- (or Ctrl on Windows) to zoom UI, Cmd+0 to reset
for (S32 k = 0; k < input.key_count; k++) {
if (input.ctrl_held) {
if (input.keys[k] == PKEY_EQUAL) app->ui_scale *= 1.1f;
if (input.keys[k] == PKEY_MINUS) app->ui_scale /= 1.1f;
if (input.keys[k] == PKEY_0) app->ui_scale = 1.0f;
}
}
app->ui_scale = Clamp(0.5f, app->ui_scale, 3.0f);
g_ui_scale = app->ui_scale;
renderer_set_font_scale(app->renderer, app->ui_scale);
// Update text configs when scale changes
if (g_text_config_normal.fontSize != FONT_SIZE_NORMAL) {
g_text_config_normal.fontSize = FONT_SIZE_NORMAL;
g_text_config_title.fontSize = FONT_SIZE_NORMAL;
g_text_config_dim.fontSize = FONT_SIZE_NORMAL;
}
ui_widgets_begin_frame(input);
// Build UI with Clay
@@ -753,6 +776,7 @@ int main(int argc, char **argv) {
app.ui = ui;
app.last_w = w;
app.last_h = h;
app.ui_scale = 1.0f;
app.show_browser = 1;
app.show_props = 1;
app.show_log = 1;