M4GNV5 / EggEsp

ESP8266 Firmware + Web Frontend to control an EggBot Mini
6 stars 1 forks source link

Is this project still alive? #1

Closed evomotors closed 5 years ago

evomotors commented 5 years ago

I'm very interested.

M4GNV5 commented 5 years ago

I did some work on my eggbot a few weeks ago (as easter was approaching :wink:).

The software is functional, but not very user friendly. You can use the following steps to use it:

Did you build an eggbot yet? The main problem i ran into was the cheap stepper motors "28BYJ-48" use a gear, which has a gear backslash. This makes the pen "fall over" when gravity pulls it over to the other side of the gear backslash. So I guess the few more euros/dollars for other stepper motors might actually be worth it.

So in short: yes the project is still alive, I'll probably work on it every year around easter :smile:. Feel free to open Issues/PRs when you find something not working.

evomotors commented 5 years ago

I did build eggbot using good Nema 11 steppers. For some reason I assumed that html and js files are going into esp :)

M4GNV5 commented 5 years ago

I did build eggbot using good Nema 11 steppers.

The Nema 11 looks like a standard 4 wire stepper, you should be able to use the repo without changes. Just wire the steppers and the servo up to your esp as defined in EggESP.ino#L37-L44 (or wire it up the way you want and change the code). Using PEN_DRAWING and PEN_MOVING you can define the angels for the servo where the pen is on the egg and where it is in the air. Also dont forget to adjust the wifi settings in config.h

For some reason I assumed that html and js files are going into esp :)

Yeah, a nice feature would be for the ESP to host a web server with the interface and also receive commands via websockets or an http upload instead of netcat.

Looking at my local repo i found some unpushed path optimization code which i worked on during GPN18, not sure if it fully works though :sweat_smile:

evomotors commented 5 years ago

I had to change document.getElementById("image").innerHTML = e.target.result; to document.getElementById("image").outerHTML = e.target.result; in ui.js to make it work. No Idea why it works for you but not for me.

evomotors commented 5 years ago

I'm sorry for bothering you so much. I'm trying to implement "curves" and I have few questions... OP_MOVE and OP_MOVE_REL are moves with pen up? OP_LINE and OP_LINE_REL are moves with pen down?

I have a very fast JavaScript function that accepts xyxyxyxyx.. array of "Bezier Curves" from svg path and returns calculated array of points that can be connected to draw actua curve. The calculations based on Bernstein algorithm.

So for example if you pass all points (max 32) (including M points) from d="M 80,40 C 80,62.09139 62.09139,80 40,80 17.90861,80 0,62.09139 0,40 0,17.90861 17.90861,0 40,0 62.09139,0 80,17.90861 80,40 z" The function will return [80,40,79.9952773856246,40.5301231353746,79.9812058470235,41.0578865689064,79.9579284959639,41.5831533201137,79.9255866742731,42.1057920679158,79.8843199830695,42.6256769575499,79.8342663119191,43.1426874129309,79.7755618678968,43.6567079543382,79.7083412045282,44.1676280213096,79.6327372505942,44.6753418006297,79.5488813387758,45.1797480592983,79.4569032341225,45.6807499823677,79.3569311623255,46.17825501554,79.2490918377783,46.6721747124164,79.1335104914093,47.162424586294,79.0103108982711,47.6489239664046......(up to 1000 points)]

Let me know if you can help me to integrate this function in to the code .

EDIT--------------------------------------------------------------- do you think this going to work?

let split = path.split(/ |,/);
if(split[3]=='C' || split[3]=='c')
{
    // remove commands from array
    var moveToCommand = split.splice(0,1); // remove move to command
    split.splice(2,1); // remove (curve) C or c
    var closePathCommand = split.splice(split.length-1,1); // remove close path command

    // replace curve points 
    split = GetBezierPoints(split, 360);

    // reinsert commands
    split.splice(0, 0, moveToCommand);
    split.splice(3, 0, 'L');
    split.splice(split.length, 0, closePathCommand);
}
M4GNV5 commented 5 years ago

Hmm it would be a great idea to bring curve support to the front end. But the most important function GetBezierPoints is missing :sweat_smile:

I assume the 360 in GetBezierPoints(split, 360) defines how many lines to generate from a curve and thus how many points the resulting array will have?

evomotors commented 5 years ago

360 is how many lines are coming back. Where should I send a .js file? it's a couple of supporting functions it it as well.

By the way, have you check https://github.com/deanm/nanosvg (C SVG parser) and https://github.com/deanm/nanosvgjs (JavaScrip port)? Allegedly it's supports most SVG functionality.

evomotors commented 5 years ago

Here we go. https://github.com/evomotors/BezierCurvesJS

evomotors commented 5 years ago

Bump...

M4GNV5 commented 5 years ago

Sorry, im currently in a very busy week, I'll try to get time for this on the weekend

M4GNV5 commented 5 years ago

Alright, cubic beziers are working. However there is still some work todo:

I used a small svg with a cubic bezier curve for testing (mostly stolen from here):

<?xml version="1.0" standalone="no"?>
<svg width="2048" height="512" viewBox="0 0 500 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 100,200 C 100,100 250,100 250,200 C 250,300 400,300 400,200" />
</svg>

p.s.: do you have a video of your eggbot drawing? I would love to see it & use it in the readme etc. if thats ok for you?

evomotors commented 5 years ago

I played a little with nanosvgjs (javascript port of nanosvg) over the weekend, and now I can successfully generate g-code from pretty much any svg file I can find. Nanosvg parses svg and outputs a list of cubic bezier shapes, and then I convert these cubic beziers to line points using function that I posted earlier (10 lines looks more than enough).

Oh, I output actual g-code because I want to verify that output is correct. This is what I use to visualize g-code

    var svgImage = nsvgParse(fileData, 'px', 96);
    var commands=['G21 G40 G90\r\n'];

    for(var shape = svgImage.shapes; shape!=null; shape=shape.next)
    {
        for (var path=shape.paths; path!=null; path = path.next)
        {
            var x = path.pts[0], y = path.pts[1];
            commands.push('G0 X' + x + ' Y' + y + ' Z0.25000\r\n');

            for ( var i = 2; i < path.pts.length; i += 6 )
            {
                var bizierPoints = GetBezierPoints([x,y, path.pts[i],path.pts[i + 1], 
                    path.pts[i + 2],path.pts[i + 3], path.pts[i + 4],path.pts[i + 5]], 10);

                for(var b = 0; b < bizierPoints.length; b += 2)
                    commands.push('G1 X' + bizierPoints[b] + ' Y' + bizierPoints[b + 1] + ' Z-0.010 F50\r\n');

                x = path.pts[i + 4]; 
                y = path.pts[i + 5];
            }
        }
    }

    let a = document.createElement("a");
    a.style = "display: none";
    document.body.appendChild(a);
    let url = window.URL.createObjectURL(new Blob(commands));
    a.href = url;
    a.download = "ZZZZZZZ.nc";
    a.click();
    window.URL.revokeObjectURL(url);

The only thing left to do is auto-scale down output to fit the actual egg.

p.s. I still have arduino with motor shield connected to eggbot. So video wouldn't be appropriate.

evomotors commented 5 years ago

I uploaded complete working sample of the above. Please check it out here

Capture

As a proof of concept I'm actually drawing the converted SVG on canvas. So it is very possible to send these commands directly to ESP one by one using ajax.

M4GNV5 commented 5 years ago

This looks very interresting! What does the original svg look like? Are the shapes already consisting out of lines? Or does nanosvg convert them?

According to the nanosvg spec it converts svg to only cubic bezier curves. This makes me wonder wether a simple line converted to cubic beziers and then to lines using BizelCurve would result in a single gcode instruction or in multiple?

evomotors commented 5 years ago

This looks very interresting! What does the original svg look like? Are the shapes already consisting out of lines? Or does nanosvg convert them?

According to the nanosvg spec it converts svg to only cubic bezier curves. This makes me wonder wether a simple line converted to cubic beziers and then to lines using BizelCurve would result in a single gcode instruction or in multiple?

I uploaded svg's into folder in my repository (https://github.com/evomotors/SvgToGCode/tree/master/test/sample%20svg%20files), they are normal svgs. I tried bunch of them. nanosvg converts them to collection of chapes that contains collection of paths (cubic bezier curves points) and BizelCurve takes them and converts to lines. Result is one g-code file.

I'm working to optionally generate multiple g-code files for multicolored svgs Capture4 This is multi colored svg splitted to multiple g-code arrays and drawn on dynamically created canvases. Capture6 This is how original svg looks like

EDIT: I misread your question about possible multiple g-code instructions for simple line: I haven't tested this theory, but nanosvg outputs 4 points per Bizel and I'm using only 5 lines per biziel curve, so even if BizelCurve generating multiple instruction for simple line, they can be easily optimized.

evomotors commented 5 years ago

My hope is to create standalone eggbot, so even my 6 year old son will be able to use it from his tablet. e.g. (start drawing from the button click on the web page)

evomotors commented 5 years ago

Here we go. FIrst canvas is combined all present colors. Rest of canvases are splitted by colors. in this case is (gray, gold and black)

Capture22

evomotors commented 5 years ago

updates to https://github.com/evomotors/SvgToGCode. Now you can download individual g-code files separated by color.

evomotors commented 5 years ago

If you are interested, I made a complete standalone NodeMCU EggBot https://youtu.be/IVm5nGUV1zs

M4GNV5 commented 4 years ago

Hey,

today i received a mail from someone interested in the eggbot. He uses windows so he had some trouble using EggEsp from Edge. And i guess there will be even more trouble sending the instructions to the ESP. Did you publish the code of your version somewhere? It looks far more user friendly :wink: I see there is evomotors/ESPEggBot and https://github.com/evomotors/ESPEggBot/issues/1, do you plan on releasing the code?