Basic functionality and documentation

jmpinit · May 29, 2023 · dbefe47 · dbefe47
1 parent 43dcd5e
commit dbefe47
Show file tree

Hide file tree

Showing 17 changed files with 5,810 additions and 1 deletion.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}
diff --git a/.github/workflows/documentation.yml b/.github/workflows/documentation.yml
@@ -0,0 +1,42 @@
+name: Build and Deploy Docs
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build documentation
+        run: yarn docs
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: 'docs'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+docs
+
 # Logs
 logs
 *.log

diff --git a/README.md b/README.md
@@ -1 +1,39 @@
-# p5.axidraw
+# p5.axidraw
+
+A [P5.js](https://p5js.org/) library for controlling the [AxiDraw](https://axidraw.com/)
+via the [WebSerial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API).
+
+## Usage
+
+```js
+const axi = new axidraw.AxiDraw();
+let connected = false;
+
+function setup() {
+  createCanvas(400, 400);
+}
+
+function mouseClicked() {
+  if (!connected) {
+    // Note: connect() must be called from a user gesture (e.g. a mouse click) due to
+    // browser security restrictions
+    axi.connect()
+      .then(() => {
+        connected = true;
+      });
+  }
+
+  // Draw a diagonal line
+  axi.penDown();
+  axi.moveTo(10, 10);
+  axi.penUp();
+
+  // Draw a diagonal line, but async
+
+  // axi.penDown()
+  //   .then(() => axi.moveTo(10, 10))
+  //   .then(() => axi.penUp());
+}
+```
+
+See the [examples](examples) directory for more.
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+
+  <script src="/dist/p5.axidraw.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
+
+  <style>
+      html, body {
+          margin: 0;
+          padding: 0;
+      }
+      canvas {
+          display: block;
+      }
+  </style>
+</head>
+<body>
+<main>
+</main>
+<script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/basic/sketch.js b/examples/basic/sketch.js
@@ -0,0 +1,33 @@
+/**
+ * This example shows how to connect to the AxiDraw and draw a line.
+ * Click the canvas to connect to the AxiDraw. Then click again to draw the line.
+ */
+
+const axi = new axidraw.AxiDraw();
+let connected = false;
+
+function setup() {
+  createCanvas(400, 400);
+}
+
+function mouseClicked() {
+  if (!connected) {
+    // Note: connect() must be called from a user gesture (e.g. a mouse click) due to
+    // browser security restrictions
+    axi.connect()
+      .then(() => {
+        connected = true;
+      });
+  }
+
+  // Draw a diagonal line
+  axi.penDown();
+  axi.moveTo(10, 10);
+  axi.penUp();
+
+  // Draw a diagonal line, but async
+
+  // axi.penDown()
+  //   .then(() => axi.moveTo(10, 10))
+  //   .then(() => axi.penUp());
+}
diff --git a/examples/mouse-control/index.html b/examples/mouse-control/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+
+  <script src="/dist/p5.axidraw.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
+
+  <style>
+      html, body {
+          margin: 0;
+          padding: 0;
+      }
+      canvas {
+          display: block;
+      }
+  </style>
+</head>
+<body>
+<main>
+</main>
+<script src="sketch.js"></script>
+</body>
+</html>
diff --git a/examples/mouse-control/sketch.js b/examples/mouse-control/sketch.js
@@ -0,0 +1,119 @@
+/**
+ * This example shows how to control the AxiDraw using the mouse.
+ * Click the canvas to connect to the AxiDraw. Then click and drag to draw.
+ * The AxiDraw will follow the position of the mouse.
+ */
+
+const MAX_X_MM = 50;
+const MAX_Y_MM = 50;
+const MOVE_THRESHOLD_MM = 1;
+
+const axi = new axidraw.AxiDraw();
+let connected = false;
+let moving = false;
+let lastPos;
+
+let lines = [];
+
+function setup() {
+  createCanvas(400, 400);
+
+  textAlign(CENTER);
+  ellipseMode(CENTER);
+
+  fill(0);
+
+  lastPos = createVector(0, 0);
+}
+
+function mouseClicked() {
+  if (!connected) {
+    axi.connect().then(() => {
+      connected = true;
+    });
+
+    return;
+  }
+}
+
+function mousePressed() {
+  drawing = true;
+
+  if (connected) {
+    axi.penDown();
+  }
+}
+
+function mouseReleased() {
+  drawing = false;
+
+  if (connected) {
+    axi.penUp();
+  }
+}
+
+function mmToPx(mmPos) {
+  return createVector(
+    constrain(map(mmPos.x, 0, MAX_X_MM, 0, width), 0, width),
+    constrain(map(mmPos.y, 0, MAX_Y_MM, 0, height), 0, height),
+  );
+}
+
+function moveAndDraw(x, y) {
+  moving = true;
+  axi.moveTo(x, y)
+    .then(() => {
+      moving = false;
+    });
+
+  if (!drawing) {
+    return;
+  }
+
+  lines.push([
+    mmToPx(lastPos),
+    mmToPx(createVector(x, y)),
+  ]);
+}
+
+function followMouse() {
+  const x = constrain(map(mouseX, 0, width, 0, MAX_X_MM), 0, MAX_X_MM);
+  const y = constrain(map(mouseY, 0, height, 0, MAX_Y_MM), 0, MAX_Y_MM);
+
+  const pxPos = mmToPx(createVector(x, y));
+
+  if (!drawing) {
+    // Draw a cursor
+    noStroke();
+    ellipse(pxPos.x, pxPos.y, 5, 5);
+  }
+
+  // Only send motion commands when the mouse has moved more than the threshold
+  // to reduce the number of commands sent to the AxiDraw
+  if (!moving && dist(lastPos.x, lastPos.y, x, y) > MOVE_THRESHOLD_MM) {
+    moveAndDraw(x, y);
+    lastPos = createVector(x, y);
+  }
+}
+
+function draw() {
+  if (!connected) {
+    background(255, 0, 0);
+    text('Click to Connect', width / 2, height / 2);
+    return;
+  }
+
+  background(0, 255, 0);
+
+  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
+    // Move the pen to the mouse position if it is inside the canvas
+    followMouse();
+  }
+
+  // Draw the lines
+  stroke(0);
+  strokeWeight(1);
+  for (let i = 0; i < lines.length; i += 1) {
+    line(lines[i][0].x, lines[i][0].y, lines[i][1].x, lines[i][1].y);
+  }
+}
diff --git a/examples/smiley/index.html b/examples/smiley/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+
+  <script src="/dist/p5.axidraw.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
+
+  <style>
+      html, body {
+          margin: 0;
+          padding: 0;
+      }
+      canvas {
+          display: block;
+      }
+  </style>
+</head>
+<body>
+<main>
+</main>
+<script src="sketch.js"></script>
+</body>
+</html>