Task:
GROUP assignment
- actuate and automate your machine
- document the group project and your individual contribution
You find the COMPLETE DOCUMENTATION of the Scara-Draw-Bot at our Group-Site
ACTUATE AND AUTOMATE YOUR MACHINE
Originally we had the idea to use the Canvas Interface (Java) for the Scara-Draw-Bot. The drawing on the Canvas can be downloaded and saved as an SVG File.
The next step was to load the SVG Drawing in Inkscape and to generate a GCode with a plugin in Inkscape. To control the machine we also need a GCode-Interpreter. These are the steps:
SOFTWARE CHAIN
→ (1) Generate a Raster or SVG File → with the Canvas Interface
→ (2) Generate the GCode from (1) → With a plugin in Inkscape
→ (3) Send the GCode to the Arduino board → with a GUI
→ (4) Transform the GCode into movements → with a GCode Interpreter
(1) GENERATING THE INTERFACE AND THE SVG FILE
(1) FIRST TRY
Here are some basics I read about HTML Canvas:
The next step was to generate vectors (lines) on the canvas. The script (first try) is based on this tutorial:
JavaScript Tutorial – To draw a line with a mouse click | Canvas Click Event
To understand the JavaScript I read about these terms
- JS DOM Elements: getElementById
- JS DOM EventListener: addEventListener
and found this link very useful:
DOM: Document object Model ist a an interface that allows scripts to dynamically access and update content, structure and style.
(1) SECOND TRY
We wanted to export the vectors as an SVG file. The following script only exports what is described in the script, that’s why we couldn’t use the code of this tutorial for our purpose.
Tutorial: Draw with JavaScript and Export to SVG with PAPER.JS
For this script it was necessary to integrate PAPER.JS into the bootstrap folder.
(1) THIRD TRY
The next step we wanted to try was to get the X and Y coordinates from the mouse click on the canvas.
We checked this site...
Get the mouse coordinates when clicking on canvas
… and then I combined the script with the FIRST TRY. So you can draw the lines (vectors) and get the XY coordinates. To see the coordinates:
- Press F12 and then go to Console.
LINK TO THE HTML SITE "Drawing lines (vectors) | Getting XY coordinates"
(1) FOURTH TRY
Finally, I found a JS script to generate vectors on a canvas and download them. You also can download JPG or PNG files. Take a look at the Github Site:
The authors of the script explained also, that you have some options in the file signature_pad.umd.js you can change, for example:
- Row 181: maxWidth
(float) Maximum width of a line. Defaults to 2.5
→ I changed it to 0.5
or
- Row 182: throttle
(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
→ I changed the value to 50 milliseconds.
LINK TO THE HTML SITE "Drawing vectors | Exporting SVG file"
(2) GENERATING THE G-CODE WITH A SVG FILE IN INKSCAPE
(2) INKSCAPE EXTENSIONS
Many drawing machines utilize a series of Inkscape extensions to control the machine. Inkscape is open source and has a python plugin system.
We wanted to use a GCode Interpreter (for example GRBL) to control the machine. For that I search for an Inkscape Extension to generate a GCode.
In some tutorials about drawing robots, the author mentioned this plugin:
JTP Laser Tool Plug-In for Inkscape
Tutorial Crazy Engineer’s Drawing Robot
A GCode is a programming language to control computerized machine tools. The machine moves according the g-codes. These “tells” the machine controller how to move the motors, the speed and the path.
HOW TO INSTALL THE EXTENSION (PLUG-IN) JTO Laser Tool
- Download the zip file from the Website JTO Laser Tool and extract it.
Download JTO laser Tool linked above.
- Move the unzipped files into this folder in the installation directory:
- In Windows: > inkscape/share/extensions
- In Ubuntu: > home/.config/inkscape/extensions
You find more information about Inkscape Extensions here:
NOTE
After many tries to control the machine with the GCode, it didn’t work.
That’s why we decided to start from the scratch and try another way to control the machine with a new script.You can see the result on the video.
You find more information about the new script and the Scara-Draw-Bot in the group assignment site.
You find the COMPLETE DOCUMENTATION of the Scara-Draw-Bot at our Group-Site
SVG and GCodes files(zip) | Download |