hifi-projekt – #07 display

wir starten paradoxerweise mit dem gehäuse und legen dann alle bestandteile, die sich eigentlich dahinter befinden, oben drauf. diverse mischmodi und ebenen-deckkräfte regeln alles weitere.

mit dem vektorgrafik-werkzeug für abgerundete rechtecke ziehen wir ein rechteck auf und geben den kanten einen radius von z.b. 24px. mit einem ebeneffekt weisen wir der fläche die farbe schwarz zu.

der schlagschatten ist optional. wird er weg gelassen, schließen die kanten des displays bündig mit dem aluminium-gehäuse ab. ist er vorhanden, entsteht der eindruck, dass das gehäuse ein wenig über die aluminium-oberfläche übersteht.

jetzt geht es darum, die hardwareseitig vorhandenen elemente der anzeige zur verfügung zu stellen. in diesem fall müssen wir ein wenig kreativ vorgehen:
unser display soll die ziffern 0-9 darstellen können. der zeichensatz verwendet in der 0 einen schrägstrich, um diese so von dem großbuchstaben O unterscheidbar zu machen.
das hier, ist der zeichenvorrat, der uns zur verfügung steht:

wie eingangs erwähnt, verfügt der beiliegende font bereits über ein von mir hinzugefügtes symbol. sollten sie einen anderen lcd-font verwenden, erstellen sie das symbol, in dem sie zwei textebenen übereinander legen, die eine mit der „8“ und die andere mit dem „/“ auffüllen.

die textebene erhält via ebeneneffekt eine farbrüberlagerung. ich habe mich für ein sehr dunkles grau mit einem leichten rot-stich entschieden. wie immer, ist das nur ein vorschlag. eigene experimente sind erwünscht.

eine weitere textebene, nimmt nun den content auf, den wir darstellen wollen. dieser bekommt (in diesem beispiel) die farbe #c90500. eigentlich könnte das schon reichen.

für eine realistischere darstellung, erhält der content nun noch einen schein nach aussen:

• füllmethode: negativ multiplizieren
• deckkraft: 24%
• farbe: #c40202
• technik: weicher
• größe: 68px
• bereich: 50%

ein dezenter glanzeffekt vermittelt dein eindruck einer nicht ganz gleichmässig leuchtenden segement-oberfläche:

• füllmethode: multiplizieren
• deckkraft: 51%
• farbe: #000000
• winkel: 90°
• abstand: 45px
• größe: 81px
• glätten: kontur kegel

auch hier starten wir wieder mit dem gehäuse, das diesmal aus zwei elementen besteht.

mit dem vektorgrafik-werkzeug für abgerundete rechtecke zeichnen wir wieder ein rechteck und geben den kanten den bekannten radius von z.b. 24px. mit einem ebeneffekt weisen wir der fläche die farbe schwarz zu.
den mischmodus dieser fläche setzen wir auf multiplizieren und die deckkraft auf 21%

nun folgt das eigentliche display, das auf einer neuen ebene über dem vorherigen rechteck platziert wird. es bekommt den selben eckradius, wird aber etwas kleiner.
mit zwei ebenen-effekten versehen wir es mit der farbe #8ac078 und einem schatten nach innen, so dass es räumliche tiefe erhält. der schatten bekommt hier folgende parameter:

• mischmodus: multiplizieren
• farbe: #000000
• deckkraft: 73%
• winkel: 90°, globales licht verwenden
• größe: 21px

jetzt geht es wieder darum, die hardwareseitig vorhandenen elemente der anzeige zur verfügung zu stellen. für das lcd-display verwende ich die hardwarevorgabe des hp41-taschencomputers, die pro zeichen über 14 segmente verfügt.
zur erinnerung: der zeichenvorrat, der uns zur verfügung steht:

in diesem fall verwenden wir das zweite, von mir zu diesem font hinzugefügte sonderzeichen . sollten sie einen anderen lcd-font verwenden, haben sie evtl. eine andere anzahl segmente zur verfügung. bei der verwendung eines alternativen hp41-displayfonts, erstellen sie das symbol, in dem sie zwei textebenen übereinander legen. die eine mit der „0“ und die andere mit dem „*“ (multiplikations-operator) auffüllen.

schaut man von der seite auf ein lcd-display, kann man die segmente erkennen. wichtig ist, dass sich diese in farbe/helligkeit nur ein bisschen vom display-hintergrund unterscheiden.
in diesem beispiel habe ich einen etwas dunkleren farbton gewählt. eine hellere farbe ist ebenso denkbar, wie ein geringerer unterschied zur display-farbe.
variieren sie die werten, bis sie etwas finden, was ihnen zusagt. 

wie schon beim led-display, nimmt eine weitere textebene nun den content auf, den wir darstellen wollen.

für die farbe des contents empfiehlt es sich, kein triviales schwarz zu verwenden; der kontrast wäre viel zu hart. statt dessen passt eine sehr dunkle variante der display-farbe viel besser und ergibt ein stimmiges gesamtbild.

