Interaktive Präsentation zum Artikel über die Vorlage HiFi im Blog Digitales Leben. Alles läuft im Browser, ohne Server und ohne Tracking; gemerkt wird nur die Wahl von Thema und Effektstufe in diesem Browser. Quelltext: GitHub, gebaut auf dem Appkern.
Bordstimme

Neun Bilder von Effektgeräten wurden zu einer Vorlage des Appkerns. Übernommen ist nur der Stil: gebürstetes Aluminium, Pulverlack, schwarzes Glas, Chrom, Licht von oben und leuchtende Anzeigen. Namen, Schriftzüge und Logos der Bilder nicht.

Alles hier ist echtes HTML und bedienbar: Regler ziehen, mit dem Rad drehen, mit Pfeilen stellen, doppelt klicken für die Vorgabe. Oben lässt sich Thema, Effektstufe und Vorlage umschalten.

  • Geltung: neue Vorlage des Appkerns neben Glas und Futur; ein Stimmprozessor im Browser ist der erste Nutzer.
  • Effekte: Geräte kräftig, Schale, Listen und Dialoge ruhig; drei Stufen zum Vergleich.
  • Gehäuse: Knoten und Rack in Lack der Modulfarbe, Inspektor in Metall mit Farbakzent.
  • Hell: gebürstetes Silber, Anzeigen bleiben dunkles Glas.

Seiten

ReglerDrehregler mit vier Kappen, Drehwahl, Schieber, Taster, Kippschalter, Wahltasten; alle mit Ziehen, Rad, Tasten, Doppelklick und Feinschritt. AnzeigenLeuchten, sieben und vierzehn Segmente, Punktmatrix, Zeigerinstrumente, Pegel, Oszilloskop, LFO, Spektrum, Hüllkurve, Take. BedienelementeKnöpfe, Felder, Auswahl, Reiter, Schalter, Listen, Rückfrage, schwebendes Fenster, Meldungen, Tabelle: ruhig gestaltet. Material und LichtAluminium, Lack, Rohblech, Glas, Chrom; Tiefe, Glanz, Raum, Blenden, Überstrahlen; Leistung gemessen. SkalierungBehälter, Verhältnisse, Untergrenzen, Detailstufen: ein Gerät von 200 bis 1200 Pixel, Prüfstand je Fenster, vier Bauformen. Im StudioDie Vorlage auf der Schale des Appkerns: Board mit Knoten in Lack, Kabel, Inspektor in Metall, Transport mit Pegeln.

Aufbau: so wandert es in den Appkern

Gebaut wie die Vorlagen des Appkerns: Marken und Bausteine getrennt, jede Wirkung über Marken. Der Ordner appkern ist das, was später nach appkern-oberflaeche geht; aus den Elementen werden dort Svelte-Bausteine mit demselben Wertmodell.

Für den Appkern
appkern/instrumente.cssRegler und Anzeigen als neue Bausteine, Grundaussehen flach, Maßsystem und Detailstufen
appkern/instrumente.jsWertmodell und Eingabe (eine Stelle), Drehregler, Schieber, Taster, Kippschalter, Wahl, Leuchte
appkern/anzeigen.jsTakt, Beispielquelle, Segmente, Zeiger, Pegel, Schirme
appkern/vorlagen/hifi.cssdie Vorlage: hifi/marken.css (Material, Licht, drei Stufen) und hifi/bausteine.css (Geräte kräftig, Schale ruhig)
Für die App und diese Präsentation
farben.cssnur die Farben der App: Leuchtfarbe und Lack je Modul
wahl.jsThema, Effektstufe und Vorlage wählen und merken
seite.js, seite.cssKopf und Raster der Kitchensink-Seiten
bausteine.js, leistung.jsVerhalten der allgemeinen Bausteine im Entwurf, Messlauf