From a468f82c2d967999c1723381f4066933faebcef6 Mon Sep 17 00:00:00 2001 From: spl3g Date: Sat, 1 Nov 2025 15:05:35 +0300 Subject: Add ui scaling (works kinda strange) --- src/main.c | 9 ++++++++- src/ui.c | 20 ++++++++++---------- src/ui.h | 1 + 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/main.c b/src/main.c index 749be94..a2f8296 100644 --- a/src/main.c +++ b/src/main.c @@ -22,6 +22,10 @@ static const int SCREEN_FPS = 60; static const int SCREEN_TICKS_PER_FRAME = 1000 / SCREEN_FPS; static const int FONT_ID = 0; +static const Clay_Dimensions DEFAULT_DIMENSIONS = { + .width = 1280, + .height = 720, +}; typedef struct { bool pressed; @@ -189,7 +193,7 @@ int init_ui(app_state *state) { return 1; } - if (!SDL_CreateWindowAndRenderer("crynth", 640, 480, SDL_WINDOW_RESIZABLE | SDL_WINDOW_BORDERLESS, &state->window, &state->renderer_data.renderer)) { + if (!SDL_CreateWindowAndRenderer("crynth", DEFAULT_DIMENSIONS.width, DEFAULT_DIMENSIONS.height, SDL_WINDOW_RESIZABLE | SDL_WINDOW_BORDERLESS, &state->window, &state->renderer_data.renderer)) { return 1; } @@ -265,12 +269,15 @@ SDL_AppResult SDL_AppIterate(void *appstate) { int start_tick = SDL_GetTicks(); + Clay_Dimensions dimensions = Clay_GetCurrentContext()->layoutDimensions; + UIData *ui_data = arena_alloc(arena, sizeof(UIData)); ui_data->msg_queue = &state->msg_queue; ui_data->keys = state->keys; ui_data->keys_amount = 12; ui_data->arena = arena; ui_data->knob_settings = &state->knob_settings; + ui_data->scale = dimensions.width / DEFAULT_DIMENSIONS.width; Clay_SetPointerState((Clay_Vector2){ state->pointer.position_x, state->pointer.position_y }, state->pointer.pressed); Clay_UpdateScrollContainers(true, (Clay_Vector2){ state->pointer.pending_scroll_delta_x, state->pointer.pending_scroll_delta_y }, 0.016f); diff --git a/src/ui.c b/src/ui.c index fcc9877..5d2297e 100644 --- a/src/ui.c +++ b/src/ui.c @@ -153,7 +153,7 @@ void draw_white_key(size_t idx, UIData *ui_data) { } CLAY(CLAY_IDI("white_key", idx), { .layout = { - .sizing = {CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(100)}, + .sizing = {CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)}, }, .backgroundColor = fill_color, .border = { .width = {1, 1, 1, 1, 0}, .color = border_color}, @@ -209,7 +209,7 @@ void draw_black_key(size_t idx, UIData *ui_data) { CLAY(CLAY_IDI("black_key", idx), { .layout = { - .sizing = {CLAY_SIZING_FIXED(25), CLAY_SIZING_FIXED(65)}, + .sizing = {CLAY_SIZING_FIXED(25 * ui_data->scale), CLAY_SIZING_FIXED(65 * ui_data->scale)}, }, .backgroundColor = fill_color, .border = { .width = {1, 1, 0, 1, 0}, .color = border_color}, @@ -220,7 +220,7 @@ void draw_black_key(size_t idx, UIData *ui_data) { void draw_keyboard(UIData *ui_data) { CLAY(CLAY_ID("keyboard_container"), { .layout = { - .sizing = {CLAY_SIZING_FIXED(280), CLAY_SIZING_FIXED(100)}, + .sizing = {CLAY_SIZING_FIXED(280 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)}, .layoutDirection = CLAY_LEFT_TO_RIGHT, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, }, @@ -294,18 +294,18 @@ void draw_knob(Clay_ElementId id, UIData *ui_data, KnobInfo* knob_info, Clay_Siz void draw_panel(UIData *ui_data) { CLAY(CLAY_ID("panel_container"), { .layout = { - .sizing = {CLAY_SIZING_FIXED(450), CLAY_SIZING_FIXED(100)}, + .sizing = {CLAY_SIZING_FIXED(450 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)}, .childGap = 30, .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, }, }) { CLAY(CLAY_ID("volume_knob_container")) { - draw_knob(CLAY_ID("volume_knob"), ui_data, &ui_data->knob_settings->volume, CLAY_SIZING_FIXED(85), CLAY_SIZING_FIXED(45)); + draw_knob(CLAY_ID("volume_knob"), ui_data, &ui_data->knob_settings->volume, CLAY_SIZING_FIXED(85 * ui_data->scale), CLAY_SIZING_FIXED(45 * ui_data->scale)); } CLAY(CLAY_ID("wave_screen"), { .layout = { - .sizing = {CLAY_SIZING_FIXED(200), CLAY_SIZING_FIXED(100)}, + .sizing = {CLAY_SIZING_FIXED(200 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)}, }, .border = { .width = {1, 1, 1, 1, 0}, .color = COLOR_FG }, }); @@ -321,16 +321,16 @@ void draw_panel(UIData *ui_data) { .childGap = 5, }, }) { - draw_knob(CLAY_ID("attack_knob"), ui_data, &ui_data->knob_settings->attack, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21)); - draw_knob(CLAY_ID("decay_knob"), ui_data, &ui_data->knob_settings->decay, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21)); + draw_knob(CLAY_ID("attack_knob"), ui_data, &ui_data->knob_settings->attack, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale)); + draw_knob(CLAY_ID("decay_knob"), ui_data, &ui_data->knob_settings->decay, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale)); } CLAY(CLAY_ID("envelope_knobs_lower"), { .layout = { .childGap = 5, }, }) { - draw_knob(CLAY_ID("sustain_knob"), ui_data, &ui_data->knob_settings->sustain, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21)); - draw_knob(CLAY_ID("release_knob"), ui_data, &ui_data->knob_settings->release, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21)); + draw_knob(CLAY_ID("sustain_knob"), ui_data, &ui_data->knob_settings->sustain, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale)); + draw_knob(CLAY_ID("release_knob"), ui_data, &ui_data->knob_settings->release, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale)); } } }; diff --git a/src/ui.h b/src/ui.h index 3c89d3e..daf4596 100644 --- a/src/ui.h +++ b/src/ui.h @@ -48,6 +48,7 @@ typedef struct { size_t keys_amount; KnobSettings *knob_settings; Arena *arena; + float scale; } UIData; typedef struct { -- cgit v1.2.3