Bangle Emulator

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

How long does it take to load, its just white screen for me.
https://www.espruino.com/ide/emu_banglejs.html
Strange cos it worked for me one time, but not sure what I did to get it working...

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

Which version of espruino does the emulator run atm?

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

I think the emulator has a bug with g.fillRect dimensions not accurate , like if you draw 2x2 rect it makes it 3x2. I think I can't replicate it on the latest firmware watch so perhaps historical espruino bug or a bug with translating to canvas/webgl in emulator?

[espruino-discuss2]

Posted at 2021-05-24 by @fanoush

Which version of espruino does the emulator run atm?

run process.env in console - left side of IDE

How long does it take to load, its just white screen for me.

You can also just go to regular IDE https://www.espruino.com/ide/
click connect button and select "Emulator"

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

Yes that is what I use, but I can't get it to load.

[gfwilliams]

Posted at 2021-05-24 by @gfwilliams

https://www.espruino.com/ide/emu_banglejs.html won't work - I'm not sure where you found that URL but it's not meant to be loaded on its own.

Best bet just go to https://www.espruino.com/ide/emulator.html (or even /ide and click 'emulator') and it'll work. If it doesn't, try doing a refresh of the page?

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

From https://espruino.com/ide , when clicking top left connect, then choosing emulator from list, a popup window with url https://www.espruino.com/ide/emu_banglejs.html appears, with white screen.
Is this unexpected?
I have tried many time and its not working here. Very odd!!

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

I attached a log of console tab in settings from webide. Maybe it suggests something?
I cleared entire cache and also tried incognito, same effect. I asked a friend to test it, and it works fine for him. I also was using the exact same chrome browser version as him.

Attachments:

• webidelog.txt

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

Ok now it just randomly worked... But I didn't change anything.. So there is a chance it doesnt' load correctly, but if I refresh often enough, it works, OK.. My gpu usage is at 100% cos i'm mining, might be related?

For me its like 50% chance to fail, then F5/refresh for 50% chance not to fail

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

Where can I find the LCD_EMSCRIPTEN code? Ye Nvm, just can't get my head around why if i zoom into the pixels there are more horizontally than vertically if I do:

g.fillRect(5,5,7,7);

in the Emulator, but its out of my scope. Let me know if its strange or not
I'm expecting a square.

[gfwilliams]

Posted at 2021-05-24 by @gfwilliams

Do you have an ad blocker or something like that which might be breaking it? Are you using Chrome, or something else? Honestly not sure what to suggest.

Not entirely sure what you mean about LCD_EMSCRIPTEN but the code is at https://github.com/espruino/Espruino/blob/master/libs/graphics/lcd_st7789_8bit.c

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

'makefile' : [
     'EMSCRIPTEN=1',
     'DEFINES += -DUSE_TENSORFLOW',
     'DEFINES += -DBANGLEJS',
     'DEFINES += -DSPIFLASH_BASE=0x8000000 -DSPIFLASH_LENGTH=4194304',
#     'DEFINES+=-DCUSTOM_GETBATTERY=jswrap_banglejs_getBattery',
     'DEFINES+=-DDUMP_IGNORE_VARIABLES=\'"g\\0"\'',
     'DEFINES+=-DUSE_FONT_6X8 -DGRAPHICS_PALETTED_IMAGES -DGRAPHICS_ANTIALIAS -DUSE_LCD_EMSCRTIPTEN',

EMSCRIPTEN.py
-DUSE_LCD_EMSCRTIPTEN'
this define, but couldn't find references to it, not thats its important..

[espruino-discuss2]

Posted at 2021-05-24 by @fanoush

that looks like like typo in the definition, there is extra T in USE_LCD_EMSCRTIPTEN and it seems unused

btw you can search github project easily via search in upper left corner so check this https://github.com/espruino/Espruino/search?q=EMSCRIPTEN

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

g.setPixel(5,5,215);

It can be reduced further to just this line. If I zoom in with paint the screenshot of the emulator canvas. I see 2 pixels, not 1. Is this just a related problem to scaling of windows 125%? Or possibly antialiasing of the browser.

I'm probably being very stupid by highligthing this, considering the emulated window size in my pixels was 300x300 , and bangle is 240.. so the extra pixels have to be drawn somewhere.. ignore me, im just being dumb :)

[espruino-discuss2]

Posted at 2021-05-24 by d3nd3-o0

Ye I just launched chrome with /high-dpi-support=1 /force-device-scale-factor=1. And it was pixel perfect!

[gfwilliams]

Posted at 2021-05-25 by @gfwilliams

Ahh. Ok, yes, that'd do it :) Is it a specific change you'd made to Chrome? Because when I view it the window is 240px and it's 1:1 - in fact the emulator itself goes to some lengths to ensure it only scales the image +/- 240px to avoid exactly this issue.

If there's something that can be done to set the actual pixel size then I'm all for changing it though. Code here: https://github.com/espruino/EspruinoWebIDE/blob/master/emu_banglejs.html#L206

[espruino-discuss2]

Posted at 2021-08-29 by Robin

Sun 2021.08.29

Hi @TTBangler and thank you for your input.

'I haven't been able to get the Emulator to work either'
'I see the same behavior and console output @SEBI showed in the screenshot'

Does this mean the Pop-up Emulator Window does in fact appear, but it's canvas never renders any content?

Are you able to confirm that the default code block that is loaded is the same as I posted in #49

[espruino-discuss2]

Posted at 2021-08-29 by Robin

Sun 2021.08.29

Reply to @SEBI post #48

from post #48 'the Emulator is working properly and you refresh that Emulator screen, you will lose the connection with the WebIDE'

Yes. As @gfwilliams also pointed out in post #26 We are attempting to understand what event is causing the refresh on your PC.

[espruino-discuss2]

Posted at 2021-08-29 by sebi

That day I was experimenting with the 2x3 Pixel Clock accessible at https://banglejs.com/apps/#clock. Just click on the Try in Emulator icon and it will bring you there. Code line number 28 will match.

But really, my issue occurs whatever the code in the right hand side panel is (the panel can be empty). It occurs when I want to connect the WebIDE to the Emulator (Connect / Disconnect plug icon > Emulator). At this stage, I am not uploading any code from the right hand side panel into the emulator yet.

Do you see the above code block with a fresh start of the browser pointing to http://www.espruino.com/ide/ ?

What I see is the latest code I played with: currently it is code of the 2x3 Pixel Clock. If I clear cookies and other site data from Chrome, I get this in the WebIDE right hand side panel:

var  on = false;
setInterval(function() {
  on = !on;
  LED1.write(on);
}, 500);

...which is the panel default content I guess. But when trying to connect to the Emulator, the problem of getting a white emulator window still occurs.

[espruino-discuss2]

Posted at 2021-08-29 by Robin

Reply to post #52

'That day I was experimenting with the 2x3 Pixel Clock'

Thank you, that clears that up.

'At this stage, I am not uploading any code from the right hand side panel into the emulator.'

Now this statement might be key here.

As when I click the Orange 'Connect' button and then select 'Emulator' from the modal dialog, the code block on the R-Hand editor side of the IDE is then viewable in the pop-up Emulator Window.

Please try cut-n-paste the following:

Bangle.setLCDPower(1);
Bangle.setLCDTimeout(0);

var scenes = [
  function() {
    y = -100;
    var step = 4;
    var i = setInterval(function() {
      y+=step;
      if (y>70) {
        clearInterval(i);
        
        i = undefined;
      }
      g.clearRect(0,y-(step+1),240,y-1);
      g.drawImage(Bangle.getLogo(),0,y);
    }, 20);
    Bangle.setLCDMode();
    g.clear();
    return function() {
      if (i) clearInterval(i);
    };
  },
  function() {
    var txt = [" ____                 _ \n"+
          "|  __|___ ___ ___ _ _|_|___ ___ \n"+
          "|  __|_ -| . |  _| | | |   | . |\n"+
          "|____|___|  _|_| |___|_|_|_|___|\n"+
          "         |_| espruino.com\n\n",
    "The JavaScript Interpreter for uCs\n",
    "  * On-chip JS Interpreter",
    "  * GPS, Acclerometer, Compass",
    "  * 64 MHz, 64kB RAM, 512kB + 4MB Flash",
    "  * 240x240 IPS LCD",
    "  * Speaker & Vibration motor",
    "  * Bluetooth LE",
    "  * 1 week battery life",
    "",
    "Includes:",
    "  * Tensorflow AI",
    "  * Bluetooth LE central & periph",
    "  * Graphics Library",
    "  * VT100 terminal",
    "","",""
    ];
    var n=0;
    var i = setInterval(function() {
      Terminal.println(txt[n]);
      n++;
      if (n>=txt.length) {
        clearInterval(i);
        i=undefined;
      }
    }, 200);
    Bangle.setLCDMode();
    return function() {


      if (i) clearInterval(i);
    };
  },
  function() {
    var img = require("heatshrink").decompress(atob("oNBxH+5wA/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AHGpAAoQKv4ADCBQAeqsrAAejBw9/B4oABqt/IGepHw5CEQspALH5hBC5pAvv4/MAALFkIBWpPI6IHqpAu0Z3GfYOpRYdPQEhALYIp2FBYNVI4JAvvL4LH0yBYAFJAQQQ5Ay1JAFftBAQBYxCDv+qIGiCHIQiGnIBfOv5BJIQRAyIJkrvKEkIBrFBB4qEGIGRCNYsZAQIQV/IZDEiICRCDQVJAUIQVPC4lVIF6yJQYpAZ5t/FYvNIBepqtVIJGjIDoqBDY2pdYo3DfAhBIQLmpvIcDvIrC5oJEIAhTCGQmj5qgEC4t5e7YrBqt5BI6UFBg15v4XHbQwAQb4oAKv7NKABdVRoYATUAwnICqjZFIMdVE4+jXI4XGYCxBFFZN/M5OpCxUrvJ/ZFYmjvNVAAY+KCwpDBC6YAV5vNC9oA/AH4A/AHYA=="));

    g.clear();
    y = 0;
    var step = 4;
    var i = setInterval(function() {
      y+=step;
      g.clear();
      g.drawImage(img,60,60,{rotate:Math.sin(y*0.03)*0.5});
      g.flip();
    }, 20);
    Bangle.setLCDMode("120x120");
    return function() {
      if (i) clearInterval(i);
    };
  },
  function() {
    var rx = 0, ry = 0;

    // draw a cube
    function draw() {
      var rcx=Math.cos(rx),
        rsx=Math.sin(rx),
        rcy=Math.cos(ry),
        rsy=Math.sin(ry);
      // Project 3D coordinates into 2D
      function p(x,y,z) {
        var t;
        t = x*rcy + z*rsy;
        z = z*rcy - x*rsy;
        x=t;
        t = y*rcx + z*rsx;
        z = z*rcx - y*rsx;
        y=t;
        z += 6;
        return [240 * (0.5 + x/z), 240 * (0.3 + y/z)];
      }

      var a;
      // draw a series of lines to make up our cube
      a = p(-1,-1,-1); g.moveTo(a[0],a[1]);
      a = p(1,-1,-1); g.lineTo(a[0],a[1]);
      a = p(1,1,-1); g.lineTo(a[0],a[1]);
      a = p(-1,1,-1); g.lineTo(a[0],a[1]);
      a = p(-1,-1,-1); g.lineTo(a[0],a[1]);
      a = p(-1,-1,1); g.moveTo(a[0],a[1]);
      a = p(1,-1,1); g.lineTo(a[0],a[1]);
      a = p(1,1,1); g.lineTo(a[0],a[1]);
      a = p(-1,1,1); g.lineTo(a[0],a[1]);
      a = p(-1,-1,1); g.lineTo(a[0],a[1]);
      a = p(-1,-1,-1); g.moveTo(a[0],a[1]);
      a = p(-1,-1,1); g.lineTo(a[0],a[1]);
      a = p(1,-1,-1); g.moveTo(a[0],a[1]);
      a = p(1,-1,1); g.lineTo(a[0],a[1]);
      a = p(1,1,-1); g.moveTo(a[0],a[1]);
      a = p(1,1,1); g.lineTo(a[0],a[1]);
      a = p(-1,1,-1); g.moveTo(a[0],a[1]);
      a = p(-1,1,1); g.lineTo(a[0],a[1]);
    }

    // rotate and redraw the cube
    function step() {
      // rotate
      rx += 0.1;
      ry += 0.11;
      // draw
      g.clear();
      g.setColor(0xFFFF);
      draw();
      g.flip();
    }

    Bangle.setLCDMode("doublebuffered");
    g.clear();g.flip();
    var i = setInterval(step,50);
    return function() {
      clearInterval(i);
    };
  },
  function() {
    var img = require("heatshrink").decompress(atob("oNBxH+5wA/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AHGpAAoQKv4ADCBQAeqsrAAejBw9/B4oABqt/IGepHw5CEQspALH5hBC5pAvv4/MAALFkIBWpPI6IHqpAu0Z3GfYOpRYdPQEhALYIp2FBYNVI4JAvvL4LH0yBYAFJAQQQ5Ay1JAFftBAQBYxCDv+qIGiCHIQiGnIBfOv5BJIQRAyIJkrvKEkIBrFBB4qEGIGRCNYsZAQIQV/IZDEiICRCDQVJAUIQVPC4lVIF6yJQYpAZ5t/FYvNIBepqtVIJGjIDoqBDY2pdYo3DfAhBIQLmpvIcDvIrC5oJEIAhTCGQmj5qgEC4t5e7YrBqt5BI6UFBg15v4XHbQwAQb4oAKv7NKABdVRoYATUAwnICqjZFIMdVE4+jXI4XGYCxBFFZN/M5OpCxUrvJ/ZFYmjvNVAAY+KCwpDBC6YAV5vNC9oA/AH4A/AHYA=="));

    g.clear();
    y = 0;
    var step = 4;
    var i = setInterval(function() {
      y+=step;
      g.scroll(0,1);
      g.drawImage(img,Math.random()*240,Math.random()*240,
        {rotate:Math.random()*6.3, scale:0.5+Math.random()});
    }, 1);
    Bangle.setLCDMode();
    return function() {
      if (i) clearInterval(i);
    };
  }

];
var sceneNo = scenes.length-1;

var stop;
function next() {
  sceneNo++;
  if (sceneNo>=scenes.length) sceneNo=0;
  if (stop) stop();
  clearInterval();
  stop = scenes[sceneNo]();
  setTimeout(next, 10000);
}
next()

[espruino-discuss2]

Posted at 2021-08-29 by Robin

Sun 2021.08.29

from post #36 ' You're on Windows 10 by the look of it so I guess Edge is installed anyway - what if you run the IDE in that?'

@gfwilliams I launched the same in Edge, but the Emulator screen never populates. Could this
be similar to what @SEBI is experiencing when using Chrome?


Not sure if this might be related, but I'm seeing a few recent posts where individuals are
seeing 'module not found' errors. When I load the direct URL link(s), the browser does render that code source for me. Could there be a server blocking URL requests for some that is related to the socket data exchange for the Emulator?

[espruino-discuss2]

Posted at 2021-08-29 by sebi

Please try cut-n-paste the following

Still getting a white emulator window.
Which makes sense again, as the problem occurs when trying to connect to the emulator, which takes place before uploading any code to it....

[espruino-discuss2]

Posted at 2021-08-29 by Robin

As I explained in post #53 as soon as I click the 'Emulator' button, and as the Emulator pop-up opens, it's canvas is immediately populated with viewable content.

@gfwilliams usually will respond early in the week. Maybe he'll suggest some ideas on how to proceed.

[espruino-discuss2]

Posted at 2021-08-29 by sebi

As I explained in post #53 as soon as I click the 'Emulator' button, and as the Emulator pop-up opens, it's canvas is immediately populated with viewable content.

You mean with viewable content coming from your code right? Not the default Bangle.js boot content?
Indeed I am surprised of this... I thought the process was to connect first (to see the default Bangle.js boot content) and to save the code from the right hand side panel in a second step to see how it performs in the Emulator. According to what you say, I must be wrong. I thought such behaviour would occur only in presence of &upload&emulator at the end of the url...

What I remember for sure is that I was able to experiment typing some operations in the WebIDE's REPL directly (left hand side panel) once connected to the emulator, which currently I can't.

[espruino-discuss2]

Posted at 2021-08-29 by Robin

I just tried your suggestion from post #52 https://banglejs.com/apps/#clock

When I click on the 'Try in Emulator' button, I'll agree that the Emulator Pop-up Window doesn't immediately show. I have to dismiss the 'connecting' modal dialog, then refresh the entire page as @gfwilliams had previously pointed out. At that point the Emulator Window becomes visible with the clock clearly visible. I never need the upload button.

I then block copied the content from post #53 into the R-Hand editor and clicked the 'Upload' button. The animations then immediately execute in the Emulator.

[espruino-discuss2]

Posted at 2021-08-29 by TTBangler

Yes, the pop-up emulator appears but with blank content. There's also another "SELECT A PORT..." pop-up window the reads "CONNECTING...". I've tried refreshing the emulator window and closing it and refreshing the main IDE page and connecting to the emulator again but still get the same result.

I don't think any code from the right-side of the IDE is being loaded, presumably because the connection to the emulator never succeeds. Chrome seems to cache whatever was last entered into the right-hand side, so the content of my right-hand pane is different from yours (and is the code I most recently uploaded to my watch).

[gfwilliams]

Posted at 2021-08-31 by @gfwilliams

@gfwilliams I launched the same in Edge, but the Emulator screen never populates. Could this
be similar to what @SEBI is experiencing when using Chrome?

Yes, seems so.

I think things are getting a bit confused here. As far as I can tell @SEBI and @TTBangler are having the exact same problem: The emulator window is blank.

When the window is blank, there won't be a connection to the IDE, so what's in the left or right hand side of the IDE has no effect whatsoever.

I took another look at this and I think I might have spotted a problem. Please can you refresh the IDE and try again now?

I was opening the window and then waiting 500ms and sending a message to it to initialise it. I think what's happened is maybe Chrome has changed and now throws away any posed messages if they are sent before the window has initialised - so if the emulator takes more than 500ms to load it doesn't initialise.

It worked fine for me basically all the time because I'm based in the UK and I get a fast connection to the UK-hosted espruino.com, but for some others especially if you have a slow connection or the computer is slower the window can take longer than 500ms to load. I've now tweaked things to add an 'onload' handler and I hope everything will be more reliable

[espruino-discuss2]

Posted at 2021-08-31 by sebi

Hurray!! You are a boss Gordon!! It is working again!

Indeed for a year only, I moved to a place with a low speed connection, certainly when I noticed the problem...

Thank you!

[gfwilliams]

Posted at 2021-08-31 by @gfwilliams

Great! Glad it's finally all sorted!

edit: this also explains why a refresh worked for me - everything would already have been cached by the second reload, even if I could get it to break the very first time I tried it.

[espruino-discuss2]

Posted at 2021-08-31 by TTBangler

I am also pleased to report that the emulator is now working for me too (in the States).
A brilliant realization and fix @gfwilliams, thank you!

[espruino-discuss2]

Posted at 2021-08-31 by sebi

edit: this also explains why a refresh worked for me - everything would already have been cached by the second reload, even if I could get it to break the very first time I tried it.

It's not that important now that the emulator is working again, but still, I wonder why this trick didn't work for me too...