const serial = new p5.WebSerial();

​

// HTML 버튼

let portButton;

let sensorData = new Array(64).fill(0);  // 8×8 데이터 배열

let gridSize = 8;

let cellSize = 50;

let maxDistance = 4000;  // 최대 거리(mm)

​

function setup() {

  createCanvas(gridSize * cellSize, gridSize * cellSize);

​

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

​

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

  serial.getPorts();

  serial.on("noport", makePortButton);

  serial.on("portavailable", openPort);

  serial.on("requesterror", portError);

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

  makePortButton();

}

​

function draw() {

  background(0);

​

  for (let y = 0; y < gridSize; y++) {

    for (let x = 0; x < gridSize; x++) {

      let index = x + y * gridSize;

      let distance = sensorData[index];

​

      // 거리 값을 0~255의 밝기 값으로 변환 (가까울수록 밝음)

      let brightness = map(distance, 0, maxDistance, 255, 0);

      fill(brightness);

      stroke(50);

      rect(x * cellSize, y * cellSize, cellSize, cellSize);

    }

  }

}

​

// 포트 선택 버튼 생성

function makePortButton() {

  portButton = createButton("choose port");

  portButton.position(10, 10);

  portButton.mousePressed(choosePort);

}

​

// 포트 선택 창 열기

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

​

// 포트 열기

async function openPort() {

  try {

    await serial.open({ baudRate: 115200 });

    console.log("✅ Port opened");

​

    // 데이터 수신 이벤트 추가

    serial.on("data", serialEvent);

  } catch (err) {

    console.error("❌ Port open error:", err);

  }

}

​

// 포트 연결

function portConnect() {

  console.log("🔗 Port connected");

  serial.getPorts();

}

​

// 포트 연결 해제

function portDisconnect() {

  console.log("❌ Port disconnected. Reconnecting...");

  setTimeout(() => serial.getPorts(), 2000);

}

​

// 포트 오류 처리

function portError(err) {

  alert("Serial port error: " + err);

}

​

// 📡 시리얼 데이터 수신 (VL53L5CX 8×8 데이터 처리)

function serialEvent() {

  let rawData = serial.read();

  if (!rawData) return;

  // 한 글자씩 읽어서 문자열로 만들기

  let strData = '';

  while (rawData !== '\n') {

    strData += rawData;

    rawData = serial.read();

  }

​

  console.log("📥 Raw Data:", strData);

​

  let values = strData.trim().split("\t");

​

  if (values.length === 64) {

    sensorData = values.map(v => int(v));

  } else {

    console.warn("⚠️ Invalid Data Length:", values.length);

  }

}

​

// HTML 버튼 이벤트 확인

document.getElementById("connectButton").addEventListener("click", function () {

  console.log("🔘 Connect button clicked!");

  choosePort();

});