Umlaute auf 2.4" Touch ILI9341

marcelnox · February 5, 2024, 1:47pm

Hallo.
Ich besitze ein AZDelivery 5 x 2.4 Zoll LCD TFT Touch Display 320 x 240 Auflösung, ILI9341 Treiber, SPI Schnittstelle und habe dies auch erfolgreich mit TFT_eSPI eingebunden.
Touch funktioniert, Display zeigt auch alles an, außer Umlaute.
Zudem fehlte mir eine größere Schrift.
Gefunden habe ich diese FreeFontDemo

/*
  This example draws fonts (as used by the Adafruit_GFX library) onto the
  screen. These fonts are called the GFX Free Fonts (GFXFF) in this library.

  Other True Type fonts could be converted using the utility within the
  "fontconvert" folder inside the library. This converted has also been
  copied from the Adafruit_GFX library.

  Since these fonts are a recent addition Adafruit do not have a tutorial
  available yet on how to use the utility.   Linux users will no doubt
  figure it out!  In the meantime there are 48 font files to use in sizes
  from 9 point to 24 point, and in normal, bold, and italic or oblique
  styles.

  This example sketch uses both the print class and drawString() functions
  to plot text to the screen.

  Make sure LOAD_GFXFF is defined in the User_Setup.h file within the
  TFT_eSPI library folder.

  --------------------------- NOTE ----------------------------------------
  The free font encoding format does not lend itself easily to plotting
  the background without flicker. For values that changes on screen it is
  better to use Fonts 1- 8 which are encoded specifically for rapid
  drawing with background.
  -------------------------------------------------------------------------
  
  >>>>>>>>>>>>>>>>>>>>>>>>>>> WARNING <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  As supplied with the default settings the sketch has 11 fonts loaded,
  i.e. GLCD (Font 1), Font 2, Font 4, Font 6, Font 7, Font 8 and five Free Fonts,
  even though they are not all used in the sketch.
  
  Disable fonts you do not need in User_Setup.h in the library folder.

  #########################################################################
  ###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
  #########################################################################
*/

#include "SPI.h"
#include "TFT_eSPI.h"

#include "Free_Fonts.h" // Include the header file attached to this sketch

// Use hardware SPI
TFT_eSPI tft = TFT_eSPI();

unsigned long drawTime = 0;

void setup(void) {

  tft.begin();

  tft.setRotation(1);

}

