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_unsigned;
|
||||||
F32 demo_knob_signed;
|
F32 demo_knob_signed;
|
||||||
|
|
||||||
|
// Slider/fader demo state
|
||||||
|
F32 demo_slider_h;
|
||||||
|
F32 demo_slider_v;
|
||||||
|
F32 demo_fader;
|
||||||
|
|
||||||
// Audio device selection
|
// Audio device selection
|
||||||
S32 audio_device_sel; // dropdown index: 0 = None, 1+ = device
|
S32 audio_device_sel; // dropdown index: 0 = None, 1+ = device
|
||||||
S32 audio_device_prev; // previous selection for change detection
|
S32 audio_device_prev; // previous selection for change detection
|
||||||
@@ -300,6 +305,34 @@ static void build_main_panel(AppState *app) {
|
|||||||
.backgroundColor = g_theme.border
|
.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
|
// Section: Windows & Modals
|
||||||
ui_label("LblWindows", "Windows & Modals");
|
ui_label("LblWindows", "Windows & Modals");
|
||||||
CLAY(CLAY_ID("WindowBtnRow"),
|
CLAY(CLAY_ID("WindowBtnRow"),
|
||||||
@@ -900,6 +933,9 @@ int main(int argc, char **argv) {
|
|||||||
app.show_midi_devices = 1;
|
app.show_midi_devices = 1;
|
||||||
app.demo_knob_unsigned = 75.0f;
|
app.demo_knob_unsigned = 75.0f;
|
||||||
app.demo_knob_signed = 0.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.demo_dropdown_sel = 1; // default to 48000 Hz
|
||||||
app.radius_sel = 1; // default to "Small" (4.0f)
|
app.radius_sel = 1; // default to "Small" (4.0f)
|
||||||
snprintf(app.demo_text_a, sizeof(app.demo_text_a), "My Instrument");
|
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_SIZE uis(48)
|
||||||
#define WIDGET_KNOB_LABEL_GAP uip(4)
|
#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)
|
// 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"/>
|
<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"/>
|
<line x1="12" y1="12" x2="12" y2="3" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
</svg>)",
|
</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) {
|
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_CHECK,
|
||||||
UI_ICON_CHEVRON_DOWN,
|
UI_ICON_CHEVRON_DOWN,
|
||||||
UI_ICON_KNOB,
|
UI_ICON_KNOB,
|
||||||
|
UI_ICON_SLIDER_THUMB,
|
||||||
|
UI_ICON_FADER,
|
||||||
UI_ICON_COUNT
|
UI_ICON_COUNT
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -34,6 +34,7 @@ struct UI_WindowSlot {
|
|||||||
struct UI_KnobDragState {
|
struct UI_KnobDragState {
|
||||||
uint32_t dragging_id; // Hash of the knob being dragged (0 = none)
|
uint32_t dragging_id; // Hash of the knob being dragged (0 = none)
|
||||||
F32 drag_start_y; // Mouse Y when drag started
|
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
|
F32 value_at_start; // Value when drag started
|
||||||
B32 was_shift; // Shift state last frame (to re-anchor on change)
|
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)
|
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.
|
// Hold Shift while dragging for fine control.
|
||||||
// Returns true if value changed this frame.
|
// 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);
|
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