search

luc-github / ESP3D-WEBUI

A Web UI for ESP8266 or ESP32 based boards connected to 3D printers / CNC
GNU General Public License v3.0
766 stars 305 forks source link

[REFACTORING]3.0 Preact refactoring->3.0.a #157

Closed luc-github closed 2 years ago

luc-github commented 3 years ago

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:

luc-github commented 2 years ago

supporting M28/M29 is a big challenge now with all tft sending queries and new auto report features in Firmware, for a result which is in best case hazardous, slow and that will be used by very few people I prefer to spend my time in something more usable. if really need this protocol then better use the 2.1 ESP3D.

MitchBradley commented 2 years ago

All that training that you did has really paid off. The structure of the new code is very clean.

ETE-Design commented 2 years ago

@luc-github Was just thinking if it could be possible as you already can define in configuration.h so you only activate it if you have an MKS Board like here, would be a great feature for all the MKS People, mabye a FR you can look at later on?: `//COMMUNICATION_PROTOCOL: to communicate with printer or TFT //RAW_SERIAL standard serial //MKS_SERIAL Mks protocol

define COMMUNICATION_PROTOCOL RAW_SERIAL`

luc-github commented 2 years ago

@ETE-Design sorry I am not sure to understand your meaning: on MKS boards which already support faster SD transfer protocol it would be a great addition to add support of M28/M29 (slow like hell and buggy protocol )? is that your meaning ?

ETE-Design commented 2 years ago

@luc-github Sorry thought you would remove it all, so if "Fast" SD Transfer is already supported them I'm glad :-) Thanks for your great work...

luc-github commented 2 years ago

@ETE-Design yes it is in ESP3D 3.0 and WebUI 3.0 - but not yet in refactoring version of WebUI, actually your message reminded me that I missed to add it in TODO list as well as MKS TFTSD and MKS TFT USB

nielsnl68 commented 2 years ago

hello @luc-github , i'm very new to FluidNc and ESP3d-WEBUI. Sadly i was not so fund of the WebUI that is used currently. I have done a lot of work with Javascript/html5 in the past and opted to help to make it a little bit nicer. @MitchBradley (a dev on FluidNC) told me they where working on your new WEBUI3 refactoring project so it would work within FluidNc, and that it would be much better when i direct my energy to the new layout.

At this point of time i have walked trough your code and as other said it looks very promising. There are still some thinks i do not understand well but that will come in time and i hope you could clear some of them. In return i offer my time to you in return.

PS. I registered myself on your discord server and i found out that i need to validate myself using a mobile phone (SMS?), sadly i do not have a mobile phone number, i use VOIP to my land-line for my mobile. Could you allow me access to your discord an other way?

luc-github commented 2 years ago

Yes I have set discord moderation to this level due to spamming, I have lowered now.

You want to read https://github.com/luc-github/ESP3D-WEBUI/issues/144

nielsnl68 commented 2 years ago

Thanks, i have already started reading that issue it is a lot.

luc-github commented 2 years ago

As explained here : https://github.com/luc-github/ESP3D/discussions/540#discussioncomment-2329607 the rewrite is the next version of the draft 3.0 In process of porting ESP3DLib with ESP3D 3.0 I did several update / fixes that will soon be back ported to ESP3D 3.0, one major update is the ESPXXX command output format that have been standardized : always plain text by default and add json=yes or json (only ESP400 does not do plain text but it has no meaning in plain text) this is to have consistent output when human type command , it get human readable output, for http / telnet / websocket commands to facilitate response handling the output can be json following this format 

{
      cmd: <the requested command id>,
      status: <the response status : ok / error>
      data: <the command's response which can be text or json if more than one response, this can also be the error detail if status is error>,
}

e.g: [ESP410]

echo: Start Scan
echo: luc-ext1  52% Secure
echo: luc-ext2  44% Secure
echo: End Scan
ok

With json output: [ESP410]json

{
      cmd: "410",
      status: "ok",
      data: [{ SSID: "luc-ext1", SIGNAL: "52", IS_PROTECTED: "1" },
             { SSID: "luc-ext2", SIGNAL: "44", IS_PROTECTED: "1" }
            ],
}

this will make sanity check easier when handling commands's response by getting original command requester / status / answer in clear output

So it will impact the webui rewrite, as it is still in heavy development, it is fine but to avoid to have to update the current webui 3.0, and because these changes are currently limited to ESP3DLib V2/3, from now ,the rewrite can only be used with ESP3DLib v2/3 until all code is merged I do not plan to do an special ESP3D branch, you can do it manually if want to test - ping me if need some help

I will merge ESP3DLib code to ESP3D 3.0 when ok and WebUI rewrite to 3.0 at once to avoid too much confusion.

Now all ESPXXX commands output have been updated in ESP3DLib V2/V3, I am now in process to update rewrite according new format, including the simulator - I hope to end it today.

luc-github commented 2 years ago

WebUI notification using [ESP600] is now implemented notif I need to do https://github.com/luc-github/ESP3D/issues/712 for https://github.com/luc-github/ESP3DLib/tree/2-0 and I will start on Notifications panel

nielsnl68 commented 2 years ago

Hello @luc-github , I have made myself available for some work on the CNC side of the webui-3. For that i have been looked at the webui-3 as it is now. And i love how you have done the main configuration screens (although the tab names need some tweaking). With one exception; the buttons at the bottom of those screens, would it be technical possible to show them in the right corner of the header bar. The same also applies for the panel selection button on the dashboard, i love to see that moved inside the header at the right side as well. That way we can always find them. And that is also the way that lot of other web-dasboards work. When this is possible, are you willing to change that?

As last item, I have a hard time believing in the panel based dashboard with the fixed width, i'm still try to think of a better way. but i'm blank, so i will comeback about this later.

luc-github commented 2 years ago

@nielsnl68 sorry do not understand - if you have screen capture with your modification / suggestion done with paint will be easier to understand

nielsnl68 commented 2 years ago

No problem here is a combinate image with the pulldown menu.

webui3 - moving buttons

To have more space in the header-bar the import and and export button could also be moved to the pulldown.

luc-github commented 2 years ago

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 commented 2 years ago

The idea of the webui 3 is to be simple as much as possible, here the original target : https://github.com/luc-github/ESP3D-WEBUI/discussions/94#discussion-61148 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 commented 2 years ago

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 commented 2 years ago

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

what do you mean?

luc-github commented 2 years ago

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 : https://github.com/luc-github/ESP3D-WEBUI/issues/157#issuecomment-974617599

luc-github commented 2 years ago

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

luc-github commented 2 years ago

Some preview for temperatures panel temperatures 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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

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 commented 2 years ago

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

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 commented 2 years ago

The mixed extruder UI is now done - just need to add the extrude / reverse command and push the control to related target mixed 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 commented 2 years ago

Final implementation for extruders panel normal extruders : image

mixed extruders: image

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 commented 2 years ago

the chart Panel should look like this : image 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: image

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 commented 2 years ago

Charts panel is now implemented as POC for Marlin - the simulator now emulate heating and cooling charts 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 commented 2 years ago

I have defined some configuration matrix and started to test - I am fixing bugs I meet along the test https://github.com/luc-github/ESP3D/issues/741

luc-github commented 2 years ago

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:

luc-github commented 2 years ago

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

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

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

luc-github commented 2 years ago

print status / printer state POC is now done: image 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 commented 2 years ago

image 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 image

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

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

luc-github commented 2 years ago

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

luc-github commented 2 years ago

Merging is now done - I doing prerelease of alpha2 now - so I guess issue can be closed and discussion can continue on https://github.com/luc-github/ESP3D-WEBUI/discussions/94

github-actions[bot] commented 2 years ago

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.