DataDisplay Support

Hallo,

auch wenn es nur eine kleine "Personalisierung" ist, bedeutet es doch einigen viel ein eigenes Bootlogo zu haben.

Deswegen starte ich hier mit der ersten Anleitung zum erstellen eines eigenen Bootbildes.
Ich werde hier Paint.net verwenden da es ein kostenloses und einfaches Graphikprogramm ist mit dem jeder schnell zurecht kommt.
Hier geht es zum Download: http://www.getpaint.net/download.html

Nach der Installation von Paint.Net starten wir das Programm.
Im Menü auf "Datei" und dort "Neu" wählen.
Es öffnet sich ein Fenster in dem wir die Größe bestimmen. Diese variiert je nach Displaytyp. Im Einsatz sind 3.2 und 3.5 Zoll Displays.
E9X sowie E6X haben das 3.2 Zoll Display
E8X, F2X, F3X und E70 haben das 3.5 Zoll Display

3.2 Zoll Einstellungen: 3.5 Zoll Einstellungen: Jetzt haben wir die passende Größe die das DataDisplay benötigt.
Ein Überblick des Paint.Net: 1: Unser Zeichnungsbereich
2: Ebenenauswahl (sehr nettes Feature, mehr dazu später)
3: Farbauswahl, für Texte, Linien, Hintergrundfüllung usw.
4: Werkzeugauswahl


Es gibt verschiedene Bildformate. Die bekanntesten sind wohl JPG und BMP und PNG.
Das ist nicht ganz unwichtig denn ein PNG kann im Gegensatz zu JPG und BMP ein paar Transparente stellen im Bild haben.
Wenn also nach Bildern gesucht wird darauf achten das es am besten als PNG vorhanden ist, das "freistellen" eines Textes kann sehr viel Zeit und Nerven kosten.
Mache Texte als PNG sind schon freigestellt.
Hier ein Beispiel. Ein Text als PNG (freigestellt) und der Text als JPG (mit festem Hintergrund) über einem anderen Bild:
OK soviel zum Hintergrundwissen.
Machen wir nun ein Beispiel.

Wir haben ein Bild was wir gerne als Bootbild haben wollen aber vielleicht noch mit einem eigenen Text versehen wollen.
Bilder sind schnell gesucht und gefunden aber haben natürlich nicht die Größe die wir wollen.

Im Paint.Net auf "Datei" und dort "Öffnen" gehen und das Bild was wir gefunden haben öffnen.
Jetzt sehen wir oben 2 "Reiter" es sind also beide Bilder offen, das in der Größe des Displays und das Wunsch-Bild:
Hier kann man durch anklicken hin und her wechseln. Man sieht direkt dass das Bild zu groß ist.
Das verkleinern ist einfach aber oft passt das Seitenverhältnis nicht sodass es verzerrt.
Man muss also einen Kompromiss eingehen und etwas weg schneiden an einer Seite.
Ich empfehle so vorzugehen:
Das zu große Bild im Reiter wählen.
Im Menü oben auf "Bild" und dann "Größe ändern" wählen.
Nun wissen wir ja wie groß unser Display ist. In meinem Beispiel hier ist es das 3.2 Zoll Display mit 400 Pixel Breite und 240 Pixel Höhe.
Ich wähle also bei der Änderung des zu großen Bildes bei der Breite 400 Pixel und sehe das die Höhe automatisch (damit das Bild nicht verzerrt) auf 262 Pixel springt.
Das bedeutet das ich 22 Pixel "Verlust" in der Höhe habe.
Sollte bei 400 Pixel Breite die Höhe unter 240 Pixel rutschen so würde ich statt bei Breite lieber bei der Höhe den Wert von 240 eintragen, dann habe ich in der Breite "verlust" aber keinen Rand der nicht mit dem Bild bedeckt ist. Jetzt ist das Bild passend. Zumindest auf einer Seite.
Mit STRG+A (oder Menü "Bearbeiten" und dort "Alles auswählen") markieren wird nun das Bild und Kopieren es in unsere Vorlage.
Im Wunschbild STRG+A um alles zu Markieren und mit STRG+C (oder Menü "Bearbeiten" und dort "Kopieren") kopieren.
Jetzt im Reiter oben auf unser DisplayBild wechseln und mit STRG+V (oder Menü "Bearbeiten" und dort "Einfügen") das Bild dort einfügen.
Jetzt erscheint eine Frage von Paint.Net weil das Bild zu groß ist. Zumindest eine Seite.
Hier wählen wir "Leinwandgröße beibehalten". Das ist WICHTIG da es sonst später nicht im Nextion Editor importiert werden kann.

