Inverse of Graphics.asUrl

Posted on
  • Hi Gordon,

    Is there an inverse equivalent of https://www.espruino.com/Reference#l_Gra­phics_asURL ? I.e if I've got a base64 encoded image, can I convert it to something I can pass to Graphics to display on the screen?

  • It depends on what exactly the image was encoded as... If it's a base64 image of raw bits then you can just shove it in an object with width, height and buffer fields like http://www.espruino.com/Image+Converter does (http://www.espruino.com/Graphics#images-­bitmaps)

    However if it's a windows bitmap file (which is what asURL does) then you can convert it to a binary form with atob(...) and then feed that into the bitmap loader module which will give you an image which you can draw with graphics as well: http://www.espruino.com/BMPLoader

    If a normal PC application is encoding an image to a URL it may well end up encoding it as a PNG of JPEG image - and I'm afraid there aren't any decoders for those in Espruino though.

  • Ah, perfect. I just need to read your docs better. I was stuck on http://www.espruino.com/Reference#Graphi­cs looking through all the functions and didn't see the link to http://www.espruino.com/Graphics which would have lead me to http://www.espruino.com/BMPLoader

  • Great! If you think of any search keywords that might have helped you find those pages better, please can you let me know?

    If you click the This page is auto-generated from GitHub link at the bottom of the screen you should go to the page's source on GitHub where it's got a * KEYWORDS: ... list. If there's anything missing it's trivial for me to add, and it might help someone else out in the future.

  • I have played with the idea of having an easy way to debug graphics locally and made the following module https://gist.github.com/opichals/8f74cc4­94a3e2d7cf122c6013e8935cf

    It wraps the Graphics.createArrayBuffer by calling require('./webGraphics').add(Graphics) and exposes http://localhost:8000 endpoint with canvas renderer for Espruino.

  • Nice! There's g.dump() which gets picked up and displayed in the Web IDE: https://youtu.be/YQtLmu8-aHw?t=271

    But that doesn't update in real-time like yours. Actually with a little bit of abstraction around button handling you could make it so you could remotely view and also control a device. It'd be a really neat way of quickly making a web interface for a device.

  • @opichals could you give me a full usage example?

    Not sure if I'm just being stupid but is your module supposed to get flashed to the Pixl? If so then how does it create a websocket server? I'm just getting ">Uncaught InternalError: Not connected to the internet" as an error.

  • I think @opichals is actually running it on an ESP32, however the code should work if you add an ESP8266 to the Pixl, maybe something like http://www.espruino.com/arduino-esp8266

  • It should be capable of working on boards but I have actually only ran it on my OSX laptop.

    I guess the bandwidth and the lack of WS binary support might be a little problematic memory-wise as it is getting 8kB (screen buffer for 128x64 1bpp) over to the browser on every flip() call.

  • @opichals If you are running your code snippet on your local machine, then where are you running the code that does the calls to other Graphics functions like drawString, etc?

  • @dave_irvine I run the whole application on my local machine. I mock any HW stuff and so the application graphics rendering is done as usual but uses some fake data to render.

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

Inverse of Graphics.asUrl

Posted by Avatar for dave_irvine @dave_irvine

Actions