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?

    http://forum.espruino.com/comments/15006­516/

    https://www.espruino.com/ide/emulator.ht­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', () => {
      window.open('','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>')
      }).insertAfter('#icon-clearScreen');
      

    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: https://github.com/espruino/EspruinoWebI­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 s.th. 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!

  • Thanks very much for adding the ability to take screenshots of the emulator to the Web IDE!

    I just wanted to share a tip I learned automating the taking of screenshots generated by my app. I run the emulator on Ubuntu and wanted to use 'xdotool' to take screenshots. I couldn't figure out why 'xdotool click 1' wasn't doing anything when attempting to click on BTN1, BTN2, or BTN3, so I looked into the emulator source code and discovered those areas are listening for 'mousedown' events. So by replacing 'xdotool click 1' in my bash script with 'xdotool mousedown 1', 'sleep 0.5', 'xdotool mouseup 1' I was able to get the emulator to recognize button presses. 'xdotool click 1' does work fine on the screenshot button, however.

  • That's really handy - thanks! I'm actually looking into trying to automate screenshots with the emulator: https://github.com/espruino/BangleApps/b­lob/master/bin/thumbnailer.js

    Currently it'll just start and app and do a screenshot, but I was hoping that we might be able to define specific button presses (or even just JS code) to execute in order to get shots of different screens

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

screenshots from the emulator

Posted by Avatar for Andreas_Rozek @Andreas_Rozek

Actions