Theme-Erstellung

[Dieses HowTo ersetzt die beiden alten HowTos
http://forum.modopo.com/ef81-sxg75-f...ternative.html
http://forum.modopo.com/ef81-sxg75-f...rstellung.html ]

Diese Anleitung erklärt, wie man ein eigenes Theme erstellen kann. Die dazu benötigte Software heisst "Mobile Theme Editor (MTE)" und stammt aus dem Developer-Portal von Benq-Siemens, jetzt nicht mehr zugänglich. Obwohl sich das MTE für fast alle Handies von Siemens und Benq-Siemens eignet, wird hier als Beispiel das Brew-Modell EF81 genommen (v.a. auch wegen dem Aussendisplay). Die Anleitung sollte auch für andere Modelle gehen.
Getestet unter Windows 2000 SP4 und XP SP2.

INHALT

Installation der benötigten Software-Komponenten
Ausführliche Erklärung der einzelnen Einstellungsbereiche
Schnell Lernen: Ein Beispieltheme in 15 Minuten zusammenbauen.

1. INSTALLATION DER BENÖTIGTEN SOFTWARE-KOMPONENTEN

1.1) Java-Software prüfen und bei Fehlen installieren:
Java Runtime Environment (JRE) 1.4.2 (Versionnummer wichtig!) http://java.sun.com/j2se/1.4.2/index.jsp
Java Media Framework (JMF) 2.1.1e (passt nur zu JRE 1.4.2!): http://java.sun.com/products/java-me.../download.html

1.2) Software Mobile Theme Editor (MTE) holen http://forum.modopo.com/downloads.php?do=file&id=353
Anmerkung: Auf dieser Seite unten gibt es bei den Kommentaren ein privater Link als Alternative, da das Developer Portal nicht mehr zugänglich ist.

1.3) Installation vom MTE starten und allfällige Fehlermeldungen beachten.
Wenn Fehlermeldung kommt, Installation nicht fortsetzen, sondern je nach Fehlermeldung fehlende Java-Komponente nachinstallieren und PC neu starten falls verlangt. MTE-Installation wiederholen, bis die Installation vollständig ist.

2. AUSFÜHRLICHE ERKLÄRUNG DER EINZELNEN EINSTELLUNGSBEREICHE

2.1) MTE starten und folgende Menüpunkte auswählen gemäss Bildschirmfoto:
>File>Create Theme

2.2) Vom Dialogfenster das gewünschte Gerät auswählen:

2.3) Nun erscheint eine "Arbeitsmappe",
siehe Bildschirmfoto untenstehend. Die Arbeitsmappe hat 3 Bereiche. Einen Vorschaubereich "Theme Preview" und eine "Color Contrast" Vorschau. Der dritte Bereich umfasst die Reiter-Karten mit den Einstellungsoptionen und/oder Eingabefelder. Die beiden "Previews" sind nicht zuverlässig, z.B. wird manchmal der Hintergrund nicht angezeigt, obwohl er bereits eingestellt wurde. Deshalb muss man hier ein bisschen "blind" mit den Einstellungen arbeiten, bzw. eher nur auf die eigenen Daten verlassen. in der unteren Fensterleiste steht rechts noch die Anzahl "Errors" und "Conflicts", die beide hier später noch erklärt werden. Es ist normal, dass am Anfang z.B. 44 Fehler vorhanden sind.

2.4) Wir beginnen mit dem ersten Reiter "Summary".
Alle fett hervorgehobene Felder müssen unbedingt ausgefüllt werden. Der Titel sollte möglichst kurz sein, da er in der Themenliste auf dem Handy erscheint (ca. 15 Buchstaben Platz).

2.5) Reiter Animations:
Hier lassen sich die Animationen während dem Einschalten und Ausschalten des Handys einstellen.

Einschalten: Zuerst kommt "Switch On Animation", danach PIN-Eingabe, dann "Netsearch Animation".
Ausschalten: "Switch Off Animation" (Aussendisplay "Shutdown...").

Die Einschaltanimation kann bei nur 18 Teilbilder (Frames) in einer Endlosschleife ablaufen, Hat die GIF-Animation 19 Teilbilder, dann dauert das letzte Teilbild 5 Sekunden lang. Nach meinen Erfahrungen mit dem EF81 und Firmware 23 bis 58 stimmen diese Angaben nicht immer. Ich musste immer wieder Animationen korrigieren. Ich habe den Eindruck, das EF81 nimmt die Dauer eines Teilbildes für das nachfolgende Teilbild. Die Dauer des letzten Frames habe ich also beim vorletzten Frame eingestellt.

