Moddable Zero: Commodetto example "rotated" fails "not configured for requested rotation"

[techninja]

Just like the title says, requested rotation code:

let render = new Poco(screen, { rotation: 90 });

Seems pretty straightforward, just try to build and run "rotated" on moddable zero.

BTW, great job on this! Incredible work and kit.

[phoddie]

@techninja - thanks picking up a Moddable Zero and for the kind words.

Short answer: also set the rotation on the command line when building.

mcconfig -d -m -r 90 -p esp

Long answer: As the Poco documentation notes, "rotation is selected at build time, not run time." That document, however, doesn't explain the most straightforward way to set the rotation at build time. The Examples documentation gives several examples of setting the rotation with mcconfig. The full set of arguments to mcconfig is described in the Tools documentation where the arguments to mcconfig are enumerated.

[techninja]

Aha! Thanks so much! I did that and got it rotated just fine. Though I suspect there's something else going on? Only modification to the mini-drag example is poco rotation and build rotation set to 90

Shouldn't the calculations based off render width/height be correctly rotated? Are there other considerations to consider when rotating the screen? The dragging behavior here is also x/y flipped and incorrect.

[phoddie]

Short answer: it is working as expected, even though the result isn't what you want. ;)

The mini-drag application is written to run at a rotation of 0. It doesn't support other rotations. Changing the parameters to the Poco constructor to specify a rotation 90, signaled that the application knows how to rotate by 90. But it (clearly!) does not.

Rotation is handled automatically by Piu, our user interface framework. That is to say, when you build with -r 90 using mcconfig the image assets are rotated by 90 degrees at build time. Piu ensures any transformations required are taken care of.

But mini-drag does not use Piu, it uses the Commodetto graphics layer directly. Commodetto, which includes the Poco renderer, provides coordinate transformation when rotated. However there are situations that cannot be handled automatically. That's what you are encountering above.

Because scripts using Poco may need to take rotation into consideration is one reason the Poco constructor requires a script to include the rotation in its dictionary. That ensures that the script is expecting to run with the rotation the application was built to use. A script may check the rotation setting used at build time:

import config from "mc/config";

if (90 === config.rotation)
	;

Touch drivers return raw coordinates. This is done to keep the touch drivers focused. They rely on higher layers to perform the rotation, such as Piu does. The mini-drag sample communicates directly with the touch driver so it doesn't get the rotation handled for it.

Alas, rotation is a bit complicated on small microcontrollers. On devices with more resources, a common way to handle rotation is to render the entire screen off-screen and then rotate it when transferring to the screen. That isn't possible on the ESP8266 (and is impractical, at best, on ESP32) because there isn't enough memory to hold the frame buffer. Instead, Poco performs bitmap rotation at build time and coordinate transformation at runtime. This works well -- no additional memory is required and there is nearly-zero performance impact -- but it does put an additional burden on the developer working with lower level APIs. Using a higher level framework, like Piu, shields developers from the details.

[techninja]

Wonderful! Thank you so much for the incredible depth of response especially considering my questions are now somewhat off-topic. You've made a believer out of me and I hope this issue will remain as a useful resource for anyone else starting out. I'll be sure to keep you guys updated as work progresses, and hopefully the game I'm working on with my son will make a good example for the community. 😄

[phoddie]

Thanks for the questions. They will help us improve our examples and documentation for others. Good luck with the project!