From 57abf443a51d8d3c59b748a5accf15801f1608c8 Mon Sep 17 00:00:00 2001
From: Rose Hirigoyen <rosehirigoyen@gmail.com>
Date: Wed, 9 Sep 2020 12:46:18 -0400
Subject: [PATCH] Simulate button!
---
css/gui.css | 19 ++++++-----
index.html | 2 +-
js/initScene.js | 85 ++++++++++++++++++++++++++++++++-----------------
3 files changed, 67 insertions(+), 39 deletions(-)
diff --git a/css/gui.css b/css/gui.css
index c7e5287..7ae8de4 100644
--- a/css/gui.css
+++ b/css/gui.css
@@ -1,10 +1,13 @@
-* {
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Old versions of Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome, Opera and Firefox */
+button {
+ position: absolute;
+ top: 100px;
+ font-size: 16px;
+ border-radius: 8px;
+ padding: 5px 12px;
+ border: 2px solid #ffd587;
}
+.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
diff --git a/index.html b/index.html
index ab89275..738e87b 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
<title>TP6 Simulator</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
- <!-- <link rel="stylesheet" type="text/css" href="css/gui.css"/> -->
+ <link rel="stylesheet" type="text/css" href="css/gui.css"/>
<script src="https://preview.babylonjs.com/babylon.js"></script>
diff --git a/js/initScene.js b/js/initScene.js
index 6677102..e53e2f5 100644
--- a/js/initScene.js
+++ b/js/initScene.js
@@ -220,7 +220,7 @@ var createRaceTrack = function () {
});
}
-var placeRaceTrack = function(length) {
+var placeRaceTrack = function (length) {
let startLinePos = -107
let x = 0
@@ -242,7 +242,7 @@ var placeRaceTrack = function(length) {
});
}
-var addUI = function() {
+var addUI = function () {
let input = document.getElementById("input");
if (!input) {
@@ -257,29 +257,49 @@ var addUI = function() {
}
// Files input
- var filesInput = new BABYLON.FilesInput(engine, null, null, null, null, null, function () { BABYLON.Tools.ClearLogCache() }, function () {}, null);
+ var filesInput = new BABYLON.FilesInput(engine, null, null, null, null, null, function () { BABYLON.Tools.ClearLogCache() }, function () { }, null);
filesInput.onProcessFileCallback = (function (file, name, extension) {
- if (filesInput._filesToLoad && filesInput._filesToLoad.length === 1 && extension) {
- BABYLON.Tools.ReadFile(file, function(dataText) {
- var data = JSON.parse(dataText);
- setupSimulation(data);
- });
- }
- return false;
- }).bind(this);
-
- input.addEventListener('change', function (event) {
- var filestoLoad;
- // Handling files from input files
- if (event && event.target && event.target.files) {
- filesToLoad = event.target.files;
+ if (filesInput._filesToLoad && filesInput._filesToLoad.length === 1 && extension) {
+ BABYLON.Tools.ReadFile(file, function (dataText) {
+ let simBtn = document.getElementById("simBtn")
+ simBtn.disabled = false
+ var data = JSON.parse(dataText);
+ setupSimulation(data);
+ });
+ }
+ return false;
+ }).bind(this);
+
+ input.addEventListener('change', function (event) {
+ isSimulationRunning = false
+ let simBtn = document.getElementById("simBtn")
+ simBtn.disabled = true
+ var filestoLoad;
+ // Handling files from input files
+ if (event && event.target && event.target.files) {
+ filesToLoad = event.target.files;
+ }
+ filesInput.loadFiles(event);
+ }, false);
+
+ let simBtn = document.getElementById("simBtn")
+ if (!simBtn) {
+ simBtn = document.createElement("button");
+ simBtn.id = "simBtn"
+ simBtn.type = "button";
+ simBtn.textContent = "Simulate!"
+ simBtn.style.zIndex = "2"
+ simBtn.disabled = true
+ document.body.appendChild(simBtn);
+ simBtn.style.right = `${20 + input.getBoundingClientRect().width - simBtn.getBoundingClientRect().width}px`
}
- filesInput.loadFiles(event);
- }, false);
+ simBtn.addEventListener("click", function() {
+ isSimulationRunning = true
+ });
}
-var setupSimulation = function(data) {
+var setupSimulation = function (data) {
// Simulation
let simulation = data.simulation
if (simulation == null) {
@@ -300,12 +320,12 @@ var setupSimulation = function(data) {
return;
}
- if(trackLength <= 0 || isNaN(trackLength)) {
+ if (trackLength <= 0 || isNaN(trackLength)) {
console.log("Invalid track length! >:(")
return;
}
- if(trackLength > 200){
+ if (trackLength > 200) {
console.log("Track length max value is 200 >:(")
return;
}
@@ -314,26 +334,26 @@ var setupSimulation = function(data) {
// Build vehicules
let vehiculesData = simulation.vehicules
- if(vehiculesData == null || vehiculesData.length === 0){
+ if (vehiculesData == null || vehiculesData.length === 0) {
console.log("No vehicules to simulate :(")
return;
}
- for (const vehicule of vehiculesData){
+ for (const vehicule of vehiculesData) {
let name = vehicule.name
- if (name == null){
+ if (name == null) {
console.log("Vehicule has no name :(")
continue;
}
let components = vehicule.components
- if (components == null || components.length === 0){
+ if (components == null || components.length === 0) {
console.log(`Vehicule ${name} has no components :(`)
continue;
}
let movements = vehicule.movements
- if (movements == null || movements.length === 0){
+ if (movements == null || movements.length === 0) {
console.log(`No movements found for vehicule ${name} :(`)
continue;
}
@@ -343,13 +363,18 @@ var setupSimulation = function(data) {
}
-var runSimulation = function() {
- if(isSimulationRunning) {
+var runSimulation = function () {
+ if (isSimulationRunning) {
success = false
vehicules.forEach(v => {
- success = success || v.toNextState()
+ success = success || v.toNextState()
})
isSimulationRunning = success
+
+ if(!isSimulationRunning) {
+ let simBtn = document.getElementById("simBtn")
+ simBtn.disabled = true
+ }
}
setTimeout(runSimulation, updateTime);
--
GitLab