play around with faders, WIP
This commit is contained in:
3490
assets/faders.svg
Normal file
3490
assets/faders.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 103 KiB |
36
src/main.cpp
36
src/main.cpp
@@ -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");
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user