FAB ACADEMY

Assignment: Machine Design: Scara-Draw-Bot

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

Scara-Draw-Bot

(1) GENERATING THE INTERFACE AND THE SVG FILE

(1) FIRST TRY

Here are some basics I read about HTML Canvas:

Link 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:

Link JS HTML DOM

DOM: Document object Model ist a an interface that allows scripts to dynamically access and update content, structure and style.

LINK TO THE HTML SITE "Drawing lines (vectors) on Canvas"

First script

(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.

USING PAPER.JS

LINK TO THE HTML SITE "Using paper.js | Exporting SVG file"

Second script

(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"

.

Third script

(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:

Link signature_pad

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"

Fourth script

(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.

Link G-code

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:

Link Extensions Gallery

Link How to make a new Extension

.

Inkscape Extension

Inkscape Extension

Inkscape Extension

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