tyler/rspektrum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix layout: proper spacing for labels and scrollbars, remove axis title text

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
Tyler
2026-04-11 22:15:25 -07:00
parent b4c23d61a8
commit ecbbba36db
1 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/spectrogram.c
+38 -32
View File
@@ -932,8 +932,7 @@ static void DrawLabels(Rectangle bounds)
DrawText(label, bounds.x - textSize.x - 15, y - textSize.y / 2, fontSize, textColor); DrawText(label, bounds.x - textSize.x - 15, y - textSize.y / 2, fontSize, textColor);
} }
DrawText("Time", bounds.x + bounds.width / 2 - 20, bounds.y + bounds.height + 25, fontSize, GRAY); // Axis titles removed - just the tick labels are enough
DrawText("Freq", bounds.x - 35, bounds.y + bounds.height / 2, fontSize, GRAY);
} }
static void DrawSlider(Rectangle bounds, float value); static void DrawSlider(Rectangle bounds, float value);
@@ -1231,22 +1230,24 @@ int main(int argc, char* argv[])
// View controls // View controls
if (app.loaded && !app.showFileBrowser) { if (app.loaded && !app.showFileBrowser) {
// Spectrogram area fills remaining window space // Spectrogram area fills remaining window space
// Leave room for scrollbars (20px) and axis labels // Space for: spectrogram + time labels (15px below) + scrollbar (18px below that)
float sidebarWidth = 320; float sidebarWidth = 320;
float scrollbarSize = 18; float labelHeight = 15;
float labelMarginLeft = 65; float scrollbarHeight = 18;
float labelMarginBottom = 35; float freqLabelWidth = 65;
float vScrollbarWidth = 18;
float topMargin = 50; float topMargin = 50;
float bottomMargin = 10;
Rectangle viewBounds = { Rectangle viewBounds = {
sidebarWidth + labelMarginLeft, sidebarWidth + freqLabelWidth,
topMargin, topMargin,
GetScreenWidth() - sidebarWidth - labelMarginLeft - scrollbarSize - 10, GetScreenWidth() - sidebarWidth - freqLabelWidth - vScrollbarWidth - 20,
GetScreenHeight() - topMargin - labelMarginBottom - scrollbarSize - 10 GetScreenHeight() - topMargin - bottomMargin - labelHeight - scrollbarHeight - 10
}; };
// Zoom with mouse wheel (zooms both time and frequency to maintain aspect ratio) // Zoom with mouse wheel (zooms both time and frequency to maintain aspect ratio)
if (GetMousePosition().x > 380 && CheckCollisionPointRec(GetMousePosition(), viewBounds)) { if (GetMousePosition().x > 385 && CheckCollisionPointRec(GetMousePosition(), viewBounds)) {
int wheel = GetMouseWheelMove(); int wheel = GetMouseWheelMove();
if (wheel != 0) { if (wheel != 0) {
float zoomFactor = (wheel > 0) ? 0.8f : 1.2f; float zoomFactor = (wheel > 0) ? 0.8f : 1.2f;
@@ -1358,20 +1359,22 @@ int main(int argc, char* argv[])
// Selection (only when mouse is in spectrogram area, not sidebar) // Selection (only when mouse is in spectrogram area, not sidebar)
float selSidebarWidth = 320; float selSidebarWidth = 320;
float selScrollbarSize = 18; float selLabelHeight = 15;
float selLabelMarginLeft = 65; float selScrollbarHeight = 18;
float selLabelMarginBottom = 35; float selFreqLabelWidth = 65;
float selVScrollbarWidth = 18;
float selTopMargin = 50; float selTopMargin = 50;
float selBottomMargin = 10;
Rectangle selBounds = { Rectangle selBounds = {
selSidebarWidth + selLabelMarginLeft, selSidebarWidth + selFreqLabelWidth,
selTopMargin, selTopMargin,
GetScreenWidth() - selSidebarWidth - selLabelMarginLeft - selScrollbarSize - 10, GetScreenWidth() - selSidebarWidth - selFreqLabelWidth - selVScrollbarWidth - 20,
GetScreenHeight() - selTopMargin - selLabelMarginBottom - selScrollbarSize - 10 GetScreenHeight() - selTopMargin - selBottomMargin - selLabelHeight - selScrollbarHeight - 10
}; };
Vector2 mousePos = GetMousePosition(); Vector2 mousePos = GetMousePosition();
if (app.loaded && !app.showFileBrowser && mousePos.x > 380 && CheckCollisionPointRec(mousePos, selBounds)) { if (app.loaded && !app.showFileBrowser && mousePos.x > 385 && CheckCollisionPointRec(mousePos, selBounds)) {
bool shiftHeld = IsKeyDown(KEY_LEFT_SHIFT) || IsKeyDown(KEY_RIGHT_SHIFT); bool shiftHeld = IsKeyDown(KEY_LEFT_SHIFT) || IsKeyDown(KEY_RIGHT_SHIFT);
if (IsMouseButtonPressed(MOUSE_LEFT_BUTTON) && !app.isPanning) { if (IsMouseButtonPressed(MOUSE_LEFT_BUTTON) && !app.isPanning) {
@@ -1429,23 +1432,29 @@ int main(int argc, char* argv[])
BeginDrawing(); BeginDrawing();
ClearBackground((Color){ 30, 30, 30, 255 }); ClearBackground((Color){ 30, 30, 30, 255 });
// Spectrogram area fills remaining window space // Layout: sidebar on left, spectrogram on right
// Sidebar: 320px wide, spectrogram takes the rest // Space for: spectrogram + time labels (15px below) + scrollbar (18px below that)
// Leave room for scrollbars (20px) and axis labels
float sidebarWidth = 320; float sidebarWidth = 320;
float scrollbarSize = 18; float labelHeight = 15;
float labelMarginLeft = 65; float scrollbarHeight = 18;
float labelMarginBottom = 35; float freqLabelWidth = 65;
float vScrollbarWidth = 18;
float topMargin = 50; float topMargin = 50;
float bottomMargin = 10;
// Spectrogram area (excludes labels and scrollbars)
Rectangle viewBounds = { Rectangle viewBounds = {
sidebarWidth + labelMarginLeft, sidebarWidth + freqLabelWidth,
topMargin, topMargin,
GetScreenWidth() - sidebarWidth - labelMarginLeft - scrollbarSize - 10, GetScreenWidth() - sidebarWidth - freqLabelWidth - vScrollbarWidth - 20,
GetScreenHeight() - topMargin - labelMarginBottom - scrollbarSize - 10 GetScreenHeight() - topMargin - bottomMargin - labelHeight - scrollbarHeight - 10
}; };
Rectangle hScrollbar = { viewBounds.x, viewBounds.y + viewBounds.height + 10, viewBounds.width, scrollbarSize }; // Time labels sit just below the spectrogram
Rectangle vScrollbar = { viewBounds.x + viewBounds.width + 10, viewBounds.y, scrollbarSize, viewBounds.height }; Rectangle timeLabelArea = { viewBounds.x, viewBounds.y + viewBounds.height, viewBounds.width, labelHeight };
// Horizontal scrollbar sits below the time labels
Rectangle hScrollbar = { viewBounds.x, viewBounds.y + viewBounds.height + labelHeight + 5, viewBounds.width, scrollbarHeight };
// Vertical scrollbar sits to the right of the spectrogram
Rectangle vScrollbar = { viewBounds.x + viewBounds.width + 5, viewBounds.y, vScrollbarWidth, viewBounds.height };
// Draw sidebar first (on top left) // Draw sidebar first (on top left)
DrawSidebar(); DrawSidebar();
@@ -1558,12 +1567,11 @@ int main(int argc, char* argv[])
if (app.showGrid) DrawSpectrogramGrid(viewBounds, 10, 8, Fade(GRAY, 0.3f)); if (app.showGrid) DrawSpectrogramGrid(viewBounds, 10, 8, Fade(GRAY, 0.3f));
DrawSelection(viewBounds); DrawSelection(viewBounds);
DrawLabels(viewBounds); DrawLabels(viewBounds);
DrawText("Spectrogram", viewBounds.x, viewBounds.y - 30, 20, LIGHTGRAY);
float maxFreq = (float)app.signal.sampleRate / 2.0f; float maxFreq = (float)app.signal.sampleRate / 2.0f;
float freqMin = app.freqViewStart * maxFreq; float freqMin = app.freqViewStart * maxFreq;
float freqMax = app.freqViewEnd * maxFreq; float freqMax = app.freqViewEnd * maxFreq;
DrawText(TextFormat("Freq: %.0f-%.0f Hz", freqMin, freqMax), DrawText(TextFormat("Freq: %.0f-%.0f Hz", freqMin, freqMax),
viewBounds.x - 50, viewBounds.y + viewBounds.height / 2 - 10, 14, Fade(LIGHTGRAY, 0.7f)); viewBounds.x, viewBounds.y - 30, 20, LIGHTGRAY);
} else if (!app.showFileBrowser) { } else if (!app.showFileBrowser) {
const char* msg1 = "Press 'O' or click 'Open File Browser' to load a WAV"; const char* msg1 = "Press 'O' or click 'Open File Browser' to load a WAV";
const char* msg2 = "Or drag & drop a file, or use: ./rspektrum <file.wav>"; const char* msg2 = "Or drag & drop a file, or use: ./rspektrum <file.wav>";
@@ -1576,8 +1584,6 @@ int main(int argc, char* argv[])
// Draw file browser on top (if active) // Draw file browser on top (if active)
if (app.showFileBrowser) DrawFileBrowser(); if (app.showFileBrowser) DrawFileBrowser();
// Draw FPS in spectrogram area
DrawFPS(GetScreenWidth() - 80, 10);
EndDrawing(); EndDrawing();
} }