Added : begin of report

fridezlucas · Jun 20, 2020 · 7c2ad46 · 7c2ad46
1 parent 305728e
commit 7c2ad46
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,8 @@
 Mini Projet
 
 Auteurs : Lucas Fridez
-Date    : 2020.06.18
-Version : 2020.06.18
+Date    : 2020.06.20
+Version : 2020.06.20
 -->
 <!DOCTYPE html>
 <html lang="fr">
@@ -25,7 +25,8 @@ <h1>Traitement d'images pour nombre de globules blancs</h1>
         <p>A noter que la liste déroulante ne fonctionne pas en local pour des raisons d'accès Cross Origine au disque.
             Elle fonctionne sur le site internet mis à disposition : <a href="https://an.fridez.dev">an.fridez.dev</a>.
         </p>
-        <p>Si ce mini-projet est utilisé en local; veuillez utiliser le petit formulaire (le champ input file ci-dessous) avec les images dans le répertoire <em>img</em>.</p>
+        <p>Si ce mini-projet est utilisé en local; veuillez utiliser le petit formulaire (le champ input file
+            ci-dessous) avec les images dans le répertoire <em>img</em>.</p>
         <input type="file" id="fileInput" />
         <select name="" id="selectImage">
             <option value="0" selected disabled>Selectionner une image</option>
@@ -108,43 +109,113 @@ <h1>Traitement d'images pour nombre de globules blancs</h1>
         </div>
     </div>
 
-    <h2>Introduction</h2>
+    <h2>1. Introduction</h2>
 
-    <h3>Contexte</h3>
+    <h2>2. Solution proposée</h2>
 
-    <h3>Problématique</h3>
-
-    <h2>Solution proposée</h2>
-    <h3>Méthodologie</h3>
     <p>La démarche pour dénombrer les globules blancs sur une image est la suivante :</p>
     <ol>
         <li>Récupérer l'image originale</li>
         <li>Transformer l'image en niveau de gris</li>
-        <li>Dessiner un graphique du spectre d'intensité de l'image en niveaux de gris [0; 255]</li>
-        <li>Créer une image en noir et blanc (binaire {0; 1})</li>
+        <li>Dessiner un graphique du spectre d'intensité de l'image en niveaux de gris (de 0 à 255)</li>
+        <li>Créer une image en noir et blanc (binaire, 0 ou 1)</li>
         <li>Effectuer un <em>Image Processing</em></li>
         <li>Entourer les globules trouvés</li>
     </ol>
 
-    <h2>Résultats</h2>
-
-    <h3>Code source</h3>
+    <h3>2.1 Idée en lien avec le/les chapitres d'Algo num.</h3>
+    <p>L'Image Processing est un lien direct avec le chapitre 3, <strong>Systèmes linéaires</strong>. En effet, beaucoup
+        d'algorithmes utilisent des matrices pour travailler sur des images.</p>
+    <p>De plus, le calcul pour trouver le seuil limite [min; max] se réfère plus au chapitre 2, <strong>Résolution
+            d'Equation</strong>.</p>
+
+    <h3>2.2 Modèle développé</h3>
+    <p>todo...</p>
+
+    <h2>3. Résultats</h2>
+
+    <p>Les résultats sont concluants. Ci-dessous se trouve la table des résultats avec les 4 images proposées :</p>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Image numéro</th>
+                <th>Taille cellule</th>
+                <th>Cellules trouvées</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>1</td>
+                <td>23</td>
+                <td>15/15 (cellules entières)</td>
+            </tr>
+            <tr>
+                <td>2</td>
+                <td>40</td>
+                <td>15/15 (cellules entières)</td>
+            </tr>
+            <tr>
+                <td>3</td>
+                <td>17</td>
+                <td>22/23 (cellules entières)</td>
+            </tr>
+            <tr>
+                <td>4</td>
+                <td>25</td>
+                <td>28/29 (cellules entières)</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <em>Note : les cellules non trouvées sont plus petites que les autres. L'algorithme implémenté cherche des cellules
+        de même taille.</em>
+
+    <h3>3.1 Code source</h3>
     <p>Le mini projet est scanné à l'aide d'un outil de qualité de code source. Les résultats sont les suivants :</p>
     <img src="img/sonarscan.png" alt="Sonarscan">
 
-    <h3>Documentation</h3>
-    <p>Une documentation type <strong>TypeDoc</strong> est également générée. <a href="docs/index.html">Voir la documentation</a></p>
+    <h3>3.2 Documentation</h3>
+    <p>Une documentation type <strong>TypeDoc</strong> est également générée. <a href="docs/index.html">Voir la
+            documentation</a></p>
+
+    <h2>4. Conclusion</h2>
+    <p>L'algorithme de détection des cellules fonctionne bien. En somme, la presque totalité des cellules est
+        détectée.</p>
+    <p>Les faiblesses de la solution proposée sont les suivantes :</p>
+    <ul>
+        <li>L'utilisateur doit définir une taille de cellule</li>
+        <li>L'utilisateur doit choisir le seuil maximaml du noir (Slider maximum pour graph)</li>
+    </ul>
+
+    <p>Les forces de la solution sont les suivantes :</p>
+    <ul>
+        <li>L'utilisateur peut choisir une image et l'analyser avec le file input</li>
+        <li>Le dénombrement fonctionne correctement pour les cellules entière (car même taille)</li>
+        <li>Transformer l'image en niveua de gris selon la formule suivante : <em>gray = 0.3*R + 0.59*G + 0.11*B</em>.
+            Cela permet d'obtenir un gris "équitable" selon la perception des couleurs de l'oeil humain.</li>
+    </ul>
+
+    <p>Les perspectives d'améliorations sont les suivantes :</p>
+    <ul>
+        <li>Implémenter un algorithme <strong>Hough Circle Transform</strong> permettant de détecter des cellules de
+            n'importe quelle taille</li>
+        <li>Trouver la valeur maximale du noir automatiquement</li>
+    </ul>
 
-    <h2>Conclusion</h2>
 
-    <h2>Références</h2>
+    <h2>5. Références</h2>
     <ul>
-        <li>http://www.vapidspace.com/coding/2012/02/26/converting-images-to-grayscale-using-the-canvas/ (5 mai 2020 lu)
+        <li>VapidSpace, Converting Images To Grayscale Using The Canvas,
+            <a target="_blank" href="http://www.vapidspace.com/coding/2012/02/26/converting-images-to-grayscale-using-the-canvas/">www.vapidspace.com</a>, 26 février
+            2012
+        </li>
+        <li>Frédéric Legrand, Traitement d'image : niveaux de gris, <a target="_blank" href="https://www.f-legrand.fr/scidoc/docmml/image/niveaux/images/images.html">www.f-legrand.fr</a>, lu le 5 mai 2020</li>
+        <li>Rahul, async await in image loading, <a target="_blank" href="https://stackoverflow.com/questions/46399223/async-await-in-image-loading">www.stackoverflow.com</a>, 25 septembre 2017</li>
+        <li>tech_geek, Draw horizontal line on chart in chart.js on v2, <a target="_blank" href="https://stackoverflow.com/questions/42691873/draw-horizontal-line-on-chart-in-chart-js-on-v2">www.stackoverflow.com</a>, 9 mars 2017</li>
+        <li>PorkShoulderHolder, mathematical morphology for javascript, <a target="_blank" href="https://github.com/PorkShoulderHolder/morph">www.github.com</a>, 17 août 2018</li>
+        <li>Wikipédia, Circle Hough Transform, <a target="_blank" href="https://en.wikipedia.org/wiki/Circle_Hough_Transform">www.wikipedia.org</a>, 1 décembre 2019
         </li>
-        <li>https://www.f-legrand.fr/scidoc/docmml/image/niveaux/images/images.html (8 mai)</li>
-        <li>https://stackoverflow.com/questions/46399223/async-await-in-image-loading (8 mai)</li>
-        <li>https://stackoverflow.com/questions/42691873/draw-horizontal-line-on-chart-in-chart-js-on-v2 (9 mai)</li>
-        <li>https://github.com/PorkShoulderHolder/morph (11 juin)</li>
     </ul>
 
     <footer>

