diff --git a/README.md b/README.md
index 7f14ae4..3c72311 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,6 @@
# EasyUI
-
-
Did you Ever Got into the Trouble of Making a good Looking UI for ESP8266 without having the skills to Build Perfect Webpages?
-EasyUI is an User Interface Library for ESP8266 to Solve this Problem. This Library Uses Light-weight Websockets Protocol for Communicating with Webpage to Control, Make and Update Elements. All Elements are Created in a Card Type Grid, Where Each Element Stacks aside the other. The Whole webpage is Responsive and Adapts to Mobile Displays.
+EasyUI is an User Interface Library for ESP8266 to Solve this Problem. This Library Uses Light-weight Websockets Protocol for Communicating with Webpage to Control, Make and Update Elements.
EasyUI uses functions native to arduino for creating the perfect Good Looking User Interface without the Need of Knowing Complex Javascripts etc.
@@ -58,45 +56,37 @@ EasyUI is Based on [Skeleton CSS](http://getskeleton.com/) and Jquery for Handli
EasyUI is not Internet Dependent and will Continue working without any Internet Connection, All Assets are Loaded form ESP8266 Program Memory.
##### Following Functions can be Used in Sketch:
-
+
**To Set an Title for your Webpage:**
This Line of Code will Add your Custom Title to the Webpage Displayed by ESP8266. By Default is "EasyUI".
-
```
EasyUI.title("");
```
-
+
**To Make Label on Webpage:**
This will add an Label on your Web Interface.
-
```
EasyUI.label("Title", "Value");
```
-
-
+
**To Make Toggle Button on Webpage:**
This will add an toggle Button on your Webpage. For Extra Functionality* See Below
-
```
EasyUI.toggleButton(pin,"Title");
```
-
-
+
**Start the Library:**
Once you have Specified Any of the above Elements, Use this Below them to Start Inializing the Library.
-
```
EasyUI.begin();
```
-
-
+
**Loop Function:**
Don't Forget to Add this in your void loop()
-
```
EasyUI.loop();
```
-
+
## Extra Functionality
There are Some Elements in Library which have Added extra Functionality for Ease of Use.
diff --git a/img-example1.PNG b/docs/img1.PNG
similarity index 100%
rename from img-example1.PNG
rename to docs/img1.PNG
diff --git a/docs/img2.PNG b/docs/img2.PNG
new file mode 100644
index 0000000..64b365b
Binary files /dev/null and b/docs/img2.PNG differ
diff --git a/docs/img3.PNG b/docs/img3.PNG
new file mode 100644
index 0000000..595837f
Binary files /dev/null and b/docs/img3.PNG differ
diff --git a/docs/img4.PNG b/docs/img4.PNG
new file mode 100644
index 0000000..654a323
Binary files /dev/null and b/docs/img4.PNG differ
diff --git a/docs/img5.PNG b/docs/img5.PNG
new file mode 100644
index 0000000..c98b109
Binary files /dev/null and b/docs/img5.PNG differ
diff --git a/examples/UI_Test/UI_Test.ino b/examples/UI_Test/UI_Test.ino
index 6e1673d..7fb9c89 100644
--- a/examples/UI_Test/UI_Test.ino
+++ b/examples/UI_Test/UI_Test.ino
@@ -8,8 +8,8 @@
#include
#include
-const char* ssid = "hotspotk4c";
-const char* password = "frenzy99";
+const char* ssid = ".........";
+const char* password = "..........";
void setup(void) {
Serial.begin(115200);
@@ -24,8 +24,10 @@ void setup(void) {
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
+// Detects Internet Connectivity and Switches to Online CDN. (For STA Mode Only)
+ EasyUI.detectCDN(true);
EasyUI.label("Label","123");
- EasyUI.toggleButton(D4, "LED", HIGH, true); // LED Toggle Button * D4 for Nodemcu , 2 for Generic
+ EasyUI.toggleButton(2, "LED", HIGH, true); // LED Toggle Button
EasyUI.begin();
}
diff --git a/examples/softAP_UI_Test/softAP_UI_Test.ino b/examples/softAP_UI_Test/softAP_UI_Test.ino
new file mode 100644
index 0000000..03d0be2
--- /dev/null
+++ b/examples/softAP_UI_Test/softAP_UI_Test.ino
@@ -0,0 +1,29 @@
+/*
+ * Author: Ayush Sharma (ayushsharma82) Github
+ * Library: EasyUI
+ * - This is a Test Code of EasyUI Library
+ * - It Will Use the OnBoard LED of ESP8266 and toggle it.
+ */
+#include
+#include
+#include
+
+const char* ssid = "EasyUI";
+const char* password = "";
+
+void setup(void) {
+ Serial.begin(115200);
+ WiFi.mode(WIFI_AP);
+ WiFi.softAP(ssid, password);
+ Serial.println("");
+ Serial.print("IP address: ");
+ Serial.println(WiFi.softAPIP());
+
+ EasyUI.label("Label","123");
+ EasyUI.toggleButton(2, "LED", HIGH, true); // LED Toggle Button
+ EasyUI.begin();
+}
+
+void loop(void) {
+ EasyUI.loop();
+}
diff --git a/keywords.txt b/keywords.txt
index e79ebb0..4b19b1d 100644
--- a/keywords.txt
+++ b/keywords.txt
@@ -1,5 +1,6 @@
EasyUI KEYWORD1
+detectCDN KEYWORD2
title KEYWORD2
begin KEYWORD2
label KEYWORD2
diff --git a/src/CSS_STYLE.h b/src/CSS_STYLE.h
index 7e40b83..df56854 100644
--- a/src/CSS_STYLE.h
+++ b/src/CSS_STYLE.h
@@ -4,7 +4,7 @@ const char CSS_STYLE[] PROGMEM = R"=====(
}
.container {
position: relative;
- width: 100%;
+ width: 79%;
margin: 20px;
box-sizing: border-box; }
.column,
@@ -51,7 +51,7 @@ const char CSS_STYLE[] PROGMEM = R"=====(
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
- width: 85%;}
+ width: 84%;}
}
@@ -155,7 +155,7 @@ const char CSS_STYLE[] PROGMEM = R"=====(
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
- h5 { font-size: 2.4rem; }
+ h5 { font-size: 2.0rem; }
h6 { font-size: 1.5rem; }
}
diff --git a/src/EasyUI.cpp b/src/EasyUI.cpp
index aebecad..801fb5b 100644
--- a/src/EasyUI.cpp
+++ b/src/EasyUI.cpp
@@ -3,7 +3,7 @@
#include "HTML_PAGE.h" // Added HTML Index Page
#include "CSS_STYLE.h" // Added Main CSS Style
#include "CSS_NORMALIZE.h" // Added Normalize CSS
-#include "JS_JQUERY.h" // Added Jquery JS
+#include "JS_JQUERY.h"
#include
using namespace std;
@@ -12,7 +12,14 @@ using namespace std::placeholders;
// Generate Websockets Script for Webpage
void EasyUIClass::handleSockets(){
- String ip = WiFi.localIP().toString();
+ String ip;
+ if(WiFi.localIP().toString() != "0.0.0.0"){
+ ip = WiFi.localIP().toString();
+ }
+ else if(WiFi.softAPIP().toString() != "0.0.0.0"){
+ ip = WiFi.softAPIP().toString();
+ }
+
String ws;
ws = "var connection = new WebSocket(\"ws://"+ip+":81/\", ['easyui']);";
ws += " var keys = {};";
@@ -69,6 +76,10 @@ void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght
}
}
+void EasyUIClass::detectCDN(bool _autoState){
+ CDN = _autoState;
+}
+
void EasyUIClass::title(const char* _title){
ui_title = _title;
}
@@ -123,43 +134,47 @@ void EasyUIClass::tbuttonStatus(){
// Handle Index HTML
void EasyUIClass::handleRoot(){
-server->setContentLength(CONTENT_LENGTH_UNKNOWN);
-server->send(200,"text/html", "");
-server->sendContent(HTML_HEAD1);
-server->sendContent(String("")+ui_title+"");
-server->sendContent(HTML_HEAD2);
-server->sendContent(String("")+ui_title+" Offline
");
-server->sendContent(HTML_BODY);
-server->client().stop();
+ bool internet = false;
+if(CDN){
+ HTTPClient http;
+ http.begin("http://www.google.com/");
+ int httpCode = http.GET();
+ if(httpCode > 0) {
+ internet = true;
+ }
+}
+ server->setContentLength(CONTENT_LENGTH_UNKNOWN);
+ server->send(200,"text/html", "");
+ server->sendContent(HTML_HEAD1);
+ server->sendContent(String("")+ui_title+"");
+ server->sendContent(HTML_HEAD2);
+ server->sendContent(String("")+ui_title+" Offline
");
+ server->sendContent(HTML_BODY);
+
+ if(internet){
+ server->sendContent("");
+ }
+ else{
+ server->sendContent("");
+ }
+
+ server->sendContent(HTML_END);
+ server->client().stop();
}
// Handle Main Style CSS
void EasyUIClass::handleSCSS(){
-server->send(200, "text/css", CSS_STYLE);
+server->send_P(200, "text/css", CSS_STYLE);
}
// Handle Normalize CSS
void EasyUIClass::handleNCSS(){
-server->send(200, "text/css", CSS_NORMALIZE);
+server->send_P(200, "text/css", CSS_NORMALIZE);
}
// Handle Jquery
void EasyUIClass::handleJS(){
- server->setContentLength(CONTENT_LENGTH_UNKNOWN);
- server->send(200,"application/javascript", "");
- server->sendContent(JS_JQUERY1);
- server->sendContent(JS_JQUERY2);
- server->sendContent(JS_JQUERY3);
- server->sendContent(JS_JQUERY4);
- server->sendContent(JS_JQUERY5);
- server->sendContent(JS_JQUERY6);
- server->sendContent(JS_JQUERY7);
- server->sendContent(JS_JQUERY8);
- server->sendContent(JS_JQUERY9);
- server->sendContent(JS_JQUERY10);
- server->sendContent(JS_JQUERY11);
-
- server->client().stop();
+ server->send_P(200, "application/javascript", JS_JQUERY);
}
// Handle Not found Page
@@ -188,7 +203,6 @@ void EasyUIClass::handleNotFound() {
file.close();
}
else {
- Serial.println("File not Found : " + url);
server->send(200, "text/html", "404 - You are Lost
");
}
}
diff --git a/src/EasyUI.h b/src/EasyUI.h
index defd519..262f932 100644
--- a/src/EasyUI.h
+++ b/src/EasyUI.h
@@ -7,17 +7,18 @@
#include "ESP8266WiFi.h"
#include "WiFiClient.h"
#include "ESP8266WebServer.h"
+#include "ESP8266HTTPClient.h"
#include "ArduinoJson.h"
#include "WebSocketsServer.h"
#include "Hash.h"
-
#define HARDWARE "esp8266"
class EasyUIClass{
public:
void begin(); // Begin HTTP Server + WebSocketsServer & Initalize All Elements
+ void detectCDN(bool _autoState = true); // Detect if Internet Available or Switch to Offline Jquery
void title(const char* _title); // Define Webpage Header Name and title
void toggleButton(uint8_t pin, const char* tbutton_label, int start_state = 0, bool swap_state = false); // Create Toggle Button
void label(const char* label_name, const char* label_val); // Create Label
@@ -50,6 +51,7 @@ public:
std::unique_ptr server; // Create Unique Instance for Webserver
std::unique_ptr webSocket; // Create Unique Instance for WebSocketsServer
+ bool CDN = false;
void handleRoot(); // Handle Index HTML
void handleNCSS(); // Handle Normalize CSS
diff --git a/src/HTML_PAGE.h b/src/HTML_PAGE.h
index da86513..a8f589e 100644
--- a/src/HTML_PAGE.h
+++ b/src/HTML_PAGE.h
@@ -20,7 +20,9 @@ const char HTML_BODY[] PROGMEM = R"=====(
-
+ )=====";
+
+const char HTML_END[] PROGMEM = R"=====(