├── .gitignore
├── Makefile
├── README.md
├── docs
    ├── analog-read-serial.html
    ├── assets
    │   ├── application.css
    │   ├── application.js
    │   ├── demo.gif
    │   ├── sven.png
    │   └── vendor
    │   │   └── animate.css
    └── dimmer.html
└── src
    ├── analog-read-serial.html
    ├── dimmer.html
    └── template.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /template-*
2 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | .PHONY: all clean run
 2 | 
 3 | all: docs/analog-read-serial.html docs/dimmer.html
 4 | 
 5 | docs/%.html: src/%.html template-a template-b
 6 | 	cat "template-a" "$<" "template-b" > "$@"
 7 | 
 8 | template-a template-b: src/template.html
 9 | 	split -a 1 -p "split" "$<" "template-"
10 | 
11 | clean:
12 | 	rm -f template-{a,b} *.html
13 | 
14 | run: docs/analog-read-serial.html docs/dimmer.html
15 | 	open -b "com.google.Chrome" $^
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Web Serial API Examples
 2 | 
 3 | The Web Serial API makes it possible for web browsers to read and write from serial devices. Soon you can chat with Arduinos, Raspberry Pis and most any device that speaks serial – straight from your website and no drivers needed. The Serial API specification is, as of this writing, not a W3C standard but you can already play with it in the latest beta versions of Chrome and Edge.
 4 | 
 5 | This repository is my playground for evaluating this upcoming API. If you possess an Arduino, you can play along too.
 6 | 
 7 | ![](docs/assets/demo.gif)
 8 | 
 9 | > Reading analog input, using a potentiometer, and dimming an LED from the browser.
10 | 
11 | ## Before Playing With the Serial API
12 | 
13 | Make sure you have the following to play along at home:
14 | 
15 | 1. Arduino compatible device and USB cable
16 | 2. [Arduino IDE][ide]
17 | 3. Beta version of [Chrome][chrome] or [Edge][edge]
18 | 4. Experimental Web Platform features enabled
19 | 
20 | After installing your browser of choice, launch it, and enable the [Experimental Web Platform features flag][flag].
21 | 
22 | ## Serial API Examples
23 | 
24 | The course of action is the same for toying with all examples. Load one of the includes examples on your device using the Arduino IDE, build the associated circuit, and then point your browser to the example you want to explore.
25 | 
26 | ## Analog Read Serial
27 | 
28 | Open the built-in example sketch `01.Basics → AnalogReadSerial` in the Arduino IDE and upload it to your device. Follow the tutorial to [connect a potentiometer to the Arduino][analogtutorial]. Make sure your circuit works by using the [Serial Monitor][serialmonitor].
29 | 
30 | Visit my [Analog Read Serial example page][analog].
31 | 
32 | ## Dimmer
33 | 
34 | Open the built-in example sketch `04.Communication → Dimmer` in the Arduino IDE and upload it to your device. Follow the tutorial to [connect an LED to the Arduino][dimmertutorial]. Make sure your circuit works by using the [Serial Monitor][serialmonitor].
35 | 
36 | Visit my [Dimmer example page][dimmer].
37 | 
38 | [ide]: https://www.arduino.cc/en/Main/Software
39 | [chrome]: https://www.google.com/chrome/beta/
40 | [edge]: https://www.microsoftedgeinsider.com/en-us/download
41 | [flag]: chrome://flags/#enable-experimental-web-platform-features
42 | [analog]: https://svendahlstrand.github.io/web-serial-api/analog-read-serial.html
43 | [analogtutorial]: https://www.arduino.cc/en/Tutorial/AnalogReadSerial
44 | [dimmer]: https://svendahlstrand.github.io/web-serial-api/dimmer.html
45 | [dimmertutorial]: https://www.arduino.cc/en/Tutorial/Dimmer
46 | [serialmonitor]: https://www.arduino.cc/en/guide/environment#toc12
47 | 


