[DISCUSSION]New UI 3.X #94
Replies: 117 comments 9 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.
-
|
how printer has access to esp cam sd ? |
Beta Was this translation helpful? Give feedback.
-
|
Missing features that need to be implemented : |
Beta Was this translation helpful? Give feedback.
-
|
If people use ARC on their printers the file is almost 1/10 in size so Will be not that slow to upload files... |
Beta Was this translation helpful? Give feedback.
-
|
I have to add bluetooth communication instead wi-fi in webUI....how can i add it? |
Beta Was this translation helpful? Give feedback.
-
|
you cannot - you can configure BT in webUI that is all - it is not http |
Beta Was this translation helpful? Give feedback.
-
|
How can I disable the Bluetooth radio since the access point is unavailable? Is it possible to send some gcode command to re-enable the access point? I could not find this information. |
Beta Was this translation helpful? Give feedback.
-
|
use direct command https://github.com/luc-github/ESP3D/wiki/Direct-ESP3D-commands |
Beta Was this translation helpful? Give feedback.
-
|
Thanks Luc. I followed your guidance and connected the card through BT. The documentation mentions to use the WIFI-AP parameter for ESP110, however it only worked correctly when I used the syntax: [ESP110] AP |
Beta Was this translation helpful? Give feedback.
-
|
There is may be a consistency bug, I will check thank you |
Beta Was this translation helpful? Give feedback.
-
|
I just did release of alpha2 which is the refactoring version and the new code base |
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.
-
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