diff --git a/src/Analyser.ts b/src/Analyser.ts
@@ -2,8 +2,8 @@
  * Image Analyser class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/canvas/BlackWhiteImage.ts b/src/canvas/BlackWhiteImage.ts
@@ -2,8 +2,8 @@
  * BlackWhiteImage class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts
@@ -2,8 +2,8 @@
  * Abstract Chart class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/canvas/GrayscaleImage.ts b/src/canvas/GrayscaleImage.ts
@@ -2,8 +2,8 @@
  * GrayscaleImage class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/canvas/OriginalImage.ts b/src/canvas/OriginalImage.ts
@@ -2,8 +2,8 @@
  * OriginalImage class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/canvas/ProcessingImage.ts b/src/canvas/ProcessingImage.ts
@@ -2,8 +2,8 @@
  * ProcessingImage class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */
@@ -77,19 +77,26 @@ export class ProcessingImage extends Canvas {
     public drawImage = (bits: Array<number>, width: number, height: number): void => {
         this.getImageProcessingOptions();
 
-        let t = new Morph(width, height, bits);
+        let imageProcessing = new Morph(width, height, bits);
         this.context.createImageData(width, height);
 
-        if (this.applyErosion) {
-            t.erodeWithElement();
+        try {
+            // Avoid 'maximum call stack size exceeded'
+            // Source : https://www.hhutzler.de/blog/avoid-maximum-call-stack-size-exceeded-in-javascript/
+            setTimeout(() => {
+                if (this.applyErosion) {
+                    imageProcessing.erodeWithElement();
+                }
+                if (this.applyDilation) {
+                    imageProcessing.dilateWithElement();
+                }
+            }, 0)
+        } catch (error) {
+            alert(error);
         }
-        if (this.applyDilation) {
-            t.dilateWithElement();
-        }
-
 
         this.canvas.width = width;
         this.canvas.height = height;
-        this.getRGBValues(t.data, width, height);
+        this.getRGBValues(imageProcessing.data, width, height);
     }
 }
diff --git a/src/canvas/ResultImage.ts b/src/canvas/ResultImage.ts
@@ -2,8 +2,8 @@
  * ResultImage class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */
@@ -148,6 +148,8 @@ export class ResultImage extends Canvas {
         let correctPixels: number = 0;
         for (let pointCircle of circle.values()) {
             if (pointCircle.x + row < height && pointCircle.y + col < width) {
+                // Must equals 1 and not 0 because the image processing works with white pixels for shapes
+                // The values are inverted when Image processing is done (0 => 1; 1 => 0)
                 if (image[pointCircle.x + row][pointCircle.y + col] == 1) {
                     correctPixels++;
                 }
@@ -178,6 +180,7 @@ export class ResultImage extends Canvas {
                 // Check if circle
                 let correctPixels: number = this.countCorrectPixelsForWindow(circle, j, height, i, width, image);
 
+                // If pixels are <RATIO_DETECTION>% same with circle matrix; it is a cell !
                 if (correctPixels > circle.size * ResultImage.RATIO_DETECTION) {
                     // Check if cell is already detected
                     let containsCircle: boolean = arrayCircles.some((c: {

diff --git a/src/canvas/SpectrumChart.ts b/src/canvas/SpectrumChart.ts
@@ -2,8 +2,8 @@
  * Spectrum Chart class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/components/Slider.ts b/src/components/Slider.ts
@@ -2,8 +2,8 @@
  * Slider class
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/interfaces/CanvasI.ts b/src/interfaces/CanvasI.ts
@@ -2,8 +2,8 @@
  * Canvas list interface
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/interfaces/PointI.ts b/src/interfaces/PointI.ts
@@ -2,8 +2,8 @@
  * Point interface : Represent a point in a 2D carthesian plan
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */

diff --git a/src/interfaces/PointLineI.ts b/src/interfaces/PointLineI.ts
@@ -4,8 +4,8 @@
  * Represent a vertical line in SpectrumChart
  * 
  * @project AN2020 - Traitement d'images pour nombre de globules blancs
- * @date 2020.06.18
- * @version 2020.06.18
+ * @date 2020.06.20
+ * @version 2020.06.20
  * 
  * @author Lucas Fridez <[email protected]>
  */