From 777ba633223592780d941930d6fec5e3046bc0ed Mon Sep 17 00:00:00 2001
From: Youen Toupin <youen.toupin@youb.fr>
Date: Mon, 11 Oct 2021 00:13:29 +0200
Subject: [PATCH] added textual information about simulation results

---
 README.md                     |  4 ++--
 simulator/src/app.scss        | 11 ++++++++---
 simulator/src/simulator-ui.ts | 21 ++++++++++++++-------
 simulator/src/simulator.html  |  1 +
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 0ae736e..b50d186 100644
--- a/README.md
+++ b/README.md
@@ -6,13 +6,13 @@ Vehicle energy consumption and production simulator. This tool has been created
 
 The easiest way is to use the [online simulator](https://vhelio.org/simulateur-vhelio/).
 
-You can also download the latest pre-built stand-alone version and open `vhelio-simulator.html` in your web browser. The program will run in your browser, but won't communicate with any server, this is a purely local application.
+You can also download the latest pre-built stand-alone version and open `vhelio-simulator.html` in your web browser. When executed in this way, the program will run in your browser, but won't communicate with any server, this is a purely local application.
 
 ## Building from source
 
 ### Dependencies
 
-The simulator is written in `typescript`, whose compiler depends on `node.js`.
+The simulator is written in `typescript`, whose compiler depends on `node.js`. There are a few other build scripts that also need node.js.
 
 The first step is to [install node.js](https://nodejs.org)
 
diff --git a/simulator/src/app.scss b/simulator/src/app.scss
index 29ba6fc..61f2a86 100644
--- a/simulator/src/app.scss
+++ b/simulator/src/app.scss
@@ -37,7 +37,7 @@ input[type=number] {
 	cursor: pointer;
 }
 
-svg g {
+#zones-map-modal svg g {
 	filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));
 }
 
@@ -45,12 +45,17 @@ svg g {
 	filter: brightness(1.2);
 }
 
-svg text {
+#zones-map-modal svg text {
 	pointer-events: none;
 }
 
+.result-info {
+	text-align: center;
+	margin-top: 1rem;
+}
+
 .battery-charge-graph {
-	margin-top: 2rem;
+	margin-top: 0.5rem;
 	overflow-x: auto;
 }
 
diff --git a/simulator/src/simulator-ui.ts b/simulator/src/simulator-ui.ts
index 5d21671..8da09eb 100644
--- a/simulator/src/simulator-ui.ts
+++ b/simulator/src/simulator-ui.ts
@@ -19,12 +19,12 @@ function runSimulation(parameters: SimulationParameters): Simulator.SimulationRe
 	
 	let simulationResult = Simulator.simulate(vehicle, solarIrradiance, planning);
 	//console.log(solarIrradiance);
-	console.log(simulationResult);
+	//console.log(simulationResult);
 	
-	let averageKwhCost = 0.192; // in €/kWh TODO: to verify, this price seems too high
-	console.log('Grid recharge cost: ' + (Math.round(simulationResult.gridChargeCount*(vehicle.batteryCapacity/1000)*averageKwhCost*100)/100) + '€');
+	//let averageKwhCost = 0.192; // in €/kWh TODO: to verify, this price seems too high
+	//console.log('Grid recharge cost: ' + (Math.round(simulationResult.gridChargeCount*(vehicle.batteryCapacity/1000)*averageKwhCost*100)/100) + '€');
 	
-	console.log('Solar energy ratio: ' + Math.round(100*(simulationResult.cumulatedMotorConsumption-(simulationResult.gridChargeCount+1)*vehicle.batteryCapacity)/simulationResult.cumulatedMotorConsumption) + '%');
+	//console.log('Solar energy ratio: ' + Math.round(100*(simulationResult.cumulatedMotorConsumption-(simulationResult.gridChargeCount+1)*vehicle.batteryCapacity)/simulationResult.cumulatedMotorConsumption) + '%');
 	
 	return simulationResult;
 }
@@ -73,14 +73,21 @@ document.addEventListener('DOMContentLoaded', function() {
 		
 		let resultsContainer = container.querySelector('.simulation-results');
 		
+		let averageKwhCost = 0.192; // in €/kWh TODO: to verify, this price seems too high
+		resultsContainer.querySelector('.result-info').innerHTML = `
+			<p>Il faudra recharger le vhélio sur secteur environ ${simulationResult.gridChargeCount} fois sur l'année</p>
+			<p>Cela coûtera ${Math.round(simulationResult.gridChargeCount*(parameters.batteryCapacity/1000)*averageKwhCost*100)/100}€ sur l'année</p>
+			<p>La couverture solaire du vhélio est de ${Math.round(100*(simulationResult.cumulatedMotorConsumption-(simulationResult.gridChargeCount+1)*parameters.batteryCapacity)/simulationResult.cumulatedMotorConsumption)}%</p>
+		`;
+		
 		let batteryChargeGraph = new SvgDrawing.SvgElement(resultsContainer.querySelector('.battery-charge-graph svg'));
 		
 		batteryChargeGraph.clear();
 		
-		let marginTop = 20;
+		let marginTop = 10;
 		let marginBottom = 20;
-		let marginLeft = 40;
-		let marginRight = 20;
+		let marginLeft = 35;
+		let marginRight = 5;
 		
 		batteryChargeGraph.line({ x: marginLeft, y: marginBottom }, { x: batteryChargeGraph.width - marginRight, y: marginBottom });
 		batteryChargeGraph.line({ x: marginLeft, y: marginBottom }, { x:marginLeft, y: batteryChargeGraph.height - marginTop });
diff --git a/simulator/src/simulator.html b/simulator/src/simulator.html
index 779a80e..f80636c 100644
--- a/simulator/src/simulator.html
+++ b/simulator/src/simulator.html
@@ -108,6 +108,7 @@
 		</div>
 		
 		<div class="simulation-results is-hidden">
+			<div class="result-info"></div>
 			<div class="battery-charge-graph">
 				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 300"></svg>
 			</div>