diff --git a/index.old.html b/index.old.html
deleted file mode 100644
index ed3be198ba898367e019c1b29f1500105923b2d3..0000000000000000000000000000000000000000
--- a/index.old.html
+++ /dev/null
@@ -1,290 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr" xmlns="http://www.w3.org/1999/html">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title><%= htmlWebpackPlugin.options.title %></title>
-
-<!--<style>-->
-<!-- /* Scale canvas with resize attribute to full size */-->
-<!-- canvas[resize] {-->
-<!-- width: 100%;-->
-<!-- height: 100%;-->
-<!-- }-->
-<!--</style>-->
-</head>
-<body>
-<div id="lab"></div>
-<div class="container-fluid vh-100">
-
- <!--<div class="container-fluid">-->
- <div class="row h-100">
- <div class="col overflow-hidden">
- <canvas id="bl-canvas" class="h-100 w-100" resize="false" oncontextmenu="return false;"></canvas>
- </div>
- <div class="col-md-4 border-2">
- <div class="mb-3">
- <div class="card mb-2">
- <div class="card-body">
- <div class="mb-3">
- <label for="bl-picture-file" class="form-label"><i class="fa-solid fa-1 me-1 text-primary"></i>Charger une photo de blob</label>
- <input class="form-control" type="file" id="bl-picture-file">
- </div>
- <p><i class="fa-solid fa-circle-info me-1 text-black-50"></i>Roulette : zoomer. Shift + Click : déplacer la photographie.</p>
- <button id="bl-fit-view" type="button" class="btn btn-primary">Recentrer</button>
- <button id="bl-reset-view" type="button" class="btn btn-primary">1:1</button>
- </div>
- </div>
- <div class="card mb-2">
- <div class="card-body">
- <p><i class="fa-solid fa-2 me-1 text-primary"></i>Ajuster la règle (couvrir 9 cm).</p>
- </div>
- </div>
- <div class="card mb-2">
- <div class="card-body">
- <p><i class="fa-solid fa-3 me-1 text-primary"></i>Entourer le blob en dessinant avec la souris.</p>
- <button id="bl-undo-blob" type="button" class="btn btn-primary"><i class="fa-solid fa-arrow-left"></i></button>
- <button id="bl-clear-blob" type="button" class="btn btn-primary">Effacer tout</button>
- </div>
- </div>
-
- <div class="card mb-2">
- <div class="card-body">
- <p><i class="fa-solid fa-calculator me-1 text-black-50"></i>Analyse</p>
- <dl class="row">
- <dt class="col-sm-6">Résolution</dt>
- <dd class="col-sm-6"><span id="bl-resolution">...</span> pixels par cm²</dd>
- <dt class="col-sm-6">Surface du blob</dt>
- <dd class="col-sm-6"><span id="bl-area">...</span> cm²</dd>
- </dl>
- <button id="bl-download-mask" type="button" class="btn btn-primary">Télécharger le masque</button>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- <!--</div>-->
-
-</div>
-<script>
- function Ruler(raster) {
- let that = this;
- this.handleCircle1 = new paper.Path.Circle(new Point(raster.position.x - raster.image.naturalWidth * 0.4, raster.position.y), 20);
- this.handleCircle1.fillColor = "red";
- this.handleCircle2 = new paper.Path.Circle(new Point(raster.position.x + raster.image.naturalWidth * 0.4, raster.position.y), 20);
- this.handleCircle2.fillColor = "red";
- let onMouseDrag = function(event) {
- event.target.position = event.target.position.add(event.delta);
- that.refresh();
- }
- this.handleCircle1.onMouseDrag = onMouseDrag;
- this.handleCircle2.onMouseDrag = onMouseDrag;
- this.rulerGroup = new paper.Group();
- this.tickCount = 9;
- this.resolution = NaN;
- this.clear = function () {
- this.handleCircle1.remove();
- this.handleCircle2.remove();
- this.rulerGroup.remove();
- };
- this.refresh = function () {
- this.rulerGroup.remove();
- this.rulerGroup = new paper.Group();
- let mainLine = new paper.Path.Line(this.handleCircle1.position, this.handleCircle2.position);
- this.rulerGroup.addChild(mainLine);
-
- let vector = this.handleCircle2.position.subtract(this.handleCircle1.position);
- for (let i = 1; i < this.tickCount; i++) {
- let tickCircle = new paper.Path.Circle(this.handleCircle1.position.add(vector.multiply(i / this.tickCount)), 10);
- this.rulerGroup.addChild(tickCircle);
- }
- this.rulerGroup.strokeWidth = 5;
- this.rulerGroup.strokeColor = 'red';
- this.resolution = Math.round(Math.pow(vector.length / this.tickCount, 2));
- paper.view.draw();
- this.onChange();
- };
- this.hide = function () {
- this.rulerGroup.visible = false;
- this.handleCircle1.visible = false;
- this.handleCircle2.visible = false;
- }
- this.show = function () {
- this.rulerGroup.visible = true;
- this.handleCircle1.visible = true;
- this.handleCircle2.visible = true;
- }
- this.onChange = function() { };
- this.refresh();
- };
-
- // Only executed our code once the DOM is ready.
- window.onload = function() {
- // Get a reference to the canvas object
- let canvas = document.getElementById('bl-canvas');
-
- // Create an empty project and a view for the canvas:
- // paper.install(window);
- // paper.setup(canvas);
-
- // let tool = new Tool();
-
- // Contient la photo
- let raster = null;
-
- // Blob path
- let blobPath = null;
-
- // La règle
- let ruler = null;
-
- // Recentrer la vue
- let fitWiew = function () {
- paper.view.center = raster.position;
- let xZoomFactor = Math.min(1, canvas.width / raster.image.naturalWidth);
- let yZoomFactor = Math.min(1, canvas.height / raster.image.naturalHeight);
- paper.view.zoom = Math.min(xZoomFactor, yZoomFactor);
- paper.view.draw();
- }
-
- // Taille 1:1
- let resetView = function () {
- paper.view.center = raster.position;
- paper.view.zoom = 1.0;
- paper.view.draw();
- }
-
- let undoBlobPath = function () {
- if(blobPath != null && blobPath.segments.length > 0) {
- blobPath.removeSegments(Math.max(blobPath.segments.length - 5, 0));
- }
- }
-
- let updateMeasures = function () {
- document.getElementById("bl-resolution").innerText = ruler.resolution;
- document.getElementById("bl-area").innerText = (Math.round(100 * Math.abs(blobPath.area / ruler.resolution)) / 100).toString();
- }
-
- let downloadMask = function () {
- ruler.hide();
- let mask = blobPath.clone();
- mask.fillColor = "black";
- mask.strokeColor = "black";
- blobPath.visible = false;
- raster.visible = false;
-
- paper.view.draw();
-
- let anchor = document.createElement("a");
- anchor.href = canvas.toDataURL("image/png");
- anchor.download = "mask.png";
- anchor.click();
-
- ruler.show();
- mask.remove();
- blobPath.visible = true;
- raster.visible = true;
-
- paper.view.draw();
- }
-
-
- // Ajout de l'intéractivité
-
- document.getElementById("bl-fit-view").addEventListener("click", (event) => {
- fitWiew();
- });
- document.getElementById("bl-reset-view").addEventListener("click", (event) => {
- resetView();
- });
- document.getElementById("bl-clear-blob").addEventListener("click", (event) => {
- if(blobPath != null) {
- blobPath.removeSegments();
- }
- });
- document.getElementById("bl-undo-blob").addEventListener("click", (event) => {
- undoBlobPath();
- });
-
- document.getElementById("bl-canvas").addEventListener('wheel', (event) => {
- var newZoom = paper.view.zoom;
- var oldZoom = paper.view.zoom;
-
- if (event.deltaY > 0) {
- newZoom = paper.view.zoom * 0.95;
- } else {
- newZoom = paper.view.zoom * 1.05;
- }
-
- var beta = oldZoom / newZoom;
-
- var mousePosition = new paper.Point(event.offsetX, event.offsetY);
-
- //viewToProject: gives the coordinates in the Project space from the Screen Coordinates
- var viewPosition = paper.view.viewToProject(mousePosition);
-
- var mpos = viewPosition;
- var ctr = paper.view.center;
-
- var pc = mpos.subtract(ctr);
- var offset = mpos.subtract(pc.multiply(beta)).subtract(ctr);
-
- paper.view.zoom = newZoom;
- paper.view.center = paper.view.center.add(offset);
-
- event.preventDefault();
- paper.view.draw();
- });
-
- tool.onMouseDrag = function(event) {
- if(event.modifiers.shift) { // SHIFT => déplacer la photo
- var pan_offset = event.point.subtract(event.downPoint);
- paper.view.center = paper.view.center.subtract(pan_offset);
- }
- event.preventDefault();
- }
-
- document.getElementById("bl-picture-file").onchange = (e) => {
- const img = new Image();
- img.src = URL.createObjectURL(e.target.files[0]);
- img.onload = function () {
- if(raster != null) {
- raster.remove();
- }
- raster = new paper.Raster();
- raster.image = img;
- raster.bounds.point = new paper.Point(0, 0);
- raster.smoothing = 'off';
-
- if(blobPath != null) {
- blobPath.remove();
- }
- blobPath = new paper.Path();
- blobPath.strokeColor = "yellow";
- blobPath.strokeWidth = 5;
- raster.onMouseDrag = function (event) {
- if (!event.modifiers.shift) { // Epêche de dessiner lors du déplacement de la vue
- blobPath.add(event.point);
- blobPath.smooth({ type: 'continuous' });
- updateMeasures();
- }
- }
- fitWiew();
- ruler = new Ruler(raster);
- ruler.onChange = function() {
- updateMeasures();
- }
- updateMeasures();
- }
- };
-
- document.getElementById("bl-download-mask").addEventListener("click", (event) => {
- downloadMask();
- });
- }
-
-</script>
-
-</body>
-</html>
\ No newline at end of file