diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..926f983 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/data-dev/maincontrols.txt diff --git a/Esp8266-Spiffs-ApWebseverPortal.ino b/Esp8266-Spiffs-ApWebseverPortal.ino new file mode 100644 index 0000000..fb31a5d --- /dev/null +++ b/Esp8266-Spiffs-ApWebseverPortal.ino @@ -0,0 +1,341 @@ +/* + modified by fryakatkop nov2015 + + + FSWebServer - Example WebServer with SPIFFS backend for esp8266 + Copyright (c) 2015 Hristo Gochkov. All rights reserved. + This file is part of the ESP8266WebServer library for Arduino environment. + + This library is free software; you can redistribute it and/or + modify it under the terms of the GNU Lesser General Public + License as published by the Free Software Foundation; either + version 2.1 of the License, or (at your option) any later version. + This library is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + Lesser General Public License for more details. + You should have received a copy of the GNU Lesser General Public + License along with this library; if not, write to the Free Software + Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA + + upload the contents of the data folder with MkSPIFFS Tool ("ESP8266 Sketch Data Upload" in Tools menu in Arduino IDE) + or you can upload the contents of a folder if you CD in that folder and run the following command: + for file in `ls -A1`; do curl -F "file=@$PWD/$file" esp8266fs.local/edit; done + + access the sample web page at http://esp8266fs.local *edit* dns will catch all request and response with 302 + edit the page by going to http://esp8266fs.local/edit +*/ +#include +#include +#include +#include +#include +#include + +#define DBG_OUTPUT_PORT Serial + +const char *ssid = "ESP-test"; +const char *password = ""; + +/* hostname for mDNS. Should work at least on windows. Try http://esp8266.local */ +const char *myHostname = "esp8266"; + +const char *metaRefreshStr = "

redirecting...

