test code that reads a voltage and displays it in the web browser

ESP32/vehicle-monitor.cpp

@@ -9,6 +9,8 @@
 
 AsyncWebServer server(80);
 
+int16_t batteryVoltage = -1; //in mV
+
 void setup()
 {
 	Serial.begin(115200);
@@ -31,9 +33,9 @@ void setup()
 	Serial.println(WiFi.localIP());
 
 	server.on("/api/status", HTTP_GET, [](AsyncWebServerRequest *request){
-		int batteryVoltage = random(30000, 42000);
+		int v = batteryVoltage;
 		char json[128];
-		sprintf(json, "{\"v\":%d}", batteryVoltage);
+		sprintf(json, "{\"v\":%d,\"c\":1000}", v);
 		request->send(200, "text/json", json);
 	});
 
@@ -50,5 +52,11 @@ void setup()
 
 void loop()
 {
+	const int potPin = 34;
+
 	delay(1000);
+	int16_t analogV = analogRead(potPin);
+	float v = (float)analogV / 4096.0f * 3.3f;
+	batteryVoltage = (int16_t)(v * 1000.0f + 0.5f);
+	//Serial.println(potValue);
 }

WebApp/src/main-page.tsx

@@ -1,7 +1,32 @@
 import m from 'mithril';
+import { MonitorApi, Status } from './monitor-api';
 
 export default class MainPage {
+	api = new MonitorApi(false);
+	status?: Status;
+	autoRefresh = true;
+	
+	oninit() {
+		this.refresh();
+	}
+	
+	onbeforeremove() {
+		this.autoRefresh = false;
+	}
+	
+	async refresh() {
+		this.status = await this.api.getStatus();
+		if(this.autoRefresh)
+			setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 500);
+	}
+	
 	view() {
-		return <p>Hello, world!</p>
+		return this.status
+			? <div>
+				<p>Tension batterie : {this.status.batteryVoltage.toFixed(1)}V</p>
+				<p>Courant : {this.status.motorCurrent.toFixed(1)}A</p>
+				<p>Puissance : {(this.status.batteryVoltage * this.status.motorCurrent).toFixed(1)}W</p>
+			</div>
+			: <p>Chargement...</p>;
 	}
 }

WebApp/src/monitor-api.ts

@@ -0,0 +1,39 @@
+import m from 'mithril';
+
+export interface Status {
+	batteryVoltage: number;
+	motorCurrent: number;
+};
+
+interface ApiStatus {
+	v: number;
+	c: number;
+}
+
+export class MonitorApi {
+	constructor(private mockServer: boolean) {
+	}
+	
+	async getStatus(): Promise<Status> {
+		let apiStatus: ApiStatus;
+		
+		if(this.mockServer) {
+			await new Promise(resolve => setTimeout(resolve, 200));
+			apiStatus = {
+				v: Math.random() * 20000 + 20000,
+				c: Math.random() * 30000
+			}
+			setTimeout(() => m.redraw(), 0);
+		} else {
+			apiStatus = await m.request({
+			    method: "GET",
+			    url: "/api/status"
+			});
+		}
+		
+		return {
+			batteryVoltage: apiStatus.v / 1000,
+			motorCurrent: apiStatus.c / 1000
+		};
+	}
+}