Farben
Da wir ein schickes Farbdisplay benutzen liegt es nahe, sich mit Farben zu beschäftigen. Die µGL bietet unterschiedliche Klassen, Funktionen, Definitionen und Makros an, welche die Arbeit mit Farben unterstützen. In den vorangegangenen Abschnitten sind eine Menge Aspekte zur Nutzung von Farben bereits demonstriert worden. Die wichtigsten Funktionen hier noch mal zur Übersicht:
Aufgabe
Es ist eine Anwendung zu entwickeln, die verschiedene Farben und Farbfunktionen demonstriert.
- Farbdefinition
- Vordergrundfarbe
- Hintergrundfarbe
- Transparenz
- Farbverläufe
Vorbereitung
Falls Sie nicht in der Vorgehensmodell-Ebene sind, navigieren Sie diese bitte an (nach oben). Falls das Projekt nicht mehr geöffnet ist, öffnen sie das SiSy UML-Projekt wieder. Legen Sie ein neues Klassendiagramm an und wählen Sie die Sprache ARM C++. Beachten Sie die Einstellungen für die Zielplattform STM32F4-Discovery. Beim Öffnen des Diagramms (rechte Maustaste, nach unten) laden Sie die Diagrammvorlage für eine ARM C++ Applikation mit Grafikdisplay ohne µGL.
Selektieren Sie die Opration onStart der Klasse Application.
Ersetzen Sie möglicherweise vorhandenen Beispielquelltext durch folgenden Code.
onStart()
display.clearScreen();
Erstellen und übertragen Sie die Anwendung auf den Mikrocontroller.
Grundlagen zu Farben
Für die Darstellung von Farben gibt es unterschiedliche Modelle. Eines der gebräuchlichsten und auch einfachsten ist das RGB-Modell. Bei diesem werden die Farben in die drei Grundfarben Rot, Grün und Blau zerlegt. Dabei unterscheidet man verschiedene Farbtiefen. Das sagt aus, wie viele unterschiedliche Farben man abbilden kann.
1 Bit Monochrom z.B.: weiß - schwarz 2 Farben ... 15 Bit Real Color Rot: 5 Bit Grün: 5 Bit Blau: 5 Bit 32.768 Farben 16 Bit High Color Rot: 5 Bit Grün: 6 Bit Blau: 5 Bit 65.536 Farben 24 Bit True Color Je 8 Bit für Rot, Grün und Blau 16.777.216 Farben ... 48 Bit - Je 16 Bit für Rot, Grün und Blau 281.474.976.710.656 Farben
Die üblichste Farbtiefe bei Computern oder der Digitalfotografie sind derzeit 24 Bit. Bei Systemen mit relativ begrenzten Ressourcen (Speicher) wird oft eine Farbtiefe von 16 Bit verwendet. So speichert Ihre Digitalkamera die Bilder bestimmt mit 24 Bit Farbtiefe, das Display der Kamera stellt die Bilder unter Umständen aber nur mit 16 Bit dar.
In der µGL werden durch den Anwendungsentwickler bei der Farbcodierung im Quelltext entweder vordefinierte Farbnamen verwendet oder die RGB-Werte mit 24 Bit. Intern wird die mögliche Farbtiefe des Displays verwendet. Bei den hier vorgestellten Displaylösungen sind es 16 Bit.
// Farbtyp 16Bit typedef unsigned short color_t; // = uint16_t // RGB-Makro, Farbanteil 0-255 -> 16Bit Real-Color RGB(5,5,5) // RGB(rot,grün,blau) #define RGB(r,g,b) ( (((r)&0xF8)<<8) | (((g)&0xF8)<<3) | ((b)>>3) )
Ein kleiner Tipp für die Ermittlung einer gewünschten Farbe: Im Betriebssystem finden Sie Zubehörprogramme wie zum Beispiel Paint, bei denen Sie Farbauswahldialoge öffnen können, um eine bestimmte Farbe zu erhalten. Der benötigte RGB-Wert lässt sich dann bequem ablesen 
//Beispiele für Farbdeklarationen color_t red,green,blue,gray,black,white, red = RGB( 255, 0, 0 ); green = RGB( 0, 255, 0 ); blue = RGB( 0, 0, 255 ); gray = RGB( 128, 128, 128 ); black = RGB( 0, 0, 0 ); white = RGB( 255, 255, 255 ); #define ColorTransparent 0x0020 #define ColorForeground 0x0021 #define ColorBackground 0x0022 #define ColorHalfTransparent 0x0023 //TODO #define ColorInvalid 0x002F // Standard-Colors #define ColorWhite RGB(255,255,255) #define ColorBlack RGB(0,0,0) #define ColorGray RGB(127,127,127) #define ColorGrayLight RGB(195,195,195) #define ColorGrayDark RGB(80,80,80) #define ColorBlue RGB(0,0,255) #define ColorBlueLight RGB(150,150,255) #define ColorBlueDark RGB(0,0,80) #define ColorRed RGB(255,0,0) #define ColorRedLight RGB(255,150,150) #define ColorRedDark RGB(80,0,0) #define ColorGreen RGB(0,255,0) #define ColorGreenLight RGB(150,255,150) #define ColorGreenDark RGB(0,80,0) #define ColorYellow RGB(255,255,0) #define ColorYellowLight RGB(255,255,150) #define ColorYellowDark RGB(80,80,0) #define ColorMagenta RGB(255,0,255) #define ColorBrown RGB(102,51,0) #define ColorOrange RGB(255,153,0) #define ColorOrangeDark RGB(255,102,0)
Entwurf Farb-Anwendung
Die Beispielanwendung soll folgende Elemente exemplarisch darstellen:
- Farbdefinition
- Hintergrundfarbe setzen und anwenden
- Vordergrundfarbe setzen und anwenden
- Transparenz setzen und anwenden
- Farbverläufe erstellen
Realisierung Farb-Anwendung
- Farbdefinitionen, ordnen einem bestimmten RGB-Wert einen Farbnamen zu
#define hellrot RGB(255,100,100) #define goldgelb RGB(255,230,130) #define dunkelrot RGB(100,0,0)
- Hintergrundfarbe, wirkt beim Bildschirm löschen und bei der Ausgabe von Texten (Texthintergrund opaque)
display.setBackgroundColor(RGB(255,100,100)); display.clearScreen(); display.setBackgroundColor(RGB(255,255,255)); display.setFont(fontMediumPlain); display.drawText(10,20,"Das ist Text mit opaquem Hintergrund.");
- Vordergrundfarbe, wirkt auf alle grafischen Primitive und auf Text
display.setColor(goldgelb); display.fillCircle(100,100,20); display.setColor(dunkelrot); for (int i=1; i<5;i++) display.drawCircle(100,100,20+i);
- Transparenz, wird benutzt um Textausgaben transparent zu gestalten
display.setBackgroundTransparent(); display.setFont(fontMediumPlain); display.drawText(50,90,"Das ist Text mit transparentem Hintergrund.");
- Farbverläufe, können vertikal oder horizontal generiert werden
Rect r(50,150,100,50); display.fillRectGradient(r, goldgelb, hellrot, 'v'); r.top+=70; display.fillRectGradient(r, goldgelb, hellrot, 'h');
