move to typescript, testmode, shiftregister revival

This commit is contained in:
2023-12-23 01:59:00 +01:00
parent fd823217aa
commit 1e40e2e3ba
25 changed files with 32695 additions and 353 deletions

View File

@@ -1,13 +1,8 @@
<html>
<meta>
<script src="ota.js"></script>
<script src="form.js"></script>
</meta>
<body>
<h2>firmeware OTA v3</h2>
<form id="upload_form" method="post">
<input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
<input type="file" name="file1" id="file1"><br>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<h3 id="answer"></h3>
@@ -17,41 +12,42 @@
<h2>config</h2>
<button id="submit" onclick="createForm()">Create</button>
<button id="dummy">Create</button>
<div id="configform">
<h3>Tank:</h3>
<div>
<input type="checkbox" id="tank_sensor_enabled" onchange="submitForm()">
<input type="checkbox" id="tank_sensor_enabled">
Enable Tank Sensor
</div>
<div>
<input type="number" min="2" max="500000" id="tank_full_ml" onchange="submitForm()">
<input type="number" min="2" max="500000" id="tank_full_ml">
Tank Size mL
</div>
<div>
<input type="number" min="1" max="500000" id="tank_warn_percent" onchange="submitForm()">
<input type="number" min="1" max="500000" id="tank_warn_percent">
Tank Warn below mL
</div>
<h3>Light:</h3>
<div>
Start
<input type="time" id="night_lamp_time_start" onchange="submitForm()">
<input type="time" id="night_lamp_time_start">
Stop
<input type="time" id="night_lamp_time_end" onchange="submitForm()">
<input type="time" id="night_lamp_time_end">
</div>
<div>
<input type="checkbox" id="night_lamp_only_when_dark" onchange="submitForm()">
<input type="checkbox" id="night_lamp_only_when_dark">
Light only when dark
</div>
<h3>Plants:</h3>
<div id="plants"></div>
</div>
<button id="submit" onclick="submitForm()">Submit</button>
<button id="submit">Submit</button>
<br>
<textarea id="json" cols=50 rows=10></textarea>
<script src="bundle.js"></script>
</body>
</html>

View File

@@ -1,109 +0,0 @@
var plantcount = 1;
function createForm(){
var current = {}
current.tank_sensor_enabled = true;
current.tank_full_ml = 400;
current.tank_warn_percent = 200;
current.night_lamp_time_start = "18:00";
current.night_lamp_time_end = "02:00";
current.night_lamp_only_when_dark = true;
current.plants = [
{
target_moisture: 40,
pump_time_s:60
}
]
current.plantcount = 1;
plantcount = current.plantcount;
for(i=0;i<plantcount;i++){
var plant = document.createElement("div");
plants.appendChild(plant);
var header = document.createElement("h4");
header.textContent = "Plant " + (i+1);
plant.appendChild(header);
{
var holder = document.createElement("div");
plant.appendChild(holder);
var inputf = document.createElement("input");
inputf.id = "plant_"+i+"_target_moisture";
inputf.onchange = function() {submitForm()};
inputf.type = "number";
inputf.min = 0;
inputf.max = 100;
holder.appendChild(inputf)
var text = document.createElement("span");
holder.appendChild(text)
text.innerHTML += "Target Moisture"
}
{
var holder = document.createElement("div");
plant.appendChild(holder);
var input = document.createElement("input");
input.id = "plant_"+i+"_pump_time_s";
input.onchange = function() {submitForm()};
input.type = "number";
input.min = 0;
input.max = 600;
holder.appendChild(input)
var text = document.createElement("span");
holder.appendChild(text)
text.innerHTML += "Pump Time (s)"
}
}
sync(current);
}
function sync(current){
document.getElementById("tank_full_ml").disabled = !current.tank_sensor_enabled;
document.getElementById("tank_warn_percent").disabled = !current.tank_sensor_enabled;
document.getElementById("tank_sensor_enabled").checked = current.tank_sensor_enabled;
document.getElementById("tank_full_ml").value = current.tank_full_ml;
document.getElementById("tank_warn_percent").value = current.tank_warn_percent;
document.getElementById("night_lamp_time_start").value = current.night_lamp_time_start;
document.getElementById("night_lamp_time_end").value = current.night_lamp_time_end;
document.getElementById("tank_warn_percent").value = current.tank_warn_percent;
for(i=0;i<plantcount;i++){
document.getElementById("plant_"+i+"_target_moisture").value = current.plants[i].target_moisture;
document.getElementById("plant_"+i+"_pump_time_s").value = current.plants[i].pump_time_s;
}
}
function submitForm() {
var current = {}
current.plantcount = plantcount;
current.tank_sensor_enabled = document.getElementById("tank_sensor_enabled").checked;
current.tank_full_ml = document.getElementById("tank_full_ml").value;
current.tank_warn_percent = document.getElementById("tank_warn_percent").value;
current.night_lamp_time_start = document.getElementById("night_lamp_time_start").value;
current.night_lamp_time_end = document.getElementById("night_lamp_time_end").value;
current.night_lamp_only_when_dark = document.getElementById("night_lamp_only_when_dark").checked;
current.plants = []
for(i=0;i<plantcount;i++){
console.log("Adding plant " + i)
current.plants[i] = {}
current.plants[i].target_moisture = document.getElementById("plant_"+i+"_target_moisture").value;
current.plants[i].pump_time_s = document.getElementById("plant_"+i+"_pump_time_s").value;
}
sync(current);
console.log(current);
var pretty = JSON.stringify(current, undefined, 4);
document.getElementById('json').value = pretty;
}

