Storing image on a Puck.JS

Posted on
  • Hi,
    I've been asked to store and display an image using on a Puck.JS.
    My problem is how should I store it and if I store it where should I display it ?
    Thank you very much,
    Have a nice day

  • Hi - that's a bit broad :)

    For displaying, you have a bunch of displays that are easy to connect and use (listed on but most other ones could be made to work. It's probably best to stick to black and white displays though if you're intending to use the Puck for power (since the CR2032 will struggle to power bigger displays)

    Although by far the easiest solution is just to get a Pixl.js board which is basically a Puck.js with a display on it already.

    For storage - for one image, just use the image converter tool:

    It'll give you some code that you can then store in your program and draw with g.drawImage(img, 10, 10);. For multiple images you could look at storing the binary data directly in flash using the Storage library.

  • I'm sorry fo being broad, and thank you for your reply. The thing is I'm supposed to manipulate the puck in order to be able to store image and display it on a peripheral, an app or else.

  • Ahh, ok :) If you're going to use an app then take a look at for an easy way to communicate from a website.

    I get the impression someone's set you this as an exercise, so me giving you a bunch of code isn't a great idea.

    So I guess you want to search around and find out how you can upload a file to a webpage, get the binary data from it, then convert it to something that's easy to send to Puck.js in a JS String. Then you could just save that data into a variable in Puck.js, and then you just have to reverse the steps to get the actual image at the end.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

Storing image on a Puck.JS

Posted by Avatar for user99676 @user99676