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 '10.0.0.111' (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='mailto:sexton@dmu.ac.uk'>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
  Wire.begin();
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  // initialize with I2C addr 0x3C
  display.clearDisplay();                     //wipe
  display.setTextSize(1);           //small font
  display.setTextColor(WHITE);
  display.setCursor(0, 0);
  display.print("Connecting");
  display.display();                          //update

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

  while (WiFi.status() != WL_CONNECTED) // Wait for connection - can hang forever here.......
  {
    delay(500);
    display.print(".");
    display.display();
  }
  
  display.println("\n\nConnected");
  display.print("\nSSID:");
  display.println(ssid);
  display.print("IP:");
  display.println(WiFi.localIP());
  display.display();

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

//---------------------------------------------------------
void loop()
{
  server.handleClient();
}
//---------------------------------------------------------
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("%0A","");
  message.replace("%0D","\n");
  message.replace("%21","!");   //plus a few common others
  message.replace("%23","#");
  message.replace("%24","$");
  message.replace("%26","&");   //expand as required
  message.replace("%27","'");
  message.replace("%28","(");
  message.replace("%29",")");
  message.replace("%2A","*");
  message.replace("%2B","+");
  message.replace("%2C",",");
  message.replace("%2F","/");
  message.replace("%3A",":");
  message.replace("%3B",";");
  message.replace("%3D","=");
  message.replace("%3F","?");
  message.replace("%40","@");
  message.replace("%5B","[");
  message.replace("%5D","]");
  display.clearDisplay();       //now print to the oled
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 0);
  display.println(message);
  display.display();
  handleRoot();               //return the 'home' page
}


Ian Sexton