View File

@@ -1,13 +1,11 @@
<html>
<meta>
<script src="ota.js"></script>
<script src="wifi.js"></script>
</meta>
<body>
<input type="button" id="test" value="Test">
<div>
<h2>firmeware OTA v3</h2>
<form id="upload_form" method="post">
<input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
<input type="file" name="file1" id="file1"><br>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<h3 id="answer"></h3>
@@ -17,7 +15,7 @@
<div>
<h2>WIFI</h2>
<input type="button" id="scan" onclick="scanWifi()" value="Scan">
<input type="button" id="scan" value="Scan">
<br>
<label for="ssid">SSID:</label>
<input type="text" id="ssid" list="ssidlist">
@@ -26,9 +24,10 @@
</datalist>
<label for="ssid">Password:</label>
<input type="text" id="password" list="ssidlist">
<input type="button" id="save" onclick="saveWifi()" value="Save & Restart">
<input type="button" id="save" value="Save & Restart">
<div id="wifistatus"></div>
<br>
</div>
<script src="bundle.js"></script>
</body>
</html>

View File

@@ -1,40 +0,0 @@
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "/ota"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
//use file_upload_parser.php from above url
ajax.send(file);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "%";
_("answer").innerHTML = "in progress";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("answer").innerHTML = "finished";
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = event.target.responseText;
_("answer").innerHTML = "failed";
}
function abortHandler(event) {
_("status").innerHTML = event.target.responseText;
_("answer").innerHTML = "aborted";
}

View File

