BlueCore Tech TFT Layout Designer: Position Text and Export RGB565 RAW for Arduino

Hello world! Today i made a visual TFT layout designer for Arduino 480x320 dashboards. Instead of guessing X/Y coordinates, recompiling and uploading after every small change, you can load your background, place text fields and export their coordinates.

I developed this Windows tool while building my BlueCore Tech Precious Metals Display. It also exports the background as an RGB565 RAW image for compatible Arduino display code. The preview is a design aid: the exported coordinates still need to be connected to your sketch’s drawing functions.

This guide uses BlueCore TFT Layout Designer v2.0, by Danny van den Brande — BlueCore Tech. The software is provided as individual files so you can inspect and run the original Python source.

• Windows computer.

• Python 3 with Tkinter, the Python launcher and pip.

• Pillow, installed using the supplied requirements file.

• A 480x320 PNG, JPG or BMP background, or one of the examples.

No Arduino is needed to design a layout. To use the export on hardware, you need a compatible display, its working Arduino sketch and an SD card if your sketch loads RAW graphics.

Download BlueCore_TFT_Layout_Designer_v2_0.py and Designer-requirements.txt from this step into one new folder. Download the original bluecore_logo.png image into that folder too; restore its exact filename if your browser gives it a different name. The Python file is the original unchanged main.py with a descriptive download name.

Install Python 3 with Tkinter and the Python launcher. Open a terminal in your new folder and run:

py -m pip install -r Designer-requirements.txt

py BlueCore_TFT_Layout_Designer_v2_0.py

This designer requires Pillow. It is separate from Precious Metals Live v2.1, whose requirements are requests and pyserial. Do not mix their requirements files. After confirming startup, pyw BlueCore_TFT_Layout_Designer_v2_0.py launches without a console window.

Click Load 480x320 Background and choose a PNG, JPG or BMP. For predictable results, prepare artwork at exactly 480 pixels wide by 320 pixels high. Other sizes can be resized by the program, but may change proportions.

Use the attached examples or your own artwork. Keep changing numbers out of the background: labels, borders and decoration belong in the image; sensor values, prices and time will be drawn by Arduino.

Click Add Text Field. Select the field in the list and give it a clear Name / Arduino prefix, such as GOLD_OZ or TEMPERATURE. Use unique names containing letters, numbers and underscores, starting with a letter.

Enter representative preview text. Test both long and short values, including minus signs or decimal places your project needs. The preview text is a design sample; it is not a live sensor input.

Drag a text field on the 480x320 preview, or edit its X and Y values for fine adjustments. Larger X moves right; larger Y moves down. The live mouse coordinates and cyan crosshair help identify the field anchor.

Select a different field from the list before editing it. Use Apply Changes after editing properties if necessary, and check the selected name before deleting a field.

Choose SmallFont or BigFont and the desired colour. The designer uses these specific anchor meanings:

LEFT: text sits to the left of X.

CENTER: text is centred on X.

RIGHT: text sits to the right of X.

These labels describe this tool’s placement relative to the anchor. They do not automatically change how UTFT draws at a numeric X coordinate. Treat the desktop preview as a placement guide and check the result on your display.

Use Save Project to store the fields and background path as JSON. This preserves the editable layout for later changes. Use Load Project to reopen it.

The JSON references the background file; it does not embed the artwork. Keep the image available. When moving to another computer or folder, load the project, select the background again with Load 480x320 Background and save the project at its new location.

Choose Export Arduino Defines. The output contains X/Y definitions for each field, with comments describing its font, colour and alignment.

It is not a complete Arduino sketch. Copy the definitions into your working display project and reference them in its print calls. Set the intended font and colour in Arduino code. Exported alignment comments must also be implemented in the drawing code.

For a left-edge print API, rightward text can start at the anchor; centred text needs its measured width divided by two subtracted; leftward text needs its full width subtracted. Measure using the actual display font, and keep text within the display bounds.

Choose Export Background RAW RGB565. The export contains the background only, without preview text. It is 480x320 RGB565, two bytes per pixel, with no image header:

480 × 320 × 2 = 307,200 bytes.

The exporter writes the high byte first. The tested BlueCore UTFT_SdRaw workflow uses RAW_SWAP 0. Copy the RAW file to the SD location and filename expected by your sketch. Merely renaming a PNG to .RAW does not convert it.

Download the example background and BlueCore_TFT_Layout.json.txt. Remove the final .txt so its name is BlueCore_TFT_Layout.json, then load it in the designer. Its saved background path belongs to my PC: use Load 480x320 Background to select your downloaded Background1.png and save again.

The example displays fields for gold, silver, platinum, palladium and update time. The accompanying header and RAW file demonstrate exports. This side-by-side layout differs from the original Precious Metals dashboard, so use matching artwork and coordinates together.

First get your display and SD loading working with their own correct library, wiring and controller settings. This tool does not configure a TFT controller or upload firmware.

Load the exported background, select the intended font and colour, then draw your live values using the exported positions. Test long values and clearing old digits. A shorter replacement value can leave old pixels unless your code restores the background or clears the affected region.

The BlueCore Precious Metals project reloads the full background before drawing each packet. Other projects can choose a suitable redraw strategy.

Build the Arduino Precious Metals Display: complete hardware tutorial and downloads.

No window: run the normal py command in a terminal and read the error; install Designer-requirements.txt with that same Python.

Missing logo: keep the original bluecore_logo.png beside the Python file.

Project opens without artwork: reselect the moved background and save.

RAW size is wrong: use the built-in 480x320 RAW export and check for 307,200 bytes.

Text differs on hardware: check font, alignment handling, X/Y values and display orientation.

Colours differ: check your actual display controller, initialization and byte order; the designer cannot identify hardware.

Use this workflow for weather stations, GPS dashboards, clocks, workshop displays or sensor panels. Build the working version first, then change artwork and layout together. — Danny van den Brande, BlueCore Tech.