für eine realistischere darstellung, erhält der content nun noch einen dezenten schlagschatten:

• füllmethode: multiplizieren
• farbe: #c000000
• deckkraft: 65%
• winkel: 90°, globales licht verwenden
• größe: 8px

denkbar wäre hier auch, den schatten in der farbe des contents anzulegen. lassen sie ihrer phantasie freien lauf…

ausschnitt, © Atlant/wikipedia cc by 2.5

auf diesem foto kann man die einzelnen elemente des vfd gut erkennen.

über der anode mit den phosphor-elementen, liegt das steuergitter, das an eine wabenstruktur erinnert. über dem steuergitter kann man die horizontalen heizdrähte erkennen, die die rolle der kathoden übernehmen.

die heizdrähte enden rechts in kleinen aufnahmen, die ihrerseits mit einem gebogenen draht verbindung mit einer leiste haben.

um später das steuergitter nicht aus unzähligen waben zusammenbauen zu müssen, fertigen wir ein füllmuster in der gewünschten form. dazu legen wir eine neue datei mit transparentem hintergrund an und bemühen das polygon-werkzeug:

in dem fall reicht eine kantenlänge von 100px. das polygon vervielfältigen wir, bis wir über genug elemente verfügen, um ein endlosmuster erzeugen zu können.

wenn die nötigen 7 waben bündig liegen, bietet es sich an, diese in einen ordner zu verpacken und eine kopie des ordners anzulegen. das original soll als backup für evtl. änderungen herhalten.

der arbeitsordner kann danach auf eine ebene reduziert werden. beim ausschneiden des musters ist darauf zu achten, dass die horizontalen linien am oberen und unteren ende nur in der halben dicke übernommen werden, damit sie beim zusammenfügen als muster, wieder die korrekte dicke erhalten.

das ausgeschnittene muster sollte jetzt eine breite von 150px und eine höhe von 200px haben. mit dem menübefehl „bearbeiten > muster festlegen“, können wir es mit einem namen versehen und der musterpalette zuführen.

wie eingangs erwähnt, haben wir in sachen gehäuse, segmente und content schon etwas übung und können diesen part straffen. die grundlage ist wieder mit dem vektorgrafik-werkzeug für abgerundete rechtecke erstellt, der eckenradius beträgt 24px – wie gehabt.
im gegensatz zum led-display verzichten wir hier auf den schlagschatten, so dass das displaygehäuse bündig mit dem aluminium-hintergrund abschließt.

es folgen die üblichen glyphen für die hardwareseitig vorhandenen elemente. gemäß dem vorbild in einem helleren grau (#2e2e2e).

der content erhält die farbe #00ffff und nachfolgend einen „schein nach aussen“ im selben farbton:

• füllmethode: negativ multiplizieren
• farbe: #00eaff
• deckkraft: 29%
• technik: weicher
• größe: 62px
• bereich: 50%

jetzt kommt der erste schritt, der dieses display optisch aussergewöhnlich macht: das steuergitter. dazu ziehen wir auf einer neuen ebene über den segementen und dem content ein rechteck auf, das genug luft um die ziffern lässt.
wir erinnern uns: die flächendeckkraft der eben wird auf 0 gesetzt, so dass in folge nur die verwendeten effekte sichtbar sind.

zunächst bekommt das gitter eine 13px große kontur (position: innen) in der farbe #181818. irgendwo müssen die waben ja befestigt werden, die wir nun mit dem zuvor erstellten füllmuster in die kontur zaubern. die musterüberlagerung hat folgende werte:

• füllmethode: differenz
• muster: {unser wabenmuster}
• an ursprung ausrichten
• skalieren: 13%
• mit ebene verbinden

die elemente der elektronik kann man entweder als vektorgrafiken anlegen (wenn man sie öfter verwenden und verlustfrei skalieren möchte), oder einfach als pixelgrafiken für den einmal-gebrauch bei nur minimalen größenänderungen.
in diesem beispiel wurden, ausser den gebogenen drähten, alle elemente als pixelflächen angelegt und mit ebeneneffenkten eingefärbt.
im prinzip müssen alle markanten elemente nur einemal erstellt werden und können im anschluss beliebig oft kopiert, gespiegelt und gruppiert werden. die elemente sind (von links nach rechts):

• heizdraht-aufnahme links: ein rechteck und ein leicht gedrehtes, t-förmiges objekt in der farbe #1f1f1f
• ein rechteck mit aussparungen, das aus mehreren identischen segmenten besteht, die vertikal aneinander gereiht werden. farbe: #1a1a1a
• ein rechteck mit der farbe #2b2b2b
• die gebogenen drähte in der farbe #484848
• und abschließend die horizontalen heizdrähte (kathoden) mit 1px dicke und ebenfalls der farbe #484848
• die heizdraht-aufnahme recht ist eine horizontal gespiegelte kopie der linken heizdraht-aufnahme.