GRBL or Marlin Sand Table UI

[jeffeb3]

Hi,

Some background

I use this UI with grbl_esp32 and I really like the simplicity of having it not be connected to a pi.

There is a type of machine for drawing patterns in the sand using a magnet pulling a marble. Some examples are the ZenXY by V1Engineering or the Sisyphus industries tables. The SI tables have a pi and a controller already. I have one of those, and I also have a zenxy table that is corexy, running grbl_esp32.

Here is my latest table

I made a website (sandify.org) to make it easier to create patterns for these machines and it makes simple gcode that can be ran on grbl or marlin machines (it is easy because there is no pen-up or Z 😄 ). I am not a javascript dev, I make money working in C++, but I have fumbled through enough with react-bootstrap to have a pretty functional site (and I have some great contributors).

There is a gcode sending solution running on a pi called "sandipy" (not sandify) that is python based. It has a lot of potential, but I really like putting everything in the ESP.

https://github.com/texx00/sandypi

The discussion

What I'm interested in is a front end that is focused on this application. I use the ESP3D-WEBUI on my machine and it works great, but I am an engineer :). My family doesn't really appreciate it, or feel comfortable using it.

Some of the work is just collapsing or disabling some of the controls (even the jog doesn't really make much sense to a calm machine that rolls a marble):

• Console
• Jog controls
• Spindle/Flood/Mist controls, spindle speed
• Machine position (probably) and zeroing out tools
• Z axis
• Individual homing (Even the single homing button might be better to just be done automatically).

These parts are very useful:

• grbl settings
• wifi/esp settings
• Speed Overrides and speed feedback
• SD Card controls, although more on that in a minute

I would really like to add:

• SD Card image previews. I'll talk about this more in a second. I think this is a big, neat feature with some choices
• Playlists. Maybe playlists of playlists.
• Options to reverse a pattern, or add a specific erase before a pattern

SD Card Preview

I have control over sandify. It is easy to create a similarly named .svg file (and optimize it for viewing in small resolution), which the user could upload. Then either the SD card list could show all the images, or there could be a little image button to see a preview before clicking go.

The Prusa slicer can embed an image in the gcode, and there is a plugin for octoprint to display them. I think the server recognizes that image, and creates a separate file immediately on upload. This would be a cool feature to add to sandify (so it would work with similar hardware or octorpint) and it could be useful for ESP3D-WEBUI too, for people using prusa-slicer. I have no idea what kind of software is needed to decode them (but it doesn't look like it is a secret).

It is also possible to consume the gcode, in javascript, and produce an image preview (for sand patterns, at least, where there is no workpiece, no extrusion, and one layer). If you look at the sandify.org website, you can see what I mean. I am using konva, but svg is also possible. We could make the upload function also create a thumbnail preprocessed on the client before adding it in a special location.

What to do next?

I haven't even tried to grub package the code yet. I see some changes in #94, and I am not sure how much is different in the grbl_ESP32 version by Bart Dring (which I am currently using).

I will not lie to you, I have limited time and I have too many projects already. But I am interested in cracking this nut to see what's inside. It might be easier for me to focus on one part or another (sd card image previews, or playlist functionality) and just wait for the #94 changes. I am also keenly aware of the maintenance costs on a public open source project. I would really like to stay as close to main as possible, but I know you won't break this excellent product for a small fraction of users.

Failure is always an option :) . So is a "no".

What do you think about this? All I am asking for now is a discussion about the challenges, and where this lines up with the other goals you(all) have. I have a lot to read and I want to do some tests on my desk too. I am fully aware you owe me nothing :) and I am sure I owe you since I have been using this for probably 2 years already.

Thank you! 👍 🍻

[luc-github]

Nice feedback - I already had discussion about sand table but none looked as nice as yours and none are so polished as https://sandify.org/
in 2.1 the ,webUI use vanilla js, grub for packaging and the webui code is same for 3D printer and grbl
in 3.0 I have used preact as framework, webpack for packaging and splited code between 3dprinting and grbl
I am still in preact learning curve and there is a refactoring needed due to lack of knowledge of ES17 and preact

I have started by 3d printing UI and the GRBL part is still under definition : #144, so you are free to join this discussion also

about features to add:

• Preview
  This is a recurrent request, which is easy to do on PC but not so easy on ESP using web browser
  1 - unlike PC app the webUI is a remote view depending of file access from ESP board
  2 - esp board is not a PC and web server is not powerful as nodejs on a PC
  3 - based on 1 and 2 you understand that doing a preview means loading the files each time you need them and so the esp board is then busy only serving the files at this moment, so loading several MB files can be very slow and impossible if machine is already running job from SD

That said, everything is question of compromise, sand table GCODE are pretty light I guess compare to other activities, because they limited to X Y movements, and so preview done by SVG could be also light which make the preview more easy to handle.

Embedded the svg in GCODE is elegant when the system can handle it - but it would need to load the full file in webUI (which will consume mcu time to stream full file) when weeneed a small part, or a rewrite of FW to stream only the preview
So at that point I would prefer a companion file that contain only the preview - that the webUI load when needed

• Playlists
  That part should be more a firmware feature as you do not expect webUI is alway open, webUI could help to generate the playlist content but not to control them

• Options to reverse a pattern, or add a specific erase before a pattern
  This looks more how the gcode file is processed : from begining to the end or from end to begining
  Another solution woud be when generate a gcode file the 2 others are also generated and called accordingly by webUI

I have considered to split 3DPrinting and GRBL for webUI to give flexibility in UI and avoid side effect of handling each part request side effects, so I am definitly not against adding a 3rd UI dedicated to sand tables

[jeffeb3]

Thank you for the thorough response. I really have to change my thinking into something for the esp instead of the PC focused work I normally do.

Regarding image previews.

• That is a really good point about making the esp32 read the files from the SD and then report them to the client browser. It's never fun to wait. It wouldn't be catastrophic to pause a sand table while waiting for an image to load, but it would certainly cause stress in a printer or CNC).
• The SVGs coming from sandify are only paths (no complex shapes) but they are quite long/detailed because they are intended to be used by plotters. I have one that I've used that is 800kB. But it isn't very useful as a preview that way, and I know there are svg libraries for simplifiying paths (combining hundreds of points into bezier curves, which are a few vertices). I would have to do some experiments to see what settings would work well for smaller, less cluttered preview svg or png images.
• We don't want to do too much on the server side, but we can do whatever we want in the client browser (mwa-ha-ha) during upload to create a file, or parse the svg out of the gcode, or even create our own compressed preview from the raw gcode. There may be a good solution there, but I'd have to think about it more. What are your constraints on external CDN dependencies? I'm guessing you don't want to include a large library, and you don't want to have to have the client connected to the Internet as a rule.
• Octoprint doesn't show every preview. This is probably a good strategy. You wouldn't want a new browser connection to cause a huge slow down while it loads a few dozen images when the user isn't even looking at that part of the UI. They do show the image in the "now playing" part of the UI, and there is a new button on each file that has an image that brings up a modal to show the preview. Even that would be a pretty nice feature for a sand table, or a CNC or 3D printer.

The part of the gcode that has the thumbnail is 42kB in the prusa format. It is clearly compressed, and it includes a 16x16 thumbnail and a 220x124 thumbnail. Octoprint serves it to the browser as a separate image (it is a PNG and only 29kB, somehow, maybe because it isn't completely human readable characters?).

16x16 part:

;
; thumbnail begin 16x16 968
; iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACnElEQVR4AYWT2U4TYRiG/9vQqEgKVR
; HBKluh1NJ9pp3pdEmpyJQiXRQVSARF0qII1UQsJEYtyCIuB4ARA2nZWtZovAwvw8PXvyPTlNTESd6T
; yf883zvLRwi9Tp08YeXtzC83b4ODZ8ExFrAmA0SdCj1MDeyMFRxvh+BywNfqQaBT/K3RqPtyLNE0qZ
; M+jwAXx8LJM2CtJrhM19DTUoFb6jOIGssQtVUj4GLQRuFwlx8PB3qRSMQxPDL4k3jcHJwOFoKdAU9h
; 0ViHXm2pBMuCOKNEuqsWExEBj4b6MTnxHPNzb7H45QOIx8VDoNVbWQu69ZV5sFAQoxm1KLHScQWrAw
; LeJV9i4dMsZuanQNyCAwHOgGCTogguFMjJtRm1X8KbsQHEn42A9LkNuNNYUgR203ujViWm3JXHBHJG
; zOUYFF0g9106xOnB3uazebhHcxbTnkrsRupwcLsei+2XJSBW8DiDLQp0WtQgwwEeUYMCj03l6NeVSg
; eW21XYp+BBQbZCtUhwFyT4blMJIg2n4TfVgyT6REmQy7CpDHPeKvrGa7BzNF3OV79KEuRAOaKxAeT1
; g2BeIGfcfh6rnVeRCdciS/P5ejWG9IpjsCQw1IG8fxEtEshtFnxVeCVU4N5R5WNRl6CD0YJkdzaxND
; 2Opw5VkeRfU3MJ0U9+w9IMt40B2T/M4PuPLPZ21jAZ5v4rCOsuooM3o43+uT4bC3J4kMEhlezubWB7
; O4WPE08QM58rFtDKXawWEa8TEbpUNzkbRJsZZG9/C5nsOra201jfSGFtdQWL80mMeRvzgqBGCSf7d2
; LIwSBId8fPGBCw6kFy4MZmGun1FNKpNSr4huXlJczOJBET7QixGrpsTrAWDjaDER665u0WPbx6HYQW
; Lf4AYIEJ49DAioYAAAAASUVORK5CYII=
; thumbnail end
;

I think it would be worth experimenting with these constraints:

1. Only load the image on clicks, so with an image preview modal, or when loading a currently printing file (or maybe even keep that inside a drop down/tab).
2. Start with a separate png or svg file. svg would make it easy for me at first, but a png is probably smaller (a lot of patterns have lines right on top of each other). png is probably also what is being created by the prusa printers, and I think that has a big advantage for the 90% of your other users :).
3. Then embed and try to extract the image from the gcode file when uploading it (just if the thumbnail is there, and near the top).

[jeffeb3]

Regarding playlists. That is a good point. I could imagine some tricks where the GUI could store and recall playlist information on the firmware's storage, and then generate some gcode file to play when someone plays a playlist. But it really should be the firmware who is in control of playing the playlist.

Regarding reverse/erase. You're right.

[jeffeb3]

Regarding CNC vs 3DP vs Sand UIs, I think that makes sense. I am curious how combined they will be. I haven't really dug into the code to see what kind of infrastructure you're developing, and where they would share or not share. I'll definitely hop over to the CNC discussion and add some comments. I would think Bart would have a lot of good advice too.

I read through the #94, and I am excited for this new look and structure. It definitely feels a lot more modern and clear.

[luc-github]

One note about preview feature - there is a major need : the esp board must have direct access to sd card and files which is not the case if esp is only connected by serial to printer / cnc
So it would be only possible if even implemented on board using esp32 as main mcu or with sd sharing mechanism like panucat devices boards.

WebUI do not use cdn because it must work in AP mode (no internet access)

The current UI 3.0 everything in dashboard panel is GRBL or 3D or sanfly specific - the notification area is also specific, only settings (Wifi / webUI) part is common and even webui settings has custom area according target : 3d printing or grbl

Even Grbl UI I would like to allow to have 2 UI: CNC and Laser even each on is should be customizable they should be pre defined for cnc or for laser