Here is a screenshot of the page:
drawtest.html:
drawtest.zip (2.7 KB)
The above zip contains the “drawtest.html” file with all the CSS and scripting needed to demonstrate real time drawing on a fluidNC plotter. The code is documented, so you should be able to customize to meet your needs. This is just the basics to demonstrate the capability. There is a lot more that can be added. Here are the big things you need to know to get started:
- Look for the section called PLOTTER SETTINGS and set the variables according to your plotter setup. I set it up based on the info you gave me, so all you should need to do is change the “plotterAddr” to the IP address of your plotter (fluidNC).
- The “Home” button will send a “$H” command to your plotter. The other two buttons run macros that I have on my machine to select and replace a pen. You won’t have those macros and don’t need them with a fixed pen setup, but even if you did, they wouldn’t work unless you change the fluidNC firmware. However, everything else should work on any standard fluidNC install. I only included those two buttons as an example if you want to take things further down the road, like run macros, upload files to the SD card and run them, etc. For the modified firmware (not required for this demo) refer to this thread:
(see Custom UI for FluidNC - Things You’ve Made - V1 Engineering Forum) - Depending on the touch device you want to load the page on, you might not need a web server. For instance, a laptop with a touchscreen will run the page on most browsers and the page can be loaded from the local hard drive. On mobile devices like tablets and phones, that is not so easy to do, so you will want a local web server to host the file. You will want to make sure the web server does NOT force a secure connection (https). The address in the browser must be something like http://serveraddress.com/drawtest.html or file:///localpathtofile/drawtest.html .
- To try it out, turn on the plotter and refresh the drawtest.html page in your browser. If everything is set correctly, the status light on the upper right of the page will turn green. If it doesn’t, double check the ip address you entered in the settings.
- As an initial test, tap the center of the canvas. The pen should move there, lower the pen to the paper, then lift it again. If that works, then start scribbling.
- To clear the canvas, refresh the page. NOTE: I have found that if you refresh the page when the pen is drawing, it will cause an Alarm on the plotter and change the Machine coords (0,0,0) to the current position. If that happens, you will need to reboot fluidNC, then refresh the page, then Home the machine again. I haven’t looked into why that is happening, but I’m sure there is a something that can done to prevent it.
If you have questions or problems, let me know.