![\"\"](\"https://journal.3960.org/posts/2023-03-05-24h-uhr-als-web-component/24h-clock-240x240.png\")
Web Components zu bauen ist gar nicht so kompliziert, selbst ohne Framework. Nach meinen vorherigen Überlegungen zur Verwendung von SVGs in Web Components war es also höchste Zeit, eine 24-Stunden-Uhr zu bauen. Web Components zu bauen ist gar nicht so kompliziert, selbst ohne Framework. Nach meinen vorherigen Überlegungen zur Verwendung von SVGs in Web Components war es also höchste Zeit, eine 24-Stunden-Uhr zu bauen.
24h-Uhren sind analoge Uhren, die einen feinen Unterschied zu herkömmlichen Uhren aufweisen. An Stelle von 12 Stunden pro Umdrehung des Stundenzeigers zeigen sie 24 Stunden an. Damit braucht also der Stundenzeiger einen kompletten Tag für einen Vollkreis.
\nDamit ist es möglich, die vierundzwanzig Stunden auf dem Ziffernblatt grafisch in Tag, Dämmerung und Nacht einzuteilen. Da diese sich in Bezug auf das Datum und die geografische Position verändern, brauchte die Uhr also auch diese Informationen. In meinem Fall habe ich eine Skala auf dem Stundenring angebracht, die sich für die Nacht dunkelblau, für die Dämmung mittelblau und für den Tag hellblau verfärbt.
\n![\"Im](\"https://journal.3960.org/posts/2023-03-05-24h-uhr-als-web-component/24h-clock-2.png\")
Im hohen Norden scheint die Sonne heute nur kurz
Der Bau als Web Component erlaubt es nun, die Uhr mit relativ wenig HTML in eine beliebige Seite einzubauen. Unter der Github-Seite zur 24h-Uhr findet sich eine knappe Anleitung, der Einbau einer Web Component muss aber nicht komplizierter sein als:
\n<twentyfour-hours-clock></twentyfour-hours-clock>\nWeitere Attribute erlauben es, die Component vorher mit Werten zu bestücken – die sich auch im Nachhinein mit JavaScript ändern lassen:
\n<twentyfour-hours-clock width="128" height="128" datetime="2011-10-10T14:48:00" longitude="auto" latitude="auto"></twentyfour-hours-clock>\nAuch das Einfärben, Vergrößern und Verkleinern von Einzelteilen der Web Component sind mit CSS Custom Properties möglich:
\n<style>\ntwentyfour-hours-clock {\n --color-watchhand: pink;\n --color-night: #111111;\n}\n</style>\n<twentyfour-hours-clock></twentyfour-hours-clock>\nDie Web Component selber wurde mit TypeScript gebaut. Tatsächlich wäre auch der Bau direkt in Vanilla JavaScript möglich gewesen. Meine letzten Abenteuer in TypeScript sind aber so angenehme Erfahrungen gewesen, dass ich die Unterstützung bei der Typisierung in JavaScript nicht mehr missen möchte, und die Web Component in TypeScript gebaut habe. Inzwischen halte ich bei JavaScript die Verwendung von TypeScript für so hilfreich, dass ich auf ESLint zur Überprüfung meiner Programmierung bei Privatprojekten gerne verzichte.
\nEin funktionierendes Beispiel für die fertige Uhr findet sich auf der Demonstrationsseite für die 24h-Uhr.
SVGs können nicht nur mit Grafikprogrammen wie Adobe Illustrator oder Inkscape erstellt werden, sondern auch mit einem einfachen Texteditor – oder programmatisch mit jeder Skriptsprache, die man so zur Hand hat. Damit die SVG-Grafik aber in jedem Umfeld funktioniert, sind ein paar Besonderheiten zu beachten:
\n\n<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg version="1.1" viewBox="0 0 100 100" width="210mm" height="210mm" xmlns="http://www.w3.org/2000/svg">\n <title><!-- Document Title goes here --></title>\n <style>\n <!-- CSS goes here -->\n </style>\n <defs>\n <!-- Optional: Pastable objects -->\n </defs>\n <!-- Here comes the actual SVG -->\n</svg>\nDie Grundstruktur eines SVG-Dokuments kann man sich ähnlich wie die eines HTML-Dokuments vorstellen:
\nZuerst kommen Meta-Angaben. Dazu gehört der Dokumenten-Titel, CSS und gegebenenfalls noch <defs>, falls ihr Grafikkomponenten mehrfach verwenden wollt.
Erst danach sollte die eigentliche Ausgabe von Grafikelementen beginnen.
\nIn SVG hat das <title>-Tag mehrere Bedeutungen:
<title>-Tag HTML verwendet, um den Namen eines Dokuments festzulegen.title-Attributs. Beim Überfahren mit der Maus wird zum Beispiel eine kleiner Tooltip angezeigt.…funktioniert wie in HTML. Dementsprechend sollte man versuchen, nicht jedem Element einzeln mittels stroke- und fill-Attributen Styles zuzuordnen, sondern mit CSS das Layout globaler zu definieren.
Tatsächlich gibt es aber ein paar Besonderheiten bei der Verwendung von CSS in SVGs:
\nRGBA-Farben haben die Fähigkeit, darunterliegende Teile einer Grafik durchscheinen zu lassen. Der Alpha-Kanal bestimmt dabei die Durchlässigkeit bzw. Opazität. Leider werden RGBA-Farben nicht in jedem Fall korrekt ausgegeben. Die meisten Browser können es, dafür kaum ein Grafikprogramm oder Bildbetrachter.
\nStattdessen gibt es verschiedene Formen von Opazität bzw. Transparenz.
\nopacity macht ein gesamtes Element,fill-opacity nur die Füllung,stroke-opacity nur die Umrandung opak bzw. transparent.In CSS sieht das wie folgt aus:
\n.black-a-fifty {\n /* fill: rgba(0,0,0,0.5); --- will not always work */\n fill: #000000;\n fill-opacity: 0.5;\n}\nFans von CSS Custom Properties haben bei SVG ebenfalls kein Glück: Die meisten Grafikprogramme können diese Variablen nicht verarbeiten. Stattdessen gibt es aber einen kleinen Ausweg mit dem CSS-Wert currentColor:
Der Wert für currentColor wird mit der in SVG sonst irrelevanten CSS-Eigenschaft color gesetzt (die im Gegensatz zu der gleichnamigen Eigenschaft in HTML nicht aktiv ELemente einfärbt – dafür ist in SVG ja fill und stroke da). Der Aufruf von currentColor wird dann mit dem zuletzt via color gesetztem Wert gefüllt – ganz wie bei einer CSS Custom Property.
.black {\n color: black; /* sets currentColor to `black` */\n}\n\n.red {\n color: red; /* sets currentColor `red` */\n}\n\n/* These elements will be colored black or red, depending on class */\n\nrect {\n stroke: currentColor;\n fill: currentColor;\n}\n\ntext {\n fill: currentColor;\n}\nIn SVG kann in Theorie nur einzeiliger Text gesetzt werden, beziehungsweise muss jede neue Zeile neu positioniert werden. Mit einem kleinen Trick kann man aber mehrzeiligen Text erstellen, indem jede Zeile in ein <tspan>-Element gehüllt und diese relativ unter der vorhergehenden Zeile positioniert wird:
<text>\n <tspan x="0">Line 1</tspan>\n <tspan x="0" dy="1.1em">Line 2</tspan>\n <tspan x="0" dy="1.1em">Line 3</tspan>\n <tspan x="0" dy="1.1em">Line 4</tspan>\n</text>\nWichtig ist hier die Definition des Zeilenabstands – diese muss in jedem dy-Attribut wiederholt werden.
Wenn ihr Links in eurem SVG verwenden wollt, gibt es zwei Wege, wobei je nach Ausgabemedium nur einer von beiden funktioniert… oder auch gar keiner.
\nDie veraltete, aber noch weit verbreitete Methode sind xlink:href-Attribute, die die Ziel-URL an einem Element festlegen. Damit diese funktionieren, muss zuerst an dem <svg>-Knoten ein neuer Namespace deklariert werden:
<svg … xmlns:xlink="http://www.w3.org/1999/xlink">\nSobald dieser Namespace bekannt ist, kann das Attribut verwendet werden.
\nIn SVG2 wird stattdessen das aus HTML bekannte <a>-Tag mit href-Attribut verwendet.
Für eine maximale Kompatibilität kann man beide Techniken miteinander kombinieren:
\n<a xlink:href="https://www.example.com" href="https://www.example.com">…</a>\nÜbrigens: Die Links für <defs> und <use> werden mit dem selben xlink:href- beziehungsweise href-Attribut gebaut.
Im Standard sind SVG-Linien eine scharfkantige Sache. Zum Glück gibt es CSS-Eigenschaften, die sowohl die Enden mit stroke-linecap als auch die Ecken mit stroke-linejoin abrunden können.
.rounded-line {\n stroke-linecap: round;\n stroke-linejoin: round;\n}\nWenn euer SVG-Dokument auch in Inkscape bearbeitbar sein soll, könnt ihr mit einem zusätzlichen XML-Namensraum kleine Helferlein im Dokument hinterlassen:
\n<svg … xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">\nJetzt steht euch die Möglichkeit zur Verfügung, die aus Inkscape bekannten Layer in eurem SVG zu verwenden. Dazu müsst ihr eine beliebige Gruppe nur mit zusätzlichen Attributen ausstatten:
\n<g inkscape:groupmode="layer" inkscape:label="Name your layer">…</g>\nWenn eure SVGs nicht nur in modernsten Browsern, sondern auch in älteren Browsern und Grafikprogrammen funktionieren soll, müssen ein paar Spielregeln eingehalten werden. Im Endeffekt ist nach kurzer Umgewöhnung das Erzeugen wunderschöner SVG-Dokumente nicht viel komplizierter als das Erstellen von HTML-Dokumenten.
Vektor-Grafiken haben für Logos, Diagramme und Symbole die fantastische Eigenschaft, bei beliebig hoher Auflösung relativ kleine Dateigrößen zu verursachen. Und hier folgen ein paar Kniffe, um SVG-Grafiken mit der Hilfe von CSS sowohl am Bildschirm als auch im Druck gut aussehen zu lassen.
\n\nSeitdem die Unterstützung von SVG-Vektor-Grafiken in jedem modernen Browser kein Problem mehr darstellt, ist der Siegeszug von SVG-Grafiken unaufhaltsam. Ob via <img>, als CSS-Hintergrundbild, oder direkt in ein HTML-Dokument eingebettet: kleine Symbole wie komplexe Grafiken können so responsiv auf den Bildschirm gezaubert werden. Eine Einleitung in das Thema „SVG“ bei CSS-Tricks erklärt die grundsätzlichen Handgriffe.
Fast immer wird eine SVG-Grafik mit einem Vektor-Grafikprogramm (wie zum Beispiel dem kostenlosen Inkscape) erzeugt. Dabei wird oft vergessen, dass SVG-Dateien eigentlich nur aus XML bestehen, das mit Hilfe eines Text-Editors bearbeitet werden kann.
\nInteressanterweise kann innerhalb eines SVG-Dokuments auch CSS verwendet werden. Und mit CSS können wir auch Media-Queries einsetzen.
\nHöchste Zeit, den Text-Editor auszupacken und unserem SVG zusätzliches CSS überzuhelfen!
\nEin einfaches Stylesheet, um beim Druck von HTML- und SVG-Dokumenten im Browser störendes Beiwerk wie die automatisch vom Browser erzeugte Kopf- und Fußzeile loszuwerden, sieht wie folgt aus:
\n@page {\n margin: 0;\n padding: 0;\n}\n@page :footer {\n display: none\n}\n@page :header {\n display: none\n}\nGenau dieses CSS lässt sich mit einem <style>-Tag direkt in die SVG-Grafik einbauen. Dazu kann man an jeder beliebigen Stelle im Dokument ein solches Tag einfügen, und dann CSS einfügen:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg">\n <title>…</title>\n <style>\n @page {\n margin: 0;\n padding: 0;\n }\n @page :footer {\n display: none\n }\n @page :header {\n display: none\n }\n </style>\n <!-- your svg here -->\n</svg>\nNatürlich könnt ihr auch jede andere Media-Query in das Dokument einfügen. Zu beachten: Beim Re-Import in ein Grafik-Programm kann dies möglicherweise nicht mehr korrekt interpretiert werden, und eure Grafik wirkt etwas verspielt. Uns interessiert aber sowieso nur das Ergebnis im Browser.
\nUm die Idee weiterzutreiben, kann man für eine SVG-Grafik im DIN A4 eine praktische Druckvorschau mitliefern. Dazu bauen wir uns ein Dokument mit den entsprechenden Abmessungen von 210×297 Millimetern und erzeugen ein Rechteck, dass exakt dem Seitenrand folgt:
\n<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" xmlns="http://www.w3.org/2000/svg">\n <rect x="0" y="0" width="210" height="297" />\n <!-- your svg here -->\n</svg>\nDieses Rechteck ist nun sowohl auf dem Bildschirm als auch im Druck zu sehen. Interessanterweise können wir so ziemlich jedem SVG-Element mittels class und id Attribute mitgeben, die wir (wie aus HTML gewohnt) CSS zuweisen können.
In diesem Fall wollen wir die eigentliche Seite weiß und den nicht druckbaren Bereich grau darstellen. Nicht zuletzt zeigt eine gepunktete Linie die Blattgrenze an:
\n<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" xmlns="http://www.w3.org/2000/svg">\n <title>…</title>\n <style>\n svg {\n margin: 1em auto;\n background-color: #ddd;\n }\n .page {\n stroke: #999;\n stroke-dasharray: 0.5, 0.5;\n fill: #fff;\n display: inline;\n }\n </style>\n <rect class="page" x="0" y="0" width="210" height="297" />\n <!-- your svg here -->\n</svg>\nDamit wird unsere Kosmetik nun nicht im Druck zu Gesicht bekommen, unterscheiden wir noch zwischen Screen- und Print-Styles:
\n<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" xmlns="http://www.w3.org/2000/svg">\n <title>…</title>\n <style>\n @page {\n margin: 0;\n padding: 0;\n }\n @page :footer {\n display: none\n }\n @page :header {\n display: none\n }\n .page {\n display: none;\n }\n @media screen {\n svg {\n margin: 1em auto;\n background-color: #ddd;\n }\n .page {\n stroke: #999;\n stroke-dasharray: 0.5, 0.5;\n fill: #fff;\n display: inline;\n }\n }\n </style>\n <rect class="page" x="0" y="0" width="210" height="297" />\n <!-- your svg here -->\n</svg>\nFertig ist die SVG-Grafik mit Media Queries (in diesem Falle ein Spielbrett für Raumschiffe) – sowohl für die Ausgabe am Bildschirm als auch den Druck vorbereitet.
\nDie Kombination aus SVG und CSS kann man natürlich noch weiter treiben. Da so ziemlich jede Media-Query im Browser für SVGs funktioniert, können auch Anpassungen an den Dark Mode oder für verschiedene Monitor-Größen direkt im SVG eingebettet werden.
![\"Eine](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet.jpg\")
Da ich mich in letzter Zeit verstärkt mit der Jagd-Fliegerei des Zweiten Weltkriegs beschäftigt habe, musste ich mich wohl oder übel verstärkt mit Flug-Navigation ohne GPS oder sonstige technische Unterstützung auseinandersetzen. Dabei hilft es enorm, den Zusammenhang zwischen Fluggeschwindigkeit und zurückgelegter Strecke zu kennen.
Mittels eines Taschenrechners oder einer App sind solche Berechnungen trivial. Aber wie wäre es, diese Berechnungen ohne elektronische Hilfsmittel zu lösen? Zum Beispiel mit einer Rechenscheibe?
\n\nSchon in meinen Ausführungen zum Sichtflug ohne technischen Schnickschnack war eine der entscheidenden Hilfen beim Navigieren ohne elektronische Hilfen (neben der Kenntnis des Geländes und der Ziel-Richtung) vor allen Dingen die Kenntnis der Zeit, die man für eine bestimmten Streckenabschnitt auf dem Flugplan benötigt. Dabei kann bei einer genauen Kenntnis der Streckenlänge und der eigenen Geschwindigkeit über dem Boden relativ exakt berechnet werden, zu welchem Zeitpunkt die Strecke zurückgelegt sein müsste.
\nDie eigentlichen Rechnungen für die Navigation sind recht übersichtlich, solange man die Einheiten korrekt mitführt:
\nDabei gibt es die folgenden Herausforderung beim Kopfrechnen:
\nDie Einheiten umzurechnen ist wegen der nicht ganzzahligen Multiplikatoren teilweise etwas schwierig im Kopf zu vollziehen:
\n| Imperial unit | \nSymbol | \nMetric unit | \n
|---|---|---|
| 1 nautical mile | \n1 NM | \n1852m | \n
| 1 knot | \n1 kn | \n1.852 km/h | \n
| 1 statute mile | \n1 mi | \n1609.344m | \n
| 1 mile per hour | \n1 mph | \n1.609 km/h | \n
…ganz zu schweigen von der Tatsache, dass eine Stunde aus sechzig Minuten besteht und damit eine Stundenangabe mit Nachkommastellen im Kopf schwierig in eine Angabe in Minuten umzurechnen ist.
\nDie Komplikation, dass die gemessene Fluggeschwindigkeit (air speed) nicht zwangsläufig mit der Geschwindigkeit über dem Boden (ground speed) übereinstimmt, ignorieren wir vorerst – können aber bei Kenntnis der Windrichtung und -stärke dies ebenfalls näherungsweise per einfacher Arithmetik mit einbeziehen.
\nIm Regelfall kann man sich mit einzelnen Faustformeln behelfen, die man vorher durchgerechnet haben sollte.
\n\nBei Variablen Strecken und Geschwindigkeiten wird es aber höchste Zeit, sich mit nicht-elektronischen Rechenhilfen auseinanderzusetzen: Rechenschiebern beziehungsweise Rechenscheiben.
\nRechenscheiben sind kompakte, runde Ausführung eines Rechenschiebers. Je nach Findigkeit ihres Konstrukteurs sind sie in der Lage, eine ganze Menge mathematische Operationen rein grafisch-mechanisch durchzuführen. Gerade lineare Zusammenhänge sind mit Hilfe logarithmischer Skalen gut zu lösen. Dabei werden zwei logarithmische Skalen gegeneinander verschoben, das Ergebnis ist dann auf einer dritte Skala ablesbar.
\nSo bietet zum Beispiel der klassische mechanische Navigationsrechner E6-B eine ganze Reihe von Möglichkeiten, Umrechnungen zwischen verschiedenen Einheiten durchzuführen, die für die (Flug-)Navigation hilfreich sind. Ich persönlich wollte aber einen nicht ganz so komplexen Rechner. Stattdessen sollte er übersichtlicher sein, und gleichzeitig alle Grundbedürfnisse eines Jagdfliegers abbilden.
\nHöchste Zeit also, das Grafikprogramm anzuwerfen und sich mit Logarithmen und Winkelberechnungen zu beschäftigen, um einen eigenen Navigations-Drehrechner zu entwerfen.
\nZiel meiner Bemühungen war eine Navigations-Rechenscheibe, die man mit heimischen Hilfsmitteln herstellen konnte. Mein Navigationsrechner sollte folgendes beherrschen:
\nDie ungewöhnliche Ansammlung von verschiedenen Einheiten hat nicht zuletzt damit zu tun, dass je nach Kartenmaterial und Fluggerät sowohl imperiale als auch metrische Angaben wild miteinander kombiniert werden können. So hatten west-alliierte Jagdflugzeuge Angaben in Meilen pro Stunde, während Flugzeuge der Achsenmächte und der Sowjetunion stattdessen Kilometer pro Stunde verwendeten. Andersherum wird zum Beispiel in IL-2 Great Battles ein 10km-Kartenraster verwendet, während Streckenabschnitte in Meilen oder Kilometern angegeben werden können. Bei modernen Simulatoren wiederum werden Geschwindigkeiten in Knoten angegeben, während Strecken gerne in nautischen Meilen gemessen werden.
\n![\"Eine](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet-detail.jpg\")
Nach einigen Papierprototypen habe ich mit dem Distanz-Gerät DG21 eine für mich passable Lösung gefunden, kompakt und übersichtlich alle Anforderungen zu erfüllen. Das Distanz-Gerät besteht aus zwei gegeneinander verdrehbaren Scheiben. In einem Sichtfenster kann dabei die Geschwindigkeit eingestellt beziehungsweise ausgegeben werden, während zwei aufeinander treffende Ringskalen den Zusammenhang zwischen Strecke und Zeit abbilden.
\nDie Funktionsweise ist dabei einfach:
\nSolange zwei der Werte bekannt sind, ergibt sich automatisch der dritte Wert. Darüber hinaus werden alle Zusammenhänge zwischen Strecke und Zeit grafisch angezeigt, ohne die Scheibe weiter manipulieren zu müssen.
\nDie Umrechnungen für Strecke und Geschwindigkeit sind dabei als nebeneinanderliegende, fest miteinander verbundene Skalenringe ausgeführt.
\nDabei habe ich zwei Varianten gebaut, die hier zum Herunterladen, Ausdrucken und Zusammenbasteln bereitstehen:
\nBeide Do-it-yourself-Navigationsrechner können mit einem Drucker auf Papier oder Pappe in der Größe DIN A4 ausgedruckt und mit einem scharfen Messer ausgeschnitten werden. Die beiden Scheiben werden mit einer Musterklammer verbunden, und können danach für die Berechnung gegeneinander verdreht werden.
\nDie Rechner sind außerdem Open Source. Die SVG-Dateien können mit jedem beliebigen Vektor-Programm geöffnet und bearbeitet werden. Und da beide Dateien unter der „Creative Commons“-Lizenz stehen, ist das rechtlich auch ohne Probleme möglich.
![\"\"](\"https://journal.3960.org/posts/2020-11-28-vector-art-fuer-hardspace-shipbreakers/lynx-salvage.svg\")
Das Spiel Hardspace: Shipbreakers hat es mir sehr angetan. Neben dem gelungenen Spielprinzip zieht mich vor allen Dingen die Atmosphäre in den Bann.
Zur Atmosphäre gehört das allgegenwärtige Branding des Arbeitgebers des Protagonisten, „Lynx Salvage“. Für die private Verwendung habe ich daher das Logo der Firma „Lynx Salvage“ als SVG-Vektor-Art vektorisiert.
\nDiese Datei besteht aus überschneidungsfreien Außenlinien des Logos und des Schriftzugs – und eignet sich daher zum Bedrucken oder Besticken von Kleidung.
![\"\"](\"https://journal.3960.org/posts/2020-04-05-svg-web-components/hsi-240x240.png\")
Web Components erlauben in modernen Browsern, eigene Tags mit beliebig komplexen Verhalten zu definieren. Und wie der Name „Komponente“ schon nahelegt, kann man diese kleinen Bibliotheken beliebig oft weiterverwenden, sobald diese einmalig geladen wurden.
Mit einigen kleinen Kniffen kann die Entwicklung solcher Komponenten noch schneller von der Hand gehen.
\n\nFür den Einstieg in das Thema Web Components empfiehlt sich die Lektüre der ausgezeichneten Einführung von Google und CSS-Tricks. Andere Anleitungen basieren teilweise auf älteren Ideen, die getrost ignoriert werden können.
\nUpdate 2020–09: Die Vielzahl der Wege, wie man eine Web Component bauen kann, hat webcomponents.dev veranlasst, eine Auflistung aller möglichen Wege zum Erstellen einer Web Component zusammenzustellen.
\nAußerdem lohnt es sich immer, moderne Beispiele anzuschauen. Ich für meinen Teil habe entsprechend versucht, einen Horizontal Situation Indicator als Vanilla-JavaScript Web Component mustergültig zu bauen. Der daraus resultierende Quellcode der „Horizontal Situation Indicator“ Web Component wird im Rahmen dieses Artikels immer wieder als Beispiel herangezogen.
\n\nDie größte Hürde für den angehenden Komponenten-Bauer ist das Verständnis, wie all die schönen Teile zusammenpassen.
\nDa eine Web Compoment gekapselt ist, kann nur über eine vorher definierte Schnittstelle von außen Zugriff auf ihr Verhalten genommen werden. Es ist also sehr sinnig, die Konzeption und den Bau einer Web Component wie den Bau einer Schnittstelle bzw. eines Interfaces zu verstehen.
\nAls Beispiel nehmen wir einfach die fertige Implementation der HSI-Web-Component:
\n![SVG-Grafik mit Media Queries](\"https://journal.3960.org/posts/2021-12-04-print-stylesheets-fuer-svg-grafiken/orbit.svg\"){kind=link}
![Distanz-Gerät DG21A2](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet_dg21a2.svg\"){kind=link}
![Distanz-Gerät DG21A3](\"https://journal.3960.org/posts/2021-03-05-flugnavigation-mittels-rechenscheibe-zum-selberbau/distanz-geraet_dg21a3.svg\"){kind=link}
<horizontal-situation-indicator id="hsi" heading="45.0" heading-select="0.0"></horizontal-situation-indicator>\nBeim Bau einer Web Component müssen neben dem Namen der Web Component auch die Attribute der Web Component und ihre möglichen Werte definiert werden.
\nDiese Attribute verwandeln sich innerhalb der JavaScript-Repräsentation der Web Component in Properties, die mit den Attributen synchronisiert sind:
\nconst el = document.getElementById('hsi');\nel.getAttribute('heading'); // "45.0"\nel.heading; // "45.0"\n\nel.setAttribute('heading', '60.0');\nel.getAttribute('heading'); // "60.0"\nel.heading; // "60.0"\n\nel.heading = '135.0';\nel.getAttribute('heading'); // "135.0"\nel.heading; // "135.0"\nBei dem Zugriff auf eine Property mit einem - im Namen funktioniert der Zugriff leicht anders:
el.getAttribute('heading-select');\n//el.heading-select existiert nicht\nel['heading-select']; // korrekte Schreibweise in `[]`\nDie Schreibweise mit [] erlaubt auch den dynamischen Zugriff auf Properties:
let attrName = 'heading-select';\n\nel.getAttribute(attrName);\nel[attrName];\nDarüber hinaus kann der Entwickler einer Web Component noch festlegen, dass die Komponente JavaScript-Methoden anbietet. Diese erlauben zum Beispiel von außen der Komponente zu befehlen, komplexe Prozesse innerhalb der Komponente zu erledigen.
\nel.synchronizeHeading();\nDa JavaScript keine Sichtbarkeiten wie public und private für Methoden hat, hat sich als Konvention herausgebildet, private Methoden mit einem _ zu beginnen.
Außerdem kann eine Web Component noch JavaScript-Events erzeugen, die außerhalb der Komponente registriert werden können. So emittiert z.B. das <video>-Tag Events, wenn ein Video beendet wurde, was ohne dieses Event außerhalb des Tags keiner wissen könnte.
Web Components können fast alles darstellen, was auch regulär in einem Browser dargestellt werden kann. Besonderes Augenmerk muss aber darauf gelegt werden, dass alle benötigten Bestandteile in der einen JavaScript-Datei enthalten ist, die die Web Component definiert.
\nAm Einfachsten einzubinden sind die folgenden Dinge:
\nAlle anderen Ressourcen (Bilder, Videos, Töne) können mit einem Trick eingeschmuggelt werden: Mittels Data URLs können Binär-Dateien in Base64-Zeichenketten umgewandelt werden, die dann z.B. im src-Attribut eines <img> eingebunden werden können.
Besonders spannend: SVG-Bilder sind nicht nur schön kompakt in Bezug auf ihren Speicherplatz, sondern können auch direkt in das HTML eingebunden werden – benötigen also den Base64-Trick nicht.
\nIn der Tat gibt es eine ganze Menge Tools, um das Zusammensetzen der einzelnen Teile einer Web Component zu unterstützen. In der Regel reicht aber ein kleiner flotter Node.js-Mehrzeiler als Web Component Build Tool, der aus einzelnen Dateien die eigentliche Web Component zusammensetzt. Die Kurzfassung:
\nconst fs = require('fs');\n\nlet source = fs.readFileSync(`horizontal-situation-indicator.js`).toString();\nlet templateCss = fs.readFileSync(`src/horizontal-situation-indicator.css`).toString();\nlet templateSvg = fs.readFileSync(`src/horizontal-situation-indicator.svg`).toString();\n\nsource = source.replace(/(<style>).*(<\\/style>)/ms, templateCss);\nsource = source.replace(/(<\\/style>).*(`)/ms, templateSvg);\nfs.writeFileSync(`horizontal-situation-indicator.js`, source);\nDas tatsächliche Skript ist zwar etwas komplexer, das Grundprinzip ist aber ein denkbar einfaches: Die Entwicklung von SVG und CSS (oder jedem anderen Dateitypen) findet in separaten Dateien statt, die mit dem obigen Skript einfach in das JavaScript der Web Component hineinkopiert werden. Unter anderem könnte hier auch die Konvertierung von Binär-Daten in ihre Base64-Entsprechung durchgeführt werden.
\nget und set für jede Property abkürzen?Da jeder Web Component eine Liste der zu synchronisierenden Attribute / Properties mit der Methode observedAttributes bekannt gemacht werden muss, kann genau diese Liste im constructor auch zum programmatischen Erzeugern von Gettern / Settern verwendet werden.
this.constructor.observedAttributes.forEach((attrName) => {\n Object.defineProperty(this, attrName, {\n get() {\n return this.getAttribute(attrName);\n },\n set(attrValue) {\n this.setAttribute(attrName, attrValue);\n }\n });\n});\nDiese Methode hat in einigen Web-Components-Frameworks möglicherweise Nachteile – für die Vanilla-Nutzung ist sie aber weitestgehend ungefährlich.
\nDa Web Components sowieso nur in aktuellen Browsern zuverlässig funktionieren, kann man sich gleichzeitig auch auf fortgeschrittene CSS-Möglichkeiten verlassen. Um CSS innerhalb der Komponente von außen zu beeinflussen, verwende ich CSS-Variablen bzw. CSS-Custom-Properties. Innerhalb des CSS' des Komponente definiere ich sie direkt an der DOM-Wurzel der Komponente:
\n:host {\n --background-color: black;\n --foreground-color: white;\n --heading-select-color: cyan;\n --stroke-width: 0.5;\n}\n/*…und verwende diese CSS-Custom-Properties dann später in Variablen - bei mir z.B. als SVG-CSS-Eigenschaften:*/\n\n#background {\n fill: var(--background-color);\n}\n* {\n fill: var(--foreground-color);\n}\n*[stroke] {\n stroke-width: var(--stroke-width);\n}\n\n#heading-select {\n fill: var(--heading-select-color);\n}\nWer nun auch immer diese Komponente verwendet, kann diese CSS-Custom-Properties von außen beeinflussen:
\nhorizontal-situation-indicator {\n --heading-select-color: red;\n --stroke-width: 1;\n}\nBei der Beispiel-Implementation von <horizontal-situation-indicator> kann auch bewundert werden, wie durch JavaScript diese CSS-Custom-Properties am lebenden Objekt verändert werden, und in der Komponente sich alles fröhlich verfärbt.
Ganz nebenbei haben wir für die Komponente eine weitere Schnittstelle geschaffen – in diesem Fall eine Styling-Schnittstelle.
\nUpdate: Andererseits können aber auch einzelne DOM-Knoten ohne CSS-Properties zum expliziten Styling freigegeben werden. Eine Anleitung zum Freigeben von DOM-Knoten aus dem Shadow-DOM zum CSS-Styling bei CSS-Tricks zeigt die notwendigen Anpassungen im HTML:
\n<div part="style-me">…</div>\n…und dem CSS im Eltern-Dokument:
\nhorizontal-situation-indicator::part(style-me) {\n font-weight: bold;\n}\nAuch hier hat wieder der Autor der Komponente die Herrschaft über die Elemente, die er nach außen freigibt – wie bei einer Schnittstelle.
\nDer eigentliche Clou der HSI Web Component ist die generelle Fähigkeit von JavaScript, DOM-Elemente und ihre Eigenschaften zu verändern. Dies können sowohl CSS-Eigenschaften als auch generelle Attribute von DOM-Elementen sein.
\nBei SVG bieten sich die folgenden Operationen an:
\nstroke und stroke-width zur Beeinflussung von Linienfill zur Veränderung der Füllfarbeopacity zur Veränderung der Durchsichtigkeit eines Elementstransform<text>-Knoten mittels .textContentBei SVG gibt es dabei die Möglichkeit, nicht nur via CSS diese Eigenschaften zu beeinflussen, sondern auch durch das Setzen von Attributen innerhalb des SVGs an einzelnen SVG-DOM-Knoten.
\nAuch das ist in der Beispiel-Implementation von <horizontal-situation-indicator> zu bestaunen – hier sind die Attribute der Komponente mit Animationsmethoden verknüpft, so dass Änderungen an den Attributen bzw. Properties der Web Component zeitgleich die Darstellung des eingeschlossenen SVGs ändert.
Da eine Web Component im Endeffekt eine Schnittstelle ist, muss es dazu eine Schnittstellen-Dokumentation geben. Ohne diese Dokumentation können andere Entwickler, die die Komponente verwenden möchten, nicht zuverlässig wissen, wie die Komponente zu bedienen ist.
\nAls Minimum muss eine Dokumentation enthalten:
\n## Properties\n\n| Name | Type | Default | Description |\n| -------------- | ------- | ------- | ------------ |\n| `heading` | `float` | `null` | Lorem ipsum… |\n\n## Methods\n\n| Name | Parameters | Description |\n| -------------- | ---------- | ------------------- |\n| `revHeading` | none | Lorem ipsum… |\n\n## Events\n\n| Name | Description |\n| -------------- | -------------------------------- |\n| `synchronized` | Lorem ipsum… |\n\n## Styling\n\n```css\ncomponent-name {\n --background: color; /* Lorem ipsum… */\n}\n\ncomponent-name::part(part-name) {} /* Lorem ipsum… */\n```\nDer fertige Horizontal Situation Indicator als Web Component ist in einem GitHub-Repository gelandet, und einen Blick auf die fertige Implementation der HSI-Web-Component erlaubt einen interaktiven Blick auf die Zusammenhänge in der Komponente.