refactor(all): clean code

README.md

@@ -78,17 +78,19 @@ Texts can be override by passing a translation object to the initAsync method.
 
 ```javascript
 const translations = {
-    'sc-modal-video__title' : 'Positionner 5 secondes votre document dans le cadre',
-    'sc-modal-video__invert-camera' : "Inverser caméra",
-    'sc-modal-video__message-too-dark' : "Image trop sombre",
-    'sc-modal-video__quit' : "X",
-    'sc-modal-confirm__loading' : "Traitement en cours...",
-    'sc-modal-confirm__title':"Es-ce que tous les champs sont parfaitement lisibles ?",
-    'sc-modal-confirm__button--cancel':"Non",
-    'sc-modal-confirm__button--ok':"Oui",
-    'sc-modal-confirm__title--error':"Votre document n'a pas été bien détecté, veuillez réessayer",
-    'sc-modal-confirm__button--error': "Réessayer",
-}
+    'sc-modal__video-title' : 'Positionner 5 secondes votre document dans le cadre',
+    'sc-modal__video-invert-camera' : "Inverser caméra",
+    'sc-modal__video-message-too-dark' : "Image trop sombre",
+    'sc-modal__video-quit' : "X",
+    'sc-modal__confirm-loading' : "Traitement en cours...",
+    'sc-modal__confirm-title':"Est-ce que tous les champs sont parfaitement lisibles ?",
+    'sc-modal__confirm-button--ko':"Non",
+    'sc-modal__confirm-button--ok':"Oui",
+    'sc-modal__error-title': "Une erreur est survenue",
+    'sc-modal__error-button--restart': "Recommencer",
+    'sc-modal__error-button--quit': "Quitter",
+};
+
 
 const onChange = async event => {
     // ...
@@ -107,7 +109,7 @@ css use BEM (Block Element Modifier) convention.
    const video = await sligthCapture.loadVideoAsync()(file: file, onCaptureCallback: onCapture, enableDefaultCss: false);
    disable default inline css by passing enableDefaultCss: false to take the control of the css 
 */
-.sc-modal-video {
+.sc-modal {
   position: fixed;
   z-index: 10000000;
   padding-top: 0;
@@ -120,20 +122,20 @@ css use BEM (Block Element Modifier) convention.
   text-align:center;
 }
 
-.sc-modal-video__title {
+.sc-modal__video-title {
   padding-left: 0.5em;
   padding-right: 0.5em;
 }
 
-.sc-modal-video__invert-camera {
+.sc-modal__video-invert-camera {
   padding: 0.5em;
   font-size: 1em;
   margin: 1em;
   position:absolute;
   background-color:#a8a8a88f;
 }
 
-.sc-modal-video__quit {
+.sc-modal__video-quit {
   padding: 0.3em;
   font-size: 1em;
   margin: 1em;
@@ -142,13 +144,13 @@ css use BEM (Block Element Modifier) convention.
   right: 0;
 }
 
-.sc-modal-video__video {
+.sc-modal__video-video {
   display: inline;
   width: 100%;
 }
 
-.sc-modal-confirm {
-  position: fixed;
+.sc-modal__confirm-container {
+  position: absolute;
   z-index: 100000000;
   padding-top: 0;
   left: 0;
@@ -160,37 +162,63 @@ css use BEM (Block Element Modifier) convention.
   text-align:center;
 }
 
-.sc-modal-confirm__loading {
+.sc-modal__confirm-loading {
 
 }
 
-.sc-modal-confirm__title {
+.sc-modal__confirm-title {
 
 }
 
-.sc-modal-confirm__image {
+.sc-modal__confirm-image {
   max-width: 800px;
   width: 100%;
 }
 
-.sc-modal-confirm__button-container {
+.sc-modal__confirm-button-container {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.sc-modal-confirm__button {
+.sc-modal__confirm-button {
   padding: 0.5em;
   font-size: 2em;
   margin: 1em;
 }
 
-.sc-modal-confirm__title-error{
-  padding: 0.5em;
-  font-size: 2em;
-  margin: 1em;
+
+
+.sc-modal__error-container {
+    position: absolute;
+    z-index: 100000000;
+    padding-top: 0;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: auto;
+    background-color: white;
+    text-align:center;
 }
 
+.sc-modal__error-title {
+
+}
+
+.sc-modal__error-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sc-modal__error-button {
+    padding: 0.5em;
+    font-size: 2em;
+    margin: 1em;
+}
+
+
 ```
 
 ## Contribute

src/SlightCapture/blob.js

@@ -0,0 +1,20 @@
+export function base64ToBlob(base64String) {
+    const arr = base64String.split(',');
+    const mime = arr[0].match(/:(.*?);/)[1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+
+    return new Blob([u8arr], { type: mime });
+}
+
+export const blobToBase64Async = file => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+});

src/SlightCapture/image.js

@@ -120,16 +120,3 @@ export const cropImage = (cv) => (img, xmin, ymin, witdh, height) => {
     return img.roi(rect);
 }
 
-export function base64ToBlob(base64String) {
-    const arr = base64String.split(',');
-    const mime = arr[0].match(/:(.*?);/)[1];
-    const bstr = atob(arr[1]);
-    let n = bstr.length;
-    const u8arr = new Uint8Array(n);
-
-    while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-    }
-
-    return new Blob([u8arr], { type: mime });
-}

src/SlightCapture/index.js

@@ -3,6 +3,6 @@
 
 import { sligthCaptureFactory} from "./video.js";
 
-export {blobToBase64Async} from "./template.js";
+export {blobToBase64Async} from "./blob.js";
 export default sligthCaptureFactory;
 

src/SlightCapture/template.js

@@ -3,14 +3,6 @@ import {computeAndComputeHomographyRectangle} from "./featureMatching.js";
 import {cropContours, findContours} from "./contours.js";
 import {autoAdjustBrightness} from "./templateMatching.js";
 
-
-export const blobToBase64Async = file => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-});
-
 function drawLinesInsideBlackImage(cv, imgCvCopy, lines, ratio) {
     let blackImage = new cv.Mat(imgCvCopy.rows, imgCvCopy.cols, imgCvCopy.type(), new cv.Scalar());
     let i = 0;

src/SlightCapture/templateMatching.js

@@ -1,4 +1,5 @@
-
+import {imageResize} from "./image.js";
+
 export const autoAdjustBrightness = (cv) => (image, minimumBrightness=0.8) => {
     let brightness = 0;
     const src = image;
@@ -79,4 +80,17 @@ export const findMatch = (cv) => (template, image, isDrawRectangle = true) => {
      },
      currentPoints
  };
+}
+
+export const applyTemplateMatching = (cv) => async (imageCvTemplate, imgCv) => {
+    try {
+        if (imgCv === null) return;
+        const imd = imageResize(cv)(imgCv, 100);
+        const imgCvTemplateResized = imd.image;
+        const {image: imageCv, targetPoints, currentPoints, autoAdjustBrightnessRatio} = findMatch(cv)(imageCvTemplate, imgCvTemplateResized);
+        return {imageCv, targetPoints, currentPoints, autoAdjustBrightnessRatio};
+    } catch (e) {
+        console.log(e)
+        return null;
+    }
 }