====== 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: {{::uglbitmapkonverter.zip|µGL-Bitmapkonverter}} ====== Grundlagen zu Bitmaps ====== Bitmaps können prinzipiell auch von einem Speichermedium gelesen werden. Dazu benötigt man ein [[http://sisy.de/index.php?id=6&_cmd=showPage&_para=searchLibList&searchTxtLib=FAT|Dateisystem]] und einen [[https://www.google.de/search?q=jpeg+decoder+c+source&oq=jpg+decoder+c&aqs=chrome.2.69i57j0l5.15681j0j8&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8|Decoder]] für das entsprechende Format der Datei ([[http://de.wikipedia.org/wiki/Windows_Bitmap|BMP]], [[http://de.wikipedia.org/wiki/JPG|JPG]], [[http://de.wikipedia.org/wiki/Portable_Network_Graphics|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. >>><code cpp> struct BitmapHeader{ char type; // ='b' ... Bitmap uint8_t framesCount; uint16_t width; uint16_t height; const color_t** frameList; }; </code> 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.zip|Bitmapdaten}}:** >>><code cpp> const color_t _bmp_data_demoPicture[] = { 0xFF30, 0xFFDF, ... 0xDD30, 0xFFDF }; </code> >>>**der dazugehörige BitmapHader:** >>><code cpp> BitmapHeader _bmp_demoPicture = { 'b', 1, 240, 320 , _bmp_frames_demoPicture }; </code> Das RGB Farbmodell wird in den meisten Fällen mit einer [[http://de.wikipedia.org/wiki/Farbtiefe_(Computergrafik)|Farbtiefe]] von 24 Bit abgebildet. Das entspricht 8 Bit je Farbe ( RGB-8-8-8, [[http://de.wikipedia.org/wiki/True_Color|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, [[http://de.wikipedia.org/wiki/High_Color|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: >>><code cpp> 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 ... </code> Sehen wir uns den Codeabschnitt //0xFF30, 0xFFDF,// aus den {{Bitmapdaten.zip|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 240x320 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. {{:icon_erstellen_1.png?direct&235|}} {{:icon_erstellen_2.png?direct&200|}} {{:icon_erstellen_3.png?direct&200|}} 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. {{:icon_erstellen_4.png?direct&340|}} {{:icon_erstellen_5.png?direct&300|}} Der C/C++ Code des Beispielbildes //damon.png// hat nach der Konvertierung folgendes Format: >><code cpp> #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 </code> ====== Videozusammenfassung ====== >>><flashplayer width="600" height="475" position="0">file=http://youtu.be/GunpclVCGkM</flashplayer> >>>[[http://youtu.be/GunpclVCGkM|besser auf youTube]] ======= Nächstes Thema ====== * [[http://www.myUGL.de|STM32-Tutorial]]