3. Final Code for Project¶
This is the code that was used in the presentation video.
//Code_yuichi4
// warning: without a powered usb-hub, currentScale > 0.5 are likely to fail
//
//Open browser’s DevTools console with
// cmd + shift + j (Linux)
// ctrl + shift + j (win)
// command + option + j (mac)
//
//https://fabacademy.org/2024/labs/kannai/Instruction/tips/machine_building/
//Modified by Zack Budzichowski Fab Academy 2024 Final Project
// UI in View tab
const el = document.createElement("div");
el.style = `
padding: 10px;
`
el.innerHTML = `
<h4><font color="#5B9BAF">FabAcademy2024-</font></h4>
<table>
<tbody>
<tr>
<td></td>
<td><button id="yPlus"> Y+ </button></td>
<td></td>
<td> </td><!-- space in 3rd column-->
<td><button id="Test"> Test </button></td><td></td>
</tr>
<tr>
<td><button id="xMinus"> X- </button></td>
<td></td>
<td><button id="xPlus"> X+ </button></td>
<td></td>
<td> </td><!-- space in 3rd column-->
<td><button id="Home"> Home </button></td><td></td>
</tr>
<tr>
<td></td>
<td><button id="yMinus"> Y- </button></td>
<td></td>
<td></td>
<td> </td><!-- space in 3rd column-->
<td><button id="DrawSquare"> DrawSquare </button></td><td></td> </tbody>
</table>
<hr>
<p>
<img src="https://fabacademy.org/2023/labs/charlotte/students/zack-budzichowski/images/home/fablablogocls.jpg" alt="FabLab Kannai" width="75">
<font color="#5B9BAF">Modular Things Core XY</font>
<img src="https://fabacademy.org/2024/labs/kannai/images/logo2022-yoko-w_transp.png" alt="FabLab Kannai" width="200">
<p>
<hr>
<p>
Open browser's DevTools console with<br>
cmd + shift + j (Linux)<br>
ctrl + shift + j (win)<br>
command + option + j (mac)
</p>
`;
//pen up initially
//zUp();
//test button
//================================
el
.querySelector("#Test")
.addEventListener("click", () => {
delay(100);
test();
//drawPolugon();
})
function test() {
machine.setPosition([0, 0]);
goTo(10,10 );
}
//================================
//Synchronizer of two motors
const machine = createSynchronizer([motorA, motorB]);
//Definition of CoreXY Motion
async function goTo(x,y){
console.log(`Moving to (${x}, ${y})`);
await machine.absolute([-1*(x+y),-1*(x-y)]); // The reason why "-1" is multiplied may be due to the wiring and origin position.
}
// Set button ID and click_event
el
.querySelector("#xPlus")
.addEventListener("click", () => {
xPlus();
})
el
.querySelector("#xMinus")
.addEventListener("click", () => {
xMinus();
})
el
.querySelector("#yPlus")
.addEventListener("click", () => {
yPlus();
})
el
.querySelector("#yMinus")
.addEventListener("click", () => {
yMinus();
})
el
.querySelector("#Home")
.addEventListener("click", () => {
goToHome();
})
el
.querySelector("#DrawSquare")
.addEventListener("click", () => {
delay(100);
drawSquare();
})
render(el);
// When you start running this javascript code, the machine runs from here
//motor setting
motorA.setCurrent(1);
motorA.setStepsPerUnit(5);
motorB.setCurrent(1);
motorB.setStepsPerUnit(5);
machine.setPosition([0, 0]);// set present position as (X0,Y0)
//machine.setPosition(0, 0);// CHECK this syntax works or not
//const isAtEndStopX = false;
//console.log(isAtEndStopX);
// Function definition
async function goToHome(){
while(await motorB.getLimitState()){ // Limit switch at X- as Normally-Open
motorA.velocity(10);//move motorA CW
motorB.velocity(10); //move motorB CW
}
while(await motorA.getLimitState()){ // Limit switch at Y- as Normally-Open
motorA.velocity(10); //positive value means CW
motorB.velocity(-10);//negative value means CCW
}
motorA.velocity(0);
motorB.velocity(0);
machine.setPosition([0, 0]);
await delay(1000);
goTo(10,10 );
machine.setPosition([0, 0]);
await delay(1000);
}//end of goToHome
function xPlus() {
//zUp();
machine.setPosition([0, 0]);
for ( i = 0; i<10; i++){
goTo(i,0 );
}
}
function xMinus() {
//zUp();
machine.setPosition([0, 0]);
for ( i = 0; i<10; i++){
goTo(-i,0 );
}
}
function yPlus() {
//zUp();
machine.setPosition([0, 0]);
for ( i = 0; i<10; i++){
goTo(0,i );
}
}
function yMinus() {
//zUp();
machine.setPosition([0, 0]);
for ( i = 0; i<10; i++){
goTo(0,-i );
}
}
async function drawSquare(){
//down();
for (let i = 0; i < ptsSquare.length; i++){
await goTo(ptsSquare[i][0], ptsSquare[i][1]);
await delay(200);
}
//zUp();
}
async function drawStar(){
//down();
for (let i = 0; i < ptsStar.length; i++){
await goTo(ptsStar[i][0], ptsStar[i][1]);
await delay(200);
}
//zUp();
}
// Array of [x,y] positions of drawing design
//Square
var ptsSquare = [[20,0],[20,20],[0,20],[0,0]];
//Star
var ptsStar = [[20,10],[30,50],[40,10],[10,40],[50,40],[20,10]];
//TestDraw
var pts = [[62.2, 26.2], [29.7, 26.2], [29.7, 49], [61, 49], [61, 62.5], [29.7, 62.5], [29.7, 92.7], [29.7, 107.9], [29.7, 130.7], [60.5, 98.5],
[69.9, 107.9], [42.6, 135.8], [85, 187.9], [66.1, 187.9], [32.6, 145.6], [29.7, 148.5], [29.7, 174.4], [15.6, 174.4], [15.6, 107.9],
[15.6, 92.7], [15.6, 12.7], [62.2, 12.7], [62.2, 26.2]];
//SVG -> ChatGPT -> vertex coordinates of the shape//This is NOT tested yet
var polygon1 = [[10,10],[10,20],[20,20],[20,10],[10,10]];
var polygon2 = [[30,30],[30,40],[40,40],[40,30],[30,30]];
async function drawPolugon() {
machine.setPosition([0, 0]);// set present position as (X0,Y0)
//zUp();
//about polygon1
await goTo(polygon1[0][0], polygon1[0][1]);//move to first position of polygon1
//zDown();
for (let i = 1; i < polygon1.length; i++){
await goTo(polygon1[i][0], polygon1[i][1]);//finish drawing polygon1
await delay(200);
}
//zUp();
//about polygon2
await goTo(polygon2[0][0], polygon2[0][1]);//move to first position of polygon2
//zDown();
for (let i = 1; i < polygon2.length; i++){
await goTo(polygon1[i][0], polygon1[i][1]);//finish drawing polygon2
await delay(200);
}
//zUp();
//finished drawing all polygons
goTo(0,0);//move back to (X0,Y0)
}