Bitmap-Konverter Tutorial

Je nach SiSy Ausgabe und Version finden sie unter dem Menüpunkt Werkzeuge verschiedene kleine Unterschtützungsprogramme wie den µGL-Bitmapkonverter. Sollte Ihre SiSy-Installation nicht über dieses Werkzeug verfügen können Sie es hier herunterladen:

µGL-Bitmapkonverter

Grundlagen zu Bitmaps

Bitmaps können prinzipiell auch von einem Speichermedium gelesen werden. Dazu benötigt man ein Dateisystem und einen Decoder für das entsprechende Format der Datei (BMP, JPG, PNG, …). Steht kein Speichermedium, wie zum Beispiel eine SD-Karte, zur Verfügung, können die Bitmaps ähnlich wie die Icons im Programm selbst abgelegt werden. Die folgenden Ausführungen beziehen sich darauf, dass die Bitmaps im Flash abgelegt und in C++ codiert werden.

Als Erstes soll der µGL-Bitmap-Header besprochen werden. Diese Struktur wird jedem Bitmap vorangestellt. Das Strukturelement Typ enthält ein 'b' für die Kennzeichnung eines Bitmaps.

struct BitmapHeader{
	char 	type;			// 	='b' ... Bitmap
	uint8_t framesCount;	
	uint16_t width;			
	uint16_t height;		 
	const color_t** frameList;		
	};

Ein Bitmap-Header kann auf eine oder mehrere Bitmaps gleicher Größe verweisen. Dazu wird die Anzahl und die Größe der Frames angegeben. Als letztes Element folgt ein Zeiger auf die Bitmap-Daten des ersten Frames. Sollten mehrere Frames vorhanden sein, folgt eine entsprechende Anzahl von Verweisen. Ein einfaches Bitmap besitzt ein Frame.

Bitmapdaten:
const color_t _bmp_data_demoPicture[] = {
	0xFF30, 0xFFDF, 
	...
	0xDD30, 0xFFDF 
};
der dazugehörige BitmapHader:
BitmapHeader _bmp_demoPicture = { 'b', 1, 240, 320 , _bmp_frames_demoPicture };

Das RGB Farbmodell wird in den meisten Fällen mit einer Farbtiefe von 24 Bit abgebildet. Das entspricht 8 Bit je Farbe ( RGB-8-8-8, True Color, 16.777.216 Farben ). Sind die Ressourcen des Systems knapp, kann die Farbtiefe reduziert werden ohne dass es dem menschlichen Auge groß auffällt. Die in diesem Tutorial verwendeten Boards verfügen über eine maximale Farbtiefe von 16 Bit ( RGB-5-6-5, Heigh Color, 65.536 Farben). Die nächstkleinere akzeptable Farbtiefe ist Real Color mit 15 Bit und 32.768 Farben. Daraus ergibt sich ein RGB-5-5-5 und es wird in einem 16-Bit-Farbword ein Bit frei ;-)

[ R R R R R G G G | G G x B B B B B ]
  16                    ^         0  
                        |
                  Die Bitstelle 5 kennzeichnet eine Metainformation
                      0 = RGB-5-5-5
                      1 = Metainformation = 0b0000000000100000 = 0x0020

Die Metainformationen sollen zusätzlich zu normalen Farbinformationen, zum Beispiel Transparenz, Hintergrund- oder Vordergrundfarben und was besonders interessant ist Komprimierungsinformationen, codieren. Im Folgenden die entsprechenden Deklarationen:

	typedef unsigned short color_t; // = uint16_t
	// RGB to 5-5(6)-5
	#define RGB(r,g,b)		( (((r)&0xF8)<<8) | (((g)&0xF8)<<3) | ((b)>>3) )
	#define ColorTransparent	0x0020
	#define ColorForeground		0x0021
	#define ColorBackground		0x0022
	#define ColorHalfTransparent	0x0023
	#define ColorInvalid		0x002F
	#define ColorCompressed		0x0030
	...

Sehen wir uns den Codeabschnitt 0xFF30, 0xFFDF, aus den Bitmapdaten näher an:

  • 0xFF30, 16 Bit Wert aus den Bitmapdaten
    • das interessante Bit 5 ist gesetzt
    • zusätzlich Bit 4 das ergibt die Maske:
    • 0x0030 = ColorCompressed
    • 0xFF00 = das High-Byte enthält die Anzahl der Bildpunkte
    • das bedeutet die folgende Farbe wiederholt sich 255 mal
  • 0xFFDF, der folgende 16 Bit Wert aus den Bitmapdaten
    • entspricht 0b1111111111011111
    • das Bit 5 ist nicht gesetzt, es ist also eine Farbe
    • R = 0b11111 , G = 0b11111, B = 0b11111
    • das entspricht der Farbe Weis, im Code als Makro RGB(255,255,255)

Die Codierung von Farben wird vom Anwendungsentwickler im Quelltext als 24 Bit Farbe notiert. Das RGB-Makro konvertiert die Farbangabe in die vom Displaytreiber verwendete 16Bit Farbtiefe. Ein Bitmap mit 240 x 320 Pixeln codiert kein Anwednungsentwickler von Hand. Das gäbe eine ordentliche Sehnenscheidenentzündung. Dafür bedient man sich deshalb des hier beschriebenen Werkzeuges.

Den Bitmapkonverter anwednen

Als erstes benötigen sie ein geeignetes Bild. Die Größe des Bildes darf 240×320 Pixel nicht überschreiten. Als Farbtiefe bietet sich für die Bearbeitung 24Bit also RGB[8bit,8bit,8bit) an. Der Konverter bzw. das entsprechende Makro im Framework sorgen für die Einhaltung des benötigten Zielformates. Nutzen Sie ein Bildbearbeitungsprogramm zum Erstellen oder anpassen der gewünschten Bilder. Speichern Sie das vorbereitete Bild.

Das entsprechend formatierte Bild können Sie jetzt mit dem µGL-Bitmapkonverter laden. Dünne Hilfslinien zeigen an, ob das Bild die erlaubten Dimensionen des Displays einhalten. Die Ausgabe erfolgt in die Zwischenablage. Sie können das Ergebnis der Konvertierung zum Beispiel in der UML als Artefakte nutzen.

Der C/C++ Code des Beispielbildes damon.png hat nach der Konvertierung folgendes Format:

#ifndef _bmpdamon_
#define _bmpdamon_
 
// header 
#define bmpdamon ((BitmapHeader*)_bmp_damon)
 
#ifndef MyAppCpp
	extern uint16_t _bmp_damon[];
//cpp
#else
	const color_t _bmp_data_damon[] = {
		0x3145, 0x18C4, 0x18C2, 0x2142, 0x0230, 0x2183, 0x5308, 0x9D4F, 0x9D50, 
		...
		...
		...
		0x5349, 0x5B49, 0x740B, 0x744B, 0x740A, 0x7C8C, 0x8D0C, 0x850C, 0x7C8C, 
		0x744B 
	};
	const color_t* _bmp_frames_damon[] = {_bmp_data_damon};
	BitmapHeader _bmp_damon = { 'b', , 240, 319 , _bmp_frames_damon };
#endif
#endif

Videozusammenfassung

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

Nächstes Thema

funktionen_des_bitmap-designer-tool.txt · Zuletzt geändert: 2014/07/03 13:09 von huwi