Interface & Application Programming

const SERVICE_UUID = '12345678-1234-1234-1234-123456789abc';
const CHAR_UUID    = '12345678-1234-1234-1234-123456789abd';
let characteristic;

async function toggleConnect() {
  const device = await navigator.bluetooth.requestDevice({
    filters: [{ name: 'ESP32_Controller' }],
    optionalServices: [SERVICE_UUID]
  });

  // Update the UI if the board drops the link
  device.addEventListener('gattserverdisconnected', () => {
    setConnected(false);
    log('Device disconnected.');
  });

  const server  = await device.gatt.connect();
  const service = await server.getPrimaryService(SERVICE_UUID);
  characteristic = await service.getCharacteristic(CHAR_UUID);
  setConnected(true);
  log('Connected to ' + device.name);
}

// Flip the badge, button colour, and control state
function setConnected(isConnected) {
  const badge = document.getElementById('status-badge');
  const button = document.getElementById('btn-connect');
  const controls = document.getElementById('controls');
  badge.textContent = isConnected ? 'Connected' : 'Disconnected';
  button.textContent = isConnected ? 'Disconnect' : 'Connect';
  button.classList.toggle('active', isConnected);
  controls.classList.toggle('disabled-overlay', !isConnected);
  if (!isConnected) characteristic = null;
}

let sendTimer = null, lastSentAngle = 90, sending = false;

// Fires on every pixel, only updates the visual arm
function onAngleMove(v) {
  updateArm(v);
  if (sendTimer) clearTimeout(sendTimer);
  // fallback, send after 300 ms of stillness
  sendTimer = setTimeout(() => onAngleCommit(v), 300);
}

// Fires on mouse or touch release, sends the BLE command
function onAngleCommit(v) {
  if (sendTimer) { clearTimeout(sendTimer); sendTimer = null; }
  v = parseInt(v);
  if (v === lastSentAngle) return;   // deduplicate, nothing changed
  lastSentAngle = v;
  send('S:' + v);                    // one clean BLE write
}

// LED toggle sends a single byte command
function onLED(isOn) {
  send('L:' + (isOn ? 1 : 0));
}

async function send(cmd) {
  if (!characteristic || sending) return;
  try {
    sending = true;
    await characteristic.writeValue(new TextEncoder().encode(cmd));
    log('Sent ' + cmd);
  } finally {
    sending = false;
  }
}

// Move the SVG arm and update the readout
function updateArm(v) {
  const angle = (v - 90) * Math.PI / 180;
  const arm = document.getElementById('servo-arm');
  arm.setAttribute('x2', 100 + 90 * Math.sin(angle));
  arm.setAttribute('y2', 110 - 90 * Math.cos(angle));
  document.getElementById('angle-readout').textContent = v + '°';
}

// Print a timestamped line in the activity log
function log(msg) {
  const li = document.createElement('li');
  li.textContent = new Date().toLocaleTimeString() + '  ' + msg;
  document.getElementById('log').prepend(li);
}