css fixes
This commit is contained in:
parent
1927449c1d
commit
0f77ac163a
@ -1,11 +1,11 @@
|
||||
//offer ota and config mode
|
||||
|
||||
use std::{
|
||||
io::{BufRead, BufReader, Read, Write},
|
||||
str::from_utf8,
|
||||
sync::{atomic::AtomicBool, Arc},
|
||||
};
|
||||
|
||||
use esp_idf_svc::io::BufRead;
|
||||
use crate::{
|
||||
espota::OtaUpdate, get_version, map_range_moisture, plant_hal::FileInfo, BOARD_ACCESS,
|
||||
};
|
||||
@ -242,7 +242,7 @@ fn flash_bq(filename: &str, dryrun: bool) -> anyhow::Result<()> {
|
||||
|
||||
let file_handle = board.get_file_handle(filename, false)?;
|
||||
|
||||
let mut reader = BufReader::with_capacity(512, file_handle).lines();
|
||||
let mut reader = std::io::BufRead::lines(std::io::BufReader::with_capacity(512, file_handle));
|
||||
let mut line = 0;
|
||||
loop {
|
||||
board.general_fault(toggle);
|
||||
@ -373,7 +373,7 @@ pub fn httpd(_reboot_now: Arc<AtomicBool>) -> Box<EspHttpServer<'static>> {
|
||||
let mut buffer: [u8; BUFFER_SIZE] = [0; BUFFER_SIZE];
|
||||
let mut total_read: usize = 0;
|
||||
loop {
|
||||
let read = file_handle.read(&mut buffer)?;
|
||||
let read = std::io::Read::read(&mut file_handle, &mut buffer)?;
|
||||
total_read += read;
|
||||
println!(
|
||||
"sending {read} bytes of {total_read} for file {}",
|
||||
@ -416,7 +416,7 @@ pub fn httpd(_reboot_now: Arc<AtomicBool>) -> Box<EspHttpServer<'static>> {
|
||||
total_read += read;
|
||||
println!("sending {read} bytes of {total_read} for upload {filename}");
|
||||
let to_write = &buffer[0..read];
|
||||
file_handle.write(to_write)?;
|
||||
std::io::Write::write(&mut file_handle, to_write)?;
|
||||
println!("wrote {read} bytes of {total_read} for upload {filename}");
|
||||
if read == 0 {
|
||||
break;
|
||||
@ -508,9 +508,12 @@ pub fn httpd(_reboot_now: Arc<AtomicBool>) -> Box<EspHttpServer<'static>> {
|
||||
.unwrap();
|
||||
server
|
||||
.fn_handler("/bootstrap-grid.css", Method::Get, |request| {
|
||||
request
|
||||
.into_ok_response()?
|
||||
.write(include_bytes!("bootstrap-grid.css"))?;
|
||||
let headers = [
|
||||
("Access-Control-Allow-Origin", "*"),
|
||||
("Access-Control-Allow-Headers", "*"),
|
||||
("Content-Type", "text/css")
|
||||
];
|
||||
request.into_response(200, None, &headers)?.write(include_bytes!("bootstrap-grid.css"))?;
|
||||
anyhow::Ok(())
|
||||
})
|
||||
.unwrap();
|
||||
|
@ -1,46 +1,42 @@
|
||||
<div class="container col-sm-6 col-md-5" style="border-style: solid; border-width: 1px; padding: 8px; margin: 8px;" >
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
</div>
|
||||
<div class="col-7" style="text-align: center; font-weight: bold;">
|
||||
Time:
|
||||
<div class="row">
|
||||
<div class="col-12" style="text-align: center; font-weight: bold;">
|
||||
Battery:
|
||||
</div>
|
||||
<div style="display: block; right: 8px; position: absolute;">
|
||||
<input id="battery_auto_refresh" type="checkbox">⟳
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<span class="col-7">V:</span>
|
||||
<div class="col-5" id="battery_voltage_milli_volt" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col-7">mA:</span>
|
||||
<div class="col-5" id="battery_current_milli_ampere" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col-7">Cycles:</span>
|
||||
<div class="col-5" id="battery_cycle_count" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col-7">design mA:</span>
|
||||
<div class="col-5" id="battery_design_milli_ampere" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col-7">remaining mA:</span>
|
||||
<div class="col-5" id="battery_remaining_milli_ampere" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col-7">charge %:</span>
|
||||
<div class="col-5" id="battery_state_of_charge" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col-7">health %:</span>
|
||||
<div class="col-5" id="battery_state_of_health" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col-7">Temp °C:</span>
|
||||
<div class="col-5" id="battery_temperature" style="text-wrap: nowrap"></div>
|
||||
</div>
|
||||
</div>
|
@ -1,6 +1,6 @@
|
||||
<link rel="stylesheet" href="bootstrap-grid.css">
|
||||
<style>
|
||||
.progressPane{
|
||||
<link rel="stylesheet" href="bootstrap-grid.css">
|
||||
<style>
|
||||
.progressPane {
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@ -12,7 +12,8 @@
|
||||
background-color: lightgrey;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.progressPaneCenter{
|
||||
|
||||
.progressPaneCenter {
|
||||
display: inline-block;
|
||||
margin-top: 48%;
|
||||
position: absolute;
|
||||
@ -21,12 +22,14 @@
|
||||
margin-left: 25%;
|
||||
margin-right: 25%;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 1.5em;
|
||||
width: 100%;
|
||||
background-color: #c9c9c9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress:after {
|
||||
content: attr(data-label);
|
||||
font-size: 0.8em;
|
||||
@ -36,6 +39,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.progress .value {
|
||||
background-color: #7cc4ff;
|
||||
display: inline-block;
|
||||
@ -55,59 +59,58 @@
|
||||
0% {
|
||||
transform: translateX(0%) scaleX(0.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(50%) scaleX(0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%) scaleX(0.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container-xxl">
|
||||
<input type="button" id="test" value="Test">
|
||||
|
||||
<div id="firmwareview">
|
||||
|
||||
<div class="container-xl">
|
||||
<div class="row">
|
||||
<div id="firmwareview" class="container col-12 col-lg-4"
|
||||
style="border-width: 1px; border-style: solid; padding: 8px;">
|
||||
</div>
|
||||
<div id="timeview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 8px;">
|
||||
</div>
|
||||
<div id="batteryview" class="container col-12 col-lg-4"
|
||||
style="border-style: solid; border-width: 1px; padding: 8px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="timeview">
|
||||
<div class="row">
|
||||
<div id="network_view" class="container col-12 col-sm-6 col-lg-4"
|
||||
style="border-style: solid; border-width: 1px; padding: 8px;">
|
||||
</div>
|
||||
<div id="lightview" class="container col-12 col-sm-6 col-lg-4"
|
||||
style="border-style: solid; border-width: 1px; padding: 16px;">
|
||||
</div>
|
||||
<div id="tankview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 16px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="network_view">
|
||||
</div>
|
||||
|
||||
<div id="tankview"></div>
|
||||
<div id="batteryview"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>config</h2>
|
||||
|
||||
<div id="configform">
|
||||
|
||||
|
||||
<h3>Light:</h3>
|
||||
<input type="checkbox" id="night_lamp_enabled" checked="false"> Enable Nightlight
|
||||
<div>
|
||||
Start
|
||||
<select type="time" id="night_lamp_time_start">
|
||||
</select>
|
||||
Stop
|
||||
<select type="time" id="night_lamp_time_end">
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="night_lamp_only_when_dark">
|
||||
Light only when dark
|
||||
</div>
|
||||
|
||||
<h3>Plants:</h3>
|
||||
<button id="measure_moisture">Measure Moisture</button>
|
||||
<div id="plants" class="row"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<button id="submit">Submit</button>
|
||||
<div id="submit_status"></div>
|
||||
<br>
|
||||
|
@ -8,7 +8,7 @@ document.body.innerHTML = require('./main.html') as string;
|
||||
import { TimeView } from "./timeview";
|
||||
import { PlantView, PlantViews } from "./plant";
|
||||
import { NetworkConfigView } from "./network";
|
||||
import { NightLampView } from "./nightmode";
|
||||
import { NightLampView } from "./nightlightview";
|
||||
import { TankConfigView } from "./tankview";
|
||||
import { SubmitView } from "./submitView";
|
||||
import { ProgressView } from "./progress";
|
||||
@ -256,6 +256,6 @@ const controller = new Controller();
|
||||
controller.updateRTCData();
|
||||
controller.updateBatteryData();
|
||||
controller.downloadConfig();
|
||||
n controller.measure_moisture();
|
||||
//controller.measure_moisture();
|
||||
controller.version();
|
||||
|
||||
|
14
rust/src_webpack/src/nightlightview.html
Normal file
14
rust/src_webpack/src/nightlightview.html
Normal file
@ -0,0 +1,14 @@
|
||||
<h3>Light:</h3>
|
||||
<input type="checkbox" id="night_lamp_enabled" checked="false"> Enable Nightlight
|
||||
<div>
|
||||
Start
|
||||
<select type="time" id="night_lamp_time_start">
|
||||
</select>
|
||||
Stop
|
||||
<select type="time" id="night_lamp_time_end">
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="night_lamp_only_when_dark">
|
||||
Light only when dark
|
||||
</div>
|
@ -5,6 +5,9 @@ export class NightLampView {
|
||||
private readonly night_lamp_time_start: HTMLSelectElement;
|
||||
private readonly night_lamp_time_end: HTMLSelectElement;
|
||||
constructor(controller:Controller){
|
||||
(document.getElementById("lightview") as HTMLElement).innerHTML = require('./nightlightview.html') as string;
|
||||
|
||||
|
||||
this.night_lamp_only_when_dark = document.getElementById("night_lamp_only_when_dark") as HTMLInputElement;
|
||||
this.night_lamp_only_when_dark.onchange = controller.configChanged
|
||||
this.night_lamp_time_start = document.getElementById("night_lamp_time_start") as HTMLSelectElement;
|
@ -1,22 +1,25 @@
|
||||
<div class="container col-12 col-sm-7 col-md-7" style="border-width: 1px; border-style: solid; padding: 8px; margin: 8px;">
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-12" style="text-align: center; font-weight: bold;">
|
||||
Current Firmware
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<span>Buildtime:</span>
|
||||
<span id="firmware_buildtime" style="text-wrap: nowrap"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<span>Buildhash:</span>
|
||||
<span id="firmware_githash" style="text-wrap: nowrap"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<form class="col-12" id="upload_form" method="post">
|
||||
<input type="file" name="file1" id="firmware_file"><br>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input style="margin-left: 16px; margin-top: 8px;" class="col-6" type="button" id="test" value="Self-Test">
|
||||
</div>
|
@ -1,21 +1,22 @@
|
||||
<div class="container" style="border-style: solid; border-width: 1px; margin: 8px; padding: 8px;">
|
||||
<span class="row col-12" style="font-weight: bold; display: block; text-align: center;" id="plant_${plantId}_header">Plant ${plantId}</span>
|
||||
<div class="container" style="border-style: solid; border-width: 1px; padding: 8px;">
|
||||
<span class="row col-12" style="font-weight: bold; display: block; text-align: center;"
|
||||
id="plant_${plantId}_header">Plant ${plantId}</span>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-1"></div>
|
||||
<button class="col-10" id="plant_${plantId}_test">Test</button>
|
||||
<div class="col-1"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">Live:</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7">Sensor A:</div>
|
||||
<span class="col-4" id="plant_${plantId}_moisture_a">loading</span>
|
||||
<div class="col-7">Sensor B:</div>
|
||||
<span class="col-4" id="plant_${plantId}_moisture_b">loading</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
Mode:
|
||||
</div>
|
||||
@ -25,7 +26,7 @@
|
||||
<option value="TimerOnly">Timer</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7">Target Moisture:</div>
|
||||
<input class="col-4" id="plant_${plantId}_target_moisture" type="number" min="0" max="100" placeholder="0">
|
||||
@ -42,18 +43,19 @@
|
||||
<div class="row">
|
||||
<div class="col-7">"Pump Hour Start":</div>
|
||||
<select class="col-4" id="plant_${plantId}_pump_hour_start">10</select>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7">"Pump Hour End":</div>
|
||||
<select class="col-4" id="plant_${plantId}_pump_hour_end">19</select>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7">Sensor B installed:</div>
|
||||
<input class="col-4" id="plant_${plantId}_sensor_b" type="checkbox">
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7">Max Consecutive Pump Count:</div>
|
||||
<input class="col-4" id="plant_${plantId}_max_consecutive_pump_count" type="number" min="1", max="50", placeholder="10">
|
||||
</div>
|
||||
<input class="col-4" id="plant_${plantId}_max_consecutive_pump_count" type="number" min="1" , max="50" ,
|
||||
placeholder="10">
|
||||
</div>
|
||||
|
||||
</div>
|
@ -66,7 +66,10 @@ export class PlantView {
|
||||
const template = require('./plant.html') as string;
|
||||
const plantRaw = template.replaceAll("${plantId}", String(plantId));
|
||||
this.plantDiv.innerHTML = plantRaw
|
||||
this.plantDiv.classList.add("col-auto" )
|
||||
|
||||
this.plantDiv.classList.add("col-12" )
|
||||
this.plantDiv.classList.add("col-sm-6" )
|
||||
this.plantDiv.classList.add("col-md-auto" )
|
||||
parent.appendChild(this.plantDiv)
|
||||
|
||||
this.header = document.getElementById("plant_"+plantId+"_header")!
|
||||
|
@ -1,27 +1,29 @@
|
||||
<h3>Tank:</h3>
|
||||
<div>
|
||||
<input type="checkbox" id="tank_sensor_enabled">
|
||||
Enable Tank Sensor
|
||||
<div class="row">
|
||||
<div class="col-12" style="font-weight: bold; text-align: center;">Tank:</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="tank_allow_pumping_if_sensor_error">
|
||||
Allow Pumping if Sensor Error
|
||||
<div class="row">
|
||||
<input class="col-4" type="checkbox" id="tank_sensor_enabled">
|
||||
<div class="col-7">Enable Tank Sensor</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input class="col-4" type="checkbox" id="tank_allow_pumping_if_sensor_error">
|
||||
<div class="col-7">Ignore Sensor Error</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<input type="number" min="2" max="500000" id="tank_useable_ml">
|
||||
Tank Size mL
|
||||
<div class="row">
|
||||
<input class="col-4" type="number" min="2" max="500000" id="tank_useable_ml">
|
||||
<div class="col-7">Tank Size mL</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="number" min="1" max="500000" id="tank_warn_percent">
|
||||
Tank Warn Percent (mapped in relation to empty and full)
|
||||
<div class="row">
|
||||
<input class="col-4" type="number" min="1" max="500000" id="tank_warn_percent">
|
||||
<div class="col-7">Tank Warn Percent (mapped in relation to empty and full)</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="number" min="0" max="100" id="tank_empty_percent">
|
||||
Tank Empty Percent (% max move)
|
||||
<div class="row">
|
||||
<input class="col-4" type="number" min="0" max="100" id="tank_empty_percent">
|
||||
<div class="col-7">Tank Empty Percent (% max move)</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="number" min="0" max="100" id="tank_full_percent">
|
||||
Tank Full Percent (% max move)
|
||||
<div class="row">
|
||||
<input class="col-4" type="number" min="0" max="100" id="tank_full_percent">
|
||||
<div class="col-7">Tank Full Percent (% max move)</div>
|
||||
</div>
|
@ -1,8 +1,5 @@
|
||||
<div class="container col-sm-6 col-md-5" style="border-style: solid; border-width: 1px; padding: 8px; margin: 8px;" >
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
</div>
|
||||
<div class="col-4" style="text-align: center; font-weight: bold;">
|
||||
<div class="col-12" style="text-align: center; font-weight: bold;">
|
||||
Time:
|
||||
</div>
|
||||
<div style="display: block; right: 8px; position: absolute;">
|
||||
@ -25,4 +22,3 @@
|
||||
</div>
|
||||
|
||||
<button id="timeview_time_upload">Store Browser time into esp and rtc</button>
|
||||
</div>
|
||||
|
@ -8,7 +8,7 @@ const isDevServer = process.env.WEBPACK_SERVE;
|
||||
console.log("Dev server is " + isDevServer);
|
||||
var host;
|
||||
if (isDevServer){
|
||||
host = 'http://192.168.0.103';
|
||||
host = 'http://192.168.0.105';
|
||||
} else {
|
||||
host = '';
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user