Nur EF81 (und andere Klapphandies): Animationen fürs Hauptdisplay noch zusätzlich auf die Grösse des Aussendisplays verkleinern und als separates GIF abspeichern.

Animationen lassen sich mit dem Freeware GIMP für Windows erstellen, oder mit einer Trialversion von Ulead GIF Animator (einfache Bedienung, für Anfänger empfohlen). Photoshop hat auch sehr gute Animations-Funktionen. Hier wird nicht erklärt, wie eine Animation erstellt wird, weil es den Rahmen sprengt. Nützliche Tutorials findet man hier:
Gimp: http://www.gimptalk.com/forum/topic/...if-9937-1.html
Ulead GIF Animator: http://www.ulead.de/learning/ga.htm

Empfehlungen:
- Animationen mit 640x480 Bildgrösse (oder mehr) erstellen und erst am Schluss in die richtige Bildgrösse verkleinern (Gewinn an Bildqualität)
- So lange wie möglich mit 24 oder 32bit Farben arbeiten und erst am Schluss so viele Farben wie möglich wegnehmen (GIF-Colorpalette optimieren)
- Tipp für Reduktion der Dateigrösse: möglichst geringe Teile des Bildes animieren und mit möglichst wenigen Teilbildern in einer Endlosschleife auskommen (z.B. Motor für Netzsuche-Animation, siehe Anhang)

Erlaubt sind hier die Dateiformate GIF, PNG und JPG. GIF eignet sich für Animationen. Wer keine möchte, kann einfach nur ein normales Bild verwenden, also keine Animation.

2.6) Reiter Images:
Genauso wie bei den Animationen müssen hier sämtliche Teilbilder selbst erstellt und eingefügt werden. Die Pixel-Grössen der Teilbilder müssen genau eingehalten werden, sonst akzeptiert das MTE die Teilbilder nicht. Wer ein Teilbild nicht braucht, kann es einfach als transparentes GIF-Bild mit der richtigen Grösse erstellen. Damit die Teilbilder besser voneinander unterscheidbar sind, am Ende der Dateinamen noch Pixelgrössen mitschreiben, z.B. "58x154".

Hinweis: "(Incorrect) PIN Input Image" ist ein schmales Bild, das links vom PIN-Eingabefeld erscheint. Ausnahmsweise sind beide Bilder bereits standardmässig vorhanden und müssen nicht speziell eingestellt werden. Jedoch sind die Standard-Symbole nicht gut gerendert und zeigen Treppenstufen. Das Totenkopf-Symbol im obigen Bildschirmfoto ist ein 58x154 transparentes PNG mit einem Symbol in der Mitte.

2.7) Reiter Icons:
Wie schon beim "Pin Input Image" ist es nicht notwendig, hier noch zusätzliche Symbole einzustellen. Jedoch hat hier z.B. das Ausrufezeichen eine unpassende Umrissfarbe. Alle Symbole sollten mit einem transparenten Hintergrund erstellt werden, und eigentlich am Besten als PNG, weil das GIF-Format nur maximal 256 verschiedene Farben erlaubt.

2.8 ) Reiter Settings:
Über diese Funktionen gehen die Meinungen hier im Forum auseinander. Je nach Einstellung kann es zu Problemen führen. Am Sichersten fährt man, indem beide Einstellungen keine grüne Hacken aufweisen. Also User Theme, und "none" bei Screensaver Type.

2.9) Reiter Applications
wird hier übersprungen, da seine Funktion unklar ist bzw. nicht beim EF81 aktiviert zu sein scheint. (Andere Meinungen mir bitte per PM mitteilen, damit ich hier korrigieren kann).

2.10) Reiter Color Scheme.
Die Farben sind hier bereits standardmässig vorgegeben. Trotzdem müssen die im unteren Fenster "Color Contrast" angegebenen "Conflicts" auf visueller Weise überprüft werden. Zum Beispiel das "Date Setting Screen" (Zweite Vorschau von links) weist 3 Konflikte auf, d.h. 3 Farbpaare haben einen zu geringen Kontrast voneinander. Zum Beispiel ist die schwarze Schrift von "Set (YYYY-MM-DD):" zuwenig deutlich lesbar und das neben dem Werkzeugsymbol lautende "Date" gar nicht ablesbar, siehe unten:

