[DISCUSSION]New UI 3.X #94
Replies: 121 comments 25 replies
-
|
About page is done here some screenshots Desktop UI Mobile UI Header and notification are top fixed : Next week I will work on Settings Page Current index.html.gz is under dist directory for early test : https://github.com/luc-github/ESP3D-WEBUI/blob/3.0/dist/index.html.gz |
Beta Was this translation helpful? Give feedback.
-
|
settings is ongoing - still on ESP3D settings this week because I needed to setup some workflow
If save failed an Error message popup and setting stay in orange
Settings are grouped by section, a new flag F2 is added in ESP400 to group then automaticaly So result is a simplified UI that will be consistent accross all settings (I hope) I still need to implement the |
Beta Was this translation helpful? Give feedback.
-
|
setting has now the scan dialog : |
Beta Was this translation helpful? Give feedback.
-
|
Export settings is now implemented The button directly save the file to PC, it seems not possible to do a 'SaveAs' to select destination - but at least settings are exported in JSON file from web page, next step is import this file 😸 |
Beta Was this translation helpful? Give feedback.
-
|
Import and board restart are now implemented - next step will be UI preferences settings for current UI settings then fw target settings |
Beta Was this translation helpful? Give feedback.
-
|
nice work ! |
Beta Was this translation helpful? Give feedback.
-
|
everything is here : https://github.com/luc-github/ESP3D-WEBUI/tree/3.0 But you need to have ESP3D 3.0 on ESP to makeit work or you can use the commands |
Beta Was this translation helpful? Give feedback.
-
|
UI settings have some check boxes and there is no way to use default checkbox and add visual feedback on it - so I have created a custom one when settings are saved :
like this rendering should be consistent I do not think red one is necessary because there is no error possible to check/uncheck check box - for the moment... |
Beta Was this translation helpful? Give feedback.
-
|
Wow looks very nice!! Only one suggestions: Add some right padding to the icons on the buttons, so there is some room between the icons and the button text 🙂 Edit: And for the tabs (Features, Interface, Repetier): try to set border-radius on the top-right / bottom-right corner to 0 on the first, no border-radius on the middle on and top-left / bottom-left on the last button. Something like: .tab-button {
border-radius: 0;
}
.tab-button:first {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tab-button:last {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
} |
Beta Was this translation helpful? Give feedback.
-
|
for the button padding text you are correct need modifications padding was not enough and not same everywhere actually for the setting selection well I tried tabs before and I was not happy with the rendering - so I used button like but not to spaced - please note on mobile UI there is no text
If you have better rendering feel free to try - this bar is in |
Beta Was this translation helpful? Give feedback.
-
|
How about something like the button group from bootstrap? |
Beta Was this translation helpful? Give feedback.
-
|
yes tried also when looking for a solution and not really find nice for this usage too much stick together, so looks weird full pc page to have so tiny control , and for touch device I think it is better control has clear visible separation when they are close to each others IMHO I could not find proper solution so I have put button nav bar... |
Beta Was this translation helpful? Give feedback.
-
|
Languages pack are now supported
Currently the language list is hard coded in page, but last item allow |
Beta Was this translation helpful? Give feedback.
-
|
Next steps roadmap :
with import / export feature as other settings 2 - Terminal commands 3 - The jog control -TBD - I am still wondering if I improve current UI based on pronter face or define/use a new one Feedback are highly welcome 4 - File upload / monitoring - based on different possible SD , USB Disk/ etc.. TBD 5 - Specific panel according target Printer (temperature/extruder/ status/ DHT etc...) / CNC (probe/ status) 6 - Macro support 7 - Camera support (embedded / IP) 8 - TBC Still a lot of to do but path is clear and hope will go smoothly - no idea for ETA yet, sorry |
Beta Was this translation helpful? Give feedback.
-
|
Printer/ CNC settings tooks more than I expected, lot of small details need to be adjusted, but it is done I have tried to make consistent UI between FW which was a big challenge
Marlin PC view: Marlin Mobile view: Repetier PC view: Repetier Mobile view: Smoothieware PC view : Smoothieware Mobile view: Smoothieware config-override PC view : Smoothieware config-override Mobile view: GRBL PC view: Grbl Mobile view : Label using text can be long and with translation in some language it can be even longer - so in mobile view text font is decreseased to keep space available for input Commented lines in smoothieware are a lot and useless because there is not "easy" way to uncomment a line currently so I decided to remove them, I kept only the comment at the end of each active setting and put then as settting header, same for comments in config-override In Marlin I use comment as setting headers also Repetier has no comments but help for units - so when put them at the end of input Grbl label are not always meaning full so the header is a Comment and Help are hidden in mobile view to keep view clear all setting can be imported and exported To check the value enterred is correct I have added some basic test according FW constraint and tried to use some regex for validation - this part need to be improved but should be ok for the moment all http commands answer using GCODE are catched by websocket Now printer index.htmlgz is 46.3 KB when grbl is 45.6 KB languages pack are generated and compressed in each target directory I have splitted what is specific printer and what is specific grbl I did not tested on real system yet - only on dev mode which simulate esp3d + printer responses so some adjustment may necessary on live system, I will do it after the next step implementation Next step : Terminal commands |
Beta Was this translation helpful? Give feedback.
-
|
Now refactor version is the new WebUI 3.0 code base I continue as follow, I will do a wizard branch to avoid disturbance in user testing , so it should be ok to use the V3 webui anytime, feel free to feedback / report issues I am also thinking on ESP3D configurator solution using a combination of the form github issue (doc )and some github action script ->but this is another timeframe as wizard need to be done first |
Beta Was this translation helpful? Give feedback.
-
|
Update: I am reviewing all state / commands and output right now, and experimenting on my system, additionnaly for GRBL the current status of ESP3D Gcode stream may be enough to be used - so I will add direct SD support to GRBL also and test the streaming from SD which may need some update from ESP3D FW as currently stream only support Local FS so I also continue to fix bugs / gliches in webUI |
Beta Was this translation helpful? Give feedback.
-
|
Status panel is now implemented - it may be completed later with missing informations |
Beta Was this translation helpful? Give feedback.
-
|
Override and spindle panel are now implemented Screencast |
Beta Was this translation helpful? Give feedback.
-
|
Laser panel is implemented - it is partially inspirated from cncjs as I had hard time to find specific laser UI the information panel use spindle_panel info if enabled if spindle panel is not enabled then only laser state is displayed My system use same pin for laser and for spindle so I do not know if another rendering is necessary - feel free to feedback Next step is :
Note : current package size is 71.7 KB - which is not so bad compare to 116 KB of version 2.1.1 ^_^ |
Beta Was this translation helpful? Give feedback.
-
|
Input pins state is now in status panel - not in information as IMHO is not relevant for information panel - so no need to overload it Still studying the probe workflow as if the probe command is pretty clear (G38.2 or G38.3 or G38.4 or G38.5) on any axis (X or Y or Z) - it seems once probe is done there are several ways / possible commands to finish the probing process, here some of them
So I am thinking to allow user to write it's own end process script in settings, the probe thickness and may be the PRB values will be put in variables so script can use them, these variables will have same syntax as realtime commands so in settings feedback/suggestions are welcome 😸 |
Beta Was this translation helpful? Give feedback.
-
|
GRBL Probe panel is now implemented I will see now if can easily add gcode streaming feature and control from ESP3D SD to GRBL Note: currently the UI is using metrics - imperial system is detected by states but UI does not reflect it currently |
Beta Was this translation helpful? Give feedback.
-
|
Stream feature is now implemented for GRBL, buttons pause / resume / abort / clear error will appear according streaming status Normal state: Pause state: Aborted state go to error: |
Beta Was this translation helpful? Give feedback.
-
|
Update : Still working on grblHal support (#252), implementing some suggestion and also needs for grblHal that does not use Flash so there are several rewrite ongoing. Most of change are already done for ESP3D / ESP3D embedded page / WebUI, still need to sync code of ESP3DLib and embedded page of ESP3DLib - it should be done next week hopefuly Once done everything will be pushed to github at once because all version need to be aligned to work together The grblHal support is now pretty well defined, just need to finalize the Machine tab to it, it will come after |
Beta Was this translation helpful? Give feedback.
-
|
I have pushed a breaking update of webUI v3 for the websocket subprotocol, you need to use the latest ESP3D V3 or latest ESP3DLib V3 to have proper communications |
Beta Was this translation helpful? Give feedback.
-
|
The web-UI will need some update soon to support GCODE Streaming for 3D Printer because it is only partially supported by CNC ESP3D-WebUI 3.0 currently, the ESP3D-WEBUI 3.0 is actually now used by ESP3D V3.0 / ESP3DLib V3.0 / ESP3D-TFT V1.0 and grblHAL |
Beta Was this translation helpful? Give feedback.
-
|
Here the TODO list to be done before enable the translation step: |
Beta Was this translation helpful? Give feedback.
-
|
When working on #255 I found that some APIis currently missing to the existing extensions one (https://esp3d.io/esp3d-webui/v3.x/documentation/api/extensions/index.html)- like to to get/set Extensions settings in preferences.json - still need to write the doc on esp3d.io |
Beta Was this translation helpful? Give feedback.
-
|
API extensions as now new features: Documentation for API is now updated on https://esp3d.io Some Panels / Pages now have a full screen button, this feature was initially breaking modals/ toasts display in full screen but it is now fixed 🤞 Some fixes / feature miss have been implemented (e.g : proper support for tooltips for boolean and select controls) Due to number of fix and new features the size have been increased from 92579 to 94237 = 1,658Bytes The POC extension that will use almost all (click2go : #255 ) is still under dev, but now all API are ready it should be finished within few days 🤞 😸 |
Beta Was this translation helpful? Give feedback.
-
|
#255 is now closed, it is a good POC of what extensions API can do I think ^_^ |
Beta Was this translation helpful? Give feedback.
-
|
Just an update as I am working on private repository doing tests on 3d rendering : I have just finished a POC of GCODE visualizer - currently 3D for 3D printer it can also be used for 2D cnc , supporting mouse and touch it use only canvas for the representation, the POC is not yet optimized, but it can handle large files, I have tested 1MB and 16MB GCODE, the 16MB representation is fast but the animation/responsivness to view change is slow , when the 1MB file is working smoothly The key point is that the total code minimified and tar/gz is 5.46 KB, so it is really not bad 😸
using WebGL may increase the responsivness on large files, so I will try to use it TBC This may also be used to represent the bed mesh leveling visualiser like #106 and any fancy 3D rendering I am still frying my brain with matrix representation and matrix/angles operations because mathematics is not my favorite occupation, I have always prefered to write programs that solved maths for me 😉 Using such code would avoid any usage of the huge three / orbit libraries that may cost more than 150KB once minified and gzip vs less than 6Kb 🎆, and no need internet access , to be honest, I did not expect such result Let me know what you think |
Beta Was this translation helpful? Give feedback.
-
|
Oh, maybe I do not correctly explain what I was thinking. I thought about the idea of loading three.js if needed. Edit: Just see you have extend your answer :) |
Beta Was this translation helpful? Give feedback.
-
|
using such different user cases make code and support painful, no mention need to document each case and when to use it. |
Beta Was this translation helpful? Give feedback.
-
|
You are truly right with this point, especially when I remember one issue discussion this week end here that I saw. ... but I think, it is maybe a nice idea for implementing some external features that would not possible do to the limitations that exists. Anyway, you gave me more than one adequate answer and insights, I promise I now stop thinking loud. :) |
Beta Was this translation helpful? Give feedback.
-
|
Do not get me wrong I stop no one to do extension using three.js - or using any external cdn - I just won't do it that is all ^_^ That is why I have tried to add the extension API to fullfil any wish |
Beta Was this translation helpful? Give feedback.
-
|
Using pure webGL was a rude learning curve but it is now done - I still need to add touch support and invert XY axis and recenter the image if needed and will see if can improve some performance for large file, I have tested with 16MB for the moment |
Beta Was this translation helpful? Give feedback.
-
|
The extension that use iframe are currently not static, iframe content are reset at each redraw, which is not convenient because the content is lost if you go to settings / or even go to full screen - so behavior is not good, the gcodeviewer cannot be used in full screen because of this which is a pity |
Beta Was this translation helpful? Give feedback.
-
|
just some update it is more complex than expected - iframe are always refreshed when append to a node : that is by design, so there is no way to move a node from one parent to another, orz... I also will complete the extension API with a notitification message for the extension : extension isVisible (true/false)- so if hidden the extension program can choose to pause or not its process or do others things , I may also add isFullscreen (true/false) if necessary TBC Anyway even painfully the extension API / implementation is improving 😸 to far so good |
Beta Was this translation helpful? Give feedback.
-
|
The code of making extra content persistent is now working ,I did several refactoring and add some sanity check, the full screen support drove me crazy but it was finally properly managed in page mode and panel mode. The final package increase is 3KB due to new logic and additionnal sanity check, but it allows also to make some part of the code more robust in PreactJS way, I have learn in hard way ^_^ , I am currently updating the documentation on https://esp3d.io and still have to do test in real env because until now I just did in dev mode. I have open a PR (#398) if someone want also test and give some feedback Note: the PR include also the latest version of the GCODE viewer which was a good candidat for persistent extension testing , I have also tested with https://grid.space/kiri/ as external content As usual feedbacks / constructives comments are welcome |
Beta Was this translation helpful? Give feedback.
-
Now Framework is defined and components almost defined here, and wizard process is under definition here
It is time to discuss UI itself, to specify it's look and feel and behavior
Here a start :
menu items should be limited to minimum, and should be collapsed to list menu if mobile device
ESP3D -> an about box listing informations about current settings / browser / versions, links to Github and allowing web update feature for FW and UI
Dasboard -> everything related to machine (defined later)
Settings -> every settings in one place : ESP3D wifi / features settings, Machine settings / webUI preferences
Login -> if authentication is enabled, it will allow to log out and change user password
a camera switch if camera feature is enabled (on / off / overlay / embedded)
a fast access to Terminal command, not always need one but when need better to be easily accessible
Notification area - always visible, it should display important output informations
if dashboard is selected
and allow to manage files and start a job when possible
if settings is selected
The idea is to get most of important output first, then input according frequency of usage
e.g. no need to permanetly show settings neither files systems, no need to display autocheck control all the time, etc..
but even a feature is not always used, it should be easily accessible
Feedback suggestions are welcome
Beta Was this translation helpful? Give feedback.
All reactions