Animations by drawing to off screen buffer

[espruino-discuss2]

Posted at 2022-04-22 by Sir_Indy

Hi, I'm looking for some help on how to animate watchfaces. It's been mentioned a few times that it's possible to draw things to an off screen buffer, then move that onto the screen, but I'm not clear how.

If anyone knows and can point me to documentation or an example I'd be very grateful. I'm aiming to make something like the attached screenshots, to add to my Fuzzy Text Clock

Screenshots from here: https://store-beta.rebble.io/app/555283c7efff0cc8e50000b0, https://store-beta.rebble.io/app/5616a3d3c902b64981000090, https://apps.rebble.io/en_US/application/58060628c988667eaa00009e

---

Attachments:

• liEl0xUhSqaFpWUTOgx5.gif
• 5tecyanTBWwHgmLW1zVU.gif
• fDoNvU3rRbuUvaAFC75Q.gif

[espruino-discuss2]

Posted at 2022-04-23 by Nanobyte

http://www.espruino.com/Reference#l_Graphics_createArrayBuffer

---

Posted at 2022-04-23 by yngv126399

you'll need a buffer for each moving part (which could eat a lot of memory on Bangle1), set timeouts to loop through each "frame", calculating coordinates to copy from buffer to the lcd, and you may see some lag & jitter as you're asking the little cpu to do a lot of work (assuming Bangle1 again).

Bangle2 is more capable of this and could probably handle the ones you've shared fine. which watch are you targeting?

---

Posted at 2022-04-28 by Sir_Indy

Thanks for the help, I've had a look and decided it's too complicated for me at the moment! I'll be keeping things simple until I have a bit more practice with javascript and the BangleJS2.
I'd like to get some snazzy animations eventually though, the BangleJS2 is a great smart watch for me, just needs a bit of pizzazz to impress my less techy friends!