Display results + design

Ph0tonic · Apr 4, 2018 · 8750661 · 8750661
1 parent c226e8d
commit 8750661
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 52 deletions.
diff --git a/Labo3/data/matrice_2x2.json b/Labo3/data/matrice_2x2.json
@@ -0,0 +1,3 @@
+{"n": [2],
+"A": [1.0,1.0,1.0,-1.0],
+"B": [12.0,4.0]}
diff --git a/Labo3/index.html b/Labo3/index.html
@@ -3,8 +3,9 @@
 <head>
   <meta charset="utf-8">
   <title>Labo 3 - Algo num</title>
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="style.css" >
-
 </head>
 <body>
 <body>
@@ -20,23 +21,58 @@ <h1>2231.3 - Algorithme numérique : Laboratoire n°3</h1>
       </ul>
     </div>
     <div class="row">
-      <div class="col-md-12 col-sm-12">
+      <div class="col-md-8 col-sm-12">
         <h2>Utilisation</h2>
+        <p>2 possibilités de chargement du fichier. Première, utilisation du drag and drop du fichier à lire dans la zone prévue à cette effet.
+          Second option, copier directement le contenu du fichier dans la zone prévue à cet effet.
+          Nous avons implémenter une 3ème solution mais celle-ci ne fonctionne pas avec tous les navigateurs à cause de restrictions de ceux-ci.
+          Cette méthode permet de sélectionner directement le fichier JSON à charger à gauche de zone de drag and drop, cliquer sur le nom du fcihier à charger.
+          Chrome et Safari ne permettent pas d'utiliser cette solution.
+        </p>
       </div>
     </div>
     <hr>
     <div class="row">
-      <div id="holder">Drag your file HERE!</div>
-      <input type="submit" onclick="s.solve(matrix);" value="Calculer"/>
-      <div id="chronotime"></div>
+      <div class="col-md-8 col-sm-12">
+        <textarea id="holder">Drag your file HERE!</textarea>
+        <button id="solve" class="btn btn-primary">Calculer</button>
+        <div id="chronotime"></div>
+      </div>
+      <div class="col-md-4 col-sm-12">
+        <h2>Charger un fichier</h2>
+        <p>Cliquez sur le fichier voulu, attention fonctionnalité disponible uniquement avec Firefox et Edge.</p>
+        <ul id="files">
+          <li>matrice_0x0.json</li>
+          <li>matrice_2x2.json</li>
+          <li>matrice_3x3.json</li>
+          <li>matrice_50x50.json</li>
+          <li>matrice_250x250.json</li>
+          <li>matrice_300x300.json</li>
+          <li>matrice_avecPB_0x0.json</li>
+          <li>matrice_avecPB_3x3_avec_A_a_0.json</li>
+          <li>matrice_avecPB_3x3_avec_SwapObligatoire.json</li>
+        </ul>
+      </div>
+      <div class="col-md-12 col-sm-12">
+        <h2>Résultats</h2>
+        <div id="result"></div>
+      </div>
     </div>
     <hr>
     <div class="row">
       <div class="col-md-12">
     	   <h1>Rapport</h1>
          <h2>Contextualisation</h2>
+         <p>Le but de ce labo est la résolution d'un système d'équations linéaires avec la méthode de Gauss. L'utilisateur à la possibilité de choisir un fichier ou de directement entrer une matrice dans la zone prévu à cet effet au format JSON.</p>
+         <p>La matrice devra cependant est carré et valide. Notre algorithme ne permet pas de trouver des solutions non constantes ou une infinité de solution. Si un tel cas se présente, un message d'erreur est affiché.</p>
+         <p>Notre programme permet de visualiser les résultats trouvés s'ils sont de nature constant.</p>
+         <h2>Méthodologie de développement</h2>
+         <p>TODO ...</p>
 	       <h2>Tests</h2>
-         <h2>Perspectives</h2>
+         <p>Nous avons testé notre code avec toutes les matrices mises à notre disposition par notre responsable. Tous les tests effectués ont étés concluant!</p>
+         <h2>Conclusion et perspective</h2>
+         <p>Nous sommes satisfait de notre résultat, notre code permet de résoudre une matrice de 300x300 en 16ms avec Firefox Quantum 59.0.2 (64 bits).</p>
+         <p>Finalement, en ce qui concerne le perspectives, il serait intéressant de pouvoir </p>
        </div>
     </div>
   	<hr>
