Sketch 2026-01-11 20:18

function preload() {
  // Load the Teachable Machine model
  // Reference: https://learn.ml5js.org/docs/#/reference/image-classifier?id=createclassifier
  classifier = ml5.imageClassifier(modelURL, modelLoaded);
}

function setup() {
  createCanvas(windowWidth, windowHeight); // Create a responsive canvas
  
  // Create the video capture from the webcam
  video = createCapture(VIDEO);
  video.hide(); // Hide the HTML video element as we'll draw it on the canvas

  // Initial display message while the model loads
  textSize(32);
  textAlign(CENTER, CENTER);
  fill(0);
  text('Loading model...', width / 2, height / 2);

  // --- BroadcastChannel Setup ---
  if ('BroadcastChannel' in window) {
    debugChannel = new BroadcastChannel('p5js-debug'); // Create a channel with a unique name
    debugChannel.onmessage = handleDebugMessage; // Assign a handler for incoming messages
    console.log('BroadcastChannel "p5js-debug" initialized.');

    // Add a checkbox to toggle debug sending
    debugSendCheckbox = createCheckbox('Send Debug to other tabs', false);
    debugSendCheckbox.position(videoMargin, height - 260); // Use videoMargin for x
    debugSendCheckbox.style('font-size', '18px');
    debugSendCheckbox.style('color', '#333');
    debugSendCheckbox.style('font-family', 'sans-serif');

    // Add a paragraph to display received BroadcastChannel data
    receivedBroadcastDataP = createP('Broadcast Received: ');
    receivedBroadcastDataP.position(videoMargin, height - 230); // Use videoMargin for x
    receivedBroadcastDataP.style('font-size', '18px');
    receivedBroadcastDataP.style('color', '#333');
    receivedBroadcastDataP.style('font-family', 'sans-serif');

  } else {
    console.warn('BroadcastChannel API not supported in this browser. Debug transmission to other tabs will not work.');
  }

  // --- Web Serial Setup ---
  // Create p5 DOM elements for serial status and received data
  serialStatusP = createP('Web Serial: Not connected.');
  serialStatusP.position(videoMargin, height - 200); // Use videoMargin for x
  serialStatusP.style('font-size', '18px');
  serialStatusP.style('color', '#333');
  serialStatusP.style('font-family', 'sans-serif'); // Add a standard font for consistency

  receivedSerialDataP = createP('Received: '); // Renamed for clarity
  receivedSerialDataP.position(videoMargin, height - 170); // Use videoMargin for x
  receivedSerialDataP.style('font-size', '18px');
  receivedSerialDataP.style('color', '#333');
  receivedSerialDataP.style('font-family', 'sans-serif'); // Add a standard font for consistency

  // Check if Web Serial API is supported
  if ('serial' in navigator) {
    // Create the "Connect Serial Port" button
    serialConnectButton = createButton('Connect Serial Port');
    serialConnectButton.position(videoMargin, height - 120); // Use videoMargin for x
    serialConnectButton.mousePressed(connectSerial); // Call connectSerial() when button is pressed
    serialConnectButton.style('font-size', '16px');
    serialConnectButton.style('padding', '10px 15px');
    serialConnectButton.style('background-color', '#4CAF50');
    serialConnectButton.style('color', 'white');
    serialConnectButton.style('border', 'none');
    serialConnectButton.style('border-radius', '5px');
    serialConnectButton.style('cursor', 'pointer');

    // Add event listener for port disconnection (e.g., USB cable unplugged)
    navigator.serial.addEventListener('disconnect', portDisconnected);

  } else {
    // Display an error message if Web Serial is not supported
    serialStatusP.html('Web Serial API not supported in this browser. Try Chrome/Edge.');
    serialStatusP.style('color', 'red');
  }
}

function modelLoaded() {
  console.log('Model Loaded!');
  classifier.ready = true; // Set a custom flag to indicate the model is ready
  currentClassification.label = 'Model Loaded. Starting classification...';
  classifyVideo(); // Start classifying once the model is loaded
}