--------------------------------------------------------------------------------
/docs/analog-read-serial.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
 6 |     <link rel="stylesheet" href="./assets/application.css">
 7 |     <link rel="stylesheet" href="./assets/vendor/animate.css">
 8 |     <title>Analog Read Serial</title>
 9 |   </head>
10 |   <body>
11 |     <img src="./assets/sven.png" alt="" width="105" height="105" />
12 |     <p class="bubble">
13 |       Hi there, kids! Let's play together with bunnies, carrots, and the Web Serial API.
14 |     </p>
15 | 
16 |     <noscript>
17 |       <p class="notice bubble">
18 |         I'm sorry! For this to actully work you have to enable JavaScript in your browser.
19 |       </p>
20 |     </noscript>
21 | 
22 |     <button id="connect-button" type="button" disabled>🔌 Connect</button>
23 | 
24 |     <figure class="fast animated">
25 |         <div class="demo bubble"><span class="rabbit tile">🐰</span><span class="carrot tile">🥕</span></div>
26 |         <figcaption>What a tasty looking snack!<br /><small>The carrot feels <span>0</span> % threatened.</small></figcaption>
27 |     </figure>
28 | 
29 |     <script>
30 |       let lineBuffer = '';
31 |       let latestValue = 0;
32 | 
33 |       function renderDemo() {
34 |         const rabbit = document.querySelector('.rabbit');
35 |         const percentage = Math.floor(latestValue / 1023 * 100);
36 |         const percentageStatus = document.querySelector('figcaption span');
37 | 
38 |         rabbit.style.left = 'calc(' + percentage + '% - 2em)';
39 |         percentageStatus.innerText = percentage;
40 | 
41 |         window.requestAnimationFrame(renderDemo);
42 |       }
43 |       window.requestAnimationFrame(renderDemo);
44 | 
45 |       async function getReader() {
46 |         port = await navigator.serial.requestPort({});
47 |         await port.open({ baudRate: 9600 });
48 | 
49 |         connectButton.innerText = '🔌 Disconnect';
50 |         document.querySelector('figure').classList.remove('fadeOut');
51 |         document.querySelector('figure').classList.add('bounceIn');
52 | 
53 |         const appendStream = new WritableStream({
54 |           write(chunk) {
55 |             lineBuffer += chunk;
56 | 
57 |             let lines = lineBuffer.split('\n');
58 | 
59 |             if (lines.length > 1) {
60 |               lineBuffer = lines.pop();
61 |               latestValue = parseInt(lines.pop().trim());
62 |             }
63 |           }
64 |         });
65 | 
66 |         port.readable
67 |           .pipeThrough(new TextDecoderStream())
68 |           .pipeTo(appendStream);
69 |       }
70 |     </script>
71 |     <!-- split -->
72 | 
73 |     <script src="./assets/application.js"></script>
74 |   </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/docs/assets/application.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
 3 |   max-width: 40em;
 4 | }
 5 | 
 6 | .bubble {
 7 |   background: blue;
 8 |   border-radius: 1em;
 9 |   padding: 1em;
10 |   color: white;
11 | }
12 | 
13 | .notice {
14 |   background: orange;
15 | }
16 | 
17 | .demo {
18 |   background: #2c2b2f;
19 |   border-radius: 3em;
20 |   padding: 0 1em;
21 |   overflow: auto;
22 |   position: relative;
23 | }
24 | 
25 | img {
26 |   float: left;
27 | }
28 | 
29 | button {
30 |   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
31 |   font-size: 1em;
32 |   border-radius: 1em;
33 |   border-width: 2px;
34 |   padding: 0.5em 1em;
35 |   border-color: #2c2b2f;
36 |   outline: none;
37 | }
38 | 
39 | figure {
40 |   opacity: 0;
41 | }
42 | 
43 | figcaption {
44 |   text-align: right;
45 |   margin: 1em 1.5em 0 0;
46 | }
47 | 
48 | .tile {
49 |   font-size: 6em;
50 | }
51 | 
52 | .rabbit {
53 |   position: absolute;
54 | }
55 | 
56 | .carrot {
57 |   float: right;
58 | }
59 | 
60 | input[type=range] {
61 |   -webkit-appearance: none;
62 |   width: 100%;
63 | }
64 | 
65 | input[type=range]::-webkit-slider-thumb {
66 |   -webkit-appearance: none;
67 |   height: 100%;
68 |   width: 16px;
69 |   background: transparent;
70 | }
71 | 
72 | input[type=range]:focus {
73 |   outline: none;
74 | }
75 | 
76 | input[type=range]::-webkit-slider-runnable-track {
77 |   width: 100%;
78 |   height: 7em;
79 | }
80 | 


