ESP32 + 1.44' SPI 128x128 + PIU mirror display.

[AlexLucardGoodman]

Good Morning, hope everyone is having a great friday.

I got my hands on a 1.44'128x128 SPI screen and decided to give it a try.
I followed the wiring guide in https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/displays/wiring-guide-generic-2.4-spi-esp32.md and was able to run some examples with the "mcconfig -d -m -p esp32/moddable_zero" command.
BUT... as i started to test PIU i noticed the screen is being mirrored (the moddable sdk examples are also mirrored). The label "TEST 1" in the image below comes out as "1 TSET", as one would see it in front of a mirror. Theres also some erroneous random pixels along one of the sides and bottom. I've been searching for the answer to this in the moddable docs but i havent been able to solve this issue.

Heres the manifest im using:

{
	"include": [
		"$(MODDABLE)/examples/manifest_base.json",
		"$(MODDABLE)/examples/manifest_piu.json"
	],
	"modules": {
		"*": "./main"
	},
	"defines": {
		"ili9341": {
			"width": 128,
			"height": 128
		}
	},
	"config": {
		"touchCount": 0,
		"screen": "ili9341",
		"touch": ""
	},
	"resources":{
		"*-alpha": [
			"$(MODDABLE)/examples/assets/fonts/OpenSans-Regular-24"
		]
	},
	"platforms": {
		"esp32": {
			"config": {
				"rotation": 0,
				"autorotate": false
			}
		}
	}
}

Test code:

import {} from "piu/MC";

let textApplication = Application.template($ => ({
	skin:backgroundSkin,
	contents: [
	    sampleLabel
	]
}));

const backgroundSkin = new Skin({ fill:"yellow" });

const textStyle  = new Style({ font:"OpenSans-Regular-24", color:"black"});

const sampleLabel = new Label(null, {
	style: textStyle,
	string: "TEST 1",
	top: 0, bottom: 0, left: 0, right: 0,
});

export default new textApplication(null, { displayListLength:4096, 
	commandListLength:4096, touchCount:0 });

Thank you in advance!

[phoddie]

Cool that you have this working. Every display is a little different, which is why the display driver has many configuration options. You probably need to adjust some of them.

The ILI9341 driver (used here) documentation mentions the MODDEF_ILI9341_FLIPX define, which is what you probably need to use here to reverse the mirroring.

The garbage pixels on the edges can probably be fixed using MODDEF_ILI9341_COLUMN_OFFSET and MODDEF_ILI9341_ROW_OFFSET. I can't quite determine the precise values from your photo f, so you'll have to experiment a bit.

Here's what configuring both of those would look like in your project's manifest.json:

"defines": {
	"ili9341": {
		"flipx": true,
		"column_offset": 4,
		"row_offset": 4
	}
}

You can read more about the "defines" section of the manifest in the defines documentation. The definitive guide to the configurable options in the ILI9341 display driver is its source code. ;)

[AlexLucardGoodman]

That worked great! and also shows me how to go about some next drivers/hardware I will be testing. Im very happy to have the screen all set to get my hands on PIU after all the reading.
Thanks for the fast reply, I deeply admire the work thats being done with the Moddable SDK.

[phoddie]

Thanks so much! I look forward to seeing what you do next.