added textual information about simulation results

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)
 

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

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 });

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>