--------------------------------------------------------------------------------
/docs/assets/application.js:
--------------------------------------------------------------------------------
 1 | const connectButton = document.getElementById ('connect-button');
 2 | let port;
 3 | 
 4 | if ('serial' in navigator) {
 5 |   connectButton.addEventListener('click', function () {
 6 |     if (port) {
 7 |       port.close();
 8 |       port = undefined;
 9 | 
10 |       connectButton.innerText = '🔌 Connect';
11 |       document.querySelector('figure').classList.replace('bounceIn', 'fadeOut');
12 |     }
13 |     else {
14 |       getReader();
15 |     }
16 |   });
17 | 
18 |   connectButton.disabled = false;
19 | }
20 | else {
21 |   const firstBubble = document.querySelector('p.bubble');
22 |   const noSerialSupportNotice = document.createElement('p');
23 |   noSerialSupportNotice.innerHTML = '<p class="notice bubble">You\'re on the right track! This browser is lacking support for Web Serial API, though, and thats a bummer.</p>';
24 | 
25 |   firstBubble.parentNode.insertBefore(noSerialSupportNotice, firstBubble.nextSibling);
26 | }
27 | 


--------------------------------------------------------------------------------
/docs/assets/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/svendahlstrand/web-serial-api/e5711f154b4557664d14f54fece4820d15a75b96/docs/assets/demo.gif


--------------------------------------------------------------------------------
/docs/assets/sven.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/svendahlstrand/web-serial-api/e5711f154b4557664d14f54fece4820d15a75b96/docs/assets/sven.png


--------------------------------------------------------------------------------
/docs/assets/vendor/animate.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * animate.css -https://daneden.github.io/animate.css/
 3 |  * Version - 3.7.2
 4 |  * Licensed under the MIT license - http://opensource.org/licenses/MIT
 5 |  *
 6 |  * Copyright (c) 2019 Daniel Edens
 7 |  */
 8 | @keyframes bounceIn {
 9 |   from,
10 |   20%,
11 |   40%,
12 |   60%,
13 |   80%,
14 |   to {
15 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
16 |   }
17 | 
18 |   0% {
19 |     opacity: 0;
20 |     transform: scale3d(0.3, 0.3, 0.3);
21 |   }
22 | 
23 |   20% {
24 |     transform: scale3d(1.1, 1.1, 1.1);
25 |   }
26 | 
27 |   40% {
28 |     transform: scale3d(0.9, 0.9, 0.9);
29 |   }
30 | 
31 |   60% {
32 |     opacity: 1;
33 |     transform: scale3d(1.03, 1.03, 1.03);
34 |   }
35 | 
36 |   80% {
37 |     transform: scale3d(0.97, 0.97, 0.97);
38 |   }
39 | 
40 |   to {
41 |     opacity: 1;
42 |     transform: scale3d(1, 1, 1);
43 |   }
44 | }
45 | 
46 | .bounceIn {
47 |   animation-duration: 0.75s;
48 |   animation-name: bounceIn;
49 | }
50 | 
51 | @keyframes fadeOut {
52 |   from {
53 |     opacity: 1;
54 |   }
55 | 
56 |   to {
57 |     opacity: 0;
58 |   }
59 | }
60 | 
61 | .fadeOut {
62 |   animation-name: fadeOut;
63 | }
64 | 
65 | .animated {
66 |   animation-duration: 1s;
67 |   animation-fill-mode: both;
68 | }
69 | 
70 | .animated.fast {
71 |   animation-duration: 800ms;
72 | }
73 | 


