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.

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.

(Mit installiertem Flash kann man an dieser Stelle ein Video in dieser Web-Seite ansehen.)

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:

Realisierung Farb-Anwendung

#define hellrot     RGB(255,100,100)
#define goldgelb    RGB(255,230,130)
#define dunkelrot   RGB(100,0,0)
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.");
display.setColor(goldgelb);
display.fillCircle(100,100,20);
display.setColor(dunkelrot);
for (int i=1; i<5;i++)
	display.drawCircle(100,100,20+i);
display.setBackgroundTransparent();
display.setFont(fontMediumPlain);
display.drawText(50,90,"Das ist Text mit transparentem Hintergrund.");
Rect r(50,150,100,50);
display.fillRectGradient(r, goldgelb, hellrot, 'v');
r.top+=70;
display.fillRectGradient(r, goldgelb, hellrot, 'h');

Videozusammenfassung

(Mit installiertem Flash kann man an dieser Stelle ein Video in dieser Web-Seite ansehen.)

Nächstes Thema