Open day idea #2 - Tiny IoT Message Board

The device pictured below is a ESP8266-01 with a 3v3 voltage regulator, 1" OLED display and USB-A plug. It can derive power from virtually any USB socket, or as shown below, a phone charger. It's fairly clear from the photos that the thing is quite small.

This time I'm using the thing 'networked' so it connects to a router.
When powered up it will hunt for the appropriate/configured wireless network and connect:

For this demonstration, I connect to 'dynamode' then point my browser at '' (There may be an easier way than this)
With a little luck a web page pops up in my browser looking like this:

And Bob's yer uncle!

These things cost around £5-£6 to make but they're quite fiddly to put together :(

This is the code I used in the demo above:

//  Very brief program to implement a message panel on the tiny SSD1306 OLED display
//  I've used the I2C variant here
//  It powers up & connects to your network, tells you its IP address
//  Enter this in your browser & submit a message. With luck your message will appear on the OLED
//  I've cheated a bit here & used 'server.onNotFound' to extract the message
//  NO error checking in here :(
//  To do : rewrite for access point operation?
//  Ian Sexton 2015

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <SPI.h>            //adafruit library needs this
#include <Wire.h>           //I2C
#include <Adafruit_GFX.h>   //graphics
#include <ESP_SSD1306.h>    //display

#define OLED_RESET 4    // library peculiarity from SPI?
ESP_SSD1306 display(OLED_RESET);

const char* ssid = "dynamode";                           //YOUR WiFi
const char* password = "55555555555555555555555555";    //YOUR pwd

int sda = 0;     //0 on ESP01    13 on board  pin connections for I2C
int scl = 2;     //2 on ESP01    12  might be different for you

ESP8266WebServer server(80);    //start server on port(n)

//---------------- Define a web page here ---------------------------
const String format = "<body bgcolor=\"#ccffff\">";   //pale blue
const String h1 = "<h1>OLED Demo - type a message & send it to the OLED!</h1>"; //heading 1
const String h2 = "<form method='get' action='a'>";
const String h3 ="<textarea autofocus name='message' rows='7' cols='20' wrap='hard'>";
const String h4 ="Type here</textarea>";
const String h5 = "<p><input type='submit' value ='Give it to me!'></form>";
const String h6 ="<p><i><a href=''>Ian Sexton</a></i><br>";
const String webpage =  format + h1 + h2 + h3 + h4 + h5 + h6; //build the webpage from parts above
// split into parts to make it easier to follow

void setup(void) {
  Wire.pins(sda, scl);    //configure I2C
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  // initialize with I2C addr 0x3C
  display.clearDisplay();                     //wipe
  display.setTextSize(1);           //small font
  display.setCursor(0, 0);
  display.display();                          //update

  WiFi.begin(ssid, password);     //let's connect :)

  while (WiFi.status() != WL_CONNECTED) // Wait for connection - can hang forever here.......

  server.on("/", handleRoot);       // where to go...
  server.onNotFound(handleOther);  //from submit button we hope ;)
  server.begin();                   //let's go!

void loop()
void handleRoot()
  server.send(200, "text/html", webpage);
void handleOther()  //the submitted string will end up here
  //server.arg(n) tells us what was submitted. Hopefully only 1 argument...

  String message = server.arg(0);   //no reason for message - just for clarity
  message.replace("+", " ");    //get rid of url encoding - swap '+' for 'space' etc
  message.replace("%21","!");   //plus a few common others
  message.replace("%26","&");   //expand as required
  display.clearDisplay();       //now print to the oled
  display.setCursor(0, 0);
  handleRoot();               //return the 'home' page

Ian Sexton