Rapid Prototyping Physical Interfaces with Web Serial and Cheap MCUs.
Quickly and cheaply doing design discovery and prototype development with only a web browser
- Track: JavaScript devroom
- Room: D.javascript
- Day: Saturday
- Start: 15:00
- End: 15:30
- Video with Q&A: D.javascript
- Video only: D.javascript
- Chat: Join the conversation!
(With a $4 microcontroller to build fun, accessible, and unique forms of interaction)
The magic of computers and smartphones is the fact that they provide a very malleable interface - the screen. Without having to manufacture extra parts for every new application, this is a massive time and cost saving for engineers. However, this comes at a cost of accessibility and usability, as well as diminishing the physical connection one might have to the device they are using. Physical interfaces are now much easier to develop, and can even be constructed by the end user, since MCUs are now very cheap and readily available, along with lots of modular parts to construct interfaces with. Web Serial provides the added benefit of being able to use the highly distributed and easy to code with JavaScript / Web platform with these MCUs. This means rapid prototyping can be performed, along with user testing, very easily, making it much cheaper and faster to reach an end product. This talk intends to demonstrate some basic examples along with some steps to getting a process together yourself.
- Introduction to Web Serial API
- An overview of the MCU market today
- Demonstrations of some homemade physical interfaces for web applications
- How to set up a basic web app using web serial
- Overview of reading values from a physical input component through a circuit and converting it to serial data
- Using browser-based circuit design tools for safe pre-breadboard experimentation using Wokwi and CircuitJS
- Building a simple physical input, through to reading the data into the web application
- Ideas for potential tangible user interfaces, summary, questions.
Speakers
Louis Foster |
Links
- Drohen Github
- Code for this talk
- Google Chrome
- Serial Communication Wikipedia
- MDN Browser Documentation
- Project Fugu
- CircuitJS
- Web Serial API example project
- Paddle controller challenge
- Web Serial API subreddit
- Web Serial API Awesome List
- https://pocketmechatronics.com/posts/better-prototyping-with-web-serial-raspberry-pico/
- https://pocketmechatronics.com/posts/reflection-2-components-1-week/
- $1 microcontrollers
- 0.03c microcontrollers
- Raspberry Pi Pico
- Wiring
- Processing
- Micropython
- Espruino
- Kaluma
- Wokwi - Kaluma blank project
- Glitch - blank web app
- Video recording(WebM/VP9)
- Video recording(mp4)
- Chat room (web)
- Chat room (app)
- Hallway chat room (web)
- Hallway chat room (app)
- Submit feedback