play around with faders, WIP

This commit is contained in:
2026-03-03 19:41:20 -05:00
parent da6e868b0f
commit 2927335975
7 changed files with 4416 additions and 375 deletions

3490
assets/faders.svg Normal file

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 103 KiB

View File

@@ -110,6 +110,11 @@ struct AppState {
F32 demo_knob_unsigned;
F32 demo_knob_signed;
// Slider/fader demo state
F32 demo_slider_h;
F32 demo_slider_v;
F32 demo_fader;
// Audio device selection
S32 audio_device_sel; // dropdown index: 0 = None, 1+ = device
S32 audio_device_prev; // previous selection for change detection
@@ -300,6 +305,34 @@ static void build_main_panel(AppState *app) {
.backgroundColor = g_theme.border
) {}
// Section: Sliders
ui_label("LblSliders", "Sliders");
CLAY(CLAY_ID("SliderHRow"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIT() },
.childGap = uip(16),
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
) {
ui_slider_h("SliderH", "Horizontal", &app->demo_slider_h, 100.0f, 0, 50.0f, 1);
}
CLAY(CLAY_ID("SliderVRow"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIT() },
.childGap = uip(24),
.childAlignment = { .y = CLAY_ALIGN_Y_TOP },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
) {
ui_slider_v("SliderV", "Vertical", &app->demo_slider_v, 100.0f, 0, 75.0f, 1);
ui_fader("Fader1", "Fader", &app->demo_fader, 50.0f, 1, 0.0f, 1);
}
CLAY(CLAY_ID("Sep7"),
.layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(1) } },
.backgroundColor = g_theme.border
) {}
// Section: Windows & Modals
ui_label("LblWindows", "Windows & Modals");
CLAY(CLAY_ID("WindowBtnRow"),
@@ -900,6 +933,9 @@ int main(int argc, char **argv) {
app.show_midi_devices = 1;
app.demo_knob_unsigned = 75.0f;
app.demo_knob_signed = 0.0f;
app.demo_slider_h = 50.0f;
app.demo_slider_v = 75.0f;
app.demo_fader = 0.0f;
app.demo_dropdown_sel = 1; // default to 48000 Hz
app.radius_sel = 1; // default to "Small" (4.0f)
snprintf(app.demo_text_a, sizeof(app.demo_text_a), "My Instrument");

View File

@@ -160,6 +160,19 @@ struct CustomRotatedIconData {
#define WIDGET_KNOB_SIZE uis(48)
#define WIDGET_KNOB_LABEL_GAP uip(4)
#define WIDGET_SLIDER_H_WIDTH uis(160)
#define WIDGET_SLIDER_H_TRACK_H uis(6)
#define WIDGET_SLIDER_H_THUMB_W uis(14)
#define WIDGET_SLIDER_H_THUMB_H uis(20)
#define WIDGET_SLIDER_V_HEIGHT uis(100)
#define WIDGET_SLIDER_V_TRACK_W uis(6)
#define WIDGET_SLIDER_V_THUMB_W uis(20)
#define WIDGET_SLIDER_V_THUMB_H uis(14)
#define WIDGET_FADER_HEIGHT uis(160)
#define WIDGET_FADER_TRACK_W uis(4)
#define WIDGET_FADER_CAP_W uis(38)
#define WIDGET_FADER_CAP_H uis(52)
////////////////////////////////
// Corner radius (from theme)

View File

@@ -29,6 +29,31 @@ static const char *g_icon_svgs[UI_ICON_COUNT] = {
<circle cx="12" cy="12" r="10" fill="white" opacity="0.25"/>
<line x1="12" y1="12" x2="12" y2="3" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
</svg>)",
// UI_ICON_SLIDER_THUMB - layered body with grip ridges
R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect x="2" y="1" width="20" height="22" rx="4" fill="white" opacity="0.15"/>
<rect x="3" y="2" width="18" height="20" rx="3" fill="white" opacity="0.55"/>
<rect x="4" y="3" width="16" height="1" rx="0.5" fill="white" opacity="0.3"/>
<line x1="6" y1="8" x2="18" y2="8" stroke="white" stroke-width="1" opacity="0.8"/>
<line x1="6" y1="11" x2="18" y2="11" stroke="white" stroke-width="1" opacity="0.8"/>
<line x1="6" y1="14" x2="18" y2="14" stroke="white" stroke-width="1" opacity="0.8"/>
<line x1="6" y1="17" x2="18" y2="17" stroke="white" stroke-width="1" opacity="0.8"/>
</svg>)",
// UI_ICON_FADER - Pro Tools-style fader cap: solid body, bright center indicator, beveled caps
R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 48">
<rect x="1" y="0" width="22" height="48" rx="3" fill="white" opacity="0.7"/>
<rect x="2" y="1" width="20" height="5" rx="2" fill="white" opacity="0.85"/>
<rect x="2" y="1" width="20" height="1.5" rx="0.5" fill="white" opacity="0.95"/>
<line x1="5" y1="10" x2="19" y2="10" stroke="black" stroke-width="0.5" opacity="0.2"/>
<line x1="5" y1="14" x2="19" y2="14" stroke="black" stroke-width="0.5" opacity="0.2"/>
<rect x="1" y="22" width="22" height="4" rx="0.5" fill="white" opacity="1.0"/>
<line x1="5" y1="30" x2="19" y2="30" stroke="black" stroke-width="0.5" opacity="0.2"/>
<line x1="5" y1="34" x2="19" y2="34" stroke="black" stroke-width="0.5" opacity="0.2"/>
<rect x="2" y="42" width="20" height="5" rx="2" fill="white" opacity="0.85"/>
<rect x="2" y="45.5" width="20" height="1.5" rx="0.5" fill="white" opacity="0.6"/>
</svg>)",
};
U8 *ui_icons_rasterize_atlas(S32 *out_w, S32 *out_h, S32 icon_size) {

View File

@@ -8,6 +8,8 @@ enum UI_IconID {
UI_ICON_CHECK,
UI_ICON_CHEVRON_DOWN,
UI_ICON_KNOB,
UI_ICON_SLIDER_THUMB,
UI_ICON_FADER,
UI_ICON_COUNT
};

File diff suppressed because it is too large Load Diff

View File

@@ -34,6 +34,7 @@ struct UI_WindowSlot {
struct UI_KnobDragState {
uint32_t dragging_id; // Hash of the knob being dragged (0 = none)
F32 drag_start_y; // Mouse Y when drag started
F32 drag_start_x; // Mouse X when drag started (for h-slider)
F32 value_at_start; // Value when drag started
B32 was_shift; // Shift state last frame (to re-anchor on change)
uint32_t last_click_id; // Knob hash of last click (for double-click detection)
@@ -158,3 +159,12 @@ B32 ui_window(const char *id, const char *title, B32 *open,
// Hold Shift while dragging for fine control.
// Returns true if value changed this frame.
B32 ui_knob(const char *id, const char *label, F32 *value, F32 max_val, B32 is_signed, F32 default_val, B32 editable = 0);
// Horizontal slider. Drag left/right to change value.
B32 ui_slider_h(const char *id, const char *label, F32 *value, F32 max_val, B32 is_signed, F32 default_val, B32 editable = 0);
// Vertical slider. Drag up/down to change value.
B32 ui_slider_v(const char *id, const char *label, F32 *value, F32 max_val, B32 is_signed, F32 default_val, B32 editable = 0);
// DAW-style fader (vertical slider with fader cap icon).
B32 ui_fader(const char *id, const char *label, F32 *value, F32 max_val, B32 is_signed, F32 default_val, B32 editable = 0);