Inverse of Graphics.asUrl

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.