C3MA/PlantCtrl
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css fixes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
rust/src/webserver/webserver.rs
View File

@ -1,11 +1,11 @@
//offer ota and config mode //offer ota and config mode
use std::{ use std::{
io::{BufRead, BufReader, Read, Write},
str::from_utf8, str::from_utf8,
sync::{atomic::AtomicBool, Arc}, sync::{atomic::AtomicBool, Arc},
}; };
use esp_idf_svc::io::BufRead;
use crate::{ use crate::{
espota::OtaUpdate, get_version, map_range_moisture, plant_hal::FileInfo, BOARD_ACCESS, 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 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; let mut line = 0;
loop { loop {
board.general_fault(toggle); 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 buffer: [u8; BUFFER_SIZE] = [0; BUFFER_SIZE];
let mut total_read: usize = 0; let mut total_read: usize = 0;
loop { loop {
let read = file_handle.read(&mut buffer)?; let read = std::io::Read::read(&mut file_handle, &mut buffer)?;
total_read += read; total_read += read;
println!( println!(
"sending {read} bytes of {total_read} for file {}", "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; total_read += read;
println!("sending {read} bytes of {total_read} for upload {filename}"); println!("sending {read} bytes of {total_read} for upload {filename}");
let to_write = &buffer[0..read]; 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}"); println!("wrote {read} bytes of {total_read} for upload {filename}");
if read == 0 { if read == 0 {
break; break;
@ -508,9 +508,12 @@ pub fn httpd(_reboot_now: Arc<AtomicBool>) -> Box<EspHttpServer<'static>> {
.unwrap(); .unwrap();
server server
.fn_handler("/bootstrap-grid.css", Method::Get, |request| { .fn_handler("/bootstrap-grid.css", Method::Get, |request| {
request let headers = [
.into_ok_response()? ("Access-Control-Allow-Origin", "*"),
.write(include_bytes!("bootstrap-grid.css"))?; ("Access-Control-Allow-Headers", "*"),
("Content-Type", "text/css")
];
request.into_response(200, None, &headers)?.write(include_bytes!("bootstrap-grid.css"))?;
anyhow::Ok(()) anyhow::Ok(())
}) })
.unwrap(); .unwrap();

42
rust/src_webpack/src/batteryview.html
View File

@ -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="row"> <div class="col-12" style="text-align: center; font-weight: bold;">
<div class="col-7"> Battery:
</div>
<div class="col-7" style="text-align: center; font-weight: bold;">
Time:
</div> </div>
<div style="display: block; right: 8px; position: absolute;"> <div style="display: block; right: 8px; position: absolute;">
<input id="battery_auto_refresh" type="checkbox">⟳ <input id="battery_auto_refresh" type="checkbox">⟳
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">V:</span> <span class="col-7">V:</span>
<div class="col-5" id="battery_voltage_milli_volt" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_voltage_milli_volt" style="text-wrap: nowrap"></div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">mA:</span> <span class="col-7">mA:</span>
<div class="col-5" id="battery_current_milli_ampere" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_current_milli_ampere" style="text-wrap: nowrap"></div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">Cycles:</span> <span class="col-7">Cycles:</span>
<div class="col-5" id="battery_cycle_count" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_cycle_count" style="text-wrap: nowrap"></div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">design mA:</span> <span class="col-7">design mA:</span>
<div class="col-5" id="battery_design_milli_ampere" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_design_milli_ampere" style="text-wrap: nowrap"></div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">remaining mA:</span> <span class="col-7">remaining mA:</span>
<div class="col-5" id="battery_remaining_milli_ampere" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_remaining_milli_ampere" style="text-wrap: nowrap"></div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">charge %:</span> <span class="col-7">charge %:</span>
<div class="col-5" id="battery_state_of_charge" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_state_of_charge" style="text-wrap: nowrap"></div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">health %:</span> <span class="col-7">health %:</span>
<div class="col-5" id="battery_state_of_health" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_state_of_health" style="text-wrap: nowrap"></div>
</div> </div>
<div class="row"> <div class="row">
<span class="col-7">Temp °C:</span> <span class="col-7">Temp °C:</span>
<div class="col-5" id="battery_temperature" style="text-wrap: nowrap"></div> <div class="col-5" id="battery_temperature" style="text-wrap: nowrap"></div>
</div>
</div> </div>

73
rust/src_webpack/src/main.html
View File

@ -1,6 +1,6 @@
<link rel="stylesheet" href="bootstrap-grid.css"> <link rel="stylesheet" href="bootstrap-grid.css">
<style> <style>
.progressPane{ .progressPane {
display: block; display: block;
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -12,7 +12,8 @@
background-color: lightgrey; background-color: lightgrey;
opacity: 0.8; opacity: 0.8;
} }
.progressPaneCenter{
.progressPaneCenter {
display: inline-block; display: inline-block;
margin-top: 48%; margin-top: 48%;
position: absolute; position: absolute;
@ -21,12 +22,14 @@
margin-left: 25%; margin-left: 25%;
margin-right: 25%; margin-right: 25%;
} }
.progress { .progress {
height: 1.5em; height: 1.5em;
width: 100%; width: 100%;
background-color: #c9c9c9; background-color: #c9c9c9;
position: relative; position: relative;
} }
.progress:after { .progress:after {
content: attr(data-label); content: attr(data-label);
font-size: 0.8em; font-size: 0.8em;
@ -36,6 +39,7 @@
left: 0; left: 0;
right: 0; right: 0;
} }
.progress .value { .progress .value {
background-color: #7cc4ff; background-color: #7cc4ff;
display: inline-block; display: inline-block;
@ -55,59 +59,58 @@
0% { 0% {
transform: translateX(0%) scaleX(0.5); transform: translateX(0%) scaleX(0.5);
} }
50% { 50% {
transform: translateX(50%) scaleX(0.5); transform: translateX(50%) scaleX(0.5);
} }
100% { 100% {
transform: translateX(0%) scaleX(0.5); transform: translateX(0%) scaleX(0.5);
} }
} }
</style> </style>
<div class="container-xxl"> <div class="container-xl">
<input type="button" id="test" value="Test"> <div class="row">
<div id="firmwareview" class="container col-12 col-lg-4"
<div id="firmwareview"> 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>
<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>
<div id="network_view">
</div>
<div id="tankview"></div>
<div id="batteryview"></div>
<h2>config</h2> <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> <h3>Plants:</h3>
<button id="measure_moisture">Measure Moisture</button> <button id="measure_moisture">Measure Moisture</button>
<div id="plants" class="row"></div> <div id="plants" class="row"></div>
</div>
<button id="submit">Submit</button> <button id="submit">Submit</button>
<div id="submit_status"></div> <div id="submit_status"></div>
<br> <br>

4
rust/src_webpack/src/main.ts
View File

@ -8,7 +8,7 @@ document.body.innerHTML = require('./main.html') as string;
import { TimeView } from "./timeview"; import { TimeView } from "./timeview";
import { PlantView, PlantViews } from "./plant"; import { PlantView, PlantViews } from "./plant";
import { NetworkConfigView } from "./network"; import { NetworkConfigView } from "./network";
import { NightLampView } from "./nightmode"; import { NightLampView } from "./nightlightview";
import { TankConfigView } from "./tankview"; import { TankConfigView } from "./tankview";
import { SubmitView } from "./submitView"; import { SubmitView } from "./submitView";
import { ProgressView } from "./progress"; import { ProgressView } from "./progress";
@ -256,6 +256,6 @@ const controller = new Controller();
controller.updateRTCData(); controller.updateRTCData();
controller.updateBatteryData(); controller.updateBatteryData();
controller.downloadConfig(); controller.downloadConfig();
n controller.measure_moisture(); //controller.measure_moisture();
controller.version(); controller.version();

14
rust/src_webpack/src/nightlightview.html Normal file
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>

3
rust/src_webpack/src/nightmode.ts → rust/src_webpack/src/nightlightview.ts
View File

@ -5,6 +5,9 @@ export class NightLampView {
private readonly night_lamp_time_start: HTMLSelectElement; private readonly night_lamp_time_start: HTMLSelectElement;
private readonly night_lamp_time_end: HTMLSelectElement; private readonly night_lamp_time_end: HTMLSelectElement;
constructor(controller:Controller){ 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 = document.getElementById("night_lamp_only_when_dark") as HTMLInputElement;
this.night_lamp_only_when_dark.onchange = controller.configChanged this.night_lamp_only_when_dark.onchange = controller.configChanged
this.night_lamp_time_start = document.getElementById("night_lamp_time_start") as HTMLSelectElement; this.night_lamp_time_start = document.getElementById("night_lamp_time_start") as HTMLSelectElement;

17
rust/src_webpack/src/ota.html
View File

@ -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;"> <div class="col-12" style="text-align: center; font-weight: bold;">
Current Firmware Current Firmware
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<span>Buildtime:</span> <span>Buildtime:</span>
<span id="firmware_buildtime" style="text-wrap: nowrap"></span> <span id="firmware_buildtime" style="text-wrap: nowrap"></span>
</div> </div>
</div>
<div class="row">
<div class="col-md-6"> <div class="col-md-6">
<span>Buildhash:</span> <span>Buildhash:</span>
<span id="firmware_githash" style="text-wrap: nowrap"></span> <span id="firmware_githash" style="text-wrap: nowrap"></span>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<form class="col-12" id="upload_form" method="post"> <form class="col-12" id="upload_form" method="post">
<input type="file" name="file1" id="firmware_file"><br> <input type="file" name="file1" id="firmware_file"><br>
</form> </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> </div>

38
rust/src_webpack/src/plant.html
View File

@ -1,21 +1,22 @@
<div class="container" style="border-style: solid; border-width: 1px; margin: 8px; padding: 8px;"> <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> <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> <div class="col-1"></div>
<button class="col-10" id="plant_${plantId}_test">Test</button> <button class="col-10" id="plant_${plantId}_test">Test</button>
<div class="col-1"></div> <div class="col-1"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-12">Live:</div> <div class="col-12">Live:</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-7">Sensor A:</div> <div class="col-7">Sensor A:</div>
<span class="col-4" id="plant_${plantId}_moisture_a">loading</span> <span class="col-4" id="plant_${plantId}_moisture_a">loading</span>
<div class="col-7">Sensor B:</div> <div class="col-7">Sensor B:</div>
<span class="col-4" id="plant_${plantId}_moisture_b">loading</span> <span class="col-4" id="plant_${plantId}_moisture_b">loading</span>
</div> </div>
<div class="row"> <div class="row">
<div class="col-7"> <div class="col-7">
Mode: Mode:
</div> </div>
@ -25,7 +26,7 @@
<option value="TimerOnly">Timer</option> <option value="TimerOnly">Timer</option>
</select> </select>
</div> </div>
<div class="row"> <div class="row">
<div class="col-7">Target Moisture:</div> <div class="col-7">Target Moisture:</div>
<input class="col-4" id="plant_${plantId}_target_moisture" type="number" min="0" max="100" placeholder="0"> <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="row">
<div class="col-7">"Pump Hour Start":</div> <div class="col-7">"Pump Hour Start":</div>
<select class="col-4" id="plant_${plantId}_pump_hour_start">10</select> <select class="col-4" id="plant_${plantId}_pump_hour_start">10</select>
</div> </div>
<div class="row"> <div class="row">
<div class="col-7">"Pump Hour End":</div> <div class="col-7">"Pump Hour End":</div>
<select class="col-4" id="plant_${plantId}_pump_hour_end">19</select> <select class="col-4" id="plant_${plantId}_pump_hour_end">19</select>
</div> </div>
<div class="row"> <div class="row">
<div class="col-7">Sensor B installed:</div> <div class="col-7">Sensor B installed:</div>
<input class="col-4" id="plant_${plantId}_sensor_b" type="checkbox"> <input class="col-4" id="plant_${plantId}_sensor_b" type="checkbox">
</div> </div>
<div class="row"> <div class="row">
<div class="col-7">Max Consecutive Pump Count:</div> <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" ,
</div> placeholder="10">
</div>
</div> </div>

5
rust/src_webpack/src/plant.ts
View File

@ -66,7 +66,10 @@ export class PlantView {
const template = require('./plant.html') as string; const template = require('./plant.html') as string;
const plantRaw = template.replaceAll("${plantId}", String(plantId)); const plantRaw = template.replaceAll("${plantId}", String(plantId));
this.plantDiv.innerHTML = plantRaw 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) parent.appendChild(this.plantDiv)
this.header = document.getElementById("plant_"+plantId+"_header")! this.header = document.getElementById("plant_"+plantId+"_header")!

40
rust/src_webpack/src/tankview.html
View File

@ -1,27 +1,29 @@
<h3>Tank:</h3> <div class="row">
<div> <div class="col-12" style="font-weight: bold; text-align: center;">Tank:</div>
<input type="checkbox" id="tank_sensor_enabled">
Enable Tank Sensor
</div> </div>
<div> <div class="row">
<input type="checkbox" id="tank_allow_pumping_if_sensor_error"> <input class="col-4" type="checkbox" id="tank_sensor_enabled">
Allow Pumping if Sensor Error <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>
<div> <div class="row">
<input type="number" min="2" max="500000" id="tank_useable_ml"> <input class="col-4" type="number" min="2" max="500000" id="tank_useable_ml">
Tank Size mL <div class="col-7">Tank Size mL</div>
</div> </div>
<div> <div class="row">
<input type="number" min="1" max="500000" id="tank_warn_percent"> <input class="col-4" type="number" min="1" max="500000" id="tank_warn_percent">
Tank Warn Percent (mapped in relation to empty and full) <div class="col-7">Tank Warn Percent (mapped in relation to empty and full)</div>
</div> </div>
<div> <div class="row">
<input type="number" min="0" max="100" id="tank_empty_percent"> <input class="col-4" type="number" min="0" max="100" id="tank_empty_percent">
Tank Empty Percent (% max move) <div class="col-7">Tank Empty Percent (% max move)</div>
</div> </div>
<div> <div class="row">
<input type="number" min="0" max="100" id="tank_full_percent"> <input class="col-4" type="number" min="0" max="100" id="tank_full_percent">
Tank Full Percent (% max move) <div class="col-7">Tank Full Percent (% max move)</div>
</div> </div>

6
rust/src_webpack/src/timeview.html
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="row">
<div class="col-4"> <div class="col-12" style="text-align: center; font-weight: bold;">
</div>
<div class="col-4" style="text-align: center; font-weight: bold;">
Time: Time:
</div> </div>
<div style="display: block; right: 8px; position: absolute;"> <div style="display: block; right: 8px; position: absolute;">
@ -25,4 +22,3 @@
</div> </div>
<button id="timeview_time_upload">Store Browser time into esp and rtc</button> <button id="timeview_time_upload">Store Browser time into esp and rtc</button>
</div>

2
rust/src_webpack/webpack.config.js
View File

@ -8,7 +8,7 @@ const isDevServer = process.env.WEBPACK_SERVE;
console.log("Dev server is " + isDevServer); console.log("Dev server is " + isDevServer);
var host; var host;
if (isDevServer){ if (isDevServer){
host = 'http://192.168.0.103'; host = 'http://192.168.0.105';
} else { } else {
host = ''; host = '';
} }