webusb04xiao.html

<h6>Version 0.1.4-26</h6>

<input class="button" type="button" id="connectButton" value="Connect" />
<input class="button" type="button" id="disconnectButton" value="Disconnect" /><br>
Device Heartbeat: <span id="deviceHeartbeat"></span>
<br/><br/>
Button Pressed: <span id="deviceButtonPressed"></span><br>
<div id="myDiv01">...</div>



<script>
const connectButton = document.getElementById("connectButton");
const disconnectButton = document.getElementById("disconnectButton");
//const colourPicker = document.getElementById("colourPicker");
//const colourButton = document.getElementById("colourButton");

const connect = document.getElementById("connect");
const deviceHeartbeat = document.getElementById("deviceHeartbeat");
const deviceButtonPressed = document.getElementById("deviceButtonPressed");

let usbDevice;
  
  
connectButton.onclick = async () => {
  usbDevice = await navigator.usb.requestDevice({
    filters: [{ vendorId: 0x2886 }]   // Seeeduino XIAO
  });

  document.getElementById('myDiv01').innerHTML = 'Trying to connect<br>'
  await usbDevice.open();
  document.getElementById('myDiv01').innerHTML += 'Open<br>'
  if (usbDevice.configuration === null) {
    await usbDevice.selectConfiguration(1);
    await usbDevice.claimInterface(0);
    
    document.getElementById('myDiv01').innerHTML += 'config<br>'
  }

 // connected.style.display = "block";
  connectButton.style.display = "none";
  disconnectButton.style.display = "initial";
  
  document.getElementById('myDiv01').innerHTML += 'Listening<br>'
  listen();
};

const listen = async () => {
  //const result = await usbDevice.transferIn(3, 64);
 // let result;
  
    /*
    await usbDevice.controlTransferOut({
    requestType: 'standard',
    recipient: 'endpoint',
    request: 1,  // vendor-specific request: enable channels
    value: 0,  // 0b00010011 (channels 1, 2 and 5)
    index: 129   // Interface 1 is the recipient
  });
  
  */
  /*
    await usbDevice.controlTransferOut({
    requestType: 'class',
    recipient: 'interface',
    request: 0x22,  // vendor-specific request: enable channels
    value: 0x01,  // 0b00010011 (channels 1, 2 and 5)
    index: 2   // Interface 1 is the recipient
  });
  */
  /*
  await usbDevice.controlTransferOut({
    requestType: 'vendor',
    recipient: 'interface',
    request: 0x01,  // vendor-specific request: enable channels
    value: 0x0013,  // 0b00010011 (channels 1, 2 and 5)
    index: 0x0001   // Interface 1 is the recipient
  });
  */
  while (true) {
  let result = await usbDevice.transferIn(1, 6);   // 1 2 or 5

  if (result.data && result.data.byteLength === 6) {
    console.log('Channel 1: ' + result.data.getUint16(0));
    console.log('Channel 2: ' + result.data.getUint16(2));
    console.log('Channel 5: ' + result.data.getUint16(4));
  }

  if (result.status === 'stall') {
    console.warn('Endpoint stalled. Clearing.');
    await device.clearHalt(1);
  }
}
  
  /*
  for (let myLoop = 1; myLoop <= 10; myLoop++) {
    try {
      result = await usbDevice.transferIn(myLoop, 64);
    } catch(err) {
       console.log('transferIn(' + myLoop + ', 64);')
       console.log(`Error: ${err}`);    
       document.getElementById('myDiv01').innerHTML += 'loop: '+ myLoop + ', error = ' + err + '<br>'
    }
  }
  
  
  
  */
  
  /*
  
  
  console.log(await `Received: ${result}`);

  const decoder = new TextDecoder();
  const message = decoder.decode(result.data);

  document.getElementById('myDiv01').innerHTML += 'Decoding<br>'
  
  document.getElementById('myDiv01').innerHTML += decoder+'<br>'

  document.getElementById('myDiv01').innerHTML += message+'<br>'
  const messageParts = message.split(" = ");
  if (messageParts[0] === "Count") {
    deviceHeartbeat.innerText = messageParts[1];
  } else if (messageParts[0] === "Button" && messageParts[1] === "1") {
    deviceButtonPressed.innerText = new Date().toLocaleString("en-ZA", {
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
    });
  }  else {

   // documnet.getElementById('myDiv01').innerHTML = 'hi'
  }
  listen();
  
  
  */
  
  listen();  
  
}; // end listen

const hexToRgb = hex => {
  const r = parseInt(hex.substring(1, 3), 16); //start at 1 to avoid #
  const g = parseInt(hex.substring(3, 5), 16);
  const b = parseInt(hex.substring(5, 7), 16);

  return [r, g, b];
};

  
  /*
colourButton.onclick = async () => {
  const data = new Uint8Array([1, ...hexToRgb(colourPicker.value)]);
  await device.transferOut(2, data);
};
  
  */

disconnectButton.onclick = async () => {
  await usbDevice.close();

 
  connectButton.style.display = "initial";
  disconnectButton.style.display = "none";
};


</script>