Goal

Make a webpage that controls an LED, reads a light sensor, and reacts to a button press

Required Background

None - we will link you to all necessary info

Technologies

• Arduino
• MQTT
• HTML / Javascript

Setup

SETUP GUIDE

For this tutorial, you will need the following:

• Computer running Windows or OSX
• ESP8266 module such as:
  • Gizwits Witty
  • NodeMCU
• Other hardware
  • An LED and a 330-ohm resistor (built into Gizwits Witty)
  • A photoresistor and a 10K-ohm resistor (built into Gizwits Witty)
  • A button (built into Gizwits Witty)

Lessons

• Lesson 1 - Arduino Setup
  • Get your Arduino development environment set up
• Lesson 2 - ESP8266 Hello World
  • Upload an Arduino sketch to your ESP8266 to blink an LED
• Lesson 3 - ESP8266 WiFi Setup
  • Connect your ESP8266 to WiFi and ping it
• Lesson 4 - ESP8266 MQTT Publish
  • Make your ESP8266 publish a message to an MQTT server
• Lesson 5 - HTML/Javascript Hello World
  • Make a simple webpage
• Lesson 6 - Javascript MQTT Subscribe
  • Make your webpage subscribe to messages from an MQTT server
• Lesson 7 - Javascript MQTT Publish
  • Make your webpage publish messages to an MQTT server
• Lesson 8 - ESP8266 MQTT Subscribe
  • Make your ESP8266 subscribe to messages from an MQTT server
• Lesson 9 - IoT Button
  • Make your ESP8266 publish a “button pushed” message each time a physical button is pressed
  • Make your webpage display the “button pushed” message whenever it is received
• Lesson 10 - IoT LED
  • Make your webpage publish a “turn led on” or “turn led off” message when HTML buttons are pushed
  • Make your ESP8266 control its LED each time it receives a “turn led on” or “turn led off” message
• Lesson 11 - IoT Sensor
  • Make your ESP8266 publish a “light sensor” message every 5 seconds with the value of the light sensor
  • Make your webpage update with the latest value of the light sensor each time it receives a “light sensor” message