-
Notifications
You must be signed in to change notification settings - Fork 236
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How do i print a bitmap image logo on a M5Dial Display ? #1280
Comments
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:
Note that the project uses a PNG image. This is the preferred format for images in the Moddable SDK. The build tools ( 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 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(); |
Here's a variation of the example that uses an alpha channel. 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 |
Closing as the question has been answered. |
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);
}
The text was updated successfully, but these errors were encountered: