Skip to content
Snippets Groups Projects
Commit 08f9feb6 authored by Laurent Knoll's avatar Laurent Knoll
Browse files

Nettoyage première démo

parent 056cb9bc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 290 deletions
index.old.html deleted 100644 → 0
+ 0
− 290
View file @ 056cb9bc
<!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>&nbsp;pixels par cm²</dd>
<dt class="col-sm-6">Surface du blob</dt>
<dd class="col-sm-6"><span id="bl-area">...</span>&nbsp;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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment