TFT_eSPI Support proof of concept

[Greeniac]

i was able to make a proof of concept for TFT_eSPI support, even though that this is the first time programming in java script and with zero knowledge of how to use it, i was able to make it work, well reduce your expectations because its basically a copy of the u8g2 support but edited slightly to be used with TFT_eSPI, most of the tools work like (box, frame, dot, etc.) but you can't pick the color in the editor you have to change "TFT_WHITE" with the color you want in the output code, the "String" tool doesnt work at all, because it involves more coding than i can in JS, the bitmap works but its not transparent so it will just fill the background with black, but other than that, it does work fine.

in order to use it, you have to replace /src/platforms/u8g2.ts with the following:

import {imgDataToXBMP, toCppVariableName} from '../utils';
import {Platform} from './platform';
import {AbstractLayer} from '../core/layers/abstract.layer';
import {DotLayer} from '../core/layers/dot.layer';
import {LineLayer} from '../core/layers/line.layer';
import {TextLayer} from '../core/layers/text.layer';
import {BoxLayer} from '../core/layers/box.layer';
import {FrameLayer} from '../core/layers/frame.layer';
import {CircleLayer} from '../core/layers/circle.layer';
import {DiscLayer} from '../core/layers/disc.layer';
import {IconLayer} from '../core/layers/icon.layer';
import {PaintLayer} from '../core/layers/paint.layer';
import {fontTypes} from '../draw/fonts/fontTypes';

const u8g2FontMap = {
    'f4x6_tr': "4x6_tr",
}

export class U8g2Platform extends Platform {
    public static id = 'u8g2';
    protected name = 'TFT_eSPI';
    protected description = 'TFT_eSPI';
    protected fonts: TPlatformFont[] = [
        fontTypes['4x6_tr'],
        fontTypes['5x8_tr'],
        fontTypes['haxrcorp4089_tr'],
        fontTypes['helvB08_tr'],
        fontTypes['6x10_tr'],
        fontTypes['profont22_tr']
    ];

    constructor() {
        super();
        this.features.hasInvertedColors = true;
        this.features.defaultColor = '#FFFFFF';
    }

    public generateSourceCode(layers: AbstractLayer[], ctx?: OffscreenCanvasRenderingContext2D): TSourceCode {
        const source = super.generateSourceCode(layers, ctx);
        source.declarations.unshift('tft.init();');
        source.declarations.unshift('tft.fillScreen(TFT_BLACK);');
        source.declarations.unshift('tft.setRotation(1);');
        return source;
    }

    addDot(layer: DotLayer, source: TSourceCode): void {
        source.code.push(`tft.drawPixel(${layer.position.x}, ${layer.position.y}, TFT_WHITE);`);
    }
    addLine(layer: LineLayer, source: TSourceCode): void {
        const {p1, p2} = layer;
        source.code.push(`tft.drawLine(${p1.x}, ${p1.y}, ${p2.x}, ${p2.y}, TFT_WHITE);`);
    }
    addText(layer: TextLayer, source: TSourceCode): void {
        const fontName = `u8g2_font_${u8g2FontMap[layer.font.name] ?? layer.font.name}`;
        source.code.push(`tft.setTextFont(TFT_WHITE);
tft.drawStr(${layer.position.x}, ${layer.position.y}, "${layer.text}", TFT_WHITEE);`);
    }
    addBox(layer: BoxLayer, source: TSourceCode): void {
        source.code.push(`tft.fillRect(${layer.position.x}, ${layer.position.y}, ${layer.size.x}, ${layer.size.y}, TFT_WHITE);`);
    }
    addFrame(layer: FrameLayer, source: TSourceCode): void {
        source.code.push(`tft.drawRect(${layer.position.x}, ${layer.position.y}, ${layer.size.x}, ${layer.size.y}, TFT_WHITE);`);
    }
    addCircle(layer: CircleLayer, source: TSourceCode): void {
        const {radius, position} = layer;
        const center = position.clone().add(radius);
        source.code.push(`tft.drawCircle(${center.x}, ${center.y}, ${radius}, TFT_WHITE);`);
    }
    addDisc(layer: DiscLayer, source: TSourceCode): void {
        const {radius, position} = layer;
        const center = position.clone().add(radius);
        source.code.push(`tft.fillCircle(${center.x}, ${center.y}, ${radius}, TFT_WHITE);`);
    }
    addImage(layer: IconLayer | PaintLayer, source: TSourceCode): void {
        let image;
        if (layer instanceof IconLayer) {
            if (!layer.image) return;
            image = layer.image;
        } else if (layer instanceof PaintLayer) {
            if (!layer.position || !layer.size.x || !layer.size.y) return;
            image = layer
                .getBuffer()
                .getContext('2d')
                .getImageData(layer.position.x, layer.position.y, layer.size.x, layer.size.y);
        }
        const XBMP = imgDataToXBMP(image, 0, 0, layer.size.x, layer.size.y);
        const varName = `image_${toCppVariableName(layer.name)}_bits`;
        const varDeclaration = `static const unsigned char ${varName}[] = {${XBMP}};`;
        if (!source.declarations.includes(varDeclaration)) {
            source.declarations.push(varDeclaration);
        }
        source.code.push(
            `tft.drawXBitmap( ${layer.position.x}, ${layer.position.y}, ${varName}, ${layer.size.x}, ${layer.size.y}, TFT_WHITE , TFT_BLACK);`
        );
    }
    addIcon(layer: IconLayer, source: TSourceCode): void {
        return this.addImage(layer, source);
    }
}

[sbrin]

Nice! Thank you for your contribution. I just need to figure out how to manage images and fonts for that library. Will keep you informed about progress.

[sbrin]

Hey, we have a PR ready to review, sorry for delay 🫠
#156

You can check how it works here https://tft-espi-platform.lopaka-dev.pages.dev/