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

Add keyboard / sample edit view with piano widget

Browse Source
This commit is contained in:
Max Amundsen
2026-03-04 01:52:04 -05:00
parent 8891dcffb8
commit 6f95c60381
4 changed files with 239 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/main.cpp
View File

@@ -79,7 +79,11 @@ struct AppState {
#endif
// Tab state
S32 right_panel_tab; // 0 = Properties, 1 = MIDI Devices
S32 right_panel_tab; // 0 = Properties, 1 = MIDI Devices
S32 bottom_panel_tab; // 0 = Item Editor, 1 = Sample Mapper
// Piano state
S32 piano_mouse_note; // MIDI note held by mouse click (-1 = none)
// Demo widget state
B32 demo_checkbox_a;
@@ -138,6 +142,68 @@ struct AppState {
F32 panel_drag_start_size; // panel size when drag started
};
////////////////////////////////
// Piano helpers
#define PIANO_FIRST_NOTE 21 // A0
#define PIANO_LAST_NOTE 108 // C8
#define PIANO_BLACK_W 11.0f
#define PIANO_BLACK_H_PCT 0.6f
static bool piano_is_black_key(int note) {
int n = note % 12;
return n == 1 || n == 3 || n == 6 || n == 8 || n == 10;
}
// Velocity-based color: blue (vel 0) → green (mid) → red (vel 127)
static Clay_Color velocity_color(int32_t velocity) {
float t = (float)velocity / 127.0f;
float r, g, b;
if (t < 0.5f) {
float s = t * 2.0f;
r = 40.0f + s * (76.0f - 40.0f);
g = 120.0f + s * (175.0f - 120.0f);
b = 220.0f + s * (80.0f - 220.0f);
} else {
float s = (t - 0.5f) * 2.0f;
r = 76.0f + s * (220.0f - 76.0f);
g = 175.0f + s * (50.0f - 175.0f);
b = 80.0f + s * (40.0f - 80.0f);
}
return Clay_Color{r, g, b, 255};
}
// Piano input: handle mouse clicks on piano keys
static void update_piano_input(AppState *app) {
PlatformInput input = g_wstate.input;
if (!input.mouse_down) {
app->piano_mouse_note = -1;
return;
}
// Find hovered piano key — check black keys first (they're on top)
S32 hovered_note = -1;
for (int note = PIANO_FIRST_NOTE; note <= PIANO_LAST_NOTE; note++) {
if (piano_is_black_key(note) && Clay_PointerOver(CLAY_IDI("PKey", note))) {
hovered_note = note;
break;
}
}
if (hovered_note == -1) {
for (int note = PIANO_FIRST_NOTE; note <= PIANO_LAST_NOTE; note++) {
if (!piano_is_black_key(note) && Clay_PointerOver(CLAY_IDI("PKey", note))) {
hovered_note = note;
break;
}
}
}
if (hovered_note != -1) {
app->piano_mouse_note = hovered_note;
}
}
////////////////////////////////
// Panel builders
@@ -574,20 +640,7 @@ static void build_right_panel(AppState *app) {
// Idle = dark gray
Clay_Color box_color;
if (dev->active) {
float t = (float)dev->velocity / 127.0f;
float r, g, b;
if (t < 0.5f) {
float s = t * 2.0f;
r = 40.0f + s * (76.0f - 40.0f);
g = 120.0f + s * (175.0f - 120.0f);
b = 220.0f + s * (80.0f - 220.0f);
} else {
float s = (t - 0.5f) * 2.0f;
r = 76.0f + s * (220.0f - 76.0f);
g = 175.0f + s * (50.0f - 175.0f);
b = 80.0f + s * (40.0f - 80.0f);
}
box_color = Clay_Color{r, g, b, 255};
box_color = velocity_color(dev->velocity);
} else if (dev->releasing) {
box_color = Clay_Color{255, 255, 255, 255};
} else {
@@ -696,26 +749,112 @@ static void build_log_panel(AppState *app) {
.backgroundColor = lp_top,
.custom = { .customData = lp_grad },
) {
{
S32 sel = 0;
static const char *log_tabs[] = { "Log" };
ui_tab_bar("LogTabRow", log_tabs, 1, &sel);
}
static const char *bottom_tabs[] = { "Item Editor", "Sample Mapper" };
ui_tab_bar("BottomTabRow", bottom_tabs, 2, &app->bottom_panel_tab);
CLAY(CLAY_ID("LogContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { uip(8), uip(8), uip(6), uip(6) },
.childGap = uip(4),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
if (app->bottom_panel_tab == 0) {
// Item Editor tab
CLAY(CLAY_ID("ItemEditorContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { uip(8), uip(8), uip(6), uip(6) },
.childGap = uip(4),
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
CLAY(CLAY_ID("ItemEditorHighlight"),
.layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(1) } },
.backgroundColor = g_theme.bg_lighter
) {}
CLAY_TEXT(CLAY_STRING("Item Editor"), &g_text_config_normal);
}
} else {
// Sample Mapper tab — 88-key piano
CLAY(CLAY_ID("SampleMapperContent"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.padding = { uip(4), uip(4), uip(4), uip(4) },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
}
) {
Clay_ElementId piano_id = CLAY_ID("PianoContainer");
CLAY(piano_id,
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
) {
// Compute black key size proportional to white keys
F32 piano_avail_h = uis(app->log_height) - TAB_HEIGHT - uip(8);
F32 black_key_h = piano_avail_h * PIANO_BLACK_H_PCT;
if (black_key_h < uis(20)) black_key_h = uis(20);
F32 white_key_w = ((F32)app->last_w - uip(8)) / 52.0f;
F32 black_key_w = white_key_w * 0.6f;
if (black_key_w < uis(8)) black_key_w = uis(8);
// White keys (grow to fill width and height)
for (int note = PIANO_FIRST_NOTE; note <= PIANO_LAST_NOTE; note++) {
if (piano_is_black_key(note)) continue;
B32 midi_held = midi_is_note_held(app->midi, note);
B32 mouse_held = app->piano_mouse_note == note;
Clay_Color bg;
if (midi_held) {
bg = velocity_color(midi_get_note_velocity(app->midi, note));
} else if (mouse_held) {
bg = g_theme.accent;
} else {
bg = Clay_Color{240, 240, 240, 255};
}
CLAY(CLAY_IDI("PKey", note),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
},
.backgroundColor = bg,
.border = { .color = {190, 190, 190, 255}, .width = { .right = 1 } },
) {}
}
// Black keys (floating, attached to left white key)
for (int note = PIANO_FIRST_NOTE; note <= PIANO_LAST_NOTE; note++) {
if (!piano_is_black_key(note)) continue;
Clay_ElementId parent_wkey = CLAY_IDI("PKey", note - 1);
B32 midi_held = midi_is_note_held(app->midi, note);
B32 mouse_held = app->piano_mouse_note == note;
Clay_Color bg;
if (midi_held) {
bg = velocity_color(midi_get_note_velocity(app->midi, note));
} else if (mouse_held) {
bg = g_theme.accent;
} else {
bg = Clay_Color{25, 25, 30, 255};
}
CLAY(CLAY_IDI("PKey", note),
.layout = {
.sizing = {
.width = CLAY_SIZING_FIXED(black_key_w),
.height = CLAY_SIZING_FIXED(black_key_h),
},
},
.backgroundColor = bg,
.cornerRadius = { .topLeft = 0, .topRight = 0, .bottomLeft = uis(2), .bottomRight = uis(2) },
.floating = {
.parentId = parent_wkey.id,
.zIndex = 100,
.attachPoints = {
.element = CLAY_ATTACH_POINT_CENTER_TOP,
.parent = CLAY_ATTACH_POINT_RIGHT_TOP,
},
.attachTo = CLAY_ATTACH_TO_ELEMENT_WITH_ID,
},
) {}
}
}
}
) {
// Top highlight (beveled edge)
CLAY(CLAY_ID("LogHighlight"),
.layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(1) } },
.backgroundColor = g_theme.bg_lighter
) {}
CLAY_TEXT(CLAY_STRING("Output / Log"), &g_text_config_normal);
}
}
}
@@ -1068,6 +1207,7 @@ static void do_frame(AppState *app) {
}
ui_widgets_begin_frame(input);
update_piano_input(app);
update_panel_splitters(app);
// Build UI with Clay
@@ -1147,6 +1287,8 @@ int main(int argc, char **argv) {
app.show_props = 1;
app.show_log = 1;
app.show_midi_devices = 1;
app.bottom_panel_tab = 0;
app.piano_mouse_note = -1;
app.demo_knob_unsigned = 75.0f;
app.demo_knob_signed = 0.0f;
app.demo_slider_h = 50.0f;