Feature/improve web file manager

[gebeto]

Summary

Add advanced file manager, which was written with React and it is hosting on Github as it will take too much space to store it on device. So this App will be loaded only if Web Server is started not in AP mode

Additional Context

#114

Screenshots

Desktop

Mobile

Ability to rename and move files to folders

[daveallie]

Hey @gebeto! Thanks for the PR and the work put into the thoughts in the discussion! Glad to have you here!

I love the idea of building upon the web interface, but I have some concerns:

1. We're now introducing a split experience based on if you have internet access or not, and in the case you don't you won't be able to use this tool
2. I'd love to keep the dependencies for the web-viewer inside the project
   • Currently the weight of the HTML/CSS/JS on master is:
     without: Flash: [=== ] 28.2% (used 1849766 bytes from 6553600 bytes)
     with: Flash: [=== ] 28.6% (used 1876182 bytes from 6553600 bytes)
   • it adds almost nothing to the flash size
3. There's risk of version/configuration drift by trying to match communication protocols between two differently version controlled tools
   • e.g. If we decide to add a new field to the upload API or something, then it may break all old devices trying to use the web interface as the APIs may not match, forcing users to either update or find another way

I think all these concerns can be addressed by building a better bundling/minification pipeline in for the web interfaces and bringing your changes back into this project.

[gebeto]

Yeah, all this concerns makes a lot of sense

I'll try to implement some mechanism to keep the bundle inside the firmware

Also currently JS bundle size is 240kb, because of React, so first I'll try to host it as is, and then will try to decrease the bundle size by using some ultralight replacement for React like Inferno or Preact or some other alternative to it

Additionally, if I'll be able to implement images converter, possibly it will require some large libraries which will increase bundle size a lot, in this case I think we will be able to split the bundle, and load that libraries from the internet, and just disable that functionality if the internet will be not accessible. I think it should be a good solution, to allow some advanced functionality only when there are internet connection

Hmm, it is taking not much space at all right now:

Advanced Memory Usage is available via "PlatformIO Home > Project Inspect"
RAM:   [===       ]  30.5% (used 99884 bytes from 327680 bytes)
Flash: [===       ]  32.6% (used 2134342 bytes from 6553600 bytes)

[gebeto]

Final firmware size is:

Building in release mode
Retrieving maximum program size .pio/build/default/firmware.elf
Checking size .pio/build/default/firmware.elf
Advanced Memory Usage is available via "PlatformIO Home > Project Inspect"
RAM:   [===       ]  30.5% (used 99796 bytes from 327680 bytes)
Flash: [===       ]  33.4% (used 2189696 bytes from 6553600 bytes)

[gebeto]

@daveallie

I don't want to add Nodejs as a dependency for this project, so I'm just pushing build bundle to the crosspoint-web-manager repository. So all we are doing here is building header files from the bundle

But, overall there can be some security questions, as technically I can push anything to that repo, so it depends on the trust

If you have any suggestions about how it can be made in more correct and safe way, please let me know and I'll try to implement it in that way

---

I've added web-manager as a submodule, so it is wired to commits, so there should be no any versions mismatch between firmware and file manager

We can also move web-manager repository to https://github.com/open-x4-epaper org if you wish, to keep it all in one place

[daveallie]

I've been thinking deeper about the joining of a HTML/JS SPA and this project, and the more I think about it, the less of a good idea I think it is. There definitely is some nice UX value to be added by using a SPA with a more fully fledged framework, but it feels a little too overweight here.

Vanilla HTML/JS/CSS can do a lot these days, and in the interest of keeping the project contained and approachable for others, I'd rather not introduce new build dependencies or link out to another repo. That being said, there's probably a few things which can be done to make the HTML a little nicer to work on (like actually using document.createElement instead of just inserting raw HTML).

I definitely appreciate the effort here, and if there's anything from this PR (like the move functionality), you'd like to bring in, I'd be more than happy to accept it, but for now I'd like to keep the HTML/JS/CSS pretty vanilla and contained within the project.

[gebeto]

Understandable, sure 🙌 I'll implement move functionality in raw html/js and remove that React app for now

But I'll continue working on it as a separate project for now, will add some more functionality, maybe then it will make sense to integrate it(will see)