cnc_wams/wasm-port/runtime/ui/ini-panel/app.js

import { createLinuxCncIniSdk } from "../../sdk/src/index.js";
import {
  getOpfsRoot,
  loadTextFile,
  saveTextFile,
} from "../../opfs/file-service.js";

const SAMPLE_PATH =
  "../../../linuxcnc/configs/sim/axis/vismach/5axis/table-dual-rotary/xyzab-tdr.ini";
const OPFS_FILE = "linuxcnc/xyzab-tdr.ini";
const WASM_FILE = "/work/xyzab-tdr.ini";

const editor = document.getElementById("ini-editor");
const logNode = document.getElementById("log");
const wasmBadge = document.getElementById("wasm-badge");
const opfsBadge = document.getElementById("opfs-badge");

const fields = {
  machine: document.getElementById("field-machine"),
  display: document.getElementById("field-display"),
  kinematics: document.getElementById("field-kinematics"),
  joints: document.getElementById("field-joints"),
  coordinates: document.getElementById("field-coordinates"),
  parameterFile: document.getElementById("field-parameter-file"),
};

let iniSdk = null;

function setBadge(node, text, className = "badge") {
  node.className = className;
  node.textContent = text;
}

function setLog(message, isError = false) {
  logNode.textContent = message;
  logNode.className = `log${isError ? " danger" : ""}`;
}

function setField(name, value) {
  fields[name].textContent = value ?? "-";
}

function requireIniSdk() {
  if (!iniSdk) {
    throw new Error("WASM module is not ready yet.");
  }
  return iniSdk;
}

function syncEditorToWasmFs() {
  requireIniSdk().writeTextFile(WASM_FILE, editor.value);
}

async function loadSample() {
  setLog(`Fetching ${SAMPLE_PATH}`);
  const response = await fetch(SAMPLE_PATH);
  if (!response.ok) {
    throw new Error(`Cannot fetch sample INI (${response.status})`);
  }
  editor.value = await response.text();
  setLog("Loaded LinuxCNC sample INI into the standalone editor.");
}

async function boot() {
  try {
    iniSdk = await createLinuxCncIniSdk();
    setBadge(wasmBadge, "WASM: ready");
  } catch (error) {
    setBadge(wasmBadge, "WASM: failed", "badge danger");
    setLog(`WASM init failed: ${error.message}`, true);
    throw error;
  }

  try {
    await getOpfsRoot();
    setBadge(opfsBadge, "OPFS: ready");
  } catch (error) {
    setBadge(opfsBadge, "OPFS: unavailable", "badge danger");
    setLog(`OPFS check failed: ${error.message}`, true);
  }
}

document.getElementById("load-sample").addEventListener("click", async () => {
  try {
    await loadSample();
  } catch (error) {
    setLog(error.message, true);
  }
});

document.getElementById("save-opfs").addEventListener("click", async () => {
  try {
    await saveTextFile(OPFS_FILE, editor.value);
    setLog(`Saved current INI text to OPFS at ${OPFS_FILE}`);
  } catch (error) {
    setLog(`OPFS save failed: ${error.message}`, true);
  }
});

document.getElementById("load-opfs").addEventListener("click", async () => {
  try {
    editor.value = await loadTextFile(OPFS_FILE);
    setLog(`Loaded INI text from OPFS path ${OPFS_FILE}`);
  } catch (error) {
    setLog(`OPFS load failed: ${error.message}`, true);
  }
});

document.getElementById("sync-wasm").addEventListener("click", () => {
  try {
    syncEditorToWasmFs();
    setLog(`Synced editor contents to WASM filesystem at ${WASM_FILE}`);
  } catch (error) {
    setLog(`WASM sync failed: ${error.message}`, true);
  }
});

document.getElementById("query").addEventListener("click", async () => {
  try {
    syncEditorToWasmFs();
    const values = requireIniSdk().getFields(WASM_FILE, {
      machine: { section: "EMC", tag: "MACHINE" },
      display: { section: "DISPLAY", tag: "DISPLAY" },
      kinematics: { section: "KINS", tag: "KINEMATICS" },
      joints: { section: "KINS", tag: "JOINTS" },
      coordinates: { section: "TRAJ", tag: "COORDINATES" },
      parameterFile: { section: "RS274NGC", tag: "PARAMETER_FILE" },
    });

    for (const [name, value] of Object.entries(values)) {
      setField(name, value);
    }

    setLog("Queried LinuxCNC INI fields through the standalone WASM parser.");
  } catch (error) {
    setLog(`Query failed: ${error.message}`, true);
  }
});

boot().catch(() => {});