Einfache Grafikprogrammierung
|
I. RessourcenIn diesem Tutorial wird gezeigt, wie Bilder und Schriftarten in JControl-Projekte eingebunden werden können. |  |
Bilder und Schriftarten mit JControl
Neben dem eigentlichen Programmcode (Java-Klassen) kann ein JControl-Projekt auch diverse Ressourcen beinhalten. Mit Ressource bezeichnet man z.B. Bild- und Schriftdateien, die bei den grafikfähigen JControl-basierten Geräten sicherlich zu den interessanteren Anwendungsfällen für Ressourcen zählen. Aber auch Texte und Melodien können in ein Projekt eingebunden werden. Eine Anwendung kann bei der Ausführung über die Klasse jcontrol.io.Resource auf die Ressourcen zugreifen und dann beispielsweise als Bild darstellen.
Voraussetzungen: Um dieses Tutorial nachvollziehen zu können, benötigen Sie ein JControl-basiertes Gerät mit LC-Display (z.B. JControl/SmartDisplay) sowie die Entwicklungsumgebung JControl/IDE.
Download: http://www.jcontrol.org/examples/ResourcesExample.zip Dieses Tutorial mit allen Quelltexten und Ressourcen als JControl/IDE-Projekt (ZIP-Archiv).
Resourcen hinzufügen
Um Bilder und Schriftarten in ein JControl-Gerät zu laden, genügt es, diese zu einem JControl-Projekt hinzuzufügen. Für die JControl-Systeme wurden spezielle Bild- und Font-Formate entwickelt, die auf die besonderen Hardware-Eigenschaften abgestimmt sind. Für Bilder wird beispielsweise das JControl Image Format (.jcif) verwendet und für Schriftarten das JControl Font Definition Format (.jcfd). Zwar lassen sich theoretisch auch andere Dateiformate in ein JControl-Projekt einbinden, allerdings können diese von dem JControl-Gerät ggf. nicht verarbeitet werden. Welche Dateiformate von einem JControl-Gerät unterstützt werden, finden Sie in dem entsprechenden Datenblatt.
Für die Erzeugung und Dateiformat-Konvertierung von Ressourcen enthält die Entwicklungsumgebung JControl/IDE spezielle Editoren, die in den folgenden Abschnitten vorgestellt werden.
Bilder erstellen
Das ehemals eigenständige Programm PictureEdit wurde zu einem festen Bestandteil der JControl/IDE. Um neue Bilder in einem Projekt der JControl/IDE zu erstellen genügt ein Rechtsklick im Bereich des Quellen-Navigators und die Auswahl Neu->Bild im erscheinenden Kontextmenü (siehe Bild 1). Nach Eingabe eines Dateinamens erscheint dieser dann im Quellen-Navigator. Ein Doppelklick auf den Dateinamen öffnet den Bild-Editor, PictureEdit der zunächst nach der gewünschten Größe des Bildes fragt (als Beispiel wurde hier die Größe des LCD gewählt: Breite=128, Höhe=64). Danach kann das Bild bearbeitet werden.
Malen Sie ein Bild und machen Sie sich mit den verschiedenen Funktionen des Bild-Editors vertraut. Bild 2 zeigt den Bild-Editor innerhalb der JControl/IDE (Bereich rechts unten) mit einer geöffneten Bilddatei. Wenn Sie mit Ihrer Arbeit zufrieden sind, speichern Sie das Bild. Es wird im .jcif-Format in dem Ordner /rsc des aktuellen JControl/IDE-Projekts abgelegt.
Bilder anzeigen
Um ein Bild auf das JControl-Gerät zusammen mit dem Bytecode der Applikation hochzuladen, genügt es, die jcif-Datei dem JControl-Projekt hinzuzufügen. Um auf das Bild mit Java zuzugreifen, steht die Klasse jcontrol.io.Resource zur Verfügung. Das folgende Quelltextbeispiel demonstriert ihre Anwendung:
| 1 | import java.io.IOException; |
| 2 | |
| 3 | import jcontrol.io.Display; |
| 4 | import jcontrol.io.Resource; |
| 5 | |
| 6 | /** |
| 7 | * This example loads an image from the flash memory |
| 8 | * and paints it onto the screen. |
| 9 | */ |
| 10 | public class ImageExample { |
| 11 | Display lcd; |
| 12 | |
| 13 | public ImageExample() { |
| 14 | lcd = new Display(); |
| 15 | |
| 16 | try { |
| 17 | lcd.drawImage(new Resource("Malerei.jcif"), 0, 0); |
| 18 | } catch (IOException e) {} |
| 19 | |
| 20 | for (;;) {} |
| 21 | } |
| 22 | |
| 23 | public static void main(String[] args) { |
| 24 | new ImageExample(); |
| 25 | } |
| 26 | } |
Die Instantiierung einer Ressource sollte in einem try{}-catch{}-Block gekapselt werden, um eine möglicherweise geworfene IOException abfangen zu können. Diese zeigt an, dass die angegebene Ressource nicht gefunden werden konnte.
Die folgende Abbildung (Bild 3) zeigt das Ergebnis, wenn man obiges Programm ImageExample zusammen mit der Bilddatei Malerei.jcif in ein JControl/IDE-Projekt einfügt und dann den Simulator startet.
Schriftarten bearbeiten
Neben Bildern können mit der Klasse Resource auch Schriftarten aus dem Flash-Speicher geladen werden. Mit dem Font-Editor der JControl/IDE können vorhandene Schriftarten in verschiedenen Dateiformaten (z.B. TrueType) importiert und im jcfd-Format für JControl lesbar exportiert werden. Des Weiteren können mit dem Font-Editor auch eigene Schriftarten erstellt und editiert werden.
In diesem Schritt soll eine auf dem System vorhandene Schriftart mit dem Font-Editor importiert und als jcfd-Datei wieder exportiert werden. Starten Sie die JControl/IDE und öffnen, bzw. erstellen sie ein Projekt und fügen sie mittels Rechtklick im Quellen-Navigator eine neue Schriftart hinzu (Bild 4).
Ein Doppelklick auf den entsprechenden, neuen Eintrag im Quellen-Navigator öffnet den Font-Editor, welcher zunächst nach der gewünschten Fontgröße fragt (als Beispiel wählen wir Schriftgröße '8'). In der Menüleiste der JControl/IDE ist jetzt ein neuer Eintrag (Datei) erschienen. Nach Auswahl von Datei->Importieren erscheint ein Dialog, in welchem das zu importierende Schriftarten-Format ausgewählt wird (z.B. TrueType Schriftart (*.ttf)). Im Ordner C:\Windows\Fonts wählen wir die Schriftart arial.ttf (unten stehenden Hinweis beachten!) und bestätigen evt. erscheinende Dialoge namens "Konvertierungsparameter" mit 'OK' (nähere Informationen zum Umgang mit dem Konvertierungsparameter-Dialog finden sie im Tutorial der JControl/IDE).
Hinweis: Unter Windows wird der Systemordner c:\Windows\Fonts besonders behandelt. Die Schrift-Dateien können daher nicht einfach durch Anklicken im Datei-Öffnen-Dialog ausgewählt werden, sondern es muss explizit ein Dateiname eingegeben werden, z.B. arial.ttf.
Die ausgewählte Schriftart wurde nun erfolgreich importiert (Bild 5). Um sie nun im jcfd zu exportieren reicht es, sie zu speichern (Datei->Speichern). Die so erstellte Schriftartendatei kann in dem Ordner gefunden werden, indem sie als neue Datei zuvor angelegt wurde. Damit liegt uns jetzt eine neue, in JControl-Anwendungen verwendbare Schriftart vor.
Schriftarten verwenden
Die Verwendung einer Schriftart funktioniert analog zur Verwendung von Bildressourcen: Es genügt, die jcfd-Datei dem JControl/IDE-Projekt hinzuzufügen. Das folgende Quelltext-Beispiel zeigt, wie die Schriftart geladen und benutzt werden kann:
| 1 | import java.io.IOException; |
| 2 | |
| 3 | import jcontrol.io.Display; |
| 4 | import jcontrol.io.Resource; |
| 5 | |
| 6 | /** |
| 7 | * This example loads a font from the flash memory and |
| 8 | * uses it to draw some text onto the screen. |
| 9 | */ |
| 10 | public class FontExample { |
| 11 | Display lcd; |
| 12 | |
| 13 | public FontExample() { |
| 14 | lcd = new Display(); |
| 15 | |
| 16 | try { |
| 17 | // switch to arial 30 point font |
| 18 | lcd.setFont(new Resource("arial30.jcfd")); |
| 19 | lcd.drawString("That's big!", 0, 10); |
| 20 | } catch (IOException e) {} |
| 21 | |
| 22 | // switch back to system font |
| 23 | lcd.setFont(Display.SYSTEMFONT); |
| 24 | lcd.drawString("Switched back to system font", 0, 50); |
| 25 | |
| 26 | for (;;) {} // sleep well |
| 27 | } |
| 28 | |
| 29 | public static void main(String[] args) { |
| 30 | new FontExample(); |
| 31 | } |
| 32 | } |
Erstellen Sie nun ein JCManager-Projekt und fügen Sie das Kompilat obigen Quelltextes sowie die Schriftart-Datei hinzu. Das Ergebnis wird ähnlich wie Bild 6 aussehen.
Der komplette Zeichensatz des Systemfonts ist in Bild 7 abgebildet. Unicode-Zeichen können in den Quelltexten als z.B. "\u2190" ausgegeben werden (für Unicode: 2190).
