Maximilian Stiefel
4 years ago
commit
58f305c5b1
11 changed files with 374 additions and 0 deletions
@ -0,0 +1,11 @@ |
|||||
|
*.bin |
||||
|
*.o |
||||
|
*.elf |
||||
|
*.out |
||||
|
*.map |
||||
|
*.d |
||||
|
*.a |
||||
|
*.cproject |
||||
|
*.project |
||||
|
/out |
||||
|
*.swp |
@ -0,0 +1,9 @@ |
|||||
|
#####################################################################
|
||||
|
#### Please don't change this file. Use component.mk instead ####
|
||||
|
#####################################################################
|
||||
|
|
||||
|
ifndef SMING_HOME |
||||
|
$(error SMING_HOME is not set: please configure it as an environment variable) |
||||
|
endif |
||||
|
|
||||
|
include $(SMING_HOME)/project.mk |
@ -0,0 +1,7 @@ |
|||||
|
AJAX Http Server |
||||
|
================ |
||||
|
|
||||
|
Demonstration of a simple web server with page updates using `AJAX <https://www.w3schools.com/xml/ajax_intro.asp>`__. |
||||
|
|
||||
|
.. :image:: esp8266-ajax-server.png |
||||
|
:height:192px |
@ -0,0 +1,146 @@ |
|||||
|
#include <SmingCore.h> |
||||
|
#include <JsonObjectStream.h> |
||||
|
#include <HardwarePWM.h> |
||||
|
#include <vector> |
||||
|
|
||||
|
// If you want, you can define WiFi settings globally in Eclipse Environment Variables
|
||||
|
#ifndef WIFI_SSID |
||||
|
#define WIFI_SSID "UPCA491DCD" // Put you SSID and Password here
|
||||
|
#define WIFI_PWD "7rPn4mzpdaph" |
||||
|
#endif |
||||
|
|
||||
|
#define LED_R 15 |
||||
|
#define LED_G 13 |
||||
|
#define LED_B 12 |
||||
|
|
||||
|
std::vector<uint8_t> colorVec{LED_R, LED_G, LED_B}; |
||||
|
|
||||
|
HttpServer server; |
||||
|
FtpServer ftp; |
||||
|
|
||||
|
int inputs[] = {0, 2}; // Set input GPIO pins here
|
||||
|
Vector<String> namesInput; |
||||
|
const int countInputs = sizeof(inputs) / sizeof(inputs[0]); |
||||
|
|
||||
|
uint8_t pins[3] = {LED_R, LED_G, LED_B}; // List of pins that you want to connect to pwm
|
||||
|
HardwarePWM HW_pwm(pins, 3); |
||||
|
|
||||
|
void onIndex(HttpRequest& request, HttpResponse& response) |
||||
|
{ |
||||
|
TemplateFileStream* tmpl = new TemplateFileStream("index.html"); |
||||
|
auto& vars = tmpl->variables(); |
||||
|
//vars["counter"] = String(counter);
|
||||
|
response.sendNamedStream(tmpl); // this template object will be deleted automatically
|
||||
|
} |
||||
|
|
||||
|
void onFile(HttpRequest& request, HttpResponse& response) |
||||
|
{ |
||||
|
String file = request.uri.getRelativePath(); |
||||
|
|
||||
|
if(file[0] == '.') |
||||
|
response.code = HTTP_STATUS_FORBIDDEN; |
||||
|
else { |
||||
|
response.setCache(86400, true); // It's important to use cache for better performance.
|
||||
|
response.sendFile(file); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
void onAjaxInput(HttpRequest& request, HttpResponse& response) |
||||
|
{ |
||||
|
JsonObjectStream* stream = new JsonObjectStream(); |
||||
|
JsonObject json = stream->getRoot(); |
||||
|
json["status"] = (bool)true; |
||||
|
|
||||
|
String stringKey = "StringKey"; |
||||
|
String stringValue = "StringValue"; |
||||
|
|
||||
|
json[stringKey] = stringValue; |
||||
|
|
||||
|
for(int i = 0; i < 11; i++) { |
||||
|
char buff[3]; |
||||
|
itoa(i, buff, 10); |
||||
|
String desiredString = "sensor_"; |
||||
|
desiredString += buff; |
||||
|
json[desiredString] = desiredString; |
||||
|
} |
||||
|
|
||||
|
JsonObject gpio = json.createNestedObject("gpio"); |
||||
|
for(int i = 0; i < countInputs; i++) |
||||
|
gpio[namesInput[i].c_str()] = digitalRead(inputs[i]); |
||||
|
|
||||
|
response.sendDataStream(stream, MIME_JSON); |
||||
|
} |
||||
|
|
||||
|
void onAjaxFrequency(HttpRequest& request, HttpResponse& response) |
||||
|
{ |
||||
|
int freq = request.getQueryParameter("value").toInt(); |
||||
|
System.setCpuFrequency((CpuFrequency)freq); |
||||
|
|
||||
|
JsonObjectStream* stream = new JsonObjectStream(); |
||||
|
JsonObject json = stream->getRoot(); |
||||
|
json["status"] = (bool)true; |
||||
|
json["value"] = (int)System.getCpuFrequency(); |
||||
|
|
||||
|
response.sendDataStream(stream, MIME_JSON); |
||||
|
} |
||||
|
|
||||
|
void startWebServer() |
||||
|
{ |
||||
|
server.listen(80); |
||||
|
server.paths.set("/", onIndex); |
||||
|
server.paths.set("/ajax/input", onAjaxInput); |
||||
|
server.paths.set("/ajax/frequency", onAjaxFrequency); |
||||
|
server.paths.setDefault(onFile); |
||||
|
|
||||
|
Serial.println("\r\n=== WEB SERVER STARTED ==="); |
||||
|
Serial.println(WifiStation.getIP()); |
||||
|
Serial.println("==============================\r\n"); |
||||
|
} |
||||
|
|
||||
|
void startFTP() |
||||
|
{ |
||||
|
if(!fileExist("index.html")) |
||||
|
fileSetContent("index.html", |
||||
|
"<h3>Please connect to FTP and upload files from folder 'web/build' (details in code)</h3>"); |
||||
|
|
||||
|
// Start FTP server
|
||||
|
ftp.listen(21); |
||||
|
ftp.addUser("me", "123"); // FTP account
|
||||
|
} |
||||
|
|
||||
|
void setColor(uint8_t color, float dutyCycle) |
||||
|
{ |
||||
|
auto maxDuty = static_cast<float>(HW_pwm.getMaxDuty()); |
||||
|
auto dc = dutyCycle*(maxDuty/100); |
||||
|
HW_pwm.analogWrite(color, static_cast<int>(round(dc))); |
||||
|
} |
||||
|
|
||||
|
void gotIP(IpAddress ip, IpAddress netmask, IpAddress gateway) |
||||
|
{ |
||||
|
startFTP(); |
||||
|
startWebServer(); |
||||
|
for (const uint8_t& c : colorVec) { |
||||
|
setColor(LED_R, 0); |
||||
|
} |
||||
|
setColor(LED_R, 50); |
||||
|
} |
||||
|
|
||||
|
void init() |
||||
|
{ |
||||
|
spiffs_mount(); // Mount file system, in order to work with files
|
||||
|
|
||||
|
Serial.begin(SERIAL_BAUD_RATE); // 115200 by default
|
||||
|
Serial.systemDebugOutput(true); // Enable debug output to serial
|
||||
|
|
||||
|
WifiStation.enable(true); |
||||
|
WifiStation.config(WIFI_SSID, WIFI_PWD); |
||||
|
WifiAccessPoint.enable(false); |
||||
|
|
||||
|
for(int i = 0; i < countInputs; i++) { |
||||
|
namesInput.add(String(inputs[i])); |
||||
|
pinMode(inputs[i], INPUT); |
||||
|
} |
||||
|
|
||||
|
// Run our method when station was connected to AP
|
||||
|
WifiEvents.onStationGotIP(gotIP); |
||||
|
} |
@ -0,0 +1,3 @@ |
|||||
|
SPI_SIZE = 4MB |
||||
|
SPIFF_FILES = web/build |
||||
|
ARDUINO_LIBRARIES := ArduinoJson6 |
Binary file not shown.
@ -0,0 +1,96 @@ |
|||||
|
|
||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
<meta name="description" content=""> |
||||
|
<meta name="author" content=""> |
||||
|
<link rel="icon" href="../../favicon.ico"> |
||||
|
|
||||
|
<title>Sming Framework with Bootstrap best friends</title> |
||||
|
|
||||
|
<!-- Bootstrap core CSS --> |
||||
|
<link href="bootstrap.css" rel="stylesheet"> |
||||
|
<script src="jquery.js"></script> |
||||
|
|
||||
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
||||
|
<!--[if lt IE 9]> |
||||
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
||||
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
||||
|
<![endif]--> |
||||
|
</head> |
||||
|
|
||||
|
<script> |
||||
|
$( document ).ready(function() { |
||||
|
|
||||
|
(function worker() { |
||||
|
$.getJSON('ajax/input', function(data) { |
||||
|
$.each( data.gpio, function( key, val ) { |
||||
|
var target = $('#gpio' + key); |
||||
|
target.removeClass("label-default"); |
||||
|
if (val) |
||||
|
target.removeClass("label-danger").addClass("label-success"); |
||||
|
else |
||||
|
target.removeClass("label-success").addClass("label-danger"); |
||||
|
}); |
||||
|
setTimeout(worker, 400); |
||||
|
}); |
||||
|
})(); |
||||
|
|
||||
|
$(".switch-freq").click(function() { |
||||
|
var freq = $(this).attr('data-value'); |
||||
|
$.getJSON('ajax/frequency', {value: freq}, function(data) { |
||||
|
$("#display-freq").text(data.value); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
</script> |
||||
|
<body> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div class="header"> |
||||
|
<nav> |
||||
|
<ul class="nav nav-pills pull-right"> |
||||
|
<li role="presentation" class="active"><a href="#">Home</a></li> |
||||
|
<li role="presentation"><a href="#">About</a></li> |
||||
|
<li role="presentation"><a href="#">Contact</a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
<h3 class="text-muted">Sming Framework</h3> |
||||
|
</div> |
||||
|
|
||||
|
<div class="jumbotron"> |
||||
|
<h1>Sming AJAX Example</h1> |
||||
|
<p class="lead">Sming: Let's do smart things! |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row marketing"> |
||||
|
<div class="col-lg-6"> |
||||
|
<h3>Reading Input value</h3> |
||||
|
<p><span id="gpio0" class="label label-default">GPIO0</span> |
||||
|
<p><span id="gpio2" class="label label-default">GPIO2</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<h3>Send AJAX Command</h3> |
||||
|
<p>Switch CPU frequency</p> |
||||
|
<button type="button" class="switch-freq btn btn-info" data-value="80">80 MHz</button> |
||||
|
<button type="button" class="switch-freq btn btn-primary" data-value="160">160 MHz</button> |
||||
|
<p> |
||||
|
<p>Current frequency:</p> |
||||
|
<div id="display-freq" class="well well-lg">N/A</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<footer class="footer"> |
||||
|
<p>© Company 2014</p> |
||||
|
</footer> |
||||
|
|
||||
|
</div> <!-- /container --> |
||||
|
</body> |
||||
|
</html> |
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,96 @@ |
|||||
|
|
||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
<meta name="description" content=""> |
||||
|
<meta name="author" content=""> |
||||
|
<link rel="icon" href="../../favicon.ico"> |
||||
|
|
||||
|
<title>Sming Framework with Bootstrap best friends</title> |
||||
|
|
||||
|
<!-- Bootstrap core CSS --> |
||||
|
<link href="bootstrap.css" rel="stylesheet"> |
||||
|
<script src="jquery.js"></script> |
||||
|
|
||||
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
||||
|
<!--[if lt IE 9]> |
||||
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
||||
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
||||
|
<![endif]--> |
||||
|
</head> |
||||
|
|
||||
|
<script> |
||||
|
$( document ).ready(function() { |
||||
|
|
||||
|
(function worker() { |
||||
|
$.getJSON('ajax/input', function(data) { |
||||
|
$.each( data.gpio, function( key, val ) { |
||||
|
var target = $('#gpio' + key); |
||||
|
target.removeClass("label-default"); |
||||
|
if (val) |
||||
|
target.removeClass("label-danger").addClass("label-success"); |
||||
|
else |
||||
|
target.removeClass("label-success").addClass("label-danger"); |
||||
|
}); |
||||
|
setTimeout(worker, 400); |
||||
|
}); |
||||
|
})(); |
||||
|
|
||||
|
$(".switch-freq").click(function() { |
||||
|
var freq = $(this).attr('data-value'); |
||||
|
$.getJSON('ajax/frequency', {value: freq}, function(data) { |
||||
|
$("#display-freq").text(data.value); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
</script> |
||||
|
<body> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div class="header"> |
||||
|
<nav> |
||||
|
<ul class="nav nav-pills pull-right"> |
||||
|
<li role="presentation" class="active"><a href="#">Home</a></li> |
||||
|
<li role="presentation"><a href="#">About</a></li> |
||||
|
<li role="presentation"><a href="#">Contact</a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
<h3 class="text-muted">Sming Framework</h3> |
||||
|
</div> |
||||
|
|
||||
|
<div class="jumbotron"> |
||||
|
<h1>Sming AJAX Example</h1> |
||||
|
<p class="lead">Sming: Let's do smart things! |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row marketing"> |
||||
|
<div class="col-lg-6"> |
||||
|
<h3>Reading Input value</h3> |
||||
|
<p><span id="gpio0" class="label label-default">GPIO0</span> |
||||
|
<p><span id="gpio2" class="label label-default">GPIO2</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-lg-6"> |
||||
|
<h3>Send AJAX Command</h3> |
||||
|
<p>Switch CPU frequency</p> |
||||
|
<button type="button" class="switch-freq btn btn-info" data-value="80">80 MHz</button> |
||||
|
<button type="button" class="switch-freq btn btn-primary" data-value="160">160 MHz</button> |
||||
|
<p> |
||||
|
<p>Current frequency:</p> |
||||
|
<div id="display-freq" class="well well-lg">N/A</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<footer class="footer"> |
||||
|
<p>© Company 2014</p> |
||||
|
</footer> |
||||
|
|
||||
|
</div> <!-- /container --> |
||||
|
</body> |
||||
|
</html> |
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue