main.js

import {
  Utils,
  RequestCommandId,
  ResponseCommandId,
  NiimbotBluetoothClient,
  ImageEncoder,
  NiimbotSerialClient,
} from "@mmote/niimbluelib";

let client = null;

const bleConnectButton = document.querySelector("button.connect.ble");
const serialConnectButton = document.querySelector("button.connect.serial");
const disconnectButton = document.querySelector("button.disconnect");
const printButton = document.querySelector("button.print");
const logPane = document.querySelector(".logger");
const canvas = document.querySelector("canvas");

/** Draw canvas test content */
const repaint = () => {
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "white";
  ctx.lineWidth = 3;

  // fill background
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // draw diagonal line
  ctx.beginPath();
  ctx.moveTo(0, ctx.lineWidth / 2);
  ctx.lineTo(canvas.width, canvas.height-ctx.lineWidth / 2);
  ctx.stroke();

  // draw border
  ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1);
};

/** Add text to log pane */
const logger = (text) => {
  console.log(text);
  logPane.innerText += text + "\n";
  logPane.scrollTop = logPane.scrollHeight;
};


/** Instantiate client */
const newClient = (transport) => {
  if (client) {
    client.disconnect();
  }

  if (transport === "ble") {
    client = new NiimbotBluetoothClient();
  } else if (transport === "serial") {
    client = new NiimbotSerialClient();
  }

  client.on("packetsent", (e) => {
    logger(`>> ${Utils.bufToHex(e.packet.toBytes())} (${RequestCommandId[e.packet.command]})`);
  });

  client.on("packetreceived", (e) => {
    logger(`<< ${Utils.bufToHex(e.packet.toBytes())} (${ResponseCommandId[e.packet.command]})`);
  });

  client.on("connect", () => {
    logger("connected");
    disconnectButton.disabled = false;
    printButton.disabled = false;
    bleConnectButton.disabled = true;
    serialConnectButton.disabled = true;
  });

  client.on("disconnect", () => {
    logger("disconnected");
    disconnectButton.disabled = true;
    printButton.disabled = true;
    bleConnectButton.disabled = false;
    serialConnectButton.disabled = false;
  });

  client.on("printprogress", (e) => {
    logger(`Page ${e.page}/${e.pagesTotal}, Page print ${e.pagePrintProgress}%, Page feed ${e.pageFeedProgress}%`);
  });
};

/** On "Disconnect" clicked */
disconnectButton.onclick = () => {
  client.disconnect();
  client = null;
}

/** On "Connect BLE" clicked */
bleConnectButton.onclick = async () => {
  newClient("ble");

  try {
    await client.connect();
  } catch (e) {
    alert(e);
  }
};

/** On "Connect Serial" clicked */
serialConnectButton.onclick = async () => {
  newClient("serial");

  try {
    await client.connect();
  } catch (e) {
    alert(e);
  }
};

/** On "Print" clicked */
printButton.onclick = async () => {
  /** left or top */
  const printDirection = "left";
  const quantity = 1;

  /** Convert image to black and white bits */
  const encoded = ImageEncoder.encodeCanvas(canvas, printDirection);

  /** todo: Auto-detection works only for a small set of printers so manual user selection is required */
  const printTaskName = client.getPrintTaskType() ?? "D110";

  const printTask = client.abstraction.newPrintTask(printTaskName, {
    totalPages: quantity,
    statusPollIntervalMs: 100,
    statusTimeoutMs: 8_000,
  });

  try {
    await printTask.printInit();
    await printTask.printPage(encoded, quantity);
    await printTask.waitForFinished();
  } catch (e) {
    alert(e);
  } finally {
    await client.abstraction.printEnd();
  }
};

repaint();