#include "EasyUI.h"
#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
using namespace std;
using namespace std::placeholders;
// Generate Websockets Script for Webpage
void EasyUIClass::handleSockets(){
String ip = WiFi.localIP().toString();
String ws;
ws = "var connection = new WebSocket(\"ws://"+ip+":81/\", ['easyui']);";
ws += " var keys = {};";
ws += " connection.onopen = function () {";
ws += " $(\"#connection_status\").toggleClass(\"color-green\");";
ws += " $(\"#connection_status\").text(\"Connected\");";
ws += String(" connection.send(")+"\"{'mode': 'check_tb_status'}\");";
for(int i=0; i\"+obj.l_title+\"
\"+obj.l_value+\"
\");}";
ws += " else if(obj.mode === 'create_tbutton'){ $('#row').append(\"\"+obj.tb_title+\"
\");}";
ws += " else if(obj.mode === 't_button_startup'){ var tb_index = obj.index; for(i=0; isend(200, "application/javascript", ws);
}
// Handle Websockets Communication ( Out of Class)
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght) {
switch(type) {
case WStype_DISCONNECTED:
Serial.printf("Disconnected!\n");
break;
case WStype_CONNECTED:
{
Serial.printf("[WSc] Connected to url: %s\n", payload);
Serial.println("Connected");
EasyUI.handleWebpage();
Serial.println("JSON Data Sent to Client!");
}
break;
case WStype_TEXT:
StaticJsonBuffer<200> jsonBuffer;
JsonObject& root = jsonBuffer.parseObject(payload);
String mode = root["mode"];
if(mode == "check_tb_status"){
EasyUI.tbuttonStatus();
}
else if(mode == "tb_click"){
String status = root["status"];
String index = root["index"];
EasyUI.tbClick(index, status);
}
// send message to server
// webSocket.sendTXT("message here");
break;
}
}
void EasyUIClass::title(const char* _title){
ui_title = _title;
}
// Create Labels
void EasyUIClass::label(const char* label_name,const char* label_val){
label_value[l_index] = label_val;
label_title[l_index] = label_name;
l_index++;
}
// Create Toggle Buttons
void EasyUIClass::toggleButton(uint8_t pin, const char* tbutton_label, int start_state, bool swap_state){
pinMode(pin, OUTPUT);
digitalWrite(pin, start_state);
tbutton_swap[tb_index] = swap_state;
tbutton_pinout[tb_index] = pin;
tbuttontitle[tb_index] = tbutton_label;
tb_index++;
}
// Check Toggle Buttons States and Transfer to Webpage
void EasyUIClass::tbuttonStatus(){
String json;
StaticJsonBuffer<200> jsonBuffer;
JsonObject& root = jsonBuffer.createObject();
root["mode"] = "t_button_startup";
root["index"] = tb_index;
for(int i=0; ibroadcastTXT(json);
}
// 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();
}
// Handle Main Style CSS
void EasyUIClass::handleSCSS(){
server->send(200, "text/css", CSS_STYLE);
}
// Handle Normalize CSS
void EasyUIClass::handleNCSS(){
server->send(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();
}
// Handle Not found Page
void EasyUIClass::handleNotFound() {
String url = "";
String type = "";
url = server->uri();
if (SPIFFS.exists(url)) {
File file = SPIFFS.open(url, "r");
if (url.endsWith(".htm")) type = "text/html";
else if (url.endsWith(".html")) type = "text/html";
else if (url.endsWith(".css")) type = "text/css";
else if (url.endsWith(".js")) type = "application/javascript";
else if (url.endsWith(".png")) type = "image/png";
else if (url.endsWith(".gif")) type = "image/gif";
else if (url.endsWith(".jpg")) type = "image/jpeg";
else if (url.endsWith(".ico")) type = "image/x-icon";
else if (url.endsWith(".xml")) type = "text/xml";
else if (url.endsWith(".pdf")) type = "application/x-pdf";
else if (url.endsWith(".zip")) type = "application/x-zip";
else if (url.endsWith(".gz")) type = "application/x-gzip";
else type = "text/plain";
server->streamFile(file, type);
file.close();
}
else {
Serial.println("File not Found : " + url);
server->send(200, "text/html", "404 - You are Lost
");
}
}
// Handle Toggle Button Click Response
void EasyUIClass::tbClick(String _index, String _status){
String json;
StaticJsonBuffer<200> jsonBuffer;
JsonObject& root = jsonBuffer.createObject();
String name = "tb"+_index;
root["mode"] = "t_button_click";
root["index"] = _index;
if(_status == "on"){
root[name] = "1";
root.printTo(json);
webSocket->broadcastTXT(json);
if(tbutton_swap[_index.toInt()]){
digitalWrite(tbutton_pinout[_index.toInt()], LOW);
}else{
digitalWrite(tbutton_pinout[_index.toInt()], HIGH);
}
}
else if(_status == "off"){
root[name] = "0";
root.printTo(json);
webSocket->broadcastTXT(json);
if(tbutton_swap[_index.toInt()]){
digitalWrite(tbutton_pinout[_index.toInt()], HIGH);
}else{
digitalWrite(tbutton_pinout[_index.toInt()], LOW);
}
}
}
// Convert & Transfer Arduino elements to JSON elements
void EasyUIClass::handleWebpage(){
for(int i=0; i jsonBuffer1;
JsonObject& root1 = jsonBuffer1.createObject();
root1["mode"] = "create_label";
root1["l_title"] = String(label_title[i]);
root1["l_value"] = String(label_value[i]);
root1.printTo(json);
webSocket->broadcastTXT(json);
}
for(int i=0; i jsonBuffer2;
JsonObject& root2 = jsonBuffer2.createObject();
root2["mode"] = "create_tbutton";
root2["index"] = String(i);
root2["tb_title"] = tbuttontitle[i];
root2.printTo(json);
webSocket->broadcastTXT(json);
}
}
void EasyUIClass::begin(){
server.reset(new ESP8266WebServer(80));
webSocket.reset(new WebSocketsServer(81,"","easyui"));
SPIFFS.begin();
server->on("/", std::bind(&EasyUIClass::handleRoot, this));
server->on("/css/normalize.css", std::bind(&EasyUIClass::handleNCSS, this));
server->on("/css/skeleton.css", std::bind(&EasyUIClass::handleSCSS, this));
server->on("/js/jquery.js", std::bind(&EasyUIClass::handleJS, this));
server->on("/js/sockets.js", std::bind(&EasyUIClass::handleSockets, this));
server->onNotFound(std::bind(&EasyUIClass::handleNotFound, this));
server->begin();
webSocket->begin();
webSocket->onEvent(webSocketEvent);
}
void EasyUIClass::loop(){
webSocket->loop();
server->handleClient();
}
EasyUIClass EasyUI;