screenshots from the emulator

Posted on
  • Is there a possibility to take screenshots from an emulated Bangle.js display?

    I've implemented a solution but that's a hack and requires access to the browser console - but there should already be a way to take screenshots, shouldn't it?

  • Mon 2020.01.06

    Is the inquiry to create an archive image using the emulator, of a moment in time and save it to the PC hard drive as a .jpg for instance?­516/­ml?codeurl=https://raw.githubusercontent­.com/espruino/BangleApps/master/apps/tre­x/trex.js&upload

    Using the above as possible uses for explanation, otherwise isn't what you are asking done by a feature of the PC itself?

    such as Shft+Prt Screen on a Windows PC

  • Good morning!

    My intent is to get a screenshot of the emulated Bangle.js display only, not an entire PC screen or an entire browser window.

    To illustrate it a bit: my current approach is:

    1. load Bangle.js emulator
    2. open browser console
    3. run the following command

    $('<a id="ScreenshotButton" class="icon-save lrg"></a>').on('click', () => {'','Bangle.js Emulator Screenshot').document.write('<a href="' + $('#gfxcanvas')[0].toDataURL().replace(/­^data:image\/png/,'data:application/octe­t-stream') + '" download="Bangle-Screenshot.png">click to download</a>')

    This adds another button on the left side (with a floppy disk icon) which, when pressed, opens a new tab with a download link. Clicking that link saves the requested screenshot to disk.

    That's definitely a hacker-like approach - but it gives me the possibility to quickly get screenshots of running Bangle.js programs...

  • That looks great - it sounds like a good idea to add something like that.

    I guess we could shift buttons 1/2/3 up a bit and add a smaller icon for doing a screenshot?

    Definitely wouldn't be too hard to modify:­DE/blob/gh-pages/js/plugins/emulator.js#­L96

  • My "hack" already allowed me to produce quite a number of screenshots - thus, it would definitely be a good idea to add similar!

    Thanks in advance for your effort!

  • Ok, added - it'll go live next time I update the IDE

  • You are our hero!

    Thanks a lot, you've been really busy today!

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

screenshots from the emulator

Posted by Avatar for Andreas_Rozek @Andreas_Rozek