void loop() {

  int xpos =  0;
  int ypos = 40;

  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Select different fonts to draw on screen using the print class
  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

  header("Using print() method", TFT_NAVY);

  // For comaptibility with Adafruit_GFX library the text background is not plotted when using the print class
  // even if we specify it.
  tft.setTextColor(TFT_YELLOW);
  tft.setCursor(xpos, ypos);    // Set cursor near top left corner of screen

  tft.setFreeFont(TT1);     // Select the orginal small TomThumb font
  tft.println();             // Move cursor down a line
  tft.print("ÖöööAaÄÄäää");    // Print the font name onto the TFT screen
  tft.println();
  tft.println();

  tft.setFreeFont(FSB9);   // Select Free Serif 9 point font, could use:
  // tft.setFreeFont(&FreeSerif9pt7b);
  tft.println();          // Free fonts plot with the baseline (imaginary line the letter A would sit on)
  // as the datum, so we must move the cursor down a line from the 0,0 position
  tft.print("Serif Bold 9pt");  // Print the font name onto the TFT screen

  tft.setFreeFont(FSB12);       // Select Free Serif 12 point font
  tft.println();                // Move cursor down a line
  tft.print("ÖöööAaÄÄäää"); // Print the font name onto the TFT screen

  tft.setFreeFont(FSB18);       // Select Free Serif 12 point font
  tft.println();                // Move cursor down a line
  tft.print("ÖöööAaÄÄäää"); // Print the font name onto the TFT screen

  tft.setFreeFont(FSB24);       // Select Free Serif 24 point font
  tft.println();                // Move cursor down a line
  tft.print("ÖöööAaÄÄääät"); // Print the font name onto the TFT screen


  delay(4000);

  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now use drawString() so we can set font background colours and the datum
  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

  header("Using drawString()", TFT_BLACK);

  tft.setTextColor(TFT_WHITE, TFT_BLACK);

  tft.setTextDatum(TC_DATUM); // Centre text on x,y position

  xpos = tft.width() / 2; // Half the screen width
  ypos = 50;

  tft.setFreeFont(FSB9);                              // Select the font
  tft.drawString("Serif Bold 9pt", xpos, ypos, GFXFF);  // Draw the text string in the selected GFX free font
  ypos += tft.fontHeight(GFXFF);                      // Get the font height and move ypos down

  tft.setFreeFont(FSB12);
  tft.drawString("Serif Bold 12pt", xpos, ypos, GFXFF);
  ypos += tft.fontHeight(GFXFF);

  tft.setFreeFont(FSB18);
  tft.drawString("Serif Bold 18pt", xpos, ypos, GFXFF);
  ypos += tft.fontHeight(GFXFF);

  tft.setFreeFont(FSB24);
  tft.drawString("Serif Bold 24pt", xpos, ypos, GFXFF);
  ypos += tft.fontHeight(GFXFF);

  // Set text padding to 100 pixels wide area to over-write old values on screen
  tft.setTextPadding(100);
  for (int i = 0; i <= 20; i++) {
    tft.drawFloat(i / 10.0, 1, xpos, ypos, GFXFF);
    delay (200);
  }

  delay(4000);

  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Same again but with colours that show bounding boxes
  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


  header("With background", TFT_DARKGREY);

  tft.setTextColor(TFT_YELLOW, TFT_BLACK);

  tft.setTextDatum(TC_DATUM); // Centre text on x,y position

  xpos = tft.width() / 2; // Half the screen width
  ypos = 50;

  tft.setFreeFont(FSB9);                              // Select the font
  tft.drawString("Serif Bold 9pt", xpos, ypos, GFXFF);  // Draw the text string in the selected GFX free font
  ypos += tft.fontHeight(GFXFF);                        // Get the font height and move ypos down

  tft.setFreeFont(FSB12);
  tft.drawString("Serif Bold 12pt", xpos, ypos, GFXFF);
  ypos += tft.fontHeight(GFXFF);

  tft.setFreeFont(FSB18);
  tft.drawString("Serif Bold 18pt", xpos, ypos, GFXFF);
  ypos += tft.fontHeight(GFXFF);

  tft.setFreeFont(FSBI24);
  tft.drawString("Bold Italic 24pt", xpos, ypos, GFXFF);
  ypos += tft.fontHeight(GFXFF);

  // Set text padding to 100 pixels wide area to over-write old values on screen
  tft.setTextPadding(100);
  for (int i = 0; i <= 20; i++) {
    tft.drawFloat(i / 10.0, 1, xpos, ypos, GFXFF);
    delay (200);
  }

  delay(4000);

  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  // Now show setting the 12 datum positions works with free fonts
  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

  // Numbers, floats and strings can be drawn relative to a datum
  header("Text with a datum", TFT_BLACK);
  tft.setTextColor(TFT_DARKGREY, TFT_BLACK);
  tft.setFreeFont(FSS12);
  tft.setTextDatum(TL_DATUM);
  tft.drawString("[Top left]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(TC_DATUM);
  tft.drawString("[Top centre]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(TR_DATUM);
  tft.drawString("[Top right]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(ML_DATUM);
  tft.drawString("[Middle left]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(MC_DATUM);
  tft.drawString("[Middle centre]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(MR_DATUM);
  tft.drawString("[Middle right]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(BL_DATUM);
  tft.drawString("[Bottom left]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(BC_DATUM);
  tft.drawString("[Bottom centre]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(BR_DATUM);
  tft.drawString("[Bottom right]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(L_BASELINE);
  tft.drawString("[Left baseline]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(C_BASELINE);
  tft.drawString("[Centre baseline]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  tft.fillRect(0, 80, 320, 80, TFT_BLACK);
  tft.setTextDatum(R_BASELINE);
  tft.drawString("[Right baseline]", 160, 120, GFXFF);
  drawDatumMarker(160,120);
  delay(1000);

  //while(1);
  delay(8000);

}

// Print the header for a display screen
void header(const char *string, uint16_t color)
{
  tft.fillScreen(color);
  tft.setTextSize(1);
  tft.setTextColor(TFT_MAGENTA, TFT_BLUE);
  tft.fillRect(0, 0, 320, 30, TFT_BLUE);
  tft.setTextDatum(TC_DATUM);
  tft.drawString(string, 160, 2, 4); // Font 4 for fast drawing with background
}

// Draw a + mark centred on x,y
void drawDatumMarker(int x, int y)
{
  tft.drawLine(x - 5, y, x + 5, y, TFT_GREEN);
  tft.drawLine(x, y - 5, x, y + 5, TFT_GREEN);
}


// There follows a crude way of flagging that this example sketch needs fonts which
// have not been enbabled in the User_Setup.h file inside the TFT_HX8357 library.
//
// These lines produce errors during compile time if settings in User_Setup are not correct
//
// The error will be "does not name a type" but ignore this and read the text between ''
// it will indicate which font or feature needs to be enabled
//
// Either delete all the following lines if you do not want warnings, or change the lines
// to suit your sketch modifications.

#ifndef LOAD_GLCD
//ERROR_Please_enable_LOAD_GLCD_in_User_Setup
#endif

#ifndef LOAD_FONT2
//ERROR_Please_enable_LOAD_FONT2_in_User_Setup!
#endif

#ifndef LOAD_FONT4
//ERROR_Please_enable_LOAD_FONT4_in_User_Setup!
#endif

#ifndef LOAD_FONT6
//ERROR_Please_enable_LOAD_FONT6_in_User_Setup!
#endif

#ifndef LOAD_FONT7
//ERROR_Please_enable_LOAD_FONT7_in_User_Setup!
#endif

#ifndef LOAD_FONT8
//ERROR_Please_enable_LOAD_FONT8_in_User_Setup!
#endif

#ifndef LOAD_GFXFF
ERROR_Please_enable_LOAD_GFXFF_in_User_Setup!
#endif

Allerdings werden keine Umlaute angezeigt.
Ich möchte später empfangene Titel am Display ausgeben und kann nicht ausschließen dass Umlaute aufkommen.
In der UserSetup.h habe ich diese alle mal auskommentiert:

// Section 3. Define the fonts that are to be used here
//
// ##################################################################################

// Comment out the #defines below with // to stop that font being loaded
// The ESP8366 and ESP32 have plenty of memory so commenting out fonts is not
// normally necessary. If all fonts are loaded the extra FLASH space required is
// about 17Kbytes. To save FLASH space only enable the fonts you need!

// define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
// define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
// define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
// define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
// define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
// define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
// define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
// define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts

// Comment out the #define below to stop the SPIFFS filing system and smooth font code being loaded
// this will save ~20kbytes of FLASH
 #define SMOOTH_FONT

Wer kann mir hier helfen?

fony · February 5, 2024, 2:31pm

Nutze auch TFT_eSPI mit dem unterscheid das baue meine eigene Font's.
Du kanst jedoch alle schriftarten prüfen ob Dort umlaute sind. wen schon werden die nicht angezeigt mit zB März nur so M\341rz

//  tft.println();             // Move cursor down a line
  tft.print("M\341rz ");    // Print the font name onto the TFT screen
//  tft.println();
//  tft.println();

Wozu pintln()? dafür ist tft.setCursor(xpos, ypos); da wen du dich einwenig mit der Lib beschäftigst dann fallen dir auf sehr viele Möglichkeiten formatierten Text ausgeben
Wen das Oben funktioniert dann in die ASCI Tabelle schauen was für Kodierung haben Umlaute.

marcelnox · February 5, 2024, 3:37pm

So wie ich das hier lesen, füge ich die fonts in den ordner hinzu und lade sie dann mit dem Script?

Beispiel

fony · February 5, 2024, 3:45pm

Gib mal das als Link nicht als CODE
In der Lib ist auch ein Beispiel

Hier ist auch was.

Jedoch ich nutze dafür
processing-4.3

noiasca · February 5, 2024, 5:15pm

Du brauchst einen Zeichensatz der mehrbytige UTF8 Zeichen darstellen kann.

Teste zunächst einmal auf Basis der mitgelieferten Beispiele.
Gefunden habe ich nur was mit einem Zeichensatz im Filesystem, Beispiel:

github.com

Bodmer/TFT_eSPI/blob/master/examples/Smooth Fonts/LittleFS/Unicode_test/Unicode_test.ino

//  Created by Bodmer 24th Jan 2017 - Tested in Arduino IDE 1.8.5 esp8266 Core 2.4.0

// The latest Arduino IDE versions support UTF-8 encoding of Unicode characters
// within sketches:
// https://playground.arduino.cc/Code/UTF-8

/*
  The library expects strings to be in UTF-8 encoded format:
  https://www.fileformat.info/info/unicode/utf8.htm

  Creating variables needs to be done with care when using character arrays:
  char c = 'µ';          // Wrong
  char bad[4] = "5µA";   // Wrong
  char good[] = "5µA";   // Good
  String okay = "5µA";   // Good

  This is because UTF-8 characters outside the basic Latin set occupy more than
  1 byte per character! A 16-bit Unicode character occupies 3 bytes!

*/

This file has been truncated. show original

Und dann halt schrittweise umbauen auf einen Zeichensatz mit den Umlauten.

pucki007 · February 5, 2024, 5:47pm

Mach dir doch die Sonderzeichen selber.
Habe ich auch gemacht.

Ist ganz einfach.

https://tchapi.github.io/Adafruit-GFX-Font-Customiser/

Du nimmst eine Schrift. Kopierst dieBitcodes in das linke Fenster.
Dann erscheinen die Zeichen unten. Du suchst dir das Sonderzeichen z.b. in ü malst das u ab, und machst 2 Pixcel drüber.

Dann abspeichern und in das Script includen.

Fertig ist

Gruß

Pucki

fony · February 5, 2024, 5:58pm

Wurde das alles ab #2 gelesen und geschaut was, was macht?
Ist einfacher als dein Vorschlag, dazu viel mehr ist auch nicht, sogar einfacher.
Noch was, was habe Vergessen, nicht jede Fontsammlung funktioniert mit TFT_eSPI.

marcelnox · February 5, 2024, 6:08pm

Ich teste es heute abend mal.
will ja nix besonders... eine einfache feine schriftart welche man groß stellen kann und sonderzeichen haben kann.

noiasca · February 5, 2024, 6:12pm

falls du mich meinst - ja
Ich vermute aber, dass es ihm nicht hilft, Oktal 341 (0xE1) in einem gepachten Zeichensatz zu nutzen, wenn er "empfangene Titel am Display" ausgeben möchte. Ich vermute er erhält das ä als UTF-8 ... also als 0xC3 0xA4 und nicht Unicode 0xE1.

pucki007 · February 5, 2024, 6:12pm

Ich nehme ja auch eine die ich bereits benutze. Und wenn ich da ein ü ä ö nicht drin habe "male " ich das nach und nutze die Font weiter. Anders gesagt ich ERWEITERE mit den Tool nur die Bitmaps.

Eine ganze Schrift neu machen bin ich zu faul. Und wie die aussieht ist mir auch egal. Sie muss passen, lesbar sein und wenn ein paar Zeichen fehlen, wie gesagt dann male ich mir die nach.

Ich wollte mir sogar selbst so ein Teil schreiben. Und bin bei der Recherche über den Aufbau von einer Font auf diesen Link gestossen.

Und auch wenn du wie üblich lästerst. Der Typ der das Teil im Link geschrieben hat, wird sich wohl auch gedacht haben das es jemand nützt.

Ich persönlich finde es jedenfalls GUT, das ich nicht 1 Zeile mehr Code in mein Programm machen muss.

Gruß

Pucki

fony · February 5, 2024, 6:23pm

Sorry wen ich Falsch gelinkt habe Du warst nicht gemeint.

fony · February 5, 2024, 6:31pm

Falsch verstanden oder habe falsch geschrieben.
Jedoch finde die Spielerei mit den Punkten witzig. Was machst du wen im Font andere zechen müssen rein zB ß oder Zeichen in anderer Sprache? Ne danke dann ist man halben tag am "Malen" was unterhalb Minute fertig habe.

marcelnox · February 5, 2024, 7:07pm

Kann man überhaupt das hier nutzen oder nur in der Adafruit Libary?
U8g2

fony · February 5, 2024, 7:17pm

Kenne die U8g2 nicht so gut jedoch der Ersteller der Lib hat eigene Schriftarten drinnen.
Was aber sagen kann, mit der Geschwindigkeit in Anzeige auf dem Display ist die viel langsamer, wen jedoch nur irgend was angezeigt werden soll ohne Menü und des Gleichen (zB. Änderung der Hintergrundfarbe ) ist die Optimal und nicht so kompliziert wie TFT_eSPI.

marcelnox · February 6, 2024, 7:23pm

Hab gestern so alle Beispiele versucht aber keine Schriftart hat mir Umlaute angezeigt... Muss es wohl doch mit der anderen Libary mal versuchen

fony · February 6, 2024, 7:35pm

Ich kann nur eins sagen alle, wirklich alle Libraries seuchen sich wie der Teufel das Weihwasser Schriftarten mit mehreren Sonderzeichen bauen.
Warum? Es gibt's nicht nur Umlaute, die Schriftart soll auf allen Arduinos funktionieren und dabei so wie möglich wenig Speicher nutzen.
Volle Schriftart auf einem Uno springt den verfügbaren Speicher, also werden nur wenige ausnahmen gemacht.
Es gibt Techniken die Schriftart in Programspeicher Laden, was wird auch sehr oft genutzt.

fony · February 6, 2024, 7:48pm

Was für System nutzt du?

marcelnox · February 6, 2024, 7:57pm

Ein ESP32. Habe mich danach gerichtet:

https://www.xtronical.com/esp32ili9341/

Werde wohl mal die Adafruit versuchen. Allerdings habe ich noch nichts über die Nutzung des integrierten SD Reader gefunden.

fony · February 6, 2024, 8:08pm

Dafür gibt`s die SD Lib die ist verankert im Core vom ESP.
Beispiel:

Mit dem Unterschied das du nutzt die Pins was sind auf dem Display.

evil17 · February 7, 2024, 4:34am

Ich nutze die u8g nicht an einem tft, sondern nur an einem oled, aber auch dort konnte ich problemlos eine Schriftart finden/nutzen die mir Umlaute zur Verfügung stellt.

Topic		Replies	Views
Umlaute mit Adafruit GFX Library Font "TomThumb" Deutsch	5	1737	June 23, 2021
Adafruit gxf Textlänge in Pixel Deutsch	3	1013	May 6, 2021
Adafruit_GFX Librarie Font Deutsch	7	1666	May 6, 2021
Problem bei Schriftartergänzung gfx Pixel Deutsch	27	840	April 8, 2023
Found available Fonts to use with Adafruit_GFX Displays	29	29347	May 6, 2021

Umlaute auf 2.4" Touch ILI9341

Related topics