From 8750661ad6058d05e6299bbddfcde0df5dc0f44d Mon Sep 17 00:00:00 2001 From: Bastien Wermeille Date: Wed, 4 Apr 2018 17:17:55 +0200 Subject: [PATCH] Display results + design --- Labo3/data/matrice_2x2.json | 3 + Labo3/index.html | 49 ++++++++++-- Labo3/script.js | 154 +++++++++++++++++++++++++----------- Labo3/style.css | 16 +++- 4 files changed, 170 insertions(+), 52 deletions(-) create mode 100644 Labo3/data/matrice_2x2.json diff --git a/Labo3/data/matrice_2x2.json b/Labo3/data/matrice_2x2.json new file mode 100644 index 0000000..9ec17e7 --- /dev/null +++ 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 index 75c3aba..a178876 100644 --- a/Labo3/index.html +++ b/Labo3/index.html @@ -3,8 +3,9 @@ Labo 3 - Algo num + + - @@ -20,23 +21,58 @@

2231.3 - Algorithme numérique : Laboratoire n°3

-
+

Utilisation

+

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. +

-
Drag your file HERE!
- -
+
+ + +
+
+
+

Charger un fichier

+

Cliquez sur le fichier voulu, attention fonctionnalité disponible uniquement avec Firefox et Edge.

+
    +
  • matrice_0x0.json
    • +
  • matrice_2x2.json
    • +
  • matrice_3x3.json
    • +
  • matrice_50x50.json
    • +
  • matrice_250x250.json
    • +
  • matrice_300x300.json
    • +
  • matrice_avecPB_0x0.json
    • +
  • matrice_avecPB_3x3_avec_A_a_0.json
    • +
  • matrice_avecPB_3x3_avec_SwapObligatoire.json
    • +
+
+
+

Résultats

+
+

Rapport

Contextualisation

+

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.

+

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é.

+

Notre programme permet de visualiser les résultats trouvés s'ils sont de nature constant.

+

Méthodologie de développement

+

TODO ...

Tests

-

Perspectives

+

Nous avons testé notre code avec toutes les matrices mises à notre disposition par notre responsable. Tous les tests effectués ont étés concluant!

+

Conclusion et perspective

+

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).

+

Finalement, en ce qui concerne le perspectives, il serait intéressant de pouvoir

@@ -45,6 +81,7 @@

Références de développement

diff --git a/Labo3/script.js b/Labo3/script.js index 5e1bfbe..308e206 100644 --- 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= 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[i]+"
"; + } + }else{ + htmlResult = '
Matrice de taille null!
'; + } + }else{ + htmlResult = '
Aucune solution constante trouvée!
'; + } + 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 index 6bc2cdf..e7ad9d8 100644 --- 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; +}