diff --git a/Tags.md b/Tags.md new file mode 100644 index 0000000..61f2e84 --- /dev/null +++ b/Tags.md @@ -0,0 +1,122 @@ +# Edi's Buzzer - Metadata Tags Format + +## Architektur-Übersicht +Die Metadaten werden transparent an das Ende der rohen Audio-Daten angehängt. Das Format basiert auf einer strikten **Little-Endian** Byte-Reihenfolge und nutzt eine erweiterbare **TLV-Struktur** (Type-Length-Value) für die eigentlichen Datenblöcke. + +Das physische Layout einer Datei im Flash-Speicher sieht wie folgt aus: +`[Audio-Rohdaten] [TLV-Block 1] ... [TLV-Block N] [Footer (8 Bytes)]` + +--- + +## 1. Footer-Struktur +Der Footer liegt exakt auf den letzten 8 Bytes der Datei (EOF - 8). Er dient als Ankerpunkt für den Parser, um die Metadaten rückwärts aus der Datei zu extrahieren. Das 8-Byte-Alignment stellt speichersichere Casts auf 32-Bit-ARM-Architekturen sicher. + +| Offset | Feld | Typ | Beschreibung | +| :--- | :--- | :--- | :--- | +| 0 | `total_size` | `uint16_t` | Gesamtgröße in Bytes (Summe aller TLV-Blöcke + 8 Bytes Footer). | +| 2 | `version` | `uint16_t` | Format-Version. Aktuell `0x0001`. | +| 4 | `magic` | `char[4]` | Fixe Signatur: `"TAG!"` (Hex: `54 41 47 21`). | + +--- + +## 2. TLV-Header (Type-Length-Value) +Jeder Metadaten-Block beginnt mit einem exakt 4 Bytes großen Header. Unbekannte Typen können vom Controller durch einen relativen Sprung (`fs_seek` um `length` Bytes) übersprungen werden. + +| Offset | Feld | Typ | Beschreibung | +| :--- | :--- | :--- | :--- | +| 0 | `type` | `uint8_t` | Definiert den Inhalt des Blocks (siehe Typen-Definitionen). | +| 1 | `index` | `uint8_t` | Erlaubt die Fragmentierung großer Datensätze (z.B. bei JSON > 64 KB). Standard: `0x00`. | +| 2 | `length` | `uint16_t` | Größe der folgenden Payload in Bytes (ohne diesen Header). | + +--- + +## 3. Typen-Definitionen + +### Type `0x00`: Binary System Metadata +Dieser Typ gruppiert maschinenlesbare, binäre Systeminformationen. Die Unterscheidung erfolgt über das `Index`-Feld. + +#### Index `0x00`: Audio Format +Dieser Block konfiguriert den I2S-Treiber vor der Wiedergabe. +* **Typ:** `0x00` +* **Index:** `0x00` +* **Länge:** `0x0008` (8 Bytes) +* **Payload:** `[codec: 1 Byte] [bit_depth: 1 Byte] [reserved: 2 Bytes] [samplerate: 4 Bytes]` + +#### Index `0x01`: Audio CRC32 +Speichert die CRC32-Prüfsumme (IEEE) der reinen Audiodaten (vom Dateianfang bis zum Beginn des ersten TLV-Blocks). Dient Synchronisations-Tools für einen schnellen Integritäts- und Abgleich-Check, ohne die gesamte Datei neu hashen zu müssen. +* **Typ:** `0x00` +* **Index:** `0x01` +* **Länge:** `0x0004` (4 Bytes) +* **Payload:** `uint32_t` (Little-Endian) + +### Type `0x10`: JSON Metadata +Dieser Block enthält Metadaten, die primär für das Host-System (z. B. das Python-Tool) zur Verwaltung, Kategorisierung und Anzeige bestimmt sind. Der Mikrocontroller ignoriert und überspringt diesen Block während der Audiowiedergabe. + +* **Typ:** `0x10` +* **Länge:** Variabel +* **Payload:** UTF-8-kodierter JSON-String (ohne Null-Terminator). + +#### Standardisierte JSON-Schlüssel +Die nachfolgenden Schlüssel (Keys) sind im Basis-Standard definiert. Die Integration weiterer, proprietärer Schlüssel ist technisch möglich. Es wird jedoch empfohlen, dies mit Vorsicht zu handhaben, da zukünftige Standardisierungen diese Schlüsselnamen belegen könnten (Namenskollision). + +| Schlüssel | Datentyp | Beschreibung | +| :--- | :--- | :--- | +| `t` | String | Titel der Audiodatei | +| `a` | String | Autor oder Ersteller | +| `r` | String | Bemerkungen (Remarks) oder Beschreibung | +| `c` | Array of Strings | Kategorien zur Gruppierung | +| `dc` | String | Erstellungsdatum (Date Created), idealerweise nach ISO 8601 | +| `ds` | String | Speicher- oder Änderungsdatum (Date Saved), idealerweise nach ISO 8601 | + +**Beispiel-Payload:** +Ein vollständiger JSON-Datensatz gemäß dieser Spezifikation hat folgendes Format: + +```json +{ + "t": "Testaufnahme System A", + "a": "Entwickler-Team", + "r": "Überprüfung der Mikrofon-Aussteuerung.", + "c": ["Test", "Audio", "V1"], + "dc": "2026-03-05T13:00:00Z", + "ds": "2026-03-05T13:10:00Z" +} +``` + +*(Hinweis zur Skalierbarkeit: Für zukünftige Erweiterungen können dedizierte TLV-Typen definiert werden, wie beispielsweise 0x11 für GZIP-komprimierte JSON-Daten oder 0x20 für binäre Bilddaten wie PNG-Cover).* + +--- + +## 4. Lese-Algorithmus (Parser-Logik) + +Der Controller extrahiert die Hardware-Parameter nach folgendem Ablauf: + +1. **Footer lokalisieren:** * Gehe zu `EOF - 8`. Lese 8 Bytes in das `tag_footer_t` Struct. + * Validiere `magic == "TAG!"` und `version == 0x0001` (unter Berücksichtigung von Little-Endian Konvertierung via `sys_le16_to_cpu`). +2. **Grenzen berechnen:** + * Lese `total_size`. + * Die reinen Audiodaten enden bei `audio_limit = EOF - total_size`. + * Gehe zur Position `audio_limit`. +3. **TLV-Blöcke iterieren:** + * Solange die aktuelle Leseposition kleiner als `EOF - 8` ist: + * Lese 4 Bytes in den `tlv_header_t`. + * Wenn `type == 0x00`: Lese die nächsten 8 Bytes in das `tlv_audio_format_t` Struct. + * Wenn `type != 0x00`: Führe `fs_seek(header.length, FS_SEEK_CUR)` aus. + +--- + +## 5. Hex-Beispiel + +Eine fiktive Datei enthält Audio-Daten. Es soll ein PCM-Mono Format (16 Bit, 16 kHz) sowie ein kurzes JSON `{"t":"A"}` (9 Bytes) angehängt werden. + +**1. TLV 0x00 (Audio Format):** +* Header: `00 00 08 00` (Type 0, Index 0, Length 8) +* Payload: `00 10 00 00 80 3E 00 00` (Mono, 16-Bit, Reserved, 16000 Hz) + +**2. TLV 0x10 (JSON):** +* Header: `10 00 09 00` (Type 16, Index 0, Length 9) +* Payload: `7B 22 74 22 3A 22 41 22 7D` (`{"t":"A"}`) + +**3. Footer:** +* Total Size: `2D 00` (45 Bytes = 12 Bytes Audio-TLV + 13 Bytes JSON-TLV + 12 Bytes Padding/Zusatz + 8 Bytes Footer) -> *Hinweis: Size ist in diesem Konstrukt abhängig vom genauen Payload.* +* Version: `01 00` +* Magic: `54 41 47 21` (`TAG!`) \ No newline at end of file diff --git a/webpage/src/components/FileList.svelte b/webpage/src/components/FileList.svelte index eb1d5f1..40d5c9a 100644 --- a/webpage/src/components/FileList.svelte +++ b/webpage/src/components/FileList.svelte @@ -1,6 +1,8 @@ -
- - {#if state === 'active'} -
(menuOpen = false)} /> + +
+ {#if state === "active"} +
{/if} + +
+
+ + + +
+ + +
\ No newline at end of file + @reference "../styles/app.css"; + + .menu-btn-grp { + @apply absolute right-2 top-1/2 -translate-y-1/2 z-20 overflow-hidden + p-0 flex items-center backdrop-blur-sm + border border-transparent rounded-full transition-all; + } + + /* Kombiniert Hover von Mausnutzern und aktiven Touch-Zustand */ + .menu-btn-grp:hover, + .menu-btn-grp.is-open { + @apply border-border-card bg-white shadow-sm; + } + + .menu-btn { + @apply p-1.5 border-r border-r-border-card + flex items-center justify-center shrink-0 transition-colors; + + &:not(:disabled):not(.danger) { + @apply hover:bg-surface-hover; + } + + &.danger:not(:disabled) { + @apply text-red-700 hover:bg-red-100; + } + + &:disabled { + color: color-mix(in srgb, currentColor 50%, transparent); + @apply cursor-not-allowed grayscale; + } + } + diff --git a/webpage/src/components/FileMenuOverlay.svelte b/webpage/src/components/FileMenuOverlay.svelte new file mode 100644 index 0000000..119c41b --- /dev/null +++ b/webpage/src/components/FileMenuOverlay.svelte @@ -0,0 +1,187 @@ + + + { + if (show) closeMenu(); + }} + on:keydown={(e) => { + if (show && e.key === "Escape") closeMenu(); + }} +/> + +{#if show} + + +
+
+
+ {#if fileCount === 0} + Keine Dateien vorhanden. + {:else if selectedFileCount === 0} + keine Datei ausgewählt + {:else if selectedFileCount === fileCount} + Alle {fileCount} Dateien ausgewählt ({formatSize(selectedFileSize)}) + {:else} + {selectedFileCount} von {fileCount} Dateien ausgewählt ({formatSize( + selectedFileSize, + )}/{formatSize(totalSize)}) + {/if} +
+ + + {#if selectedFileCount > 0} +
+
Augesählte Dateien:
+
+ {#if selectedFileCount > 0} + {selectedFileCount} + {/if} +
+
+ + + {/if} +
+
+{/if} + + diff --git a/webpage/src/components/FileTagEditor.svelte b/webpage/src/components/FileTagEditor.svelte new file mode 100644 index 0000000..ca87aca --- /dev/null +++ b/webpage/src/components/FileTagEditor.svelte @@ -0,0 +1,442 @@ + + + + +{#if show && currentFile} + + +
+
+ + +
(isDropdownOpen = false)} + > + + + {#if isDropdownOpen} +
+ {#each fileList as file} + + {/each} +
+ {/if} +
+ + + +
+ +
+
+
+ Grösse + {formatSize(currentFile.size)} +
+
+ CRC32 + + {currentFile.sysTags?.crc32 + ? `0x${currentFile.sysTags.crc32.toString(16).toUpperCase()}` + : "N/A"} + +
+
+ Audio Codec + + {currentFile.sysTags?.format?.codec || "PCM"} / {currentFile.sysTags?.format + ?.sampleRate || "16000"}Hz + +
+
+ +
+ + + + + +
+
+ +
+ {#if hasAnyDrafts} +
+ + +
+
+ {/if} +
+ + +
+ +
+
+{/if} + + diff --git a/webpage/src/components/Header.svelte b/webpage/src/components/Header.svelte index d79f9b8..e24dce0 100644 --- a/webpage/src/components/Header.svelte +++ b/webpage/src/components/Header.svelte @@ -11,16 +11,28 @@ CheckSquareIcon, } from "phosphor-svelte"; import { slide } from "svelte/transition"; - import { - isConnected, isConnecting, availableDevices, pairedDevices, - activeDeviceId, autoConnect, loadConnectionState, fsInfo + import { + isConnected, + isConnecting, + availableDevices, + pairedDevices, + activeDeviceId, + autoConnect, + loadConnectionState, + fsInfo, } from "../lib/store"; - import { connectBuzzer, disconnectBuzzer, pairBuzzer, forgetDevice, getPairedDevices } from "../lib/bluetooth"; + import { + connectBuzzer, + disconnectBuzzer, + pairBuzzer, + forgetDevice, + getPairedDevices, + } from "../lib/bluetooth"; let showDropdown = false; $: lastDeviceId = loadConnectionState()?.deviceId; - $: targetDevice = $pairedDevices.find(d => d.id === lastDeviceId); + $: targetDevice = $pairedDevices.find((d) => d.id === lastDeviceId); $: canQuickConnect = targetDevice ? $availableDevices.has(targetDevice.id) : false; $: autoConnectIcon = $autoConnect ? CheckSquareIcon : SquareIcon; @@ -53,17 +65,23 @@
- + Edis Buzzer   CONTROL
-
(showDropdown = false)}> +
(showDropdown = false)} + >
-