Blattwerk

(früher „NotenABCreator“ — umbenannt im August 2026)

Webapp zum schnellen Erzeugen von Notenschnipseln (SVG/PNG) für Arbeitsblätter und Klassenarbeiten sowie zum Zusammenstellen kompletter Arbeitsblätter.

Statische App ohne Build-Schritt, Notensatz mit VexFlow 4.2.2 (lokal in vendor/vexflow.js, funktioniert offline).

A4 in zwei gleiche A5-Blätter teilen

Im Arbeitsblatt unter Seitenformat → 2 × A5 auf A4 · zum Durchschneiden wechseln. Gestaltet wird eine A5-Seite im Querformat. Beim Drucken und PDF-Download wird jede gestaltete Seite zweimal auf einem A4-Bogen platziert, mit einer gestrichelten Schnittlinie in der Mitte. Fußzeilen und Seitenzahlen werden auf beiden Hälften wiederholt. Das Seitenformat wird im Projekt gespeichert.

Formen in Tabellenzellen

In eine Tabellenzelle klicken und im Reiter Zelle → Element einfügen Kreis, Quadrat oder Dreieck wählen. Größe, Füllung, Rand und Position (links/rechts neben oder unter dem Text) lassen sich je Form einstellen. Mehrere Formen pro Zelle sind möglich; sie bleiben beim Bearbeiten des Texts erhalten und werden im Projekt sowie im PDF übernommen.

Lösungen direkt in Tabellen

Eine Tabellenzelle anklicken und im Reiter Lösungen ein Antwortfeld für diese Zelle, die ganze Zeile oder die ganze Spalte vorbereiten. Die Lehrerkopie öffnet sich automatisch: Grüne Felder direkt im Blatt ausfüllen. Der Schülertext bleibt separat gespeichert. Pro Zelle kann die Lösung den Schülertext ersetzen oder zusätzlich darunter erscheinen. Mit Schülerfassung anzeigen bzw. dem globalen Schalter Lösungen anzeigen zwischen beiden Fassungen wechseln; PDF und Druck übernehmen die angezeigte Fassung.

Zelllösungen bleiben bei Spalten-/Zeilenänderungen und beim Verbinden/Teilen von Zellen erhalten. Im Reiter Zelle können auch eingefügte Formen mit Form nur in der Lösung ausschließlich für die Lehrerkopie vorgesehen werden. Die bisherige Einstellung Inhalt nur in der Lösung funktioniert weiterhin; beim Vorbereiten eines separaten Antwortfelds wird ein solcher Altinhalt als Lösung übernommen. Zelllösung entfernen lässt den Schülertext bestehen; Strg+Z stellt die entfernte Lösung wieder her.

Lückentexte mit Auswahlwörtern

Unter Aufgabenformen → Lückentext einen Baustein hinzufügen. Im Reiter Text & Lücken den Text eingeben, ein Wort oder eine Wortgruppe markieren und Auswahl als Lücke klicken. Alternativ [[Lösungswort]] schreiben. Die Lösungswörter werden automatisch als alphabetische Auswahlwortliste angezeigt. Unter Auswahlwörter zwischen Liste, Kasten und ausgeblendeter Wortliste wechseln; zusätzliche Wörter können zeilenweise ergänzt werden. Unter Aussehen Schriftgröße, Zeilenabstand und Lückenbreite einstellen. Lösungen anzeigen füllt die Lücken für Lehrerkopie und PDF aus.

Überschriften

Unter Aufbau → Überschrift einen Überschriften-Baustein einfügen; der Text wird direkt im Blatt bearbeitet. Drei Größen (relativ zur Blattschrift, optional eine feste Schriftgröße in pt), Ausrichtung, Fett, Schriftart und fünf Stile: schlicht, unterstrichen, Linie darunter, Balken links oder Farbfläche. Linien- bzw. Flächenfarbe sind je Stil einstellbar, die Textfarbe über den gemeinsamen Regler. Eine Überschrift am Seitenende wandert zusammen mit dem folgenden Baustein auf die nächste Seite. Überschriften werden im Projekt gespeichert und erscheinen im PDF/Druck.

Akkorde und Text unter leeren Notenzeilen

