webSerial/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css"> 
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="webserial.js"></script>
  <script src="script.js"></script>
  <title>WebSerial</title>
</head>

<body>
  <h1>WebSerial Example</h1>
  <section id="explanation">
    <p>
      This page sends out a serial port using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API">WebSerial API</a>. It should work on Chrome and Edge browsers.
    </p>
    <p>
      To open a port, Click the "open port" button and pick a port. To close that port, click the button again.
      You can open and close the port multiple times, but you can only open one port at a time.
      This page sends and receives ascii-encoded strings. There's also a commented-out option showing how to
      parse a string as a JSON ojbect.
    </p>
    <p>As of 15 May 2022, the webserial script that this sketch is using auto-detects new serial ports and opens them. Here's an <a href="https://github.com/tigoe/html-for-conndev/tree/main/webSerial/ArduinoSendReceive">Arduino sketch that works with it.</a></p>

    <p>If you'd like to see the source code, it's <a
        href="https://github.com/tigoe/html-for-conndev/tree/main/webSerial">here on gitHub</a>. There's an Arduino
      sketch in that directory that will work with this page. It will echo back whatever you send it, and once a second,
      it will send you the number of seconds since it started as a JSON string.</p>
    <p>
      Here is a <a href="https://web.dev/serial/">helpful introduction to WebSerial</a>. Most of this script was based on that tutorial.
    </p>
    <p>
      If you want to see a version in p5.js, <a href="webSerial-p5">click here</a>, and <a href="https://github.com/tigoe/html-for-conndev/tree/main/webSerial/webSerial-p5"></a>here is the source code</a>. 
    </p>
  </section>

  <section id="controls">
    <button id="portButton">open port</button><br>
    Latest input from the serial port:
    <span id="readings">no input yet </span><br>
    Seconds passed:<span id="seconds">no seconds yet</span><br>
    Slide the slider:
    <input type="range" id="dim" min="0" max="255" value="10" /><br />
    Type a string, then hit enter:
    <input type="text" id="txt" />
  </section>
</body>

</html>