Skip to content

Instantly share code, notes, and snippets.

@JasonPellerin

JasonPellerin/gist:5e7b305cb244fa9ecbca

Last active November 13, 2016 16:29
Show Gist options
  • Save JasonPellerin/5e7b305cb244fa9ecbca to your computer and use it in GitHub Desktop.
Save JasonPellerin/5e7b305cb244fa9ecbca to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrapped ESP8266 UI
Raw
gistfile1.c
/*
* http://www.jpllerin.info/bl0g/ - More ESP8266 Projects -
*
* http://getbootstrap.com/ - Learn About Twitter Bootstrap
*
* http://fortawesome.github.io/Font-Awesome/3.2.1/cheatsheet/ - Learn About Font-Awesome Icons
*
* http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/ - Learn About CSS Text Fills
*
* https://gist.github.com/igrr/3b66292cf8708770f76b - Base Sketch
*
* Connection:
* GPIO 0 to LED0 Anode(+); GND to Upload Sketch
* GPIO 2 to LED2 Anode(+)
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <Ticker.h>
Ticker tickerSetHigh;
Ticker tickerSetLow;
////////////////////////////////////////////// * * * *
///////////////////////////////*///////////// * \/ * * /\ *
////////*/////////////////////////////////// || * * ____/ \____ * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/////////////////////////////////////////// /\ || ____ ________ \ / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// WiFi Creds //////////////////////////// \\ //\\ // || | ___||||_____ / * * \ IoA / * * * * * * * * * * * * *
const char* ssid = "yourSSID"; // \\ // \\ // || ||__ || / / * / \ * * * * * * * * * * * * * * * * * * * * * * * * * * *
const char* password = "yourpasswd"; // \\ // \\ // || | __| || / /___________________________________________________________________________/ /\ \_ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/////////////////////////////////////// \\// \\// || || || /_________________________I <3 ESP8266 & ARDUINO_________________________________*_/ \_*___|>>>>>>>*>>>>>>>>>>>>>>>>>>>>>>>>>>>> * >>> * >>> * >>>> * * * * * * * * * * * * * * * * * * * *
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\\\\\\\\\\\\\\\\\\\\ * * * * * * * * * * * * * * * *
//===============================================================================================================================================================================// \\\\\\\\\\\\\\\\\\\\ * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////____\\\\\\\\\\\\\\\\\\\\ * * * * * * * * * * * * * * * * * * * * * * * * * * *
////////////////////////////////////////////////////////////////////// HTML LEGOS ////////////////////////////////////////////////////////////////////////////////////////////////////////////| |///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////| |///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////|
String header = "<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>I <3 ESP8266</title><link rel='shortcut icon' href='http://www.jpellerin.info/bl0g/img/blog_ico.png' type='image/x-icon'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' /></head>";
String header_Rfsh = "<html><head><META HTTP-EQUIV='Refresh' CONTENT='1;URL=/leds'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>I <3 ESP8266</title><link rel='shortcut icon' href='http://www.jpellerin.info/bl0g/img/blog_ico.png' type='image/x-icon'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' /></head>";
String headerRfshTkr = "<html><head><META HTTP-EQUIV='Refresh' CONTENT='1;URL=/tkr'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>I <3 ESP8266</title><link rel='shortcut icon' href='http://www.jpellerin.info/bl0g/img/blog_ico.png' type='image/x-icon'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' /></head>";
String menu_btns = "<br /><div class='row'><div class='col-xs-12 col-sm-12 col-md-6 col-md-offset-3'><center><div class='btn-group' role='group' aria-label='MENU'><a href='/leds' type='button' class='btn btn-md' style='background-color: #000; frameborder=1; border-color:#656565;'>Toggle LEDs <i class='fa fa-lightbulb-o'></i></a><a href='/adc' type='button' class='btn btn-md' style='background-color: #000; frameborder=1; border-color:#656565;'>A/D Converter <i class='fa fa-random'></i></a><a type='button' class='btn btn-md' style='background-color: #000; frameborder=1; border-color:#656565;' href='/tkr'>Ticker <i class='fa fa-spin fa-clock-o'></i></a></div></center></div></div>";
String toggle0 = "<div class='col-xs-6 col-sm-6 col-md-3 col-md-offset-3' style='padding: 15px;'><div class='well' style='background-color: #001; color: ffd700; border-color:#000; padding: 15px;'><div class=''><center><form class='form-inline' action='led0'><div class='radio'><label><input type='radio' name='state' value='1' checked style='width: 55px; height: 55px'> On </label></div><div class='radio'><label><input type='radio' name='state' value='0' style='width: 35px; height: 35px'> Off </label></div><br /><button type='submit' class='btn btn-primary btn-lg' value=''>Toggle LED0</button></form></center></div></div></div>";
String toggle2 = "<div class='col-xs-6 col-sm-6 col-md-3' style='padding: 15px;'><div class='well' style='background-color: #001; color: ffd700; border-color:#000; padding: 15px;'><div class=''><center><form class='form-inline' action='led2'><div class='radio'><label><input type='radio' name='state' value='1' checked style='width: 55px; height: 55px'> On </label></div><div class='radio'><label><input type='radio' name='state' value='0' style='width: 35px; height: 35px'> Off </label></div><br /><button type='submit' class='btn btn-primary btn-lg' value=''>Toggle LED2</button></form></center></div></div></div>";
String tkrForm0 = "<div class='row'><div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'><div class='col-md-6 col-md-offset-3'><form class='form-inline' action='tkr0'><div class='form-group'><label for='LED OFF time in ms.'> ms. OFF </label><input type='number' class='form-control' id='off' name='off' placeholder='55'></div><div class='form-group'><label for='LED ON time in ms.'> ms. ON </label><input type='number' class='form-control' id='on' name='on' placeholder='56'></div><button type='submit' class='btn btn-default'>Start The Party!</button></form></div></div></div>";
String adcFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/adc.html' scrolling='no' align='center' height='200px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String ledsFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/leds.html' scrolling='no' align='center' height='125px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String flameFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/fire.html' scrolling='no' align='center' height='115px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String tkrFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/tkr.html' scrolling='no' align='center' height='175px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String ESP_Sml_Frame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/esp_sml.html' scrolling='no' align='center' height='150px' width='255px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String rainbowFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/rainbow.html' scrolling='no' align='center' height='200px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String cookieFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/Cookie.html' scrolling='no' align='center' height='200px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String ESP01Frame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/esp01.html' scrolling='no' align='center' height='500px' width='650px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String ESP03Frame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/esp03.html' scrolling='no' align='center' height='330px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String jackFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/jackBurton.html' scrolling='no' align='center' height='300px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String brainFrame = "<div class='row'><div class='col-xs-12 col-md-12 col-lg-12' style='text-align: center;'><iframe src='http://dev.jpellerin.info/ESP/brain.html' scrolling='no' align='center' height='500px' width='330px' frameborder=0; border-color:#000; background:#000; border-style:none;'></iframe></div></div>";
String back = "<div class='row'><div class='col-xs-12 col-md-6 col-md-offset-3'<br /><a type='button' href='/' class='btn btn-lg btn-block' style='background-color: #000; frameborder=1; border-color:#656565;''>Back To Main</a><br /></div></div>";
String Chipset = "<div class='row'><div class='col-md-12' style='text-align: center;'><h3><i class='fa fa-fire'></i> The Hottest Chipset This Side of the Matrix <i class='fa fa-fire-extinguisher'></i></h3></div></div>";
String body_open = "<body style='background-color: #000;'><div class='container'>";
String row_open = "<div class='row'>";
String div_open = "<div class='col-md-12'>";
String div_close = "</div>";
String body_close = "</div></body></html>";
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////|
// HTTP server will listen at port 80
ESP8266WebServer server(80);
const int led0 = 0;
const int led2 = 2;
// Set up Ticker pinmode for LED 0
void setPin0(int state) {
digitalWrite(led0, state);
}
// Set up Ticker pinmode for LED 2
void setPin2(int state) {
digitalWrite(led2, state);
}
// Analog to Digital Converter runing on GPIO 0
void handle_adc() {
float val = analogRead(0);
server.send(200, "text/html", header + body_open + adcFrame + ESP_Sml_Frame + row_open + div_open + String("<h1 style='font-size: 55px; text-align: center;'>") + String("<font style='color: red;'>") + String(val) + String("</font> <a href='/adc' ><i class='fa fa-refresh'></i></a></h1>") + div_close + div_close + back + body_close);
}
// Toggle LED Page
void handle_leds() {
server.send(200, "text/html", header + body_open + ledsFrame + rainbowFrame + row_open + toggle0 + toggle2 + div_close + back + body_close);
}
// Set and display current state of LED 0 with page refresh
void handle_led0() {
// get the value of request argument "state" and convert it to an int
int state = server.arg("state").toInt();
digitalWrite(led0, state);
server.send(200, "text/html", header_Rfsh + body_open + cookieFrame + row_open + String("<div class='col-md-12'><h1 style='text-align: center;'>") + String("LED is now ") + String("<font style='color: red;'>") + ((state)?"ON":"OFF") + String("</font><br /><br /></h1>") + div_close + div_close + body_close) ;
delay(3000);
}
// Set and display Current state of LED 2 with page refresh
void handle_led2() {
// get the value of request argument "state" and convert it to an int
int state = server.arg("state").toInt();
digitalWrite(led2, state);
server.send(200, "text/html", header_Rfsh + body_open + cookieFrame + row_open + String("<div class='col-md-12'><h1 style='text-align: center;'>") + String("LED is now ") + String("<font style='color: red;'>") + ((state)?"ON":"OFF") + String("</font><br /><br /></h1>") + div_close + div_close + body_close);
}
// Ticker Page
void handle_tkr() {
server.send(200, "text/html", header + body_open + tkrFrame + brainFrame + tkrForm0 + row_open + div_open + div_close + div_close + back + body_close);
}
void handle_tkr0() {
// get the value of request argument "0ff" and convert it to an int
const int off = server.arg("off").toInt();
// get the value of request argument "0n" and convert it to an int
const int on = server.arg("on").toInt();
// TODO - fix ugly code with for loop
tickerSetLow.attach_ms(off, setPin0, 0);
tickerSetHigh.attach_ms(on, setPin0, 1);
delay(2500);
tickerSetLow.attach_ms(off, setPin2, 0);
tickerSetHigh.attach_ms(on, setPin2, 1);
delay(2500);
tickerSetLow.attach_ms(off, setPin0, 0);
tickerSetHigh.attach_ms(on, setPin0, 1);
delay(2500);
tickerSetLow.attach_ms(off, setPin2, 0);
tickerSetHigh.attach_ms(on, setPin2, 1);
delay(2500);
tickerSetLow.attach_ms(off, setPin0, 0);
tickerSetLow.attach_ms(off, setPin0, 1);
delay(2500);
tickerSetLow.attach_ms(off, setPin2, 0);
tickerSetHigh.attach_ms(on, setPin2, 1);
// Jack Burton Approves!!!
server.send(200, "text/html", headerRfshTkr + body_open + String("<h2 style='text-align: center;'>I APPROVE!</h2>") + jackFrame + row_open + div_open + div_close + div_close + back + body_close);
}
void handle_esp() {
server.send(200, "text/html", header + body_open + flameFrame + ESP01Frame + row_open + div_open + div_close + div_close + back + body_close);
}
void setup(void) {
Serial.begin(115200);
Serial.println("");
pinMode(led0, OUTPUT);
digitalWrite(led0, 0);
pinMode(led2, OUTPUT);
digitalWrite(led2, 0);
// Connect to WiFi network
WiFi.begin(ssid, password);
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print("*");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Set up the endpoints for HTTP server
//
// Endpoints can be written as inline functions:
server.on("/", [](){ // Root Directory (home)
server.send(200, "text/html", header + body_open + flameFrame + Chipset + ESP03Frame + menu_btns + div_close + body_close);
});
// And as regular external functions:
server.on("/adc", handle_adc); // Analog/Digital Converter Page
server.on("/leds", handle_leds); // Toggle LEDs Page
server.on("/led0", handle_led0);
server.on("/led2", handle_led2);
server.on("/tkr", handle_tkr); // Set Ticker Values Page
server.on("/tkr0", handle_tkr0);
server.on("/esp", handle_esp); // ESP Large
// Start the server
server.begin();
Serial.println("HTTP Server Activated - Hack The Planet!!!");
}
void loop(void) {
// check for incomming client connections frequently in the main loop:
server.handleClient();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment