Arduino webserial data filtering

Projects General Guidance
1

Hello, I have an Arduino kit and a webserial API setup to receive the data into a html div.

At the moment it is logging all the data into one stream (there are a few dials and switches on the Arduino).

The data looks like this...

RADI 61 RADI 62 RADI 63 RADI 64 WIND 1 WIND 0 WIND 1

...RADI being a dial value and WIND being an on / off switch.

Is there a way to separate this information into RADI and WIND chunks...ideally into separate HTML text boxes so I can manipulate that data?

Here is my javascript code...

document.getElementById('connectButton').addEventListener('click', () => {
    if (navigator.serial) {
      connectSerial();
    } else {
      alert('Web Serial API not supported.');
    }
  });
  
  async function connectSerial() {
    const log = document.getElementById('target');
      
    try {
      const port = await navigator.serial.requestPort();
      await port.open({ baudRate: 9600 });
      
      const decoder = new TextDecoderStream();
      
      port.readable.pipeTo(decoder.writable);
  
      const inputStream = decoder.readable;
      const reader = inputStream.getReader();
      
      while (true) {
        const { value, done } = await reader.read();
        if (value) {
          log.textContent += value + '\n';
        }
        if (done) {
          console.log('[readLoop] DONE', done);
          reader.releaseLock();
          break;
        }
      }
    
    } catch (error) {
      log.innerHTML = error;
    }
  }

1. List item
2

javascript running on your server has nothing to do with Arduino or this forum.

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.