[REFACTORING]3.0 Preact refactoring->3.0.a

[luc-github]

ESP3D-WBUI 3.0 is using Preact and bootstrap 4.0
Current preact implementation is to be honnest,not really well done - that is my first Preact project and I have a lack of Preact knowledge - so I should consider it as a draft even it is currently workable.

So a rewrite is definitly necessary:
@alxblog did a great start on POC
It is based on spectre which seems lighter than bootstrap but meet all needs of ESP3D-WEBUI and even more.

The POC approach was to start a full rewrite to not be limited, but that is a huge task and unfortunatly @alxblog seems busy with others things - when on another side my preact knowledge is still pretty low 😊
But several approaches are really the way the webui need to gp:

• use full native state/ hook/context Preact API (e.g: no storeon lib, no document.getElementById )
• remove sliders when input is already available (e. g temperature controls)
• use panel mode even for settings
• separate code even for 3D printer FW and not only with GRBL
• use real ESP3D emulator and even allow to connect to local Ramps / printer board to use it to simulate Printer / esp3d serial interactions
• use modals and toasts instead of current dialog implementation
• no specifics buttons for Terminal and Files but a drop down menu for all panels
• define in one place UI components for multiple use
• simplify current UI as much as possible but keep fast access to features
• I really need to understand Preact Coding Mindset 👿 even reading current POC I still miss lot of concepts 😓

I think a full rewrite is too agressive (at least for me) and a step by step changes is the way to go

If anyone has suggestions/ideas / want to be my preact mentor(s) to achieve this I am ready ^_^

[luc-github]

OK I have started several online trainings for web development - so this month I will focus on them

[luc-github]

quick update as ESP3D activity is slowed down recently

I am still following webDev training - I have ordered 30 days for all trainings, and actually it is like pulling infos and realizing at each new training, I need more training orz...^_^

I have already followed CSS/HTML (110 lessons) then Javascript (standard and advanced, 198 lessons) and definitly I was outdated 😓

I am now on NodeJS training part (standard/advanced, 224 lessons), then I will follow react training (standard/advanced, 195) and may be will also follow the typescript training (58 lessons) TBC

To pratice I am rewriting the embedded page which is simple but use several bases of code for webUI I am trying to fit spectre POC UI for consistency :

I will include the esp3d emulator and offline test
currently I am around 2KB by disabling the transpiling as the target will be modern browser and I do not use any new javascript feature

I do not think I can finish all training within the registered month (now 10 days left and still a lot to learn) so I will register for additional month.

I hope results will be visible soon ^_^ , so thank you for your patience

[luc-github]

Update - busy but still ongoing on rewrite
here current embedded vs new embedded webUI :

version
Final size should be almost same as current but build process using webpack and E06 allows test version, I am trying to simplify and keep a consistent UI with coming WebUI 3.0

[luc-github]

The new embedded page is now part of ESP3D, the build process use webpack and so it will be easier to keep build libraries up to date unlike today, the UI is inpired from spectre css and I have tried to simplified a much as I could.

It has same features a latest embdedded page but refactored code.

The offline test is now available with simple ESP3D emulator, not yet the one done by @alxblog because it is still under devt
the gain in size is 10% 6,55 KB => 5,94 KB
The webpack build process cover :

• build to index.html.gz from sources
• conversion from index.html.gz to embedded.h
• copy new embedded.h to ESP3D sources file

So in embedded directory:

• nmp install to setup environment
• npm run dev to start server and test UI
• npm run build to generate and update the file embedded.h

Note: the tool bin2c is still necessary to convert the binary file to a text file to include in sources

Feel free to test and comment, there is always area of improvement for sure 😸

Now back to react / preact training

[luc-github]

Some update:
The rewrite using proper Preact coding method is ongoing , most of work is based on @alxblog POC that I am studying to apply properly - thank to his patience for all my questions and for completing my training on PreactJs 😅
The UI is based on PreactJs / Spectre.css - we keep general flow of (3.0) but simplify several parts which make it lighter

I am still on WebUi API itself implementation (settings management / websocket support / error rendering / modal dialogs implementation / code splitting, etc...)- not yet on real pages rendering

Here some ongoing test with menu implemented and http call test for the about page FYR:

[luc-github]

Now connection / disconnection pages will look like this

[luc-github]

Update :

Current size of 3.0 rewrite is 30.6KB at same state 3.0 was 35.7KB,

UI update : 3.0.0.a4 : 30.6KB | 0.0.0.6 : 35.7KB

but rewrite has already authentication support as well as all translations, connection status, mobile view, so benefit of rewrite is already noticeable even some refactoring could still be done but I am limited with with my current Preact knowledge
This looks definitely very promising 😺

[luc-github]

I was busy with some IT issues ( my Nas died, Travis become slow, etc..) and some personnal things kept me busy
Here the first part of Features settings UI implementation

Still need to implement the save / validation / import and export / restart and wifi AP scan dialog, but rendering is now more consistent .
Some features will also need so code update in [ESP400] output format, but currently I have only modified the test server part

I hope this part to be done next week

[luc-github]

the features tab is done - it has some new features that need an update of ESP3D FW
it allow to do all changes then save once, FW also now send information about necessary restart or not

Next step is settings interface tab - which will follow features tab style

[ETE-Design]

@luc-github Seem's really nice, is it also possible to add SSID / Security Options when network is hidden?

[luc-github]

what do you mean ? when Network is hidden you must type SSID and password - what is different ?

[luc-github]

Update, the web UI settings page is not almost done, it still miss:
1 - proper language selection, based on what language pack is available
2 - proper theme selection, based on selected pack
3 - Macro editor
4 - extra panel / page editor

I will add features in above order

[luc-github]

The theme and language support by external pack is now implemented, for the language packs, UI still need to be finished to validate the list of string to translate - so current language packs are just for POC but API is ready
For theme support - it is currently limited to css, a POC of Dark mode is done as well as another purple theme just as example, I suggest to wait the UI is finalized before doing a final theme but feel free to play

[luc-github]

Some update :
I got busy and some family things got my attention, which also result of a big lack of motivation for a couple of month.
So the development was really slow down, I also found a nasty bug that fried my brain but it is now fixed, so next week I should be back on track and focus on webUI - the macro / extra panels configuration code should be implemented soon, code preparation and base is ready - now need to do the implementation. 🤞

[luc-github]

Macros and Panels configuration are now implemented in settings, I have removed the color button customization because it is actually useless for panel / page, and it simplify the customization UI and the preferences.json file, also it may complexify the code at it would need also a push state color and hover state color that should be calculated, using space that could be used for better usage, and finally it may be weird with theme management as not take in account at all.

The error conditions in extrapanels / macros settings are not yet implemented because not yet well defined, TBD...

Next steps are more functionnals because they will use settings:
1- implement polling commands (:+1: done)
2 - implement the extra pages display
3 - implement terminal panel in dashboard page
4 - implement jog panel in dashboard page

[luc-github]

Update of UI with some conditions added

[DeeEmm]

Luc, do you have any view on a size comparison between V3 and 2.1?

How does the size of deployed code for the configuration interface compare to 2.1?

[luc-github]

No I did not do size tracker when doing 2..x , but 3.x refactoring work in more generic way than 2.x and bring more features

Refering final package size:
2.1 english only is 106kb, 3.0 english only is 95.6kb 3.0 refactored should be 10kb smaller Ithan initial 3.0 I hope, when 3.0 has more features than 2.1 and refactored version has also few more features than 3.0

in all case the target is to have smaller size between 2.0 vs 3.0

[DeeEmm]

Thanks Luc.

I recall some discussions about the 3.0 interface being modular, does this mean that for a CNC application we will not need to include the 3D printing components like temperature graphing and extruder control? (and vice versa) which saves space for other CNC specific features, or is there just a single deployment for all machines?

Just trying to get my head around the structure of the new code and potential available space for writing new features.

[luc-github]

these buttons are not part of navigation bar because they are contextual according tab
I do not like endless navigation bar which become unreadable on mobile view, also I do not think it make sens to compile several control that do differen things in same area (navigation bar / button / drop menu), IMHO is very bad user experience. no mention this bar is also used to add customized pages, so content can be bigger

I agree the buttons bar could be also on top of contextual area or as sticky bar always visible when doing scroll bar but again it become not easy on mobile view to always see controls that you only use few times, I have also bad experience with sticky navigation bar and overlaped display under bar that is why I did not do it

[luc-github]

The idea of the webui 3 is to be simple as much as possible, here the original target : #94 (comment)
Since the notification area was not well accepted in webui 3.0 and hard to managed in mobile view, I moved back to information area in rewrite, and information in each panel as well, Information page should be hidden if user do not want it.
I do not claim it is the best UI but I need to go to one direction, any what ever is done not everyone will be happy ^_^, but feel free to suggest / discuss - it when exchanging point of view that decission make sense or not

Edit: I realize the setting to hide information area is missing, I did not implemented it yet...

[nielsnl68]

The idea of the webui 3 is to be simple as much a possible here the original target : #94 (comment)

No worries, i agree on this, that is what i want as well.

... any what ever is done not everyone will be happy ^_^

Yeah i know. I have been an OS developer for years and there was always someone that had different ideas as well.

these buttons are not part of navigation bar because they are contextual according tab.

Correct that is what i was thinking about. The buttons should be changing based on the shown tab.

I do not like endless navigation bar which become unreadable on mobile view, also I do not think it make sens to compile several control that do different things in same area (navigation bar / button / drop menu), IMHO is very bad user experience. no mention this bar is also used to add customized pages, so content can be bigger

Frankly my idea is coming how android app's use the menu system in the right top corner. It can show menu-items on the headerbar or in pulldown menu or a hybrid of those two based on the space on the header-bar. I think preact could handle that very easy. Although i have never used it before. But from what i have read so far ,

I agree the buttons bar could be also on top of contextual area or as sticky bar always visible when doing scroll bar but again it become not easy on mobile view to always see controls that you only use few times, I have also bad experience with sticky navigation bar and overlapped display under bar that is why I did not do it

For me a sticky bar would work for me as well. Although i do not have very good experiences using them, it never worked as expected.

[nielsnl68]

Edit: I realize the setting to hide information area is missing, I did not implemented it yet...

what do you mean?

[luc-github]

Edit: I realize the setting to hide information area is missing, I did not implemented it yet...

what do you mean?

that the setting to hide information page menu is not yet implemented - I guess it is because I did not really worked yet on data to display , it will come soon as I am now almost back to the original agenda : #157 (comment)

[luc-github]

Notifications panel is now implemented 😸
after ESP3DLib 3.0 / ESP3D 3.0 refactoring - it is time to go back to original agenda:

• add sensors display
• 3D printer
  • Extruders controls
  • Fans controls
  • Flow controls
  • Temperatures control
  • Print status
  • MKS fast upload support
  • Marlin SD long file name display support (or not...)
  • TBD
• CNC
  • Status
  • Override
  • Probe
  • TBD
• Sand Table
  • TBD