function classifyVideo() {
  // Ensure the video is loaded and the model is ready before attempting to classify
  if (video && classifier.ready) {
    // Classify the current video frame and call gotResult when done
    // Reference: https://learn.ml5js.org/docs/#/reference/image-classifier?id=classify
    classifier.classify(video, gotResult);
  } else {
    // If not ready, try again after a short delay
    setTimeout(classifyVideo, 100);
  }
}

function gotResult(error, results) {
  // If there's an error during classification, log it
  if (error) {
    console.error(error);
    currentClassification.label = 'Error: ' + error.message;
    currentClassification.confidence = 0;
    // Don't stop classifying, try again
    classifyVideo();
    return;
  }

  // If no error, results will be an array of objects
  // Each object has a 'label' and 'confidence'
  // Sort results by confidence in descending order to get the top prediction
  results.sort((a, b) => b.confidence - a.confidence);
  const topResult = results[0];

  // Update the current classification result
  currentClassification.label = topResult.label;
  currentClassification.confidence = topResult.confidence;

  // --- BroadcastChannel: Send debug data ---
  if (debugChannel && debugSendCheckbox.checked()) {
    // Send the entire currentClassification object
    debugChannel.postMessage(currentClassification);
    console.log('Debug (BroadcastChannel) Sent:', currentClassification);
  }

  // Keep classifying the video feed recursively
  classifyVideo();
}