Beim Baustein Musik → Leere Notenzeilen im Reiter Akkorde / Text die Textfelder auf unter der Zeile oder über der Zeile stellen. Je Takt entstehen ein bis vier Felder (ohne Taktstriche: gleichmäßig über die Zeile verteilte Felder); sie werden direkt im Blatt angeklickt und beschriftet, etwa mit Akkordsymbolen (C, G7, Am), zu denen die Noten eingetragen werden sollen. Enter oder Tab springt zum nächsten Feld. Anzeige → nur in der Lösung druckt in der Schülerfassung leere Felder mit Schreiblinie und zeigt die Texte nur in der Lehrerkopie; leere Felder erhalten wahlweise eine Schreiblinie. Schriftgröße, Fettdruck und Textfarbe sind einstellbar. Die Feldtexte werden im Projekt gespeichert und erscheinen im PDF/Druck.

Aufgaben optisch trennen

Unter Layout → Trenner einen eigenen Baustein einfügen und anklicken. Sechs Designs stehen zur Wahl: schlichte, gestrichelte, gepunktete oder doppelte Linie sowie Linien mit Raute oder drei Punkten. Farbe, Linienstärke, Breite und Abstände davor/danach sind einstellbar. Trenner lassen sich wie andere Bausteine verschieben, duplizieren und löschen und erscheinen auch im PDF.

Bereiche

• Generator — Tonleitern (Dur, Moll nat./harm./mel., wahlweise mit eingebauten Fehlern für „Finde die Fehler“-Aufgaben), Intervalle und Dreiklänge (inkl. Umkehrungen) per Zufall oder gezielt; Export als eng zugeschnittenes SVG oder PNG, Lösungsanzeige für den Lehrer.
• Editor — freie Noteneingabe über Bildschirmklaviatur, Computertastatur (c d e f g a h, b = B; Details unter „Tastatur-Hilfe“) oder MIDI-Keyboard (Web-MIDI; benötigt HTTPS oder localhost). Akkorde, Pausen, Punktierungen, Taktstriche, Tonarten, Violin-/Bassschlüssel.
• Arbeitsblatt — Bausteine (Kopfzeile mit automatischer Punktesumme, nummerierte Aufgaben mit optionalen Punkten, Text, Überschriften, Notenzeilen aus Generator/Editor, leere — auch beschriftete — Notenzeilen, Notenrätsel (Worträtsel aus Tonnamen: aus einem Lösungswort werden Noten mit Schreiblinien darunter, Nicht-Tonbuchstaben stehen fest gedruckt; einzelne Noten lassen sich per Klick und ▲/▼ bzw. Pfeiltasten nachträglich um eine Oktave verschieben), Bilder, Schreiblinien, Antwort-Kästchen, Abstände) zu einer A4-Seite kombinieren; mehrspaltige Zeilen über den ◫-Knopf an jedem Baustein (bis 4 Spalten, Breiten einstellbar); Schriftstil wählbar (Schulschrift- Vorlage mit lokal eingebetteten Fonts Poppins/Patrick Hand in fonts/, Serif oder Sans); Druck/PDF über den Browser, Speichern/Laden als .blattwerk (JSON), automatische Zwischenspeicherung im Browser.

Kopfzeilen-Layouts

Die kompakte Arbeitsblatt-Kopfzeile (Aufbau → Kopfzeile) bietet unter Kopf-Layout neun Anordnungen: schmale Leiste mit Linie, Raster, Titel zuerst, Kasten, Bildkopf sowie Tabelle (Felder in Zellen, Spaltenzahl einstellbar), Pillen (jedes Feld umrandet), Farbband (Titel und Untertitel auf einer Fläche; Band- und Schriftfarbe wählbar, bleibt auch bei einem Ausdruck ohne Hintergründe durch den Rand erkennbar) und Geteilt (Titel links, Felder rechts als Spalte). Felder, Feld-Vorlagen, Logo, Trennlinie und Schrift gelten für alle Layouts; die Linienfarbe färbt auch Zell- und Pillenränder.

Bildkopf für Unterrichtseinheiten