--------------------------------------------------------------------------------
/docs/dimmer.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
 6 |     <link rel="stylesheet" href="./assets/application.css">
 7 |     <link rel="stylesheet" href="./assets/vendor/animate.css">
 8 |     <title>Dimmer</title>
 9 |   </head>
10 |   <body>
11 |     <img src="./assets/sven.png" alt="" width="105" height="105" />
12 |     <p class="bubble">
13 |       Hello again! Time to light up an LED. 💡
14 |     </p>
15 | 
16 |     <noscript>
17 |       <p class="notice bubble">
18 |         I'm sorry! For this to actully work you have to enable JavaScript in your browser.
19 |       </p>
20 |     </noscript>
21 | 
22 |     <button id="connect-button" type="button" disabled>🔌 Connect</button>
23 | 
24 |     <figure class="fast animated">
25 |       <input id="led-dimmer" type="range" min="0" max="255" value="0" class="demo bubble" disabled />
26 |       <figcaption><label for="led-dimmer">LED dimmer<br /><small><span>0</span> % brightness</small></label></figcaption>
27 |     </figure>
28 | 
29 |     <script>
30 |       const ledDimmer = document.getElementById('led-dimmer');
31 |       const ledDimmerValue = document.querySelector('label span');
32 | 
33 |       function renderDemo() {
34 |         const percent = Math.floor(ledDimmer.value / 255 * 100);
35 | 
36 |         ledDimmer.style = 'background-image: linear-gradient(to right, #fed609 ' + percent + '%, #2c2b2f ' + percent + '%);';
37 |         ledDimmerValue.innerText = percent;
38 | 
39 |         window.requestAnimationFrame(renderDemo);
40 |       }
41 |       window.requestAnimationFrame(renderDemo);
42 | 
43 |       async function getReader() {
44 |         port = await navigator.serial.requestPort({});
45 |         await port.open({ baudRate: 9600 });
46 | 
47 |         document.querySelector('input').disabled = false;
48 |         connectButton.innerText = '🔌 Disconnect';
49 |         document.querySelector('figure').classList.remove('fadeOut');
50 |         document.querySelector('figure').classList.add('bounceIn');
51 | 
52 |         ledDimmer.addEventListener('input', (event) => {
53 |           if (port && port.writable) {
54 |             const value = parseInt(event.target.value);
55 |             const bytes = new Uint8Array([value]);
56 |             const writer = port.writable.getWriter();
57 | 
58 |             writer.write(bytes);
59 |             writer.releaseLock();
60 |           }
61 |         });
62 |       }
63 |     </script>
64 |     <!-- split -->
65 | 
66 |     <script src="./assets/application.js"></script>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/src/analog-read-serial.html:
--------------------------------------------------------------------------------
 1 |     <title>Analog Read Serial</title>
 2 |   </head>
 3 |   <body>
 4 |     <img src="./assets/sven.png" alt="" width="105" height="105" />
 5 |     <p class="bubble">
 6 |       Hi there, kids! Let's play together with bunnies, carrots, and the Web Serial API.
 7 |     </p>
 8 | 
 9 |     <noscript>
