Connecting Wick with Hardware

Show Your Work
#1

For one of my comp sci courses I decided to establish serial communication between a physical ti board and Wick Editor, using Chrome’s web Serial Port API.

More info on my project

Programmed in C & Assembly on a TI board, IDE: Code Composure Studio. In C I send game information (menu & maze layout) to the serial console, and received keys such as WASD or R as input from Wick.
In Wick Editor, I read the serial data as a string. Wick was only used to create a “friendly” graphical interface, the full game logic was on the board. Though it should be easy to make it so that the hardware only acts as a “controller” and move the full game logic to Wick if we wanted (but that would’ve defeated the point of programming in C for my class lol ).

Here’s a simple video demonstrating the project working. Sadly you wouldn’t be able to try this out without my hardware 🥲


I’m not a youtuber so sorry about the video quality :sweat_smile:
If you guys are interested or have ideas I can make more stuff like this in the future

But seriously, especially if you’re looking to go into a field within this area, I would like to highly encourage you all to try to make something like this yourself bc it’s pretty cool. You can also work with a Raspberry pi (python or js), Arduino (C++), or another type of board to your preference.

Code for serial communication

Use this inside of a mouseclick script


async function connectSerial() {
  try {
    const port = await navigator.serial.requestPort(); // select port here
    await port.open({ baudRate: 115200 }); // NOTE: adjust baud rate based on hardware

    const reader = port.readable.getReader();
    const decoder = new TextDecoder();

    while (true) { // forever loop, dw it's inside an asynchronous function :0 
      const { value, done } = await reader.read(); // Read data from the port
      if (done) // stream closed ;-;
        break;

      // Decode data
      const newData = decoder.decode(value, { stream: true });
      window.DATA += newData;
      
    }

    reader.releaseLock(); // Release the lock when done
    
  } catch (error) {
    console.error(error);
  }
}

connectSerial();

Also don’t forget to include this inside of a default script:

 window.DATA = "";

Extra useless info: In my project I had 2 variables. One for the data returned, and one for the data I want my project to read. Since serial info was send one character at a time, I waited until I got a specific character (“delimiter”) before reading the data. So I used one variable to track the characters I received, and another variable that I read when I got all the characters I needed. That way, I wasn’t reading one character at a time, if that makes any sense…

Just something cool I wanted to share. Also, I had a partner that helped me with the hardware and any code outside wick so credits to him for this as well

3 Likes