├── .gitignore ├── docs ├── assets │ ├── demo.gif │ ├── sven.png │ ├── application.js │ ├── vendor │ │ └── animate.css │ └── application.css ├── dimmer.html └── analog-read-serial.html ├── Makefile ├── src ├── template.html ├── dimmer.html └── analog-read-serial.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /template-* 2 | -------------------------------------------------------------------------------- /docs/assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svendahlstrand/web-serial-api/HEAD/docs/assets/demo.gif -------------------------------------------------------------------------------- /docs/assets/sven.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svendahlstrand/web-serial-api/HEAD/docs/assets/sven.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /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 = '

You\'re on the right track! This browser is lacking support for Web Serial API, though, and thats a bummer.

'; 24 | 25 | firstBubble.parentNode.insertBefore(noSerialSupportNotice, firstBubble.nextSibling); 26 | } 27 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /src/dimmer.html: -------------------------------------------------------------------------------- 1 | Dimmer 2 | 3 | 4 | 5 |

6 | Hello again! Time to light up an LED. 💡 7 |

8 | 9 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 | 22 | 57 | -------------------------------------------------------------------------------- /src/analog-read-serial.html: -------------------------------------------------------------------------------- 1 | Analog Read Serial 2 | 3 | 4 | 5 |

6 | Hi there, kids! Let's play together with bunnies, carrots, and the Web Serial API. 7 |

8 | 9 | 14 | 15 | 16 | 17 |
18 |
🐰🥕
19 |
What a tasty looking snack!
The carrot feels 0 % threatened.
20 |
21 | 22 | 64 | -------------------------------------------------------------------------------- /docs/dimmer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dimmer 9 | 10 | 11 | 12 |

13 | Hello again! Time to light up an LED. 💡 14 |

15 | 16 | 21 | 22 | 23 | 24 |
25 | 26 |
27 |
28 | 29 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /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 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Analog Read Serial 9 | 10 | 11 | 12 |

13 | Hi there, kids! Let's play together with bunnies, carrots, and the Web Serial API. 14 |

15 | 16 | 21 | 22 | 23 | 24 |
25 |
🐰🥕
26 |
What a tasty looking snack!
The carrot feels 0 % threatened.
27 |
28 | 29 | 71 | 72 | 73 | 74 | 75 | 76 | --------------------------------------------------------------------------------