Show storage space per app?

[RKBoss6]

I was fiddling with the app loader and my Bangle.js' storage, when I came to the realization that I had no way of knowing what apps were taking up the 14% of my Bangle.js 2's storage. I initially thought that the list of apps under the storage bar had parentheses around how much storage each took up, but after looking through index.js, I found it's only the app version being displayed in those parentheses. It would be handy if instead of displaying the version in that app list under storage bar, it was a list of all apps ordered by how much storage they are taking up. I tried to see if I could implement it, but being new to JavaScript and the Espruino ecosystem, I was unable to get far. If anyone can show me where to go, or what function can poll the space taken up by one app, I can implement a quick version of this for everyone to use.

[bobrippling]

@gfwilliams not sure how easy this is to do from the JS side?

[gfwilliams]

This sounds like a good idea - but IMO not in 'device info'

It's going to have to look at the size of all the files for each app. You need some code that runs on the Bangle that looks at appname.info and figures out which files are used (there are some wildcards in there) and just sums up all the sizes. It's going to take a few seconds I guess so it's not something you want to be running every time we refresh the state of the Bangle.

I'd maybe just make this a whole new app, like "Storage Analyser". It could work like the AGPS one (type:"RAM") and display a screen with all the data (maybe even a pie chart?). You could then just have a link to the app under the "Storage" heading in "Device Info"?

I just had a quick try and I think this will return all the info you need:

require("Storage").list(/\.info$/).forEach(appInfoName => {
  let appInfo = require("Storage").readJSON(appInfoName,1)||{};
  //print(appInfoName, appInfo);
  var fileSize = 0, dataSize = 0;
  appInfo.files.split(",").forEach(f => fileSize += require("Storage").read(f).length);
  var data = (appInfo.data||"").split(";");
  function wildcardToRegexp(wc) {
    return new RegExp("^"+wc.replaceAll(".","\\.").replaceAll("?",".*")+"$");
  }
  // normal files
  if (data[0]) data[0].split(",").forEach(wc => {
    require("Storage").list(wildcardToRegexp(wc), {sf:false}).forEach(f => {
      dataSize += require("Storage").read(f).length
    });
  });
  // storage files
  if (data[1]) data[1].split(",").forEach(wc => {
    require("Storage").list(wildcardToRegexp(wc), {sf:true}).forEach(f => {
      dataSize += require("Storage").open(f,"r").getLength();
    });
  });
  print(E.toJS([appInfo.id, fileSize, dataSize]));
});

it returns [appName, appSize, dataSize]

[RKBoss6]

@gfwilliams thanks so much! Do you know how I could send that code to ram through the custom.html and get the output?
I'm pretty new to this, so any help is appreciated :)

[gfwilliams]

No worries - the easiest way is to use Puck.eval and to make it actually return the array rather than printing it. You also have to be careful when putting it in a string as the escape characters then need double-escaping.

It's possible that for watches with a lot of apps it could time out and we have to figure something else out, but with my testing so far it's ok. To test I ended up sticking it in an app anyway, so I just pushed it all to the development app loader: https://github.com/espruino/BangleApps/tree/master/apps/storageanalyzer

So you can try it at https://espruino.github.io/BangleApps/?id=storageanalyzer now:

If you want to go further it'd be really cool if it's possible to add a pie/bar chart thing to visually show which apps are using most. Just FYI:

• Code = stuff that has to be there
• Data = user-generated (eg recorder tracks)

[RKBoss6]

Oh wow, thank you! I'll definitely try adding data visualization!

[RKBoss6]

@gfwilliams Just created a PR w/ a pie chart =)