Updated to V0.6

- Added Internet Detection to Switch to CDN
- Optimized PROGMEM Data
- Improved UI for Mobile Displays
- Added SoftAP Example
- Fixed Example code for Generic ESP8266 Boards

README.md

@@ -1,8 +1,6 @@
 # EasyUI
-![alt text](https://github.com/ayushsharma82/EasyUI/blob/master/img-example1.PNG "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:
-
+<br>
 **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("");
 ```
-
+<br>
 **To Make Label on Webpage:**
 This will add an Label on your Web Interface.
-
 ```
 EasyUI.label("Title", "Value");
 ```
-
+<br>
-
 **To Make Toggle Button on Webpage:**
 This will add an toggle Button on your Webpage. For Extra Functionality* See Below
-
 ```
 EasyUI.toggleButton(pin,"Title");
 ```
-
+<br>
-
 **Start the Library:**
 Once you have Specified Any of the above Elements, Use this Below them to Start Inializing the Library.
-
 ```
 EasyUI.begin();
 ```
-
+<br>
-
 **Loop Function:**
 Don't Forget to Add this in your void loop()
-
 ```
 EasyUI.loop();
 ```
-
+<br>
 
 ## Extra Functionality
 There are Some Elements in Library which have Added extra Functionality for Ease of Use.

examples/UI_Test/UI_Test.ino

@@ -8,8 +8,8 @@
 #include <WiFiClient.h>
 #include <EasyUI.h>
 
-const char* ssid = "hotspotk4c";
+const char* ssid = ".........";
-const char* password = "frenzy99";
+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();
 }
 

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 <ESP8266WiFi.h>
+#include <WiFiClient.h>
+#include <EasyUI.h>
+
+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();
+}

keywords.txt

@@ -1,5 +1,6 @@
 EasyUI KEYWORD1
 
+detectCDN KEYWORD2
 title KEYWORD2
 begin KEYWORD2
 label KEYWORD2

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; }
   }
 

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 <functional>
 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);
+  bool internet = false;
-server->send(200,"text/html", "");
+if(CDN){
-server->sendContent(HTML_HEAD1);
+  HTTPClient http;
-server->sendContent(String("<title>")+ui_title+"</title>");
+  http.begin("http://www.google.com/");
-server->sendContent(HTML_HEAD2);
+  int httpCode = http.GET();
-server->sendContent(String("<h4>")+ui_title+"  <span id=\"connection_status\" class=\"label\">Offline</span></h4></div><hr />");
+  if(httpCode > 0) {
-server->sendContent(HTML_BODY);
+    internet = true;
-server->client().stop();
+  }
+}
+  server->setContentLength(CONTENT_LENGTH_UNKNOWN);
+  server->send(200,"text/html", "");
+  server->sendContent(HTML_HEAD1);
+  server->sendContent(String("<title>")+ui_title+"</title>");
+  server->sendContent(HTML_HEAD2);
+  server->sendContent(String("<h4>")+ui_title+"  <span id=\"connection_status\" class=\"label\">Offline</span></h4></div><hr />");
+  server->sendContent(HTML_BODY);
+
+    if(internet){
+      server->sendContent("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>");
+    }
+    else{
+      server->sendContent("<script src=\"/js/jquery.js\"></script>");
+    }
+
+  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_P(200, "application/javascript", JS_JQUERY);
-  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();
 }
 
 // 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", "<html><h1>404 - You are Lost</h1></html>");
   }
 }

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<ESP8266WebServer> server;       // Create Unique Instance for Webserver
   std::unique_ptr<WebSocketsServer> webSocket;    // Create Unique Instance for WebSocketsServer
 
+  bool CDN = false;
 
   void handleRoot();      // Handle Index HTML
   void handleNCSS();      // Handle Normalize CSS

src/HTML_PAGE.h

@@ -20,7 +20,9 @@ const char HTML_BODY[] PROGMEM = R"=====(
     <div id="row" class="row u-full-width">
     </div>
   </div>
- <script src="/js/jquery.js"></script>
+  )=====";
+
+const char HTML_END[] PROGMEM = R"=====(
  <script src="/js/sockets.js"></script>
   </body>
   </html>