Nun sehen wir einen gestrichelten Rahmen der in meinem Beispiel unten heraus ragt.
Mit den Pfeiltasten (am besten nur hoch und runter drücken) kann man jetzt noch ein wenig "feintunen". Mit der ESC Taste "fixieren" wir das Bild da ansonsten jeder Mausklick und Mausbewegung das Bild verschieben würde.

Jetzt ist das Bild noch recht langweilig und wir wollen einen Text darüber legen.
Dazu ist es ratsam eine neue Ebene einzufügen. Hat man die obere Ebene ausgewählt ist alles darin über der unteren Ebene. Füllt man diese nun mit etwas anderem Überlagert das unser Hintergrundbild.
Wir wählen also die obere Ebene.
Jetzt links bei den Werkzeugen das "T" für Text.
Unten links noch die Farbe auswählen in der der Text geschrieben werden soll.
Wir klicken in das Bild und tippen unseren Text.
Man kann jetzt oben die Schriftart, Größe usw. einstellen und auch jetzt noch die Farbe anpassen.
Verschieben kann man den Text auf dem kleinen Kreuz was sich am rechten unteren Ende des Textes befindet. Der Text ist noch nicht schön leserlich. Das ändern wir jetzt.

Diese Ebene mit dem Text markieren wir und kopieren sie. STRG+A und dann STRG+C
Eine neue weitere Ebene erstellen.
Diesen markierten und kopierten Text auch in dieser Ebene einfügen mit STRG+V.
Der selbe Text ist nun in 2 Ebenen, überlagert sich ganz genau was rein gar nichts bringt.
Nun kann man z.B. mit den Farben der unteren Ebene spielen und dann den Text etwas verrutschen so dass eine Art Schatten entsteht.
Dazu die zweite Ebene wählen.
Mit STRG+A alles markieren.
Mit den Pfeiltasten auf der Tastatur verschieben wir jetzt diese Ebene. Z.B. zweimal nach unten drücken und zweimal nach rechts.
Noch hat sich nicht viel getan wegen der gleichen Farbe.
Das wird jetzt geändert über Menü "Korrekturen" und dort "Farbton / Sättigung".
Mit den Werten einfach ein wenig herumspielen, man sieht das sich die Farben bzw. die Farbstärke der zweiten Ebene verändert sodass das ganze einen Kontrast bildet und man den Text besser lesen kann. Eine weitere Möglichkeit ist es ebenfalls mit den zwei gleichen Ebenen zu arbeiten.
Aber die Ebenen komplett übereinander liegen zu lassen also den Text nicht verschieben.
Der untere der zwei Texte wird nun zum leuchten gebracht.
Dazu auch wieder die untere der zwei Textebenen anwählen.
Im Menü auf "Effekte" und dort auf "Foto" und "Leuchten" wählen.
Auch hier mit den Schiebereglern herum spielen bis es einen gefällt. Oder man will ein weiteres Bild statt Text über das eigentliche Hintergrundbild legen.
Dazu am besten ein PNG was bereits "freigestellt" ist suchen und herunterladen.
Und dieses dann in eine Ebene über dem eigentlichen Hintergrundbild kopieren.
Auch hier ist es praktisch immer zwei Ebenen mit dem selben Bild zu haben und mit der "Leuchten" Funktion die untere Ebene so zum "leuchten" zu bringen dass ein schöner Kontrast entsteht der die obere Ebene besser hervorbringt. OK nun ist das Bild soweit fertig und es muss gespeichert werden.
Da wir am Ende das JPG Format brauchen und es hier keine Ebenen gibt wandelt unser Paint.Net das automatisch um.
Ich empfehle aber das Bild zuerst im Paint.Net format zu speichern damit man es später noch mit Ebenen hat um einfacher etwas verändern kann.
Menü - "Datei" - "Speichern Unter" und den Speicherort und Dateinamen wählen. Das Format .pdn ersteinmal lassen.
Wenn es gespeichert ist das ganze nochmals machen aber jetzt statt .pdn unten den Dateityp JPEG wählen.

Fertig, das Bootbild wurde erstellt und es kann nun wie in der bereits geschriebenen Anleitung ausgetauscht werden.
http://www.ak-motion.de/datadisplay/for ... p?f=6&t=37

Viel Spaß beim herumexperimentrieren.

Viele Grüße
Alex