gfx 2.0 vector canvas performance test - YouTube[^]
22 frames per second on an ESP32 WROVER based M5 Stack Core2 @ 320x240 (clock is 128x128)
mem usage: 34.66KB
code (forgive the lengthy paste, but I wanted to give a good idea of how much it was doing per frame, and what that looks like)
tbmp.fill(tbmp.bounds(),color_t::white);
pointf offset(0, 0);
pointf center(0, 0);
time_t time = current_time;
float rotation(0);
float ctheta, stheta;
ssize16 size = (ssize16)clock_canvas.dimensions();
rectf b = gfx::sizef(size.width, size.height).bounds();
b.inflate_inplace(-face_border_width - 1, -face_border_width - 1);
float w = b.width();
float h = b.height();
if(w>h) w= h;
rectf sr(0, w / 30, w / 30, w / 5);
sr.center_horizontal_inplace(b);
center = gfx::pointf(w * 0.5f + face_border_width + 1, w * 0.5f + face_border_width + 1);
clock_canvas.fill_color(face_color);
clock_canvas.stroke_color(face_border_color);
clock_canvas.stroke_width(face_border_width);
clock_canvas.ellipse(center, {center.x - 1, center.x - 1});
clock_canvas.render();
bool toggle = false;
clock_canvas.stroke_color(tick_border_color);
clock_canvas.fill_color(tick_color);
clock_canvas.stroke_width(tick_border_width);
for (float rot = 0; rot < 360.0f; rot += rot_step) {
rotation = rot;
update_transform(rotation, ctheta, stheta);
toggle = !toggle;
if (toggle) {
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
} else {
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2 - sr.height() * 0.5f));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2 - sr.height() * 0.5f));
}
clock_canvas.render();
}
sr = gfx::rectf(0, w / 40, w / 16, w / 2);
sr.center_horizontal_inplace(b);
rotation = (fmodf(time / 60.0f, 60) / 60.0f) * 360.0f;
update_transform(rotation, ctheta, stheta);
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y2 + (w / 20)));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
clock_canvas.fill_color(minute_color);
clock_canvas.stroke_color(minute_border_color);
clock_canvas.stroke_width(minute_border_width);
clock_canvas.render();
sr.y1 += w / 8;
rotation = (fmodf(time / (3600.0f), 12.0f) / (12.0f)) * 360.0f;
update_transform(rotation, ctheta, stheta);
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y2 + (w / 20)));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
clock_canvas.fill_color(hour_color);
clock_canvas.stroke_color(hour_border_color);
clock_canvas.stroke_width(hour_border_width);
clock_canvas.render();
sr.y1 -= w / 8;
rotation = ((time % 60) / 60.0f) * 360.0f;
update_transform(rotation, ctheta, stheta);
clock_canvas.move_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y1));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x2, sr.y2));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1 + sr.width() * 0.5f, sr.y2 + (w / 20)));
clock_canvas.line_to(translate(ctheta, stheta, center, offset, sr.x1, sr.y2));
clock_canvas.fill_color(second_color);
clock_canvas.stroke_color(second_border_color);
clock_canvas.stroke_width(second_border_width);
clock_canvas.render();
draw::bitmap(tbmp2,tbmp2.bounds(),tbmp,tbmp.bounds());
lcd_begin_draw();
lcd_flush_bitmap(trect.x1,trect.y1,trect.x2,trect.y2,tbmp2.begin());
Check out my IoT graphics library here:
https://honeythecodewitch.com/gfx
And my IoT UI/User Experience library here:
https://honeythecodewitch.com/uix
|