CNC process visualization functionality

[sp5iou]

Is your feature request related to a problem? Please describe.
Current release doesn't have milling / printing progress visualization as is available in some CNC controlling applications i.e. Universal gcode sender or LaserGRBL. It would be great to have it in this web UI

Describe the solution you'd like
Develop graphical visualization of CNC process progress to see in quasi-real time drill / nozzle position XYZ and in different color
what has been already milled / printed / plotted.

Describe alternatives you've considered
I am using other software Universal gcode sender or LaserGRBL, for my grbl-ESP32 based plotter, but they do not have web based UI and do not show shapes plotted from SD card connected to my plotter.

Additional context
See on the picture below what I mean.

[github-actions]

Thank your for submiting, please be sure you followed template or your issue may be dismissed.

[luc-github]

This a reccurent request and I have answered several time but again:

Gcode sender and webUI are differents:

1 - GCODE sender control everything, have all GCODE file data from begining of the job to the end of the job.
2 - WebUi know nothing and rely on CNC FW status to show information, even worst on FluidNC, during SD Job it cannot even query/access SD card.

So WebUI can only display info it get when it is opened, not before, it has defintly limited access to GCODE data

Display graphical visualization of what it is currently plotting is likely possible, but not what have been done before webui was opened.
one mitigation is to open webui when starting a job and not closing it - in that case the visualization can be show from begining to end.

• Doing a pre-visualization is easy as SD job is not ongoing so WebUI can load file from SD and do a rendering.

• Doing an ongoing visualization of what have been done when web UI was not open is not possible with FluidNC/GRBL_ESP32 or would need to setup a cache system, cache the file when upload is done from webUI, then detect filename when job is ongoing. then try to find where job progressing is on going in file based on current commanda / % of progression, that will likely fail to be reliable 90% of the time IMHO, and will use a lot of code for just a fancy feature.

The best that can be done is :
1 - pre-visualization -> I think it is already implemented in current fluidNC webUI
2 - doing ongoing visualization , it only need CNC FW echo each command it is processing- and use mitigation solution I proposed for begin to end display

Do you have any comment or suggestion about my feedback as I may miss some possible solution ?

Additionnaly may I know what is the benefit/purpose of live visualization vs % of progression vs a camera monitoring?

I would really be interrested to know, as per my point of view, it is more a fancy feature than a real benefit but I may be wrong.

[sp5iou]

Hi Luc. Thank You for Quick reply on my issue. I fully agree that web ui visualisstion must have some limitations against what ugs offers, but i like what You mentioned as possible: 1. Preview taken from SD card. 2. Resonable progres visualization when web ui is open before job started and kept on-line till the end of job. With features web ui already offers it could be enough to Say that web ui is complete solutions. So if development start I offer my involvement in testing On my Corexy plotter with grbl Esp32 controller. Best regards. Marcin. Pobierz aplikację Outlook dla systemu Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Luc ***@***.***> Sent: Sunday, May 15, 2022 5:15:42 AM To: luc-github/ESP3D-WEBUI ***@***.***> Cc: sp5iou ***@***.***>; Assign ***@***.***> Subject: Re: [luc-github/ESP3D-WEBUI] CNC process visualization functionality (Issue #244) Assigned #244<#244> to @sp5iou<https://github.com/sp5iou>. — Reply to this email directly, view it on GitHub<#244 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AYPAFTTSMWWVYOCAGFAXPVTVKBT55ANCNFSM5V6CBS7Q>. You are receiving this because you were assigned.Message ID: ***@***.***>

[luc-github]

For reference : this lib is for 3D printing https://github.com/remcoder/gcode-preview but seems having small footprint (18.5KB zipped) so may be a stripped version could be smaller
Demo : https://gcode-preview.web.app/

For CNC 2D and 3D it should fit too I think

Note: the code use : https://glmatrix.net/ which has 13.5KB ziped footprint
Note: glmatrix is an abstraction layer for : https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

[ETE-Design]

@luc-github If you implement this it can also be used to show Preview of 3D Printer GCode :-)

[luc-github]

As mentioned above this need that the printer/cnc FW echo each command it is processing - I did not cheched what FW is doing it currently - I saw some Debug feature for echo - but too much debug/echo output may also affect the printer/cnc performance - no mention that the debug output for echo may also bring additional useless data that need to be sorted according printer /cnc fw - So it is not in my short time frame plan

But PR is always welcome

[luc-github]

I have give a try to https://marlinfw.org/docs/gcode/M111.html today and it echo only serial commands, not sd ones, so will need also a printer FW modification for this feature

[luc-github]

I will start to study webgl for path visualisation and probe plan representation,
I will start with 2D then go to 3D representation
because:

• laser use only 2D
• carving use 3D by material removal
• 3D printer use 3D by material addition
  so different visualization for differents needs

[luc-github]

Reading more the code of the above it actually use three library https://threejs.org/ which is great but overkill for what we need and too heavy even min version gzipped it is 144KB, and still need additional library code, which gzipped is 19KB, so not including the integration code, it add already 165KB, which is too much for a fancy feature on small flash capability.

So for 2D graphics even about 3D objects I am hopping having a lighter solution

I have started to study WebGL which seem still need the https://glmatrix.net/ (14KB) for code simplification but further investigation is necessary - at least for 2D only (2D path for laser or simple carving) it is enough.
I would like to avoid a 2D solution and 3D solution, TBD...

I will continue investigation

Any suggestion of another solution is of course welcome 😸

[MitchBradley]

FYI, in my fork of WebUI 2 that we use with FluidNC, there is 2D visualization in the Tablet-optimized tab. IA port to WebUI 3 is in progress. I will submit a PR at some point.

The code has these attributes:

• Quite compact, to fit within the space constraints.
• Renders onto a 2D Canvas Context, which is well-supported by most browsers
• Includes a simple GCode interpreter that handles motion commands and a few other GCode commands that can change the way that positions are interpreted
• Reads the GCode file from the controller via the HTTP download path
• The GCode interpreter processes the GCode twice, first to compute a bounding box that is used to scale the viewport, and then to render onto that viewport
• It is rendered through a projection matrix so you can view from different angles
• Instead of allowing arbitrary viewpoints, there is a fixed list of useful viewpoints, such as an oblique view that shows all three axes from an angle similar to what you would see when looking at a machine, and a top view that shows just X and Y. Plus variants that also show the machine bounds.
• The fixed set of projections permits a very simple UI, so instead of having complicated mouse gestures to orbit and pan and zoom, you just tap on the pane to cycle between the small number of views.
• During program run the visualization pane is automatically enlarged to use more of the screen, obscuring controls like jogging that cannot be used while running.
• The coordinate origin and initial position of the tool is shown, which is very helpful for ensuring that the WCO is properly set for that program.
• As the program is running, the current position of the tool is shown in the visualization.
• The GCode text is shown in a side pane.

At present, the visualization is only available through the Tablet UI tab, but there is no inherent reason why it could not be in a pane of its own, available through the main UI.

Here is a screenshot

[luc-github]

A quick chat with chatGPT suggest to use gcode-parser originaly from https://github.com/jherrm/gcode-parser and now in cncjs and regl which has a smaller footprint (25KB GZIP) vs Three (145KB GZIP)
the gcode parser is (3KB gzip) so 30KB is acceptable IMHO if packed with webUI =>TBD