"; + +// DNS server +const byte DNS_PORT = 53; +DNSServer dnsServer; + +// LED Animations +unsigned long previousMillis = 0; +bool ledAniRider = 0; +bool ledAniFlipper = 0; +bool ledAniDir = 0; +int ledAniPos = 0; +int interval = 100; // ms + +/* Soft AP network parameters */ +IPAddress apIP(192, 168, 4, 1); // note: update metaRefreshStr string if ip change! +IPAddress netMsk(255, 255, 255, 0); + +// Web server +ESP8266WebServer server(80); + +// Gpios with LEDs +byte ledIoNames[] = {5, 4, 13, 12, 14, 16 }; // GPIO 5&4 12&13 flipped on my board so dirty patch here 5<->4 12<->13 + + +//format bytes +String formatBytes(size_t bytes){ + if (bytes < 1024){ + return String(bytes)+"B"; + } else if(bytes < (1024 * 1024)){ + return String(bytes/1024.0)+"KB"; + } else if(bytes < (1024 * 1024 * 1024)){ + return String(bytes/1024.0/1024.0)+"MB"; + } else { + return String(bytes/1024.0/1024.0/1024.0)+"GB"; + } +} + +String getContentType(String filename){ + if(server.hasArg("download")) return "application/octet-stream"; + else if(filename.endsWith(".htm")) return "text/html"; + else if(filename.endsWith(".html")) return "text/html"; + else if(filename.endsWith(".css")) return "text/css"; + else if(filename.endsWith(".js")) return "application/javascript"; + else if(filename.endsWith(".png")) return "image/png"; + else if(filename.endsWith(".gif")) return "image/gif"; + else if(filename.endsWith(".jpg")) return "image/jpeg"; + else if(filename.endsWith(".ico")) return "image/x-icon"; + else if(filename.endsWith(".xml")) return "text/xml"; + else if(filename.endsWith(".pdf")) return "application/x-pdf"; + else if(filename.endsWith(".zip")) return "application/x-zip"; + else if(filename.endsWith(".gz")) return "application/x-gzip"; + return "text/plain"; +} + +bool handleFileRead(String path){ + DBG_OUTPUT_PORT.println("handleFileRead: " + path); + if(path.endsWith("/")) path += "index.html"; + String contentType = getContentType(path); + String pathWithGz = path + ".gz"; + if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)){ + if(SPIFFS.exists(pathWithGz)) + path += ".gz"; + File file = SPIFFS.open(path, "r"); + size_t sent = server.streamFile(file, contentType); + file.close(); + return true; + } + return false; +} + +void handleFileList() { + if(!server.hasArg("dir")) {server.send(500, "text/plain", "BAD ARGS"); return;} + + String path = server.arg("dir"); + DBG_OUTPUT_PORT.println("handleFileList: " + path); + Dir dir = SPIFFS.openDir(path); + path = String(); + + String output = "["; + while(dir.next()){ + File entry = dir.openFile("r"); + if (output != "[") output += ','; + bool isDir = false; + output += "{\"type\":\""; + output += (isDir)?"dir":"file"; + output += "\",\"name\":\""; + output += String(entry.name()).substring(1); + output += "\"}"; + entry.close(); + } + + output += "]"; + server.send(200, "text/json", output); +} + +void handleLeds() +{ + if(server.arg("LED") ) { + int pin = server.arg("LED").toInt(); + bool onOFF = server.arg("state").toInt(); + digitalWrite(pin, onOFF); + } + String json = "{ \"leds\": ["; + for (int i = 0; i < sizeof(ledIoNames); i++) + { + bool state = digitalRead(ledIoNames[i]); + json += "{ \"" + String(i) + "\": ["; + json += "\""+String(ledIoNames[i])+"\", "; + json += "\""+String(state)+"\" ] }"; + if(!(i == sizeof(ledIoNames)-1)) + json += ","; + + } + json += "] }"; + server.send(200, "text/json", json); + json = String(); + +} + +void clearAll() { + //stop Animations + ledAniRider = 0; + ledAniFlipper = 0; + ledAniPos = 0; + ledAniDir = 0; + // clear all leds + for (int i = 0; i < sizeof(ledIoNames); i++) { + digitalWrite(ledIoNames[i], LOW); + } +} + +void setup(void){ + DBG_OUTPUT_PORT.begin(115200); + DBG_OUTPUT_PORT.print("\n"); + DBG_OUTPUT_PORT.setDebugOutput(true); + SPIFFS.begin(); + { + Dir dir = SPIFFS.openDir("/"); + while (dir.next()) { + String fileName = dir.fileName(); + size_t fileSize = dir.fileSize(); + DBG_OUTPUT_PORT.printf("FS File: %s, size: %s\n", fileName.c_str(), formatBytes(fileSize).c_str()); + } + DBG_OUTPUT_PORT.printf("\n"); + } + + // Setup LED pins + for (int i = 0; i < sizeof(ledIoNames); i++) { + pinMode(ledIoNames[i],OUTPUT); + } + + //WIFI INIT + DBG_OUTPUT_PORT.printf("Connecting to %s\n", ssid); + WiFi.mode(WIFI_AP); + WiFi.softAP(ssid, password); + + + DBG_OUTPUT_PORT.println(""); + DBG_OUTPUT_PORT.print("Connected! IP address: "); + DBG_OUTPUT_PORT.println ( WiFi.softAPIP() ); + + /* Setup the DNS server redirecting all the domains to the apIP */ + dnsServer.setErrorReplyCode(DNSReplyCode::NoError); + dnsServer.start(DNS_PORT, "*", apIP); + + // Setup MDNS responder + if (!MDNS.begin(myHostname)) { + Serial.println("Error setting up MDNS responder!"); + } else { + Serial.println("mDNS responder started"); + // Add service to MDNS-SD + MDNS.addService("http", "tcp", 80); + } + + + //SERVER INIT + //list directory + server.on("/listFiles", HTTP_GET, handleFileList); + //called when the url is not defined here + //use it to load content from SPIFFS + server.onNotFound([](){ + if(!handleFileRead(server.uri())) + server.send(302, "text/html", metaRefreshStr); + }); + // handle led requests + server.on("/leds", HTTP_GET, handleLeds); + server.on("/clearAll", HTTP_GET, clearAll); + server.on("/rider", HTTP_GET, [](){ + ledAniPos = 0; + ledAniDir = 0; + ledAniFlipper = 0; + ledAniRider = 1; + }); + server.on("/flipper", HTTP_GET, [](){ + ledAniPos = 0; + ledAniDir = 0; + ledAniRider = 0; + ledAniFlipper = 1; + }); + //get heap status, analog input value and all GPIO statuses in one json call + server.on("/all", HTTP_GET, [](){ + String json = "{"; + json += "\"heap\":"+String(ESP.getFreeHeap()); + json += ", \"analog\":"+String(analogRead(A0)); + json += ", \"gpio\":"+String((uint32_t)(((GPI | GPO) & 0xFFFF) | ((GP16I & 0x01) << 16))); + json += "}"; + server.send(200, "text/json", json); + json = String(); + }); + server.begin(); + DBG_OUTPUT_PORT.println("HTTP server started"); + +} + +void loop(void){ + //DNS + dnsServer.processNextRequest(); + //HTTP + server.handleClient(); + + // LED Animation + if(ledAniRider || ledAniFlipper) + { + unsigned long currentMillis = millis(); + + if (currentMillis - previousMillis >= interval) { + // save the last time you blinked the LED + previousMillis = currentMillis; + + if(ledAniRider) + { + if(ledAniDir == 0) + { + if(ledAniPos < sizeof(ledIoNames)) + { + digitalWrite(ledIoNames[ledAniPos], HIGH); + digitalWrite(ledIoNames[ledAniPos -1], LOW); + ledAniPos++; + } + else + { + ledAniDir = 1; + digitalWrite(ledIoNames[ledAniPos], HIGH); + digitalWrite(ledIoNames[ledAniPos +1], LOW); + ledAniPos--; + } + } + else + { + if(ledAniPos >= 0) + { + digitalWrite(ledIoNames[ledAniPos], HIGH); + digitalWrite(ledIoNames[ledAniPos +1], LOW); + ledAniPos--; + } + else + { + ledAniDir = 0; + digitalWrite(ledIoNames[ledAniPos], HIGH); + digitalWrite(ledIoNames[ledAniPos -1], LOW); + ledAniPos++; + } + } + } + else if(ledAniFlipper) + { + if(ledAniDir == 0) + { + if(ledAniPos < sizeof(ledIoNames)) + { + digitalWrite(ledIoNames[ledAniPos], HIGH); + ledAniPos++; + } + else + { + ledAniDir = 1; + digitalWrite(ledIoNames[ledAniPos], LOW); + ledAniPos--; + } + } + else + { + if(ledAniPos >= 0) + { + digitalWrite(ledIoNames[ledAniPos], LOW); + ledAniPos--; + } + else + { + ledAniDir = 0; + digitalWrite(ledIoNames[ledAniPos], HIGH); + ledAniPos++; + } + } + } + } + } +} diff --git a/data-dev/favicon.ico b/data-dev/favicon.ico new file mode 100644 index 0000000..71b25fe Binary files /dev/null and b/data-dev/favicon.ico differ diff --git a/data-dev/index.html b/data-dev/index.html new file mode 100644 index 0000000..8975790 --- /dev/null +++ b/data-dev/index.html @@ -0,0 +1,257 @@ + + + + + Esp8266 - FsWebserver + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ESP8266-Arduino + AP Server Portal + + +
+ +
+ LED Controls: + Click on the LEDs to light em Up! +
+ + also try a Animation: +
+ Rider + Flipper + stop & ClearAll +
+
+
+ + \ No newline at end of file diff --git a/data-dev/leds b/data-dev/leds new file mode 100644 index 0000000..bd2bc9e --- /dev/null +++ b/data-dev/leds @@ -0,0 +1 @@ +{ "leds": [{ "0": ["5", "1" ] },{ "1": ["4", "0" ] },{ "2": ["13", "0" ] },{ "3": ["12", "0" ] },{ "4": ["14", "0" ] },{ "5": ["16", "0" ] }] } \ No newline at end of file diff --git a/data-dev/main.js b/data-dev/main.js new file mode 100644 index 0000000..e69de29 diff --git a/data-dev/style.css b/data-dev/style.css new file mode 100644 index 0000000..6814659 --- /dev/null +++ b/data-dev/style.css @@ -0,0 +1,157 @@ +body { + font-size: 14px; + font-family: "Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif; + background: #00979d none repeat scroll 0px 0px; + align: Center; +} +#Main { + width: 460px; + margin: 5px 3px 3px 12px; +} + + +@import "compass/css3"; + +text#titleGlitch { + fill: #006666; + font-weight: bold; + text-shadow: 2px 2px black; + font-family: sans-serif; + font-size: 48px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +text#titleText { + fill: #006666; + text-shadow: 1px 1px black; + font-family: sans-serif; + font-size: 26px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +svg { + border: solid 1px black; + width: 100%; + height: 80px; + display: block; + position: relative; + /*overflow: hidden; */ + background: #66bebe; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} +#ledControls { + margin-top:3px; + padding: 10px; + border: solid black 1px; + background: #66bebe; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} +.sectionTitle { + font-size: 28px; + font-weight: bold; + font-family: "impact","Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif; + float: left; + clear: left; + color: #006666; + text-shadow: 2px 2px black; +} +.sectionDesc { + font-weight: bold; + float: left; + clear: left; +} +#ledBar { + float:none; + clear:left; + margin-left: 7px; + padding-top: 10px; + overflow: auto; +} +.ledDiv { + width: 40px; + height: 40px; + background: #add; + margin: 3px 3px; + float:left; + line-height: 30px; + + border-radius: 100%; + position: relative; + -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); + box-shadow: 0px 1px 3px rgba(0,0,0,0.5); +} +.ledDiv label { + display: block; + width: 30px; + height: 30px; + border-radius: 100px; + text-align: center; + + -webkit-transition: all .1s ease; + -moz-transition: all .1s ease; + -o-transition: all .1s ease; + -ms-transition: all .1s ease; + transition: all .1s ease; + cursor: pointer; + position: absolute; + top: 5px; + left: 5px; + z-index: 1; + + background: #663300; + + -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); + box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); +} +.ledDiv input[type="checkbox"] { + visibility: hidden; +} +.ledDiv input[type=checkbox]:checked + label { + background: #ff9900; +} +.ledMacroButtons { + padding: 18px 5px 15px 5px; + text-decoration: none; + float:none; + clear:left; +} +.ledMacroButton { + height: 50px; + background: #00989d; + background-image: -webkit-linear-gradient(top, #00989d, #0a787a); + background-image: -moz-linear-gradient(top, #00989d, #0a787a); + background-image: -ms-linear-gradient(top, #00989d, #0a787a); + background-image: -o-linear-gradient(top, #00989d, #0a787a); + background-image: linear-gradient(to bottom, #00989d, #0a787a); + -webkit-border-radius: 17; + -moz-border-radius: 17; + border-radius: 17px; + text-shadow: 6px 4px 4px #4d424d; + -webkit-box-shadow: 0px 1px 3px #666666; + -moz-box-shadow: 0px 1px 3px #666666; + box-shadow: 0px 1px 3px #666666; + color: #fafafa; + font-size:12px; + padding: 10px 15px 10px 15px; + border: solid #26b3b3 4px; + text-decoration: none; + margin: 23px 4px 23px 6px; + position: relative; +} + +.ledMacroButton:hover { + background: #307070; + background-image: -webkit-linear-gradient(top, #307070, #66bebe); + background-image: -moz-linear-gradient(top, #307070, #66bebe); + background-image: -ms-linear-gradient(top, #307070, #66bebe); + background-image: -o-linear-gradient(top, #307070, #66bebe); + background-image: linear-gradient(to bottom, #307070, #66bebe); + text-decoration: underline; +} + diff --git a/data/favicon.ico b/data/favicon.ico new file mode 100644 index 0000000..71b25fe Binary files /dev/null and b/data/favicon.ico differ diff --git a/data/index.html b/data/index.html new file mode 100644 index 0000000..8975790 --- /dev/null +++ b/data/index.html @@ -0,0 +1,257 @@ + + + + + Esp8266 - FsWebserver + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ESP8266-Arduino + AP Server Portal + + +
+ +
+ LED Controls: + Click on the LEDs to light em Up! +
+ + also try a Animation: +
+ Rider + Flipper + stop & ClearAll +
+
+
+ + \ No newline at end of file diff --git a/data/style.css b/data/style.css new file mode 100644 index 0000000..6814659 --- /dev/null +++ b/data/style.css @@ -0,0 +1,157 @@ +body { + font-size: 14px; + font-family: "Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif; + background: #00979d none repeat scroll 0px 0px; + align: Center; +} +#Main { + width: 460px; + margin: 5px 3px 3px 12px; +} + + +@import "compass/css3"; + +text#titleGlitch { + fill: #006666; + font-weight: bold; + text-shadow: 2px 2px black; + font-family: sans-serif; + font-size: 48px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +text#titleText { + fill: #006666; + text-shadow: 1px 1px black; + font-family: sans-serif; + font-size: 26px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +svg { + border: solid 1px black; + width: 100%; + height: 80px; + display: block; + position: relative; + /*overflow: hidden; */ + background: #66bebe; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} +#ledControls { + margin-top:3px; + padding: 10px; + border: solid black 1px; + background: #66bebe; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} +.sectionTitle { + font-size: 28px; + font-weight: bold; + font-family: "impact","Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif; + float: left; + clear: left; + color: #006666; + text-shadow: 2px 2px black; +} +.sectionDesc { + font-weight: bold; + float: left; + clear: left; +} +#ledBar { + float:none; + clear:left; + margin-left: 7px; + padding-top: 10px; + overflow: auto; +} +.ledDiv { + width: 40px; + height: 40px; + background: #add; + margin: 3px 3px; + float:left; + line-height: 30px; + + border-radius: 100%; + position: relative; + -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); + box-shadow: 0px 1px 3px rgba(0,0,0,0.5); +} +.ledDiv label { + display: block; + width: 30px; + height: 30px; + border-radius: 100px; + text-align: center; + + -webkit-transition: all .1s ease; + -moz-transition: all .1s ease; + -o-transition: all .1s ease; + -ms-transition: all .1s ease; + transition: all .1s ease; + cursor: pointer; + position: absolute; + top: 5px; + left: 5px; + z-index: 1; + + background: #663300; + + -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); + -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); + box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); +} +.ledDiv input[type="checkbox"] { + visibility: hidden; +} +.ledDiv input[type=checkbox]:checked + label { + background: #ff9900; +} +.ledMacroButtons { + padding: 18px 5px 15px 5px; + text-decoration: none; + float:none; + clear:left; +} +.ledMacroButton { + height: 50px; + background: #00989d; + background-image: -webkit-linear-gradient(top, #00989d, #0a787a); + background-image: -moz-linear-gradient(top, #00989d, #0a787a); + background-image: -ms-linear-gradient(top, #00989d, #0a787a); + background-image: -o-linear-gradient(top, #00989d, #0a787a); + background-image: linear-gradient(to bottom, #00989d, #0a787a); + -webkit-border-radius: 17; + -moz-border-radius: 17; + border-radius: 17px; + text-shadow: 6px 4px 4px #4d424d; + -webkit-box-shadow: 0px 1px 3px #666666; + -moz-box-shadow: 0px 1px 3px #666666; + box-shadow: 0px 1px 3px #666666; + color: #fafafa; + font-size:12px; + padding: 10px 15px 10px 15px; + border: solid #26b3b3 4px; + text-decoration: none; + margin: 23px 4px 23px 6px; + position: relative; +} + +.ledMacroButton:hover { + background: #307070; + background-image: -webkit-linear-gradient(top, #307070, #66bebe); + background-image: -moz-linear-gradient(top, #307070, #66bebe); + background-image: -ms-linear-gradient(top, #307070, #66bebe); + background-image: -o-linear-gradient(top, #307070, #66bebe); + background-image: linear-gradient(to bottom, #307070, #66bebe); + text-decoration: underline; +} +