Unter Aufbau → Bildkopf · Unterrichtseinheit steht ein Kopf mit Einheitenbild, Fach/Klasse, Unterrichtseinheit, Datum, AB-Nummer in einer gefalteten Ecke und großer Titelzeile bereit. Texte sind direkt editierbar. Im Reiter Bild lässt sich das Motiv je Kopf hochladen, austauschen und vollständig oder als Ausschnitt anzeigen. Bild und Einstellungen werden im Projekt gespeichert.

Frei gestaltbare Fachgrafiken

Die Kontextmenüs bieten abgerundete Einstellungsflächen und einheitliche Farbkarten mit Vorschau, HEX-Eingabe und markierter Schnellauswahl. Farben lassen sich in den Einstellungen der Bausteine frei wählen. Infokästen bieten getrennte Farben für Hintergrund, Rand, Seitenbalken, Titel, Symbol und Text; die Vorlagenfarben können wiederhergestellt werden. Weitere Regler gibt es unter anderem für Tabellenzellen, Strichlistenzeilen, Körpernetzflächen, Ordner, mathematische Figuren sowie Noten, Linien und Klaviertasten. Individuelle Farben werden mit dem Projekt gespeichert und beim Drucken übernommen. Ohne eigene Auswahl bleiben die bisherigen Standardfarben erhalten.

Säulen-, Balken-, Streifen- und Kreisdiagramme bieten im Reiter Farben eine Standardfarbe und individuelle Farben je Rubrik, auch für Schraffuren. Einzelfarben bleiben beim Umsortieren gleich benannter Rubriken und beim Wechsel der Diagrammart erhalten und werden mit dem Projekt gespeichert.

Im Arbeitsblatt stehen unter Mathematik zusätzlich Strichlisten mit Fünferbündeln und optionaler Anzahl-/Anteilspalte, Stellenwert-/Einheitentafeln sowie Würfel- und Quadernetze bereit. Unter Informatik finden sich ein anklickbares Pixelraster mit optionalen Bitfolgen und ein frei verschachtelbarer Ordnerbaum. Die Fachauswahl Alle zeigt sämtliche Gruppen; bestehende Projekte mit der früheren Auswahl „Beide“ bleiben kompatibel.

Alle Inhalte werden selbst eingegeben. Tabellenzellen und Spaltenköpfe der Stellenwerttafel lassen sich direkt im Blatt bearbeiten; die übrigen Optionen erscheinen nach Auswahl des Bausteins. Pixel können auch mit Pfeiltasten und Leertaste bearbeitet werden. Beschriftungen und ausgewählte Inhalte lassen sich anzeigen, leer lassen oder nur in der Lehrerfassung darstellen. Die Bausteine werden mit dem Projekt gespeichert und funktionieren offline sowie im PDF/Druck. Körpernetze bieten drei Anordnungen, frei beschriftbare und färbbare Flächen sowie optionale Klebelaschen. Ihre Millimetermaße gelten bei Druck in Originalgröße; schmale Spalten können Grafiken verkleinern.

Implementierung: js/graphic-blocks.js, css/graphic-blocks.css. Browserprüfung: tests/graphic-blocks.cjs (lokaler HTTP-Server und Playwright).

Projektdateien direkt öffnen

Neue Projektdateien heißen titel.blattwerk; der Inhalt bleibt JSON. Bestehende .json-Projekte lassen sich weiterhin öffnen, auch über Nextcloud. Beim Zurückspeichern eines bestehenden Cloud-Projekts bleibt dessen Dateiname erhalten.

• Linux: Blattwerk über einen Browser mit File Handling API (z. B. Chrome) als PWA installieren. Danach im Dateimanager Öffnen mit → Blattwerk wählen; das Projekt wird direkt im Arbeitsblatt-Reiter geladen. Der Browser kann zuerst die Erlaubnis für Dateizugriff abfragen. Die Registrierung hängt auch von der Systemintegration des Browserpakets ab.
• Android: Blattwerk über Chrome als PWA installieren. Im Dateimanager die Projektdatei über Teilen → Blattwerk übergeben. „Öffnen mit“ wird auf Android von der File Handling API nicht unterstützt.

Bei einer bereits installierten PWA muss der Browser das aktualisierte Manifest übernehmen. Falls Blattwerk nicht in der Auswahl erscheint, die App nach einem Neuladen gegebenenfalls erneut installieren. Voraussetzung ist HTTPS (lokal auch localhost). Nach erfolgreichem Vorladen funktioniert die Dateiübergabe offline. Android-Dateien werden vom Service Worker lokal zwischengespeichert und nach dem Laden gelöscht; hierfür erfolgt kein Upload. Pro Fenster wird ein Projekt geladen. Eine bestehende Nextcloud-Verknüpfung wird beim Öffnen einer lokalen Datei gelöst.

Teilen

Der Knopf Teilen in der Arbeitsblatt-Werkzeugleiste legt den aktuellen Stand beim Hilfsdienst ab und liefert einen Link (…/notenabcreator/?s=<id>). Wer ihn öffnet, bekommt eine eigene Kopie in seinen Arbeitsbereich und kann sie frei umbauen; beim Absender ändert sich nichts, und es wird nie zurückgeschrieben. Anmelden muss sich niemand — der Link selbst ist der Schlüssel (zufällige, nicht erratbare ID). Spätere Änderungen landen nicht automatisch in einer bestehenden Freigabe; dafür einfach neu teilen.

Die Freigaben liegen als JSON-Dateien unter server/shares/ und bleiben bestehen, bis sie von Hand gelöscht werden (z. B. find server/shares -mtime +365 -delete). Grenzen über Umgebungsvariablen des Dienstes: SHARE_DIR, SHARE_DIR_MAX_MB (Standard 1024), SHARE_RATE_PER_HOUR (Standard 60 neue Freigaben je Absender-IP).

KI-Assistenten (MCP-Server)

Blattwerk spricht das Model Context Protocol: KI-Assistenten wie Claude (Desktop, claude.ai, Claude Code) oder andere MCP-fähige Programme können damit Arbeitsblätter, Klassenarbeiten und Notenzeilen direkt erstellen. Adresse:

https://<server>/notenabcreator/api/mcp

(Streamable-HTTP-Transport, zustandslos.) Einrichten z. B. in Claude Code mit claude mcp add --transport http blattwerk https://<server>/notenabcreator/api/mcp, in claude.ai/Claude Desktop unter Einstellungen → Konnektoren → Eigenen Konnektor hinzufügen. Öffentliche Instanz: https://static.krg.li/notenabcreator/api/mcp (in Claude Code auf diesem Server bereits als blattwerk eingetragen). Werkzeuge:

Werkzeug	Zweck
get_guide	Anleitung für die KI: Bausteine, Textformat, Notenkurzschrift
list_block_types	alle Bausteine mit Feldern und Vorgabewerten — direkt aus der App gelesen, neue Bausteine erscheinen automatisch
create_worksheet	Blatt anlegen → Link (öffnet bearbeitbar in Blattwerk), PDF-Link, Seitenvorschau als Bild zur Selbstkontrolle
get_worksheet	ein geteiltes Blatt als JSON lesen, um Varianten zu bauen
render_notes	einzelne Notenzeile als PNG (und SVG)

Noten kann die KI als Kurzschrift angeben (server/notes.js), z. B. c4/8 d4 e4 f4 g4/q g4 | a4/8 a4 a4 a4 g4/h |. — englische Tonnamen (b = H), /q /h /8 Notenwerte, <c4 e4 g4> Akkord, r Pause, |. Schlussstrich, ?"c" Antwortkästchen mit Lösung. Gerendert wird mit der echten App im Headless-Chromium des Hilfsdiensts; Ergebnisse sind normale Freigaben (siehe „Teilen“) und zählen zur selben Bremse je Absender-IP. Das PDF einer Freigabe liefert GET api/share/<id>/pdf (?solutions=1 = Lehrerfassung).

Umgebungsvariablen des Dienstes: MCP_TOKEN (optional; dann nur mit Authorization: Bearer <token> oder …/api/mcp?key=<token>), PUBLIC_URL (öffentliche App-Adresse für die Links; sonst aus X-Forwarded-Host/-Proto, siehe server/nginx-location.conf). Test: node tests/mcp.cjs.

Nutzungsstatistik (Administratoren)