As I did not get any feedback for the icons (#224) I will also take some time to do some to have some material to show

[luc-github]

Some preview for temperatures panel

The UI is simpler than the current 3.0 - I have removed all unused icons (and actually not really great...) and replaced by tooltips
The preheat temperature selection is the Chevron close to input and I am still wondering if I use dropList or Modal dialog to let user select.
The dropList has initially better user experience but in some edge cases, as the display is up or down and could be hidden if panel is on top and menu drop up or if panel is low / half hidden and drop is down, so use a modal dialog would be safer way ->TBT
The send button is show only if validation is ok - no error sub message but just a red border - to keep all controls aligned
No modification state state is handled as it is meaningless in such situation and show send button only if input is modified lead to many edge cases where actually it should be visible even no modification - so let's not use it.

I am also thinking to move temperature graph to dedicated panel instead of to keep things light / configurable and easy to read

Just wondering where to put the stop heating all button - in drop menu like in others panel ? or in header ? or in bottom of panel ?

So temperatures panel should be done for next week if no unexpected issue ^_^

[DivingDuck]

Maybe the buttons "motors off" and "emergency of" written as double line left and right and in between "stop heating all" so that you have all important buttons within the main window/area.

[luc-github]

As Emergency stop in all printer kill also all heating process - I am not sure it is necessary to get emergency stop close to stop heat all , also stop heat all is not supposed to be emergency command but more an easy way to stop all heaters

but yes putting the emergency stop button close to the panel button menu could be a good idea indeed, this space is not used and actually wasted
it just mean I need to add a specific entry for this area per target FW to allow any FW to add important key buttons

[luc-github]

Emmergency button is not available in top of dashboard and in bottom of information
here the temperature panel (final?) ui on Marlin

Final size is 68.6 KB for Marlin WebUI but without temperature graph which in webui 3.0 correspond to 76.8KB but again with a lot of less feature 😸, so refactoring bring a lot of benefit

Need to import the code for others FW and may be adapt the Temperature filter according target FW, and adjust other FW according new global features / typos changes

Then I will work on Temperature Graph panel and extruder panel

[luc-github]

Extruder Panel for not mixed extruders is now implemented for 3Dprinters

Next step is to add support UI for mixed extruders for Marlin / Repetier as it seems Smoothieware does not support it - I saw a discussion but no GCODE seems implemented like M163 for repetier or M165 like Marlin
So mixed extruders entry is not present in Smoothieware UI setting.

[luc-github]

The mixed extruder UI is now done - just need to add the extrude / reverse command and push the control to related target

It should be done Monday if no problem / perturbations

In theory the number of extruders in settings should not be necessary as it just need to split the color line to know the number, but it was simpler to do a sanity check on number of extruders than on color coding - > this could be improved later

[luc-github]

Final implementation for extruders panel
normal extruders :

mixed extruders:

still need some polishing but that is ok for now

Next steps are :
1 - implement Graph temperatures panel and Configuration Wizard pages
2 - fix bugs / missing user cases (like TFT/MKS fast Upload / ESP3DLib V2/ sensors / print status) based on current features with ESP3D / ESP3DLib systems
3 - start CNC UI
Still some tasks to do..., but everyday is getting close to the end 😸

Edit: current size for same features than WebUI V3 but with actually also features not present in V3
V3: 81.3KB
V3 refactoring: 70.2KB
=> 11.KB lighter = 14% lighter not bad 😸

[luc-github]

the chart Panel should look like this :

chart 1: extruders + redondant if any
chart 2: bed (if any) + chamber (if any) + board (if any)+ probe (if any)
chart 3: sensor (if any)
under each chart color label will be show, I do not plan to let user to choose color as it will complexify UI for no real gain and will avoid user error
2 buttons will be available to clear charts
1 - for chart 1 and 2 - because they use same set of values
1 - for chart 3 - because data come from another source as chart 1 & 2

the settings panel should be like this:

It should definitly be done this week

I do not know if allowing user to export values like in webUI 3 is necessary ?
feel free to feedback - if no feedback or feedback is not useful I will drop the feature - it should save space and can be added later if any request popup

[luc-github]

Charts panel is now implemented as POC for Marlin - the simulator now emulate heating and cooling

the Marlin package size is now 75.0KB vs 87.5KB on V3 => 12.5KB lighter 🐱

I will implement it for other 3D printer packages tomorrow and start test on real system boards

[luc-github]

I have defined some configuration matrix and started to test - I am fixing bugs I meet along the test
luc-github/ESP3D#741

[luc-github]

Ok everything is now fixed after tests - still some tests ongoing but it should not affect webUI - so I have added the last missing steps for 3D Printing:

• print status panel
• speed / flow / fan panel
• sensor output
• configuration wizard

[luc-github]

the speed / flow / fan panel is now done as POC in Marlin

the size is still good : 78.3 KB in refactoring vs 91.1KB in current 3.0, but refactoring also with this size include

• haptic feedback (vibration if button / check box is clicked)
• audio feedback (bip if button / check box is clicked)
  Of course these new setting can be disabled
  

I will work now on print status panel and do the porting for Marlin embedded / Repetier / Smoothiware

[luc-github]

print status / printer state POC is now done:

giving 78.5KB vs 91.4KB

as Wizard is actually not functional in 3.0 I think the comparaison can be stopped here - refactoring version has more features than current 3.0 with smaller footprint and it is more stable

Next step is adding play pause stop control in status panel then I will port the code to Marlin embedded / Repetier / Smoothieware

As mentionned above now refactoring is at least same level as current webUI 3.0, which mean ready to replace it, same for ESP3D V3 refactoring
I hope to finish play / pause / stop control this week end and do the porting this week end, which means merging as 3.0 will happen early next week => Finally...

[luc-github]

the print commands are now implemented as POC in Marlin
all selected devices in Files panel are displayed
the corresponding commands are configurable in settings giving flexibility

and final package size is still : 78.5 KB ^_^

So porting should be done tomorrow if no bug found during porting tests

[luc-github]

Porting is done - I will merge the code to branch 3.0 to become officially the 3.0 this week

[luc-github]

Merging is now done - I doing prerelease of alpha2 now - so I guess issue can be closed and discussion can continue on #94

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.