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("Time", bounds.x + bounds.width / 2 - 20, bounds.y + bounds.height + 25, fontSize, GRAY);
DrawText("Freq", bounds.x - 35, bounds.y + bounds.height / 2, fontSize, GRAY);
// Axis titles removed - just the tick labels are enough
}
static void DrawSlider(Rectangle bounds, float value);
@@ -1231,22 +1230,24 @@ int main(int argc, char* argv[])
// View controls
if (app.loaded && !app.showFileBrowser) {
// 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 scrollbarSize = 18;
float labelMarginLeft = 65;
float labelMarginBottom = 35;
float labelHeight = 15;
float scrollbarHeight = 18;
float freqLabelWidth = 65;
float vScrollbarWidth = 18;
float topMargin = 50;
float bottomMargin = 10;
Rectangle viewBounds = {
sidebarWidth + labelMarginLeft,
sidebarWidth + freqLabelWidth,
topMargin,
GetScreenWidth() - sidebarWidth - labelMarginLeft - scrollbarSize - 10,
GetScreenHeight() - topMargin - labelMarginBottom - scrollbarSize - 10
GetScreenWidth() - sidebarWidth - freqLabelWidth - vScrollbarWidth - 20,
GetScreenHeight() - topMargin - bottomMargin - labelHeight - scrollbarHeight - 10
};
// 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();
if (wheel != 0) {
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)
float selSidebarWidth = 320;
float selScrollbarSize = 18;
float selLabelMarginLeft = 65;
float selLabelMarginBottom = 35;
float selLabelHeight = 15;
float selScrollbarHeight = 18;
float selFreqLabelWidth = 65;
float selVScrollbarWidth = 18;
float selTopMargin = 50;
float selBottomMargin = 10;
Rectangle selBounds = {
selSidebarWidth + selLabelMarginLeft,
selSidebarWidth + selFreqLabelWidth,
selTopMargin,
GetScreenWidth() - selSidebarWidth - selLabelMarginLeft - selScrollbarSize - 10,
GetScreenHeight() - selTopMargin - selLabelMarginBottom - selScrollbarSize - 10
GetScreenWidth() - selSidebarWidth - selFreqLabelWidth - selVScrollbarWidth - 20,
GetScreenHeight() - selTopMargin - selBottomMargin - selLabelHeight - selScrollbarHeight - 10
};
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);
if (IsMouseButtonPressed(MOUSE_LEFT_BUTTON) && !app.isPanning) {
@@ -1429,23 +1432,29 @@ int main(int argc, char* argv[])
BeginDrawing();
ClearBackground((Color){ 30, 30, 30, 255 });
// Spectrogram area fills remaining window space
// Sidebar: 320px wide, spectrogram takes the rest
// Leave room for scrollbars (20px) and axis labels
// Layout: sidebar on left, spectrogram on right
// Space for: spectrogram + time labels (15px below) + scrollbar (18px below that)
float sidebarWidth = 320;
float scrollbarSize = 18;
float labelMarginLeft = 65;
float labelMarginBottom = 35;
float labelHeight = 15;
float scrollbarHeight = 18;
float freqLabelWidth = 65;
float vScrollbarWidth = 18;
float topMargin = 50;
float bottomMargin = 10;
// Spectrogram area (excludes labels and scrollbars)
Rectangle viewBounds = {
sidebarWidth + labelMarginLeft,
sidebarWidth + freqLabelWidth,
topMargin,
GetScreenWidth() - sidebarWidth - labelMarginLeft - scrollbarSize - 10,
GetScreenHeight() - topMargin - labelMarginBottom - scrollbarSize - 10
GetScreenWidth() - sidebarWidth - freqLabelWidth - vScrollbarWidth - 20,
GetScreenHeight() - topMargin - bottomMargin - labelHeight - scrollbarHeight - 10
};
Rectangle hScrollbar = { viewBounds.x, viewBounds.y + viewBounds.height + 10, viewBounds.width, scrollbarSize };
Rectangle vScrollbar = { viewBounds.x + viewBounds.width + 10, viewBounds.y, scrollbarSize, viewBounds.height };
// Time labels sit just below the spectrogram
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)
DrawSidebar();
@@ -1558,12 +1567,11 @@ int main(int argc, char* argv[])
if (app.showGrid) DrawSpectrogramGrid(viewBounds, 10, 8, Fade(GRAY, 0.3f));
DrawSelection(viewBounds);
DrawLabels(viewBounds);
DrawText("Spectrogram", viewBounds.x, viewBounds.y - 30, 20, LIGHTGRAY);
float maxFreq = (float)app.signal.sampleRate / 2.0f;
float freqMin = app.freqViewStart * maxFreq;
float freqMax = app.freqViewEnd * maxFreq;
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) {
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>";
@@ -1576,8 +1584,6 @@ int main(int argc, char* argv[])
// Draw file browser on top (if active)
if (app.showFileBrowser) DrawFileBrowser();
// Draw FPS in spectrogram area
DrawFPS(GetScreenWidth() - 80, 10);
EndDrawing();
}