Better web ui

[ipepe]

I offer my help to create better web ui. My skills are not spectacular regarding front end, but I think we could do better. I have few ideas that we could brainstorm:

1. "Fat" but Pretty Web UI could be optional. It could work by sending file from SDCARD/www/index.html or if it's not present, we can render old html. If someone is working without SDCARD, we could provide "Fat" web ui as github pages with using API on local network device, for this we only need to set appropriate CORS headers.
2. I quite like https://github.com/luc-github/ESP3D-WEBUI. We could "borrow" some stuff from there, especially moving motors with that pretty interface. Regarding controlling 3d printer a lot is possible because of sending GCODE commands by API.
3. I thought about doing whole UI with Bootstrap+React. And contain everything in single html file with inline tags
4. We could gather what people would want from such ui, like: "Printing progres bar", "Browsing SD Card files". A lot is possible in browser nowdays so I really would love to hear many ideas.
5. I for purpose of development ui without ESP we could create simple NodeJS script that would "emulate" behaviour of ESP. This way, some frontend developers could easily join and help us, without knowledge and need for hardware or compilation in Arduino IDE.
6. If we need to store something without ESP implementing API we could use localstorage.

Let me know what You think.

[probonopd]

Is there a way to bake the HTML into the main firmware file, so that the user does not have to upload it to SPIFFS or SD? I like that by updating one firmware file, everything in the firmware gets updated. I don't like when the user has to fiddle around with additional files on SPIFFS and/or SD.

[ipepe]

If the web UI will not grow big. We could embed it into CPP file.

[probonopd]

Yes, http://tinkerman.cat/embed-your-website-in-your-esp8266-firmware-image/

[ipepe]

Wow. That looks really promising

[probonopd]

Also check https://github.com/ayushsharma82/ESP-DASH

[probonopd]

I quite like https://github.com/luc-github/ESP3D-WEBUI. We could "borrow" some stuff from there, especially moving motors with that pretty interface. Regarding controlling 3d printer a lot is possible because of sending GCODE commands by API.

Check how I send the "stop" command in the stop button. So, the basics are already there... especially since we have already implemented an endpoint for receiving random gcode commands for use with Cura.

[ipepe]

So what solution would fit You? How do You plan/imagine for this to work?

[probonopd]

Having something similar to ESP3D-WEBUI which would send XHR requests to the existing OctoPrint-compatible enpoints might work, I guess

[ipepe]

How about source code? Separate repository? Subdirectory in root of this repository? Stored in PROGMEM like in: http://tinkerman.cat/embed-your-website-in-your-esp8266-firmware-image/ ?

[probonopd]

Stored in PROGMEM like in: http://tinkerman.cat/embed-your-website-in-your-esp8266-firmware-image/

sounds good. This repository.

[probonopd]

Check this out! https://github.com/ayushsharma82/ESP-DASH/pull/22

I am happy to announce that i am finally ditching SPIFFS over PROGMEM for serving Webpage Files.

[ayushsharma82]

Hi, Thanks for referencing ESP-DASH here. I think ESP-DASH would be great addition to this, I myself own a 3D Printer and i would love to tinker around adding a ESP8266 in it. Over that, ESP-DASH will provide data diagnostics and show temperatures on Web UI in realtime.

Recently, Slider Controls were added to the library and it can facilitate setting temperatures on the 3d printer via sliders. @malbrook is working on 4 new cards, Including Uploader Card which can be used to upload G-Code. ( https://github.com/ayushsharma82/ESP-DASH/releases/tag/v2.2.1 ).

[probonopd]

Hi @ayushsharma82, welcome and thanks for joining here. 👍

ESP-DASH looks like a great addition to this indeed, especially now that PROGMEM is being used instead of SPIFFS.

Unfortunately I won't have the time to work on this myself anytime soon, so if you or @ipepe would like to go ahead and improve the (currently really minimalistic) web UI of WirelessPrinting you have my full support, I will definitely help with testing and will welcome pull requests.

[ipepe]

I'm smashed with work recently so currently I have to say no. If anyone wants to step in, then go ahead.

[ayushsharma82]

@probonopd @ipepe No Problem. I will try to integrate whenever i get some free time.

[probonopd]

👍 @ayushsharma82

[probonopd]

@ayushsharma82 can ESP-DASH load values from JSON endpoints? We already have existing endpoints (a subset of the OctoPrint API) that e.g., Cura is using to show the temperature, print percentage, and such. It would be ideal if those could be re-used for the web ui.

[ayushsharma82]

We can call ESPDash.updateCard('id', value) Inside those Endpoints.

[probonopd]

@ayushsharma82 do you still think you can contribute something to get this started? Even a small starting point would be good (as an example), I then probably could do the rest.

[ayushsharma82]

I'm currently on vacation. Will do it when I get back.

On Sat, 22 Jun 2019, 3:18 pm probonopd, notifications@github.com wrote:

@ayushsharma82 https://github.com/ayushsharma82 do you still think you can contribute something to get this started? Even a small starting point would be good (as an example), I then probably could do the rest.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/probonopd/WirelessPrinting/issues/110?email_source=notifications&email_token=AGK4NSEJXY3SGGGAQIVGJN3P3XYOVA5CNFSM4G427HRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYKFUQA#issuecomment-504650304, or mute the thread https://github.com/notifications/unsubscribe-auth/AGK4NSCPVUTEW5KZBLMWVETP3XYOVANCNFSM4G427HRA .

[onfoot]

So, you moved to Mars permanently? 😆

[ayushsharma82]

@onfoot I'm swamped with work. Didn't get time to shuttle back to earth. 😆

Enjoy this view: