Close
0%
0%

Create Colored BMP Fonts for Arduino

How to create Colored Fonts for Arduino / TFT

Similar projects worth following
Download Letter Bitmap and crop all Letters to Files (Very Fast). Then convert Files to BMP and use any/my Tool to make Bytearray as constant or Image.bin for Spiff.

The "P#" ordered Files are Ready for "RA8875.exe" to create Image for Flash Chip.
RGB24: ILI9488 (18bit)
RGB565: ILI9341, RA8875
RGB8: RA8875 etc.

Under Files you can find my tool to convert Bitmaps to chararray or Image.bin as RGB24,RGB565,RGB8 and under last Instruction how it works.


Code:

int x=0; int y=0; int width=90; int height=100;
String text="HELLO"

int length = text.length();
for (int l = 0; l < length; l++)
{
tft.setWindow(x+(l*width), y, x+(l*width) + width - 1, y + height - 1);

uint32_t charpos = (text.charAt(l) - (int)61) * width * height * 3);

byte *startbyte= binarray+charpos; 
vspi->writeBytes((uint8_t*)startbyte, width * height * 3); 
}

Complete Code:

#include "FS.h"
//#include "SPIFFS.h"
#include <TFT_eSPI.h>
#include <SPI.h>

TFT_eSPI tft = TFT_eSPI();
 
#define SPI2_NSS_PIN 28
static const int spiClk = 40000000; // 1 MHz
//SPIClass * vspi = NULL;
 
int CS_PIN =5;
unsigned long bgstart = 675000UL;
void setup() {
  Serial.begin(115200);
  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  btStop();
 
 
  //vspi = new SPIClass(VSPI);
 SPI.begin();
 
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(1);  // landscape
 
  tft.fillScreen(TFT_BLACK);
  //Background
  bigImage(702000, 702000, 0, 0, 480, 320, 0xFFFFFF);
  //void DrawString( uint32_t check, int x, int y, int width, int height, String text, bool compare, bool transp,int asciioffset)
  DrawString(  0  , 0, 0, 90, 100, "HELLO", false, false, 65);
  DrawString(  0  , 0, 100, 90, 100, "ITS", false, false, 65);
  DrawString(  0  , 0, 200, 90, 100, "FUN", false, false, 65);
}
void loop() {
 
}
 
void DrawString( uint32_t check, int x, int y, int width, int height, String text, bool compare, bool transp, uint32_t asciioffset) {
  int lengthl = text.length();
  for (int l = 0; l < lengthl; l++)
  {
    uint32_t charpos = ((uint32_t)((uint32_t)text.charAt(l) - (uint32_t)asciioffset) * (uint32_t)width * height * 3);
 
    //void transparentImage(uint32_t startpic, uint32_t startbackground, int x, int y, int width, int height, uint32_t tcolor)
    transparentImage( check + charpos, 702000, x + ( l * width), y, width, height, 0xFFFFFF);
    Serial.println(charpos);
 
  }
}
 
void transparentImage(uint32_t startpic, uint32_t startbackground, int x, int y, int width, int height, uint32_t tcolor) {
  tft.setWindow(x, y, x + width - 1, y + height - 1);
  //read background clipping
  File f = SPIFFS.open( "/test.bin", "r");
  char *buf = (char*)malloc(width * height * 3);
  char *temp = (char*)malloc(width * 3);
  unsigned long offset = 0;
  for (int i = 0; i < height; i++) {
    // unsigned long offset = startbackground + (x * width*3 - (width*3 - (width-y*3)) + (i * width * 3));
    unsigned long offsetbg = startbackground + ((y + i) * 480 * 3 ) + (x * 3) ;
    f.seek(offsetbg, SeekSet);
    f.readBytes((char*)temp, width * 3) ;
    memcpy( buf + (i * width * 3), temp, (width * 3) );
 
  }
 
  for (int i = 0; i < height; i++) {
    unsigned long offset = startpic + i * width * 3;
    f.seek(offset, SeekSet);
    f.readBytes((char*)temp, width * 3) ;
    for (int h = 0; h < width * 3; h = h + 3)
    {
      uint32_t bp = temp[ h];
      bp = (bp << 8) | temp[h + 1];
      bp = (bp << 16) | temp[ h + 2];
      if (bp >= 0x111111 || y + i > 300) {
        buf[width * i * 3 + h] = temp[h];
        buf[width * i * 3 + h + 1] = temp[h + 1];
        buf[width * i * 3 + h + 2] = temp[h + 2];
      }
    }
  }
 
  SPI.beginTransaction(SPISettings(spiClk, MSBFIRST, SPI_MODE0));
  digitalWrite(CS_PIN, LOW); //pull SS slow to prep other end for transfer
  SPI.writeBytes((uint8_t*)buf, width * height  * 3);
  digitalWrite(CS_PIN, HIGH); //pull ss high to signify end of data transfer
  SPI.endTransaction();
  f.close();
  Serial.println("test");
  free(buf);
  free(temp);
}
 
void bigImage(uint32_t startpic, uint32_t startbackground, int x, int y, int width, int height, uint32_t tcolor) {
  tft.setWindow(x, y, x + width - 1, y + height - 1);
  //read background clipping
  File f = SPIFFS.open( "/test.bin", "r");
  char *buf = (char*)malloc(width * height * 3);
  char *temp = (char*)malloc(width * 3);
  unsigned long offset = 0;
 SPI.beginTransaction(SPISettings(spiClk, MSBFIRST, SPI_MODE0));
  digitalWrite(CS_PIN, LOW); //pull SS slow to prep other end for transfer
  for (int i = 0; i < height; i++) {
    unsigned long...
Read more »

HelloExample_32_8266.zip

Both Examples ESP32/ESP8266 with Spiff data folder

x-zip-compressed - 1.05 MB - 04/05/2019 at 20:05

Download

PicFolder.zip

Example Pic Folder with Converter Tool

x-zip-compressed - 549.97 kB - 03/29/2019 at 19:23

Download

TFT-Tool.jar

TFT Tool

Java Archive - 7.41 kB - 03/29/2019 at 19:21

Download

HelloExample.zip

Complete Code SPI, with Spiff data folder including test.bin.

x-zip-compressed - 538.17 kB - 03/28/2019 at 17:48

Download

  • 1
    Download Picture

    Download any Picture with Letters from FreePik.com

  • 2
    Gimp:Crop Letters as Picture

     For every Letter:

    1. Cut the Letter with Rect Select Tool

    2. Copy Selected Area (Ctrl +C)

    3. Paste as new Picture (Shift+Ctrl+V)

    4. Image-> Crop To Content (You can add a shortcut in Preferences->Surface->Shortcuts, as Example Ctrl+Shift+B)

    5. Save as Example "A.xcf" (Ctrl+S)

  • 3
    Gimp: Install Davids Batch Processor Plugin

    1 Input: Add all XCF Files

    2 Output as BMP

View all 7 instructions

Enjoy this project?

Share

Discussions

Papyrus font generator wrote 01/06/2024 at 07:51 point

Hi thanks for use full information.Fonts best script place is chat gpt generate script all requirments and all conditions fulfil and use this tool of write best captions, descriptions, and text use Papyrus font generator easy to use and mobile friendly.

https://fontgeneratorfancy.com/papyrus-font/

  Are you sure? yes | no

meuviolino wrote 09/16/2019 at 01:30 point

Hi Schupp, memories! How are you?
Have you done anything else? I am dwelling on some watch codes.
Hugs,

Daniel

  Are you sure? yes | no

meuviolino wrote 04/29/2019 at 02:14 point

Hi Schupp, Greetings!
Have you done anything else with this code? Thank you

  Are you sure? yes | no

Schupp wrote 04/29/2019 at 08:17 point

Hi meuvolino, i tested HelloExample_32_8266.zip

On ESP32 i used similiar code...


https://hackaday.io/project/163036-funny-clock-timer


  Are you sure? yes | no

meuviolino wrote 04/29/2019 at 17:34 point

Yes, HelloExample worked on esp8266 and it looked beautiful!

How to open the 'test' file inside the data folder?
And that other sketch 'Timer with RTC Clock and Temperature' was also beautiful but, because it is a Clock, the images should appear less and the numbers of the Hours appear more; the pictures are a little bit extravagant. Do you have the complete sketch? Thank you

  Are you sure? yes | no

meuviolino wrote 04/29/2019 at 20:10 point

Hi Schupp!

In this last sketch, I would leave a background image and the text of the Clock as in this photo: https://hackaday.io/project/163140/gallery#78911f616a04f876ff901316af1cfbad

I think it would look nice!

  Are you sure? yes | no

meuviolino wrote 03/22/2019 at 01:15 point

Sorry but, do you have any code ready for the ILI9488?

  Are you sure? yes | no

meuviolino wrote 03/22/2019 at 01:12 point

Okay, I'll try; thank you

  Are you sure? yes | no

meuviolino wrote 03/17/2019 at 19:04 point

Best regards
Sorry, I did not understand the procedure.
First, I downloaded the TFT-Tool and extracted it to local disk D. After running it, it opens an 'Output Format' screen with a drop-down menu > RGB24, etc, etc., and Picture Count with a blank bar. What should I do in Picture Count?
In the site freepik.com is there any tool for editing and cutting the letters and/or figures and saving in .BMP?
I did not understand this: "Place Tool in Picture Folder with Named Pictures" P # Number.bmp "and select Output Format". ((is the TFT-Tool?)
Would you have the complete code posted on the page for an ILI9488?
This: String text = "HELLO"

Thank you very much

  Are you sure? yes | no

Schupp wrote 03/17/2019 at 20:43 point


Schupp
wrote a few seconds ago
Hi,

for cutting/crop the Pictures you need Gimp and cut it free Hand. Next Point is to rename the Pictures to 001.bmp, 002.bmp etc. and  set the highest BMP Number in Count Textfield.

It creates a File as Array Output in C++. Show the Video for full Procedure.

  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates