[SOLVED] Upload Failed, got UNFINISHED STRING expected EOF

Hi,

I forked the app launcher and wrote an application:
https://github.com/Purple-Tentacle/BangleApps/blob/master/apps/moonphase/app.js

When loading in Emulator, it works fine.
When sending from IDE to the bangle.js (flash), it works fine.

When I try to upload it using my forked app loader, I receive the message:
Upload Failed, got UNFINISHED STRING expected EOF

What is wrong?

Thanks
Christian

You can reduce space by set Use Compression and change Output as Image String when using the Espruino Image Converter

So, this error happens because my cs is too long?
Or just the images?
I will give it a try.

It's actually this issue: https://github.com/espruino/BangleApps/issues/157

Details there, but basically the App loader takes a very basic approach to app uploads, so if the app is too big to fit into RAM as a text string then it can't be uploaded. The IDE is able to upload in chunks to avoid it.

It's something that should be fixed soon - but basically it is the size of the actual JS file that's the issue at the moment.

Definitely choosing 'image string' and the 'compression' checkbox in the image uploader should help you as @MaBe says.

Edit: did not read the reply from Gordon.
It seems that my file is still too big.

That's not it.
I changed all images to test:

var imgNewMoon = {
  width : 26, height : 26, bpp : 1,
  transparent : 0,
  buffer : require("heatshrink").decompress(atob("AH4AUA=="))
};

They are much shorter now, but I still receive the same error.

Doing image string would really push that down further, since all the width : 26, height : 26, bpp : 1, would disappear.

Actually please could you do:

function getImg(i) {
  var data = { "NewMoon": "AD8AAH/4AHwPgDwA8BwADg4AAcMAADHAAA5gAAGYAABsAAAPAAADwAAA8AAAPAAADwAAA2AAAZgAAGcAADjAAAw4AAcHAAOA8APAHwPgAf/gAA/AAA=="
  "WaxingCrescentNorth" : "..."
  ...
};
 return {
    width : 26, height : 26, bpp : 1,
    transparent : 0,
    buffer : E.toArrayBuffer(atob(data[i]))
  };
}

That would be way more compact, and would use massively less RAM because function code gets executed from Flash

Good hint, I worked it in and saved a lot of space and memory.
The upload still fails and I cannot get the code small enough.

Two questions:

1. Would it help to remove comments? Or are they no uploaded anyway?
   
2. How can I put all the images to a second file? Does this have to be a module?
   
   

Thanks

Would it help to remove comments?

Yes. I plan to add the ability to do some simple minification when uploading to the App Loader soon though.

Hopefully later today I'll fix the app loader issue, so if you hang tight it should just start working.

How can I put all the images to a second file? Does this have to be a module?

It doesn't have to be but it might be easier. So assuming you have a getImg function:

// moonphase-img.js
exports.getImg = function(i) { ... }

// moonphase.js
var getImg = require("moonphase-img.js").getImg;

should work

If your images are still to big you can use my snippet to draw moon phases with circle and ellipse.

/* jshint esversion: 6 */

/* moon.js */

BLACK = 0;
WHITE = 0xFFFF;
r = 12;
x = 120;
y = 12;

function clear(){g.setColor(BLACK).fillRect(x-r,y-r,x+r,y+r);}

var moon = {
    1: () =>  {
                  clear();
                  g.setColor(WHITE).drawCircle(x,y,r).drawCircle(x,y,r-1);
              },
    2: () => {
                 moon[3]();
                  //clear();
                  g.setColor(BLACK).fillEllipse(x-r/2,y-r,x+r/2,y+r);
              },
    3: () => {
                  clear();
                  g.setColor(WHITE).fillCircle(x,y,r).
                  setColor(BLACK).fillRect(x-r,y-r,x,y+r);
              },
    4: () => {
                  moon[3]();
                  g.setColor(WHITE).fillEllipse(x-r/2,y-r,x+r/2,y+r);
              },
    5: () =>  {
                 clear();
                 g.setColor(WHITE).fillCircle(x,y,r) ;
              },
    6: () =>  {  moon[7]();
                 g.setColor(WHITE).fillEllipse(x-r/2,y-r,x+r/2,y+r);
              },
    7: () => {
                  clear();
                  g.setColor(WHITE).fillCircle(x,y,r).
                  setColor(BLACK).fillRect(x,y-r,x+r+r,y+r);
              },
    8: () => {
                  moon[7]();
                  g.setColor(BLACK).fillEllipse(x-r/2,y-r,x+r/2,y+r);
              },

};
g.clear();

y  = 100;
x  = 20;  moon[1]();
x += 30; moon[2]();
x += 30; moon[3]();
x += 30; moon[4]();
x += 30; moon[5]();
x += 30; moon[6]();
x += 30; moon[7]();
x += 30; moon[8]();

The upload should be fixed in GitHub now, so if you pull in the most recent changes hopefully your app will start working!

@Gordon
I put the images to an images.js file and required in the app:

var getImg = require("https://github.com/Purple-Tentacle/BangleApps/blob/master/apps/moonphase/images.js").getImg;

When I try to upload to bangle I receive a different error message:

Upload failed, Unexpected response Uncaught SyntaxError: Got var expected EOF

Is this still the same issue?

I think that's a different issue... Can you try the old code? I think the problem is gone now anyway...

Old code (in one file, but with your function for the images).
Upload brings different error now:

Upload failed, Unexpected response Uncaught SyntaxError: Got UNFINISHED STRING expected EOF

Do you have the app loader live somewhere like GitHub pages so I can give it a try here?

https://purple-tentacle.github.io/BangleApps/index.html#

Do I have to get something from the official branch to incorporate the changes you just made?

I finally got it working :)
Just had to fork the repo again and re-upload the files.

Github gets me confused, I do not have a nice workflow yet.

Just merged your app - thank you!