How do i print a bitmap image logo on a M5Dial Display ?

[RiteshK551]

Hello,

I am trying to print a logo bitmap on a M5Dial Display, Unable to print
Other text and simple features i am able to do

this is the code

#include <M5Dial.h>

const uint8_t smiley_bmp[] = {
0b00111100,
0b01000010,
0b10100101,
0b10000001,
0b10100101,
0b10011001,
0b01000010,
0b00111100};

void setup() {
M5.begin();
M5.Lcd.begin();
M5.Lcd.setRotation(1);
}

void loop() {
// Draw the bitmap at position (0, 0)
M5.Lcd.drawBitmap(0, 0, 8, 8, smiley_bmp);
delay(5000);
}

[phoddie]

Thank you for your question. There are many examples of using graphics for both Commodetto and Piu. Commodetto contains Poco, is our graphics library. It is a relatively low-level API for drawing. Piu is our user interface framework. It builds on Commodetto to provide a high-level API for building UIs. (Poco docs are here. Piu docs are here.)

Poco will work well for drawing a logo. I created a small project to show how to do that. You can download the project here. You build it like any Moddable SDK project:

cd ./logo (ADJUSt PATH FOR YOUR SYSTEM)
mcconfig -d -m -p esp32/m5dial

Note that the project uses a PNG image. This is the preferred format for images in the Moddable SDK. The build tools (mcconfig here) will convert it to a BMP for use on the M5 Dial.

The JavaScript source code is straightforward. First, it imports the modules it needs:

import parseBMP from "commodetto/parseBMP";
import Poco from "commodetto/Poco";
import Resource from "Resource";

Next, it creates a Poco graphics renderer for drawing to the screen. It also gets the logo image as a BMP object:

const render = new Poco(screen);
const logo = parseBMP(new Resource("logo-color.bmp"));

Finally, it uses Poco to erase the screen to white and then draw the BMP logo in the center of the display:

render.begin();
	render.fillRectangle(render.makeColor(255, 255, 255),0, 0, render.width, render.height);
	render.drawBitmap(logo, (render.width - logo.width) / 2, (render.height - logo.height) / 2);
render.end();

[phoddie]

Here's a variation of the example that uses an alpha channel.

logo-alpha.zip

Here's a screen recording of this example running in the simulator on a round display. It should look about the same on the M5Dial.

round.alpha.logo.mov

[phoddie]

Closing as the question has been answered.