Individual assignment:

Write an application that interfaces a user with an input &/or output device that you made

For this week's project, I've planned to create a web interface that will communicate with the master board via web serial. The master board will then relay the data to the slave boards. From my last week assignment. click here for documentation

Initially, I planned to create a web interface using HTML and connect it with the Quentrous board. This setup would enable me to control the LED on the board, turning it on and off remotely.

This has helped me grasp the fundamentals of this week's assignment.

Since I'm not proficient in web development and programming, I decided to seek assistance from the "CODY AI" for help.

Cody is an AI coding assistant who can write, understand, fix, and find your code. Cody is powered by Sourcegraph’s code graph and knows your entire codebase. Install Cody to get started with free AI-powered autocomplete, chat, commands, and more.

img01.jpeg

This is the code that has been generated with the help of CODY AI for the web interface.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Web Page with Buttons</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      h1 {
        text-align: center;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        margin: 10px;
        background-color: green;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background-color: #45a049;
      }
      button:active {
        background-color: red;
      }
      #onOffButton.on {
        background-color: red;
      }
      #onOffButton.off {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <h1>LED Control</h1>
      <button id="connectButton">connect</button>
      <button id="onOffButton" class="off">OFF</button>
    </div>
    <div class="textarea">
      <textarea name="textarea" id="serial" cols="40" rows="10"></textarea>
  </div>
    <script>
      let port;
      let receivedText = '';
      const onOffButton = document.getElementById("onOffButton");
      let isOn = false;
      onOffButton.addEventListener("click", () => {
        isOn = !isOn;
        onOffButton.textContent = isOn ? "ON" : "OFF";
        onOffButton.classList.toggle("on", isOn);
        onOffButton.classList.toggle("off", !isOn);
      });

      document.getElementById("connectButton").addEventListener("click", async () => {
          port = await navigator.serial.requestPort();
          await port.open({ baudRate: 9600 });
          const reader = port.readable.getReader();
            
            const processMsg = async () => {
                const decoder = new TextDecoder();
                const { value, done } = await reader.read();
                if (!done) {
                    receivedText += decoder.decode(value);
                    document.getElementById('serial').value = receivedText;
                    processMsg();
                } else {
                    reader.releaseLock();
                }
            }
            processMsg();

           
        });
        document.getElementById('onOffButton').addEventListener('click', async () => {
                const encoder = new TextEncoder()
                const writer = port.writable.getWriter();
                const dataToSend = isOn ? '1' : '0';
                // isOn = !isOn;
                writer.write(encoder.encode(dataToSend)).then(() => {
                    console.log("Sent: " + dataToSend);
                });
                writer.releaseLock();
            });
    </script>
  </body>
</html>
</html>

This is how the web interface looks

img02.png

Then, I generated the code for the Quentrous board to blink the LED and uploaded it to the Quentrous board.


int LedPin = 1;

void setup()
{
  pinMode(LedPin,OUTPUT);
  Serial.begin(9600);
}
void loop()
{
  char charater = Serial.read();
  if (charater == '1')
  {
    digitalWrite(LedPin, HIGH);
      Serial.println("The LED is now ON");
  }
  else if(charater =='0')
   {
      digitalWrite(LedPin, LOW);
      Serial.println("The LED is now OFF");
    }
}