@@ -16,23 +16,18 @@ struct SSIDList<'a> {
ssids: Vec<&'a String<32>>
}
pub fn httpd_initial(board_access:&Arc<Mutex<PlantCtrlBoard<'static>>>) -> Box<EspHttpServer<'static>> {
pub fn httpd_initial(board_access:Arc<Mutex<PlantCtrlBoard<'static>>>) -> Box<EspHttpServer<'static>> {
let mut server = shared();
server.fn_handler("/",Method::Get, move |request| {
let mut response = request.into_ok_response()?;
response.write(include_bytes!("initial_config.html"))?;
return Ok(())
}).unwrap();
server
.fn_handler("/wifi.js",Method::Get, |request| {
let mut response = request.into_ok_response()?;
response.write(include_bytes!("wifi.js"))?;
return Ok(())
}).unwrap();
let board_access_for_scan = board_access.clone();
server.fn_handler("/wifiscan",Method::Post, move |request| {
let mut response = request.into_ok_response()?;
let mut board = board_access.lock().unwrap();
let mut board = board_access_for_scan.lock().unwrap();
match board.wifi_scan() {
Err(error) => {
response.write(format!("Error scanning wifi: {}", error).as_bytes())?;
@@ -50,11 +45,14 @@ pub fn httpd_initial(board_access:&Arc<Mutex<PlantCtrlBoard<'static>>>) -> Box<E
return Ok(())
}).unwrap();
let board_access_for_save = board_access.clone();
server.fn_handler("/wifisave",Method::Post, move |mut request| {
let mut buf = [0_u8;2048];
let read = request.read(&mut buf);
if read.is_err(){
let error_text = read.unwrap_err().to_string();
println!("Could not parse wificonfig {}", error_text);
request.into_status_response(500)?.write(error_text.as_bytes())?;
return Ok(());
}
@@ -62,16 +60,23 @@ pub fn httpd_initial(board_access:&Arc<Mutex<PlantCtrlBoard<'static>>>) -> Box<E
let wifi_config: Result<WifiConfig, serde_json::Error> = serde_json::from_slice(actual_data);
if wifi_config.is_err(){
let error_text = wifi_config.unwrap_err().to_string();
println!("Could not parse wificonfig {}", error_text);
request.into_status_response(500)?.write(error_text.as_bytes())?;
return Ok(());
}
let mut board = board_access.lock().unwrap();
board.set_wifi(&wifi_config.unwrap());
let mut board = board_access_for_save.lock().unwrap();
board.set_wifi(&wifi_config.unwrap())?;
let mut response = request.into_status_response(202)?;
response.write("saved".as_bytes());
response.write("saved".as_bytes())?;
return Ok(())
}).unwrap();
let board_access_for_test= board_access.clone();
server.fn_handler("/boardtest",Method::Post, move |request| {
let mut board = board_access_for_test.lock().unwrap();
board.test();
return Ok(())
}).unwrap();
return server
}
@@ -100,9 +105,9 @@ pub fn shared() -> Box<EspHttpServer<'static>> {
return Ok(())
}).unwrap();
server
.fn_handler("/ota.js",Method::Get, |request| {
.fn_handler("/bundle.js",Method::Get, |request| {
let mut response = request.into_ok_response()?;
response.write(include_bytes!("ota.js"))?;
response.write(include_bytes!("bundle.js"))?;
return Ok(())
}).unwrap();
server

View File

@@ -1,56 +0,0 @@
function saveWifi(){
document.getElementById("save").disabled = true;
var wificonfig = {}
wificonfig.ssid = document.getElementById("ssid").value
wificonfig.password = document.getElementById("password").value
var pretty = JSON.stringify(wificonfig, undefined, 4);
console.log("Sending config " + pretty)
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.onreadystatechange = () => {
_("wifistatus").innerText = ajax.responseText
};
ajax.onerror = (evt) => {
console.log(evt)
_("wifistatus").innerText = ajax.responseText
document.getElementById("save").disabled = false;
alert("Failed to save config see console")
}
ajax.open("POST", "/wifisave");
ajax.send();
}
function scanWifi(){
document.getElementById("scan").disabled = true;
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.responseType = 'json';
ajax.onreadystatechange = () => {
if (ajax.readyState === 4) {
callback(ajax.response);
}
};
ajax.onerror = (evt) => {
console.log(evt)
document.getElementById("scan").disabled = false;
alert("Failed to start see console")
}
ajax.open("POST", "/wifiscan");
ajax.send();
}
function callback(data){
document.getElementById("scan").disabled = false;
var ssidlist = document.getElementById("ssidlist")
ssidlist.innerHTML = ''
for (ssid of data.ssids) {
var wi = document.createElement("option");
wi.value = ssid;
ssidlist.appendChild(wi);
}
}