Auch nach Korrektur der Farben stehen immer noch "Conflicts". Die beziehen sich meistens auf einen zu geringen Unterschied zwischen zwei benachbarten Farben. Trotzdem ist das Vorschaufenster für "Date Setting Screen" gut ablesbar, die angegebenen Konflikte muss man nicht beachten. Beim "Edit Screen" (Drittes Vorschaufenster von links) ist das Hintergrundbild dasselbe wie bei den linken Vorschaubilder (Lenkrad und Gangwechsel), wird im Mobile Theme Editor nicht angezeigt. Trotzdem ist die Darstellung später auf dem Handy voll korrekt. Dies ist eine der Schwächen des IMHO unausgereiften Mobile Theme Editor (Bildschirmfoto unten).

Beim "Select Color" Einstellungbereich findet man 3 kleine Reiter für 3 alternative Farbeinstellungsmöglichkeiten:

Swatches: Einfache Palette zum direkt anklicken. Genügt in den meisten Fällen
HSB: Steht für Hue, Saturation und Brightness. Eine weitere Möglichkeit Farben auszuwählen aus einem 3-dimensionalen Modell. Quadrat-X-Achse = Sättigung abnehmend (=Saturation). Quadrat-Y-Achse = Helligkeit zunehmend (=Brightness). Säule-Z-Achse: Farbspektrum (=Hue).
RGB: Rot-Grün-Blau, additives Farbmodell, den meisten wohl bekannt, wenn man die Pixel des Röhrenfernsehers oder des LCD-Fernsehers von der Nähe betrachtet. Rote und grüne Pixel zu 100% leuchtend, blaue Pixel völlig dunkel = Gelb (aus der Entfernung betrachtet).

Schliesslich findet sich unten im Einstellungsbereich noch ein Kästchen für "Transparent". Wenn eine Farbe völlig transparent sein soll, kann hier einfach ankreuzen. Jedoch kann es eventuell zwischen Preview- und Handy-Realität - je nach Handymodell - zu unerwarteten Unterschieden kommen.

2.11) Reiter Sounds:
Hier müssen sämtliche Stellen belegt werden, auch wenn man z.B.keine Open/Close Clam/Slider Sound haben will. Einfach eine leere WAV-File erstellen (Aufnahme ohne Mikrofon). MP3-Clips werden nicht der vollen Länge nach abgespielt, sondern abgeschnitten.

Im Forum wird an mehreren Stellen über optimale Bitratefähigkeiten des EF81 und anderer Handymodelle diskutiert, und bei welchem Sound-Format:
http://forum.modopo.com/showthread.p...ht=mp3+bitrate

Werkzeuge für die Konvertierung von Sounds findet man z.B. hier: http://forum.modopo.com/downloads.php?do=cat&id=6

Übrigens lassen sich die Ringtöne später auf dem Handy manuell anders belegen, durch andere im Handy vorhandene Ringtöne.

2.12) Reiter Theme Report:
Diese Reiterkarte enthält weitere Reiterkarten:

Errors: Es dürfen keine Fehler vorhanden sein, sonst funktioniert das Theme als Ganzes nicht.
Conflicts bzw. Conflicts by Theme Preview: Listet alle farblichen Kontrastkonflikte auf.

Im untenstehenden Bildschirmfoto sind in der Liste der Konflikte zwei Quadrate sichtbar. In der ersten Zeile ist es ein transparentes Auswahl-Teilbild, das wegen der Transparenz mit dem Hintergrundbild zu 91.407% ähnlich ist. Eine Sichtkontrolle ergibt trotzdem einen visuell klar wahrnehmbaren Kontrast, der viel grösser als die mathematisch errechnete Übereinstimmung ist. Kein Grund zur Sorge bzw. Korrektur. Dieser Konflikt wird ignoriert. Weil in diesem Theme viele Teilbilder transparent sind, entstehen deshalb viele "Konflikte", die jedoch nach Sichtkontrolle alle keine echten Kontrastkonflikte sind und deshalb ignoriert werden dürfen.

2.13) Theme ins Brew-Format exportieren.
WICHTIG: Es müssen sämtliche Einstellungen in den Reiter Animations, Images, Sounds mit Animationen, Bilder,Teilbilder und Sounds belegt sein, auch wenn man einige Animationen, Teilbilder und Sounds auslassen möchte. Sonst erhält man im Handy eine Fehlermeldung, dass das Theme nicht aktiviert werden konnte.

Nach dem erfolgreichen Export ins Brew-Format sollte die Qualcomm-Ausgabe so aussehen:

2.14 Theme aufs Handy übertragen und kontrollieren:
Sound, Bilder, Animationen, Farbkontraste? Ruckeln? Videos laufen vom Theme unbehindert, flüssig ab?

3. SCHNELL LERNEN: EIN BEISPIELTHEME IN 15 MINUTEN ZUSAMMENBAUEN

Wie man selbst in 15 Minuten ein eigenes Theme erstellen kann und dazu nur 2 Hintergrundbilder braucht. Alle weiteren Designdateien stelle ich in einem ZIP-File hier zur Verfügung:
http://forum.modopo.com/downloads.php?do=file&id=473 (Dateigrösse 2.76 MB)

3.1) Designdateien holen
Downloade die ZIP-Datei vom Link oben herunter, entpacke die ZIP-Datei z.B. auf dem Desktop. Es hat 3 Ordner:

Designelemente
Hintergrund und animierte GIFs
Sounds

Zusätzlich die beiden originalen Themedateien im SDQ Format fürs SXG75 und EF81

3.2) Mobile Theme Editor installieren
Lies dazu Punkt 1) weiter oben!

3.3) Theme zusammenbauen
Hier hast du zwei Möglichkeiten:

Expressmodus: Nur die beiden Hintergrundbilder austauschen, sowie andere GIF-Bilder für Animationen verwenden.
Lernmodus: Baue das Theme aus den Einzelteilen zusammen und lerne dabei schnell wie man ein neues Theme (mit anderen Motiven, Sound, Designelementen, Farben) erstellen kann.

WICHTIG beim Express- und Lernmodus: Es müssen sämtliche Einstellungen in den Reiter Animations, Images, Sounds mit Animationen, Bilder,Teilbilder und Sounds belegt sein, auch wenn man einige Animationen, Teilbilder und Sounds auslassen möchte. Sonst erhält man im Handy eine Fehlermeldung, dass das Theme nicht aktiviert werden konnte.

Expressmodus

Öffne mit dem Mobile Theme Editor einen der beiden SDQ-Dateien, z.B. FordGT40_2_0.SDQ für das EF81 bzw. FordGT40_SXG75_2_0.SDQ.
Suche zwei verschiedene Hintergrundbilder im JPG oder PNG Format, Grösse mindestens 240 Pixel breit und 320 Pixel hoch.
Das Hintergrundbild für die Menüansicht (mit den 12 Menüsymbolen) sollte nicht zuviele weisse/helle Stellen haben. Es sollte nötigenfalls etwas abgedunkelt werden, z.B. Helligkeit reduzieren.
Verkleinere die Bilder zu genau 240x320 Bildpunkte und speichere es im PNG Format ab, zur Not tut es auch JPG.
Speichere das erste Hintergrundbild unter dem Namen z.B. FordGT40Wallpaper240x320.png ab. Beim EF81 dieses Bild zusätzlich noch auf 120x160 Bildpunkte verkleinern und unter XXXXWallpaper120x160.png abspeichern.
Speichere das zweite Hintergrundbild unter dem Namen z.B. FordGT40BodyBackground240x320.png ab. Und beim EF81 noch zusätzlich fürs Aussendisplay speichern.
Tausche diese 2 bzw. 4 Hintergrundbilder im Reiter "Images" aus.
Um die alten Animationen zu ersetzen, kannst du im Reiter "Animation" andere GIF-Dateien einsetzen. Es müssen keine Animationen sein. Um es ganz einfach zu machen: Erstelle mit dem Grafikprogramm ein 240x320 Pixel grosse weisse Fläche und speichere es als GIF ab. Und beim EF81 zusätzlich im Format 120x160 Pixel. Damit kannst du sämtliche Animationen für Netzsuche, Einschalten, Ausschalten mit dem gleichen GIF-Bild belegen.
Gehe zum Reiter "Summary" und ändere die Titel, Autor usw.
Speichere das Theme unter einem anderen Dateinamen ab.
Gehe zum Menü "File" des Editors und wähle "Export to BREW" aus. Es wird ein Themedatei im SDT-Format erstellt und kann via Bluetooth aufs Handy übertragen werden.
Kontrolliere das neu erstellte Theme auf dem Handy auf Farbkonflikte, Sound, Aussehen, ruckelfreie Wiedergabe von Videos?

Lernmodus
Wir gehen jetzt Schritt für Schritt weiter, mit Hilfe der Bildschirmfotos im Abschnitt 2. Im Moment haben wir ja alle Bilder/Animationen und wollen sie zum Lernen schnell zusammenbauen. Statt mit einem Grafikprogramm zu arbeiten, suche in den 3 Ordnern die richtigen Elementen.

Neues Theme eröffnen für das SXG75 oder EF81
Wir gehen zum Reiter Summary: Infofelder eintippen, besonders das Feld Title, weil das später auf dem Handy im Themenordner stehen wird.
Dann Reiter Animations: Über den Button "Browse" aus einem der 3 Ordner FordGT40MotorAnimation320.gif für "Netsearch" auswählen. Die Zahlen am Ende der Dateinamen geben die Displayhöhe an. Wähle noch entsprechende Ein- und Ausschalteanimationen für das Innen- und Aussendisplay aus. Keine Angst falsche Dateien auszuwählen, der Editor prüft die Bildgrösse automatisch und meldet Fehler sofort. Nun müssen alle Zeilen ausgefüllt sein. Für das Feld "Screensaver 240 x 294" wähle das statische gif-Bild mit "240x294" am Schluss. Das ist also ein normales GIF-Bild, keine Animation-GIF. Ich persönlich habe diesen Screensaver noch nie am Handy EF81 gesehen. Aber es MUSS angegeben werden, sonst wird das Theme im Handy gar nicht angezeigt.
Jetzt gehen wir weiter zum Reiter Images. Hier alle Designelementen aus dem Ordner Designelement einstellen, so dass keine Zeile ohne grünes Häckchen leer bleibt. Dieses Puzzle erledigen, indem auf die Bildgrösse geachtet wird. Für MFE Selection Bar ebenfalls "Two Lines Selection Bar" wählen. Für Symbole wie Hourglass.gif die von mir erstellten Symbole wie "Warten, Fehler, Information, ..." verwenden. Schliesslich müssen die 2 Hintergrunddateien Wallpaper und Body Background aus dem anderen Ordner mit Hintergrundbilder geholt werden (Beim EF81 sind zusätzlich noch die Hintergrundbilder fürs Aussendisplay zu belegen).
Wir überfliegen die Reiter Settings, Animations und gehen zum Reiter Color Scheme. Hier gehen wir zum Menü "File" vom Editor und wählen Import Colorscheme aus dem Ordner Designelemente.
Nun ist Reiter Sounds dran. Hier sämtliche Zeilen mit AAC oder MP3 Sounds zu belegen. Im Ordner Sound sind nur 2 AAC-Dateien, aber ein Sound kann man für verschiedene Zwecke mehrfach angeben, z.B. Door Open Close für den Ein- und Ausschalteton.
Wir kommen noch zum Theme Report. Hier sollten keine "Conflicts" stehen, wenn alles bisher vollständig erledigt wurde. Und wenn doch einige Conflicts stehen, dann kann man sie ignorieren, sie beziehen sich auf z.B. Farbkonflikte. Viel ernster ist es mit "Errors". Hier jede Fehlermeldung genau studieren und versuchen den Fehler zu korrigieren. Erst bei 0 Fehler lässt sich das Theme speichern und exportieren!
Kontrolliere das neu erstellte Theme auf dem Handy auf Farbkonflikte, Sound, Aussehen, ruckelfreie Wiedergabe von Videos?

Wichtige Bemerkung: Einige Vorschaufenster zeigen kein Hintergrundbild an, sondern nur eine graue Fläche. Das ist aber kein Fehler. Auf dem Handy wird das Hintergrundbild trotzdem gezeigt.

Jetzt hast du schnell ein eigenes Theme mit transparenten Designelementen, die Sicht auf die beiden Hintergrundbilder frei lassen. Vielleicht hast du jetzt Lust, ein richtiges, neues Theme zu erstellen. Dazu kannst du natürlich die Designelemente als Vorlage verwenden und sie übermalen. Sound nach deiner Wahl dazutun. usw.

Man kann auch statt mit transparenten Designelementen auf raffinierter Weise die Designelemente so gestalten, dass pro Menüansicht oder Untermenü jeweils ein anderes Gesamtbild ergibt.

Viel Spass beim Ausprobieren und Gestalten eines neuen persönlichen Theme!
Probleme werden via nachfolgendem Link im entsprechenden Thread diskutiert.
(Bin kein Design-Profi!)
Diskussion: http://forum.modopo.com/showthread.php?t=13793