Web and Sensors

Bringing the physical world interactions
to the web

by Sayanee for General Assembly Singapore

Follow along the slides at talks.sayan.ee/web-sensors

Refer to sample code

Prepare before workshop: software and hardware

use ➡️ ⬅️ keys to navigate

Pre-class

  1. connect to wifi GA@Spacemob
  2. download node.js
  3. download your text editor
  4. download Arduino IDE
  5. refer to slides: talks.sayan.ee/web-sensors
  6. refer to code: github.com/sayanee/talks/tree/gh-pages/web-sensors/code

Why connect hardware and the internet

track our usage

learn from nature

discover the universe

Open source

hardware + software

Computing layers Examples What changed?
App your ideas fast to prototype!
Framework browser api, javascript libraries now available
Programming v8 on ARM, Lua JIT, Arduino language support
Operating System Raspbian, Android embedded linux
Integrated Circuits hardware platforms more functionality
Physics physical sensors cheaper

The simplest circuit

We learnt from our primary school science teachers

Simplest ciruit with a batter and a bulb

The simplest circuit

  1. Breadboard
  2. Genuino UNO
  3. LED
  4. Resistor
  5. red wire
  6. black wire

Breadboard

Breadboard internal wirings

The simplest circuit

  • with an Arduino Uno, breadboard, LED and resistor
  • no code, no programming
Simplest ciruit with Arduino

DEMO

The Hardware

Arduino / Genuino Uno

The Abstraction

Any sufficiently advanced technology is indistinguishable from magic
~ Arthur C. Clarke
johnny-five laptop
firmata.js laptop
serial-port laptop
firmata program arduino uno
arduino library arduino uno
ATmega328p arduino uno

Hello world with live demo

  1. Open example StandardFirmataPlus Choose Standard Firmata Plus

Hello world with live demo

  1. Plug in the Arduino/Genuino Uno to your laptop
  2. Choose board Choose Arduino/Genuino Uno Board
  3. Choose port Choose port

Troubleshooting: PORT

How the error appears on Arduino IDE

Hello world with live demo

  1. Click Verify Verify code

Hello world with live demo

  1. Click Upload Upload code

Hello world with live demo

  1. Close the Arduino IDE
  2. Create an empty folder on Desktop iot
  3. Create file 1-blink.js with sample code
  4. Install package in cli with npm i johnny-five
  5. Run the blink LED code in cli with node 1-blink.js On board LED 13 blinking

9 Tiny lessons

sample code folder ~ 1 hour

Make a Mini hack

Create a tiny project in pairs with the sensor values: example

  • Electronics -> Browser: Web Socket / Server sent events
  • Browser -> Electronics: HTTP Get / Post
Electronics Web
LED, Button, Temperature, Proximity, Servo, Buzzer, Humidity, Light, Accelerometer and other examples CSS3 Animations, DOM, Mouse events, Web Audio, Unsplash / Flickr / IFTTT / Github APIs, WebRTC, SVG, Canvas

More to learn!

  1. Buy hardware: Adafruit, Sparkfun, RS, element14, 12 Geeks
  2. Learn about electronics: Adafruit, Sparkfun, Hackster, Contextual electronics
  3. Podcasts: Ask an Engineer, Spark Gap, EEV Blog, Amp Hour
  4. Hardware platforms: Arduino, Raspberry Pi, Particle, Tessel
  5. Local community meetups: SG Makers, Hackware, SG Maker Faire
  6. Global Community events: Nodebots, Robosub, SG AUVC, Maker Faire