ise-senior-iot/iot-firmware
2
1
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

make webui looks better

Browse source
This commit is contained in:
Siwat Sirichai 2023-09-30 21:09:45 +07:00
parent 3144214cfe
commit dc20153722
11 changed files with 255 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -1,6 +1,7 @@
{
"C_Cpp.errorSquiggles": "enabled",
"files.associations": {
"*.cps": "javascript",
"string": "cpp",
"optional": "cpp",
"istream": "cpp",
@ -11,6 +12,7 @@
"tuple": "cpp",
"type_traits": "cpp",
"utility": "cpp",
"*.d": "cpp"
"*.d": "cpp",
"*.html": "cpp"
}
}

68
src/espmega_iot_core.cpp
View file

@ -2,6 +2,7 @@
// OS Configuration
// #define FASTBOOT
#define ESPMEGA_REV "ESPMega PRO R3.3b"
// Network Connectivity
char HOSTNAME[15];
@ -149,7 +150,6 @@ void setup()
Serial.println("Jumping to User Code.");
user_init();
lcd_send_command("page dashboard");
}
void loop()
@ -242,30 +242,50 @@ void eeprom_retrieve_init()
strcat(INPUTS_TOPIC, "/input/00");
}
void ota_begin() {
otaserver.on("/", HTTP_GET, []() {
void ota_begin()
{
otaserver.on("/", HTTP_GET, []()
{
otaserver.sendHeader("Connection", "close");
otaserver.send(200, "text/html", ota_upload_page);
});
otaserver.on("/update", HTTP_POST, []() {
String otabuffer = ota_part1+HOSTNAME+ota_part2+IP.toString()+ota_part3+ESPMEGA_REV+ota_part4+MQTT_SERVER.toString()+ota_part5+String(MQTT_BASE_TOPIC)+ota_part6;
if(standalone)
otabuffer+=String("No");
else
otabuffer+=String("Yes");
otabuffer+=ota_part7;
otaserver.send(200, "text/html", otabuffer); });
otaserver.on(
"/update", HTTP_POST, []()
{
otaserver.sendHeader("Connection", "close");
otaserver.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
ESP.restart();
}, []() {
ESP.restart(); },
[]()
{
HTTPUpload &upload = otaserver.upload();
if (upload.status == UPLOAD_FILE_START) {
if (upload.status == UPLOAD_FILE_START)
{
Serial.printf("Update: %s\n", upload.filename.c_str());
if (!Update.begin(UPDATE_SIZE_UNKNOWN)) {
if (!Update.begin(UPDATE_SIZE_UNKNOWN))
{
Update.printError(Serial);
}
} else if (upload.status == UPLOAD_FILE_WRITE) {
if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {
}
else if (upload.status == UPLOAD_FILE_WRITE)
{
if (Update.write(upload.buf, upload.currentSize) != upload.currentSize)
{
Update.printError(Serial);
}
} else if (upload.status == UPLOAD_FILE_END) {
if (Update.end(true)) {
}
else if (upload.status == UPLOAD_FILE_END)
{
if (Update.end(true))
{
Serial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
} else {
}
else
{
Update.printError(Serial);
}
}
@ -993,24 +1013,30 @@ void eeprom_mqtt_port_retrieve()
memcpy(&MQTT_PORT, port_arr, 2);
}
boolean pwm_get_state(int id) {
boolean pwm_get_state(int id)
{
return pwm_states[id];
}
uint16_t pwm_get_value(int id) {
uint16_t pwm_get_value(int id)
{
return pwm_values[id];
}
boolean input_get_state(int id) {
boolean input_get_state(int id)
{
return virtual_interupt_state[id];
}
uint8_t ac_get_temperature() {
uint8_t ac_get_temperature()
{
return ac_temperature;
}
uint8_t ac_get_mode() {
uint8_t ac_get_mode()
{
return ac_mode;
}
uint8_t ac_get_fan_speed() {
uint8_t ac_get_fan_speed()
{
return ac_fan_speed;
}

75
src/espmega_iot_ota.cpp
View file

@ -1,56 +1,23 @@
#include "espmega_iot_ota.hpp"
/* Style */
String ota_style =
"<style>#file-input,input{width:100%;height:44px;border-radius:4px;margin:10px auto;font-size:15px}"
"input{background:#f1f1f1;border:0;padding:0 15px}body{background:#3498db;font-family:sans-serif;font-size:14px;color:#777}"
"#file-input{padding:0;border:1px solid #ddd;line-height:44px;text-align:left;display:block;cursor:pointer}"
"#bar,#prgbar{background-color:#f1f1f1;border-radius:10px}#bar{background-color:#3498db;width:0%;height:10px}"
"form{background:#fff;max-width:258px;margin:75px auto;padding:30px;border-radius:5px;text-align:center}"
".btn{background:#3498db;color:#fff;cursor:pointer}</style>";
/* Server Index Page */
String ota_upload_page =
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
"<h1>ESPMega PRO</h1>"
"<h3>Programming Tool</h3>"
"<input type='file' name='update' id='file' onchange='sub(this)' style=display:none>"
"<label id='file-input' for='file'> Choose file...</label>"
"<input type='submit' class=btn value='Program'>"
"<br><br>"
"<div id='prg'></div>"
"<br><div id='prgbar'><div id='bar'></div></div><br></form>"
"<script>"
"function sub(obj){"
"var fileName = obj.value.split('\\\\');"
"document.getElementById('file-input').innerHTML = ' '+ fileName[fileName.length-1];"
"};"
"$('form').submit(function(e){"
"e.preventDefault();"
"var form = $('#upload_form')[0];"
"var data = new FormData(form);"
"$.ajax({"
"url: '/update',"
"type: 'POST',"
"data: data,"
"contentType: false,"
"processData:false,"
"xhr: function() {"
"var xhr = new window.XMLHttpRequest();"
"xhr.upload.addEventListener('progress', function(evt) {"
"if (evt.lengthComputable) {"
"var per = evt.loaded / evt.total;"
"$('#prg').html('progress: ' + Math.round(per*100) + '%');"
"$('#bar').css('width',Math.round(per*100) + '%');"
"}"
"}, false);"
"return xhr;"
"},"
"success:function(d, s) {"
"console.log('success!') "
"},"
"error: function (a, b, c) {"
"}"
"});"
"});"
"</script>" + ota_style;
const String ota_part1 = {
#include "ota_html/ota-part1.html"
};
const String ota_part2 = {
#include "ota_html/ota-part2.html"
};
const String ota_part3 = {
#include "ota_html/ota-part3.html"
};
const String ota_part4 = {
#include "ota_html/ota-part4.html"
};
const String ota_part5 = {
#include "ota_html/ota-part5.html"
};
const String ota_part6 = {
#include "ota_html/ota-part6.html"
};
const String ota_part7 = {
#include "ota_html/ota-part7.html"
};

9
src/espmega_iot_ota.hpp
View file

@ -1,4 +1,9 @@
#pragma once
#include <ESPMegaPRO.h>
extern String ota_upload_page;
extern String ota_style;
extern const String ota_part1;
extern const String ota_part2;
extern const String ota_part3;
extern const String ota_part4;
extern const String ota_part5;
extern const String ota_part6;
extern const String ota_part7;

8
src/ota_html/ota-part1.html Normal file
View file

@ -0,0 +1,8 @@
R"=====(<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
<h1>ESPMega PRO</h1>
<h3>Programming Tool</h3>
<p style="text-align: left">
Hostname
<span style="float: right">)====="

5
src/ota_html/ota-part2.html Normal file
View file

@ -0,0 +1,5 @@
R"=====(</span>
</p>
<p style="text-align: left">
IP Address
<span style="float: right">)====="

5
src/ota_html/ota-part3.html Normal file
View file

@ -0,0 +1,5 @@
R"=====(</span>
</p>
<p style="text-align: left">
Device
<span style="float: right">)====="

5
src/ota_html/ota-part4.html Normal file
View file

@ -0,0 +1,5 @@
R"=====(</span>
</p>
<p style="text-align: left">
API Server
<span style="float: right">)====="

5
src/ota_html/ota-part5.html Normal file
View file

@ -0,0 +1,5 @@
R"=====(</span>
</p>
<p style="text-align: left">
API Endpoint
<span style="float: right">)====="

5
src/ota_html/ota-part6.html Normal file
View file

@ -0,0 +1,5 @@
R"=====(</span>
</p>
<p style="text-align: left">
Centrally Managed
<span style="float: right">)====="

120
src/ota_html/ota-part7.html Normal file
View file

@ -0,0 +1,120 @@
R"=====(</span>
</p>
<input
type="file"
name="update"
id="file"
onchange="sub(this)"
style="display: none"
/>
<label id="file-input" for="file">Choose file...</label>
<input type="submit" class="btn" value="Program" /><br /><br />
<div id="prg"></div>
<br />
<div id="prgbar">
<div id="bar"></div>
</div>
<br />
<b>SIWAT SYSTEM 2023</b>
</form>
<script>
function sub(obj) {
var fileName = obj.value.split("\\");
document.getElementById("file-input").innerHTML =
" " + fileName[fileName.length - 1];
}
$("form").submit(function (e) {
e.preventDefault();
var form = $("#upload_form")[0];
var data = new FormData(form);
$.ajax({
url: "/update",
type: "POST",
data: data,
contentType: false,
processData: false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener(
"progress",
function (evt) {
if (evt.lengthComputable) {
var per = evt.loaded / evt.total;
$("#prg").html("progress: " + Math.round(per * 100) + "%");
$("#bar").css("width", Math.round(per * 100) + "%");
}
},
false
);
return xhr;
},
success: function (d, s) {
console.log("success!");
},
error: function (a, b, c) {},
});
});
</script>
<style>
#file-input,
input {
width: 100%;
height: 44px;
border-radius: 4px;
margin: 10px auto;
font-size: 15px;
}
input {
background: #f1f1f1;
border: 0;
padding: 0 15px;
}
body {
background-image: url("https://siwatinc.com/wp-content/uploads/2023/07/lockscreen.jpg");
background-size: cover;
font-family: sans-serif;
font-size: 14px;
color: #777;
}
#file-input {
background-color: #CCCCCC;
color: #5E5E5E;
padding: 0;
border: 1px solid #ddd;
line-height: 44px;
text-align: center;
display: block;
cursor: pointer;
}
#bar,
#prgbar {
background-color: #D9D9D9;
border-radius: 10px;
}
#bar {
background-color: #29CD1F;
width: 0%;
height: 10px;
}
form {
background: rgba(255,255,255,0.95);
max-width: 258px;
margin: 75px auto;
padding: 30px;
border-radius: 15px;
text-align: center;
}
.btn {
background: #CA3D3D;
color: #fff;
cursor: pointer;
}
</style>)====="