From 371017a31bedaed179d339b9fe371529f22d9ec4 Mon Sep 17 00:00:00 2001 From: skal Date: Wed, 28 Jan 2026 11:45:09 +0100 Subject: feat(editor): Scaffold web spectrogram editor Initial setup for the spectrogram editor tool. - Created tools/editor/index.html, script.js, and style.css. - Added basic structure for WAV loading, visualization, and tool controls. --- tools/editor/index.html | 28 ++++++++++++++++++++++++++++ tools/editor/script.js | 11 +++++++++++ tools/editor/style.css | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 tools/editor/index.html create mode 100644 tools/editor/script.js create mode 100644 tools/editor/style.css (limited to 'tools') diff --git a/tools/editor/index.html b/tools/editor/index.html new file mode 100644 index 0000000..43a37f9 --- /dev/null +++ b/tools/editor/index.html @@ -0,0 +1,28 @@ + + + + + + Spectrogram Editor + + + +

Spectrogram Editor

+ + + + +
+ +
+

Tools

+ + + + +
+
+ + + + diff --git a/tools/editor/script.js b/tools/editor/script.js new file mode 100644 index 0000000..9311d6d --- /dev/null +++ b/tools/editor/script.js @@ -0,0 +1,11 @@ +// This is the core JavaScript for the Spectrogram Editor. +// It handles file loading, visualization, tool interaction, and saving. + +// Placeholder for core functionality +console.log("Spectrogram Editor script loaded."); + +// TODO: Implement WAV loading and spectrogram calculation +// TODO: Implement canvas drawing and event handling for tools +// TODO: Implement shape generation (strokes, ellipses, noise) +// TODO: Implement JSON save/load functionality +// TODO: Implement .spec export functionality diff --git a/tools/editor/style.css b/tools/editor/style.css new file mode 100644 index 0000000..f610969 --- /dev/null +++ b/tools/editor/style.css @@ -0,0 +1,35 @@ +body { + font-family: sans-serif; + margin: 20px; + background-color: #f4f4f4; +} + +h1, h2 { + color: #333; +} + +#editorContainer { + display: flex; + margin-top: 20px; +} + +#spectrogramCanvas { + border: 1px solid #ccc; + background-color: #fff; + margin-right: 20px; +} + +#controls { + border: 1px solid #ccc; + padding: 15px; + background-color: #eee; + min-width: 200px; +} + +#controls button { + display: block; + width: 100%; + margin-bottom: 10px; + padding: 10px; + cursor: pointer; +} -- cgit v1.2.3