10 |       <p class="notice bubble">
11 |         I'm sorry! For this to actully work you have to enable JavaScript in your browser.
12 |       </p>
13 |     </noscript>
14 | 
15 |     <button id="connect-button" type="button" disabled>🔌 Connect</button>
16 | 
17 |     <figure class="fast animated">
18 |         <div class="demo bubble"><span class="rabbit tile">🐰</span><span class="carrot tile">🥕</span></div>
19 |         <figcaption>What a tasty looking snack!<br /><small>The carrot feels <span>0</span> % threatened.</small></figcaption>
20 |     </figure>
21 | 
22 |     <script>
23 |       let lineBuffer = '';
24 |       let latestValue = 0;
25 | 
26 |       function renderDemo() {
27 |         const rabbit = document.querySelector('.rabbit');
28 |         const percentage = Math.floor(latestValue / 1023 * 100);
29 |         const percentageStatus = document.querySelector('figcaption span');
30 | 
31 |         rabbit.style.left = 'calc(' + percentage + '% - 2em)';
32 |         percentageStatus.innerText = percentage;
33 | 
34 |         window.requestAnimationFrame(renderDemo);
35 |       }
36 |       window.requestAnimationFrame(renderDemo);
37 | 
38 |       async function getReader() {
39 |         port = await navigator.serial.requestPort({});
40 |         await port.open({ baudRate: 9600 });
41 | 
42 |         connectButton.innerText = '🔌 Disconnect';
43 |         document.querySelector('figure').classList.remove('fadeOut');
44 |         document.querySelector('figure').classList.add('bounceIn');
45 | 
46 |         const appendStream = new WritableStream({
47 |           write(chunk) {
48 |             lineBuffer += chunk;
49 | 
50 |             let lines = lineBuffer.split('\n');
51 | 
52 |             if (lines.length > 1) {
53 |               lineBuffer = lines.pop();
54 |               latestValue = parseInt(lines.pop().trim());
55 |             }
56 |           }
57 |         });
58 | 
59 |         port.readable
60 |           .pipeThrough(new TextDecoderStream())
61 |           .pipeTo(appendStream);
62 |       }
63 |     </script>
64 | 


--------------------------------------------------------------------------------
/src/dimmer.html:
--------------------------------------------------------------------------------
 1 |     <title>Dimmer</title>
 2 |   </head>
 3 |   <body>
 4 |     <img src="./assets/sven.png" alt="" width="105" height="105" />
 5 |     <p class="bubble">
 6 |       Hello again! Time to light up an LED. 💡
 7 |     </p>
 8 | 
 9 |     <noscript>
10 |       <p class="notice bubble">
11 |         I'm sorry! For this to actully work you have to enable JavaScript in your browser.
12 |       </p>
13 |     </noscript>
14 | 
15 |     <button id="connect-button" type="button" disabled>🔌 Connect</button>
16 | 
17 |     <figure class="fast animated">
18 |       <input id="led-dimmer" type="range" min="0" max="255" value="0" class="demo bubble" disabled />
19 |       <figcaption><label for="led-dimmer">LED dimmer<br /><small><span>0</span> % brightness</small></label></figcaption>
20 |     </figure>
21 | 
22 |     <script>
23 |       const ledDimmer = document.getElementById('led-dimmer');
24 |       const ledDimmerValue = document.querySelector('label span');
25 | 
26 |       function renderDemo() {
27 |         const percent = Math.floor(ledDimmer.value / 255 * 100);
28 | 
29 |         ledDimmer.style = 'background-image: linear-gradient(to right, #fed609 ' + percent + '%, #2c2b2f ' + percent + '%);';
30 |         ledDimmerValue.innerText = percent;
31 | 
32 |         window.requestAnimationFrame(renderDemo);
33 |       }
34 |       window.requestAnimationFrame(renderDemo);
35 | 
36 |       async function getReader() {
37 |         port = await navigator.serial.requestPort({});
38 |         await port.open({ baudRate: 9600 });
39 | 
40 |         document.querySelector('input').disabled = false;
41 |         connectButton.innerText = '🔌 Disconnect';
42 |         document.querySelector('figure').classList.remove('fadeOut');
43 |         document.querySelector('figure').classList.add('bounceIn');
44 | 
45 |         ledDimmer.addEventListener('input', (event) => {
46 |           if (port && port.writable) {
47 |             const value = parseInt(event.target.value);
48 |             const bytes = new Uint8Array([value]);
49 |             const writer = port.writable.getWriter();
50 | 
51 |             writer.write(bytes);
52 |             writer.releaseLock();
53 |           }
54 |         });
55 |       }
56 |     </script>
57 | 


--------------------------------------------------------------------------------
/src/template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
 6 |     <link rel="stylesheet" href="./assets/application.css">
 7 |     <link rel="stylesheet" href="./assets/vendor/animate.css">
 8 |     <!-- split -->
 9 | 
10 |     <script src="./assets/application.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------