Beim Start meldet die App einen anonymen Besuch an den Hilfsdienst (POST api/visit; Inhalt nur: PWA installiert? Touchgerät?). Der Dienst erkennt Wiederkehrer über einen SHA-256-Hash aus IP-Adresse, Browserkennung und einem Zufallssalz, das täglich (Tageswerte) bzw. monatlich (Monatswerte) wechselt; alte Salze werden verworfen. Gespeichert werden nur diese Hashes mit Zeitstempel (server/stats/<JJJJ-MM>.jsonl) — keine IP, kein Nutzername, kein Cookie, nichts im Browserspeicher. Gerätetyp (PC, Handy, Tablet), Betriebs- system und Browserfamilie werden aus der Browserkennung als grobe Kategorie abgeleitet und mitgespeichert, die Kennung selbst nicht. PDF-Exporte sowie angelegte und geöffnete Freigaben werden mitgezählt; automatisierte Browser (PDF-Dienst, Tests) nicht.

Wer mit einem Tafel-Konto der Rolle „admin“ angemeldet ist, findet im Wolken-Menü Nutzungsstatistik …: Nutzer heute, Besuche der letzten sieben Tage, Nutzer des Monats, Besuche gesamt, ein Tagesdiagramm der letzten 30 Tage, eine Monatstabelle und die Verteilung der Nutzer des Monats nach Gerät, System und Browser. Der Dienst prüft die Anmeldung serverseitig über /piano/auth_api.php?action=me (Umgebungsvariable AUTH_URL); Ablageort über STATS_DIR. Voraussetzung ist der X-Forwarded-For-Header im nginx-Block (siehe server/nginx-location.conf), sonst sähen alle Besucher gleich aus.

Schriften (lokal in fonts/, offline-fähig)

• Poppins, Patrick Hand, Caveat, Kalam, Neucha, Fredoka, Baloo 2, Comfortaa, Nunito, Quicksand, Lora, Merriweather, Roboto Slab, Pacifico — SIL Open Font License, bezogen über Google Fonts (latin-Subset, Gewicht 400).
• Seit September 2026 zusätzlich (gleiche Lizenz und Bezugsquelle): Gochi Hand, Shadows Into Light, Indie Flower, Architects Daughter, Handlee, Gloria Hallelujah (Handschrift); Andika, ABeeZee, Atkinson Hyperlegible, Lexend (Erstleser-/Leseschriften); Varela Round, Dosis, Open Sans, Lato, Montserrat (Sans); Bitter, Playfair Display, EB Garamond, Libre Baskerville (Serif); Lobster, Amatic SC, Righteous, Bangers, Bubblegum Sans, Press Start 2P (Schmuck/Comic); Courier Prime, Source Code Pro (Schreibmaschine/Code). Die Schrift-Dropdowns sind nach diesen Gruppen gegliedert; jede Schrift wird erst beim ersten Benutzen geladen und dann offline vorgehalten.
• Jellee (SIL OFL, fontlibrary.org), Inter (SIL OFL).
• Grundschrift von Christian Urff — CC BY 3.0, Namensnennung erforderlich: „Font: Grundschrift von Christian Urff“.

Schriftarten sind pro Baustein („Schrift“ in den Baustein-Einstellungen) und für markierten Text (Dropdown in der Format-Pille) wählbar; gespeichert wird als <span data-f="…"> mit Whitelist. Stil-Presets (Schriftstil, Punkte-Stil, Fußzeile) lassen sich als benannte Designs speichern (localStorage nabc_designs).

Dateien

• index.html, css/style.css — Oberfläche inkl. Druck-CSS (A4)
• js/theory.js — Musiktheorie (Tonleitern, Intervalle, Dreiklänge, deutsche Notennamen)
• js/render.js — VexFlow-Rendering eines ScoreModels, SVG-Zuschnitt, SVG/PNG-Export
• js/generators.js, js/editor.js, js/worksheet.js, js/app.js — die drei Bereiche + Verdrahtung
• js/cloud.js, js/share.js — Nextcloud-Anbindung und Teilen-Links
• js/stats.js — anonymer Besuchs-Ping und Statistik-Dialog (Admin)
• server/pdf-server.js — Hilfsdienst: PDF-Rendering, Freigaben und Nutzungsstatistik
• server/mcp.js, server/notes.js — MCP-Schnittstelle für KI-Assistenten, Notenkurzschrift (nach Änderungen systemctl restart notenabcreator-pdf)