@@ -45,6 +81,7 @@ <h2>Références de développement</h2>
   		 <ul class="a-autoFill">
         <li><a href="https://stackoverflow.com/questions/11313414/html5-drag-and-drop-load-text-file-in-a-textbox-with-javascript"></a></li>
         <li><a href="https://en.wikipedia.org/wiki/Gaussian_elimination#Pseudocode"></a></li>
+        <li><a href="http://html5demos.com/file-api"></a></li>
       </ul>
     </footer>
   </div>

diff --git a/Labo3/script.js b/Labo3/script.js
@@ -13,7 +13,6 @@ class Matrix {
   }
 
   _load(d){
-    console.log(d);
     d = JSON.parse(d);
 
     this.size = d.n[0]; //Get the size of the matrix
@@ -54,7 +53,6 @@ class Matrix {
       this.data[iRowSub][i] -= this.data[iRowRef][i] * factor;
     }
   }
-
 }
 
 class Solver {
@@ -68,29 +66,47 @@ class Solver {
     this.x = [];
     this.x.length = matrix.size;
 
-    this._startTimer();
+    let start;
+    let stop;
+
+    //Start counter
+    try{
+      start = performance.now();
 
-    this.gaussTransform(matrix);
-    this.resolveX(matrix,this.x);
+      this.gaussTransform(matrix); //Gauss transformation to upper diagonal matrix
+      this.resolveX(matrix,this.x); //Resolve upper diagonal matrix with substitution method
 
-    this._stopTimer();
+      //Stop counter
+      stop = performance.now();
 
-    //Affichage des résultats
+      //Display time needed
+      document.getElementById("chronotime").innerHTML = (stop - start) + "ms";
+
+    }catch(error){
+      this.x = undefined;
+    }
+
+    //Display x
+    this.displayX();
   }
 
   gaussTransform(matrix){
+    //Cache variable to improve speed
+    let data = matrix.data;
+
     let m = matrix.size;
     if(m===0){
       return;
     }
-    let n = matrix.data[0].length;
+    let n = data[0].length;
 
 
     let h = 0; /* initialization of the pivot row */
     let k = 0; /* initialization of the pivot column */
 
-    /*Recherche de la plus grande valeur, raison:
-        "In any case, choosing the largest possible absolute value of the pivot improves the numerical stability of the algorithm, when floating point is used for representing numbers."
+    /*
+        Search for the greatest value, reason:
+        - "In any case, choosing the largest possible absolute value of the pivot improves the numerical stability of the algorithm, when floating point is used for representing numbers."
         Sources : Wikipedia -> https://en.wikipedia.org/wiki/Gaussian_elimination#Pseudocode
     */
 
@@ -99,9 +115,11 @@ class Solver {
     while(h < m) { //  && k < n){
       /* Find the k-th pivot: */
       iMax = matrix.indiceMaxColumn(k,h); // k -> column && h -> line start searching
-      if(matrix.data[iMax][k] == 0) {
+      if(data[iMax][k] == 0) {
         /* No pivot in this column, pass to next column */
         ++k;
+        console.log("No constant solutions");
+        throw new Error("Résultat non-constant");
       } else {
         if(h != iMax){
           matrix.swapRows(h, iMax); // h -> current row && iMax -> ligne max
@@ -110,10 +128,10 @@ class Solver {
         /* Do for all rows below pivot: */
         for(let i=h+1; i<m; ++i){
           //Calcul the factor
-          f = matrix.data[i][k] / matrix.data[h][k];
+          f = data[i][k] / data[h][k];
 
           /* Fill with zeros the lower part of pivot column: */
-          matrix.data[i][k] = 0;
+          data[i][k] = 0;
 
           /* Do for all remaining elements in current row: */
           matrix.substractLineFactor(h, i, f, k+1);
@@ -128,50 +146,96 @@ class Solver {
 
   resolveX(matrix){
     let n = matrix.size;
+    let data = matrix.data;
     for (let i=n-1; i >= 0; --i) {
-        this.x[i] = matrix.data[i][n]/matrix.data[i][i];
+        this.x[i] = data[i][n]/data[i][i];
         for (let k=i-1; k > -1; k--) {
-            matrix.data[k][n] -= matrix.data[k][i] * this.x[i];
+            data[k][n] -= data[k][i] * this.x[i];
         }
     }
   }
 
-  _startTimer(){
-    this.start = new Date();
-  }
+  displayX(){
+    let result = document.getElementById('result');
+    let htmlResult = "";
 
-  _stopTimer(){
-    this.stop = new Date();
-    document.getElementById("chronotime").innerHTML = (this.stop - this.start) + "ms";
+    if(this.x != undefined){
+      if(this.x.length > 0){
+        for(let i=0;i<this.x.length;i++){
+          htmlResult += "x<sub>"+(i+1)+"</sub> = "+this.x[i]+"<br>";
+        }
+      }else{
+        htmlResult = '<div class="alert alert-warning">Matrice de taille null!</div>';
+      }
+    }else{
+      htmlResult = '<div class="alert alert-danger">Aucune solution constante trouvée!</div>';
+    }
+    result.innerHTML = htmlResult;
   }
-
 }
 
-// modified from http://html5demos.com/file-api
-let holder = document.getElementById('holder');
 let matrix = new Matrix();
-let s = new Solver();
 
-holder.ondragover = function() {
-    this.className = 'hover';
-    return false;
-};
-holder.ondragend = function() {
-    this.className = '';
-    return false;
-};
-holder.ondrop = function(e) {
-    this.className = '';
-    e.preventDefault();
-
-    let file = e.dataTransfer.files[0]; //Open the first file
-    let reader = new FileReader();
-    reader.onload = function(event) {
-        matrix = new Matrix(event.target.result);
-        holder.innerHTML = "LOADED !!!";
+function loadClickedFile(e) {
+    e = e || window.event;
+    let file = e.target || e.srcElement;
+    file = './data/'+file.innerHTML;
+    let xmlhttp = new XMLHttpRequest();
+
+    xmlhttp.overrideMimeType('text/json');
+    xmlhttp.onreadystatechange = function(){
+      if(this.readyState == 4 && this.status == 200)
+      {
+        holder.value = this.responseText;
+        matrix = new Matrix(this.responseText);
+      }
+    };
+    xmlhttp.open("GET", file, true);
+    xmlhttp.send(undefined);
+}
+
+document.onreadystatechange = () => {
+  if (document.readyState === 'interactive') {
+    // document ready
+
+    //To avoid error with chrome and loading file with xmlhttprequest
+    let isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    if(!isChrome){
+      let ul = document.getElementById('files');
+      ul.onclick = function(event) {
+          loadClickedFile(event);
+      };
+    }
+
+    // modified from http://html5demos.com/file-api
+    let holder = document.getElementById('holder');
+    let s = new Solver();
+
+    document.getElementById('solve').onclick = function(){
+        matrix = new Matrix(holder.value);
+        s.solve(matrix);
     };
-    console.log(file);
-    reader.readAsText(file);
 
-    return false;
+    holder.ondragover = function() {
+        this.className = 'hover';
+        return false;
+    };
+    holder.ondragend = function() {
+        this.className = '';
+        return false;
+    };
+    holder.ondrop = function(e) {
+        e.preventDefault();
+
+        let file = e.dataTransfer.files[0]; //Open the first file
+        let reader = new FileReader();
+        reader.onload = function(event) {
+            holder.value = event.target.result;
+            matrix = new Matrix(event.target.result);
+        };
+
+        reader.readAsText(file);
+        return false;
+    };
+  }
 };
diff --git a/Labo3/style.css b/Labo3/style.css
@@ -4,7 +4,7 @@ a:after {
 
 #holder {
   border: 10px dashed #ccc;
-  width: 300px;
+  width: 100%;
   height: 300px;
   margin: 20px auto;
   display: flex;
@@ -15,3 +15,17 @@ a:after {
 #holder.hover {
   border: 10px dashed #333;
 }
+
+#chronotime {
+  display: inline;
+}
+
+#files li {
+  color:#337ab7;
+  text-decoration: none;
+}
+
+#files li:hover, #files li:focus {
+  color: #23527c;
+  text-decoration: underline;
+}