css fixes

This commit is contained in:
Empire 2025-01-03 00:48:34 +01:00
parent 1927449c1d
commit 0f77ac163a
12 changed files with 255 additions and 230 deletions

View File

@ -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();

View File

@ -1,9 +1,6 @@
<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="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">
@ -43,4 +40,3 @@
<span class="col-7">Temp °C:</span>
<div class="col-5" id="battery_temperature" style="text-wrap: nowrap"></div>
</div>
</div>

View File

@ -12,6 +12,7 @@
background-color: lightgrey;
opacity: 0.8;
}
.progressPaneCenter {
display: inline-block;
margin-top: 48%;
@ -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,9 +59,11 @@
0% {
transform: translateX(0%) scaleX(0.5);
}
50% {
transform: translateX(50%) scaleX(0.5);
}
100% {
transform: translateX(0%) scaleX(0.5);
}
@ -67,47 +73,44 @@
<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>

View File

@ -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();

View 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>

View File

@ -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;

View File

@ -1,4 +1,3 @@
<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="col-12" style="text-align: center; font-weight: bold;">
Current Firmware
@ -9,6 +8,8 @@
<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>
@ -19,4 +20,6 @@
<input type="file" name="file1" id="firmware_file"><br>
</form>
</div>
<div class="row">
<input style="margin-left: 16px; margin-top: 8px;" class="col-6" type="button" id="test" value="Self-Test">
</div>

View File

@ -1,5 +1,6 @@
<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="col-1"></div>
@ -53,7 +54,8 @@
</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">
<input class="col-4" id="plant_${plantId}_max_consecutive_pump_count" type="number" min="1" , max="50" ,
placeholder="10">
</div>
</div>

View File

@ -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")!

View File

@ -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>

View File

@ -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>

View File

@ -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 = '';
}