Storage handling menu in IDE

Hi!

Just to let you know I've been adding a menu to allow you to list files in Espruino's storage, view, download and upload them.

Should work with Bluetooth and Serial.

You can try it out on the GitHub-hosted Web IDE (it's not live on the proper one yet):

https://espruino.github.io/EspruinoWebIDE/

Just click the star in the bottom-middle of the window. If you don't get one, try a hard-reload, and if you've used the GitHub IDE before and it's not working now, try going into chrome devtools -> application -> unregister service worker and try another hard reload.

I'd be interested to see what you think. Hopefully image converter tools will come soon.

Nice, it's working.

Some issue with non-ascii characters:

If the file contains non-ascii characters, the preview doesn't work (see the attached image). But download does work. My test file's contains:

helló
halló

Or even the upload fails on some characters:

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

For example the attached almaá.txt. The á character causes the upload to fail. That's a totally normal á, nothing unicode weirdness.
And there is no feedback on the ui. If btoa doesn't work I don't know if you can do anything. But a try-catch & some error message would be nice :)

2 Attachments

• almaá.txt
• 

Ok, thanks - and thanks for the attachment for testing! I'll look into it - I think it's to do with how the API I use for loading files loads them as strings

Right, that should be fixed now. Also image uploads work nicely. You can now upload a full 240x240 16 bit image to Storage and render it with just:

g.drawImage(require("Storage").read("bg"))

I just tested it with the Pixl, works too. Does it make sense to have another button to load the contents of a existing file (an app) directly to RAM? Would make switching between apps easier (at least on the Pixl).

Does it make sense to have another button to load the contents of a existing file (an app) directly to RAM?

You mean as if you clicked 'open file' then 'upload' in the IDE?

I'm not really sure. It's only two button presses. Bringing up the Storage menu then pressing something else would probably be significantly more hassle? I guess there could be a drop-down by the 'open' button that allowed you to 'open and upload' but maybe it's just extra complexity?

Nice it works well indeed!
And it allows to download files generated by a data logger program running on the Espruino device easily!

Maybe the icon would rather be the same as the upload button but pointing downwards to represent a download action, wouldn't it?

BTW: Are you thinking of implementing the Ctrl+` shortcut we discussed on GitHub that switches focus between the REPL and the editor screen?

You mean as if you clicked 'open file' then 'upload' in the IDE?

Well not exactly. I talking about already existing files on the device. Let's assume there are already two "apps" (clock 1 and clock 2) in the file system. Wouldn't it make sense to open the storage menu and click the file you want to load into the ram to be executed?

Otherwise you would have to download the file (takes time) and open the file (where did it put it?!) and then upload (takes time).

Wouldn't it make sense to open the storage menu and click the file you want to load into the ram to be executed?

Ahh, yes - that's a really neat idea - thanks! Just added as a 'play' button. As Espruino doesn't know what the file type actually is, it'd be really easy to get it to accidentally load something like an image, but I doubt that's a big deal.

Ctrl+` shortcut between the REPL and the editor screen?

Just added, plus hopefully a way of making it easier to handle adding key shortcuts in the future

In most biz apps that have specific (default) extension for data files, a filter is in place to show first those files, but the filter can be muted and all files show. This could be the idea the storage file lister shows (first) just the executables.

This could be the idea the storage file lister shows (first) just the executables.

That would be nice, but Storage really doesn't know what is executable and what isn't :(

I guess the sensible thing to do would be to increase the length of storage filenames to 16 chars, and then use proper file extensions - but that's a pretty serious breaking change!

Just to add, there are a bunch more improvements now - please let me know if you hit any issues/regressions! https://github.com/espruino/EspruinoWebIDE/commits/gh-pages

@Gordon

serious breaking change!

for file typing in storage has to be thought thru before jumping in. I assumed the (app) file name(s) have this information in the prefix... but I'm obviously mistaken.

I like the 'fix swipe' in emulation: https://github.com/espruino/EspruinoWebIDE/commit/33808e85d2d1b7306701ce9916c31518d003e0be

Nice!
But the Ctrl+` shortcut doesn't seem to be working for me (Windows 10, french keyboard, Web IDE 0.73.0).
Am I the only one having such an issue with this shortcut?

Just added as a 'play' button.

Awesome! But doesn't seem to work right. I just uploaded two clocks (code attached) both with a trailing save().
Upload to file system works fine. But then when I hit the play button for one clock it puts it to ram incompletely (pixlClk for example is missing the onInit() function, see screenshot.

Then when I use save() in the console, the pixlClk file suddenly disappears from the file system...?

EDIT: ok, maybe my mistake, I saw there is an function() onInit() instead of function onInit().

But new problem: I fixed the file, uploaded it. Then hit the play button on the file, now dump() shows this:

>dump()
function onSecond() {?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255]}
function onInit() {?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255] ?[255]}
=undefined
> 

3 Attachments

• cMrphClk.txt
• pixlClk.txt
• 

Is there a reason you put save() at the end of the code you uploaded to flash?

Since it's already in flash, there's no need to save - so what you're doing is loading the code into RAM, then saving an image of RAM into flash, then loading that - which will probably

Am I the only one having such an issue with this shortcut?

It works fine for me. Maybe you could try debugging it yourself a bit? Open Devtools in Chrome, open the 'index.js' file, search for the text Key shortcuts for IDE and immediately under that add a breakpoint in the window.addEventListener("keydown",function(e) { callback and see what's happening?

Am I the only one having such an issue with this shortcut?

Just to add to this - could you open the 'devtools' menu with F12, then right-click on the Reload button and choose Empty Cache and Hard Reload? It might just be that you're using an old version of the IDE

Is there a reason you put save() at the end of the code you uploaded to flash?

Well, I didn't really think about it, but it is normal code that I would use to paste into the editor and then upload without having to type save() manually after the upload.

Not sure if maybe you could automatically replace/delete the save commands on pushing to RAM.

I think I have some clues regarding the issue with the Ctrl+` shortcut:
It has to do with the grave accent being a dead key on the french keyboard (E.g. to type ù easily).

Thus to get a grave accent character only, one has to press the ` key followed by Space. This dead key behavior shouldn't hold when pressing Ctrl before.

In Microsoft Visual Studio Code such a shortcut works properly with the french keyboard. I was able to get this shortcut working properly in the Espruino Web IDE switching my keyboard to standard QWERTY. I will investigate further by setting breakpoints in Devtools...

I did play a little with the Chrome developer tools but I am too new at it to make a good use of it:

• I could set breakpoints and catch the first key pressed in a key combination but I didn't make it in running the code till the second key pressed (e.g., experimenting with Ctrl+Space, for auto-completion, that works fine with the french keyboard).
  
• I tried to modify the code (e.g., adding console.log(key)), saving index.js and experimenting with the shortcuts, but this resulted in my Chrome tab freezing for a long time.
  
  

Anyhow, what I observed is that the Ctrl+` shortcut works fine under Linux with the french keyboard (where the grave accent is not considered as a dead key) but doesn't under Windows or Mac OS (where it is a dead key).

Ok, thanks - maybe as it is considered a dead key the .key field doesn't contain a backtick, but maybe keyCode is still set to the correct one.

Indeed, with the french keyboard on Windows, e.key values are:

• "Dead" when pressing on the grave accent,
  
• "`" when pressing on the space bar preceded by the grave accent.
  
  

Thus the key value in the script is "Ctrl + Dead" when pressing on Ctrl together with the grave accent.

Regarding the keyCode, e.code for the grave accent is "Backslash" on the MacBook french keyboard.

Hope this helps.