function draw() {
  background(220); // Clear the canvas each frame

  if (video && classifier.ready) {
    // Calculate preview size while maintaining aspect ratio
    // Let's make the preview height about half the canvas height, minus margins.
    let previewHeight = height / 2 - 2 * videoMargin;
    let previewWidth = (previewHeight / video.height) * video.width;

    // Ensure previewWidth doesn't exceed available space if canvas is very narrow
    // (e.g., if canvas width is less than previewWidth + videoMargin * 2)
    let availableWidthForVideo = width - 2 * videoMargin;
    if (previewWidth > availableWidthForVideo) {
      previewWidth = availableWidthForVideo;
      previewHeight = (previewWidth / video.width) * video.height;
    }

    // Draw the video feed at the top-left with margin
    image(video, videoMargin, videoMargin, previewWidth, previewHeight);

    // Classification text and background rectangle to the right of the video preview.
    let textRectX = videoMargin + previewWidth + videoMargin;
    let textRectWidth = width - textRectX - videoMargin;
    let textRectHeight = previewHeight; // Make it the same height as the video preview
    let textRectY = videoMargin; // Align with the top of the video

    fill(255, 200); // White with 200 alpha
    noStroke();
    rect(textRectX, textRectY, textRectWidth, textRectHeight);

    // Display the current classification result
    fill(0);
    textSize(24);
    textAlign(LEFT, CENTER);
    // Center text vertically within its rectangle
    let textYOffset = textRectY + textRectHeight / 2;
    text(`Label: ${currentClassification.label}`, textRectX + 10, textYOffset - 20); // Adjust y for two lines
    // Use nf() to format confidence as a percentage with 2 decimal places
    text(`Confidence: ${nf(currentClassification.confidence * 100, 0, 2)}%`, textRectX + 10, textYOffset + 20);

    // --- Web Serial: Send classification data ---
    // Send the classification label if connected, it's a new label, and enough time has passed
    if (port && writer && currentClassification.label !== lastSentLabel && millis() - lastClassificationSendTime > classificationSendInterval) {
      const dataToSend = currentClassification.label + '\n'; // Add newline for easy parsing on microcontroller
      writeSerial(dataToSend);
      lastSentLabel = currentClassification.label;
      lastClassificationSendTime = millis();
    }
  } else if (!classifier.ready) {
    // Display loading message if the model is not yet ready
    textSize(32);
    textAlign(CENTER, CENTER);
    fill(0);
    text('Loading model...', width / 2, height / 2);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // Adjust canvas size on window resize
  // Re-position p5 DOM elements on window resize
  if (debugSendCheckbox) debugSendCheckbox.position(videoMargin, height - 260); // Use videoMargin for x
  if (receivedBroadcastDataP) receivedBroadcastDataP.position(videoMargin, height - 230); // Use videoMargin for x
  if (serialStatusP) serialStatusP.position(videoMargin, height - 200); // Use videoMargin for x
  if (receivedSerialDataP) receivedSerialDataP.position(videoMargin, height - 170); // Use videoMargin for x
  if (serialConnectButton) serialConnectButton.position(videoMargin, height - 120); // Use videoMargin for x
}

function handleDebugMessage(event) {
  // Log received debug messages to the console
  console.log('Debug (BroadcastChannel) Received from another tab:', event.data);
  // Update the dedicated paragraph with the received data
  if (receivedBroadcastDataP) {
    receivedBroadcastDataP.html(`Broadcast Received: Label: ${event.data.label}, Confidence: ${nf(event.data.confidence * 100, 0, 2)}%`);
  }
}

async function connectSerial() {
  try {
    // Request a serial port from the user
    port = await navigator.serial.requestPort();
    serialStatusP.html('Web Serial: Connecting...');

    // Open the port with a specified baud rate
    // IMPORTANT: This baud rate (9600) must match the one used by your microcontroller (e.g., Arduino Serial.begin(9600);)
    await port.open({ baudRate: 9600 });
    serialStatusP.html('Web Serial: Connected!');
    serialConnectButton.html('Disconnect Serial Port'); // Change button text
    serialConnectButton.mousePressed(disconnectSerial); // Change button action to disconnect

    // Create TextDecoderStream and TextEncoderStream for easy text handling
    const textDecoder = new TextDecoderStream();
    const textEncoder = new TextEncoderStream();
    reader = textDecoder.readable.getReader(); // Reader for incoming text data
    writer = textEncoder.writable.getWriter(); // Writer for outgoing text data

    // Pipe the port's readable stream through the decoder
    port.readable.pipeTo(textDecoder.writable);
    // Pipe the encoder's readable stream to the port's writable stream
    port.writable.pipeTo(textEncoder.writable);

    readSerial(); // Start continuously reading data from the port
  } catch (error) {
    console.error('Error connecting to serial port:', error);
    serialStatusP.html('Web Serial: Connection failed. ' + error.message);
  }
}

async function disconnectSerial() {
  try {
    if (reader) await reader.cancel(); // Cancel any pending read operations
    if (writer) await writer.close(); // Close the writer stream
    if (port) await port.close(); // Close the serial port

    portDisconnected(); // Reset variables and UI
  } catch (error) {
    console.error('Error disconnecting serial port:', error);
    serialStatusP.html('Web Serial: Disconnection failed. ' + error.message);
  }
}

async function readSerial() {
  while (port && port.readable) {
    try {
      const { value, done } = await reader.read();
      if (done) {
        console.log('Reader closed.');
        break; // Exit loop if reader is closed
      }
      receivedSerialDataP.html(`Received: ${value}`); // Display received data
      // For more complex data, you might parse 'value' here (e.g., JSON.parse(value))
    } catch (error) {
      console.error('Error reading from serial port:', error);
      serialStatusP.html('Web Serial: Read error. ' + error.message);
      break; // Exit loop on error
    }
  }
  portDisconnected(); // Assume disconnected if loop exits (e.g., due to error or port closure)
}

async function writeSerial(data) {
  if (port && writer) {
    try {
      await writer.write(data);
      console.log('Sent:', data.trim()); // Log sent data without the trailing newline
    } catch (error) {
      console.error('Error writing to serial port:', error);
      serialStatusP.html('Web Serial: Write error. ' + error.message);
      portDisconnected(); // Assume disconnected on write error
    }
  } else {
    console.warn('Cannot write: Serial port not connected.');
    serialStatusP.html('Web Serial: Cannot write, not connected.');
  }
}

function portDisconnected() {
  console.log('Serial port disconnected.');
  port = undefined;
  reader = undefined;
  writer = undefined;
  serialStatusP.html('Web Serial: Disconnected.');
  receivedSerialDataP.html('Received: ');
  if (serialConnectButton) {
    serialConnectButton.html('Connect Serial Port');
    serialConnectButton.mousePressed(connectSerial); // Change button action back to connect
  }
  lastSentLabel = ''; // Reset to ensure label is sent again on reconnect
  lastClassificationSendTime = 0; // Reset timer too
}