From 07a12b3ef2916bd1c378ab767a8bfc978554ddb0 Mon Sep 17 00:00:00 2001 From: vaa_andrey Date: Tue, 26 Sep 2023 15:02:09 +0600 Subject: [PATCH] init commit --- .idea/.gitignore | 5 + .idea/image_anotate.iml | 12 ++ .idea/modules.xml | 8 + .idea/vcs.xml | 6 + css/style.css | 6 + index.html | 449 ++++++++++++++++++++++++++++++++++++++++ select.js | 251 ++++++++++++++++++++++ 7 files changed, 737 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/image_anotate.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 css/style.css create mode 100644 index.html create mode 100644 select.js diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/image_anotate.iml b/.idea/image_anotate.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/image_anotate.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..265e066 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7396bea --- /dev/null +++ b/css/style.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +main > .container { + padding: 70px 10px 0px 10px; +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..bbf37b6 --- /dev/null +++ b/index.html @@ -0,0 +1,449 @@ + + + + + + + + Edit thumbnail | Variance + + + + + + + + + + + + + + + + + +
+ + +
+
+
    +
  1. Home
    2. +
  2. List of uploads
    3. +
  3. Thhumbnail selection test
    4. +
+
+ +
+
+ Pi and Tau: one each + +
+
+

Thumbnail selection (test)

+

This demo page shows how the thumbnail's squared interactive selection works.

+

The square "follows" the image even when the image size changes (resize the browser's window to see the outcomes).

+ +

The coordinates of the selection change dynamically.

+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ Go to the list of uploads +
+
+
+
+
+ + + +
+ + + + + + + +
+ +
+ + + + + + + diff --git a/select.js b/select.js new file mode 100644 index 0000000..6fc36d8 --- /dev/null +++ b/select.js @@ -0,0 +1,251 @@ +var image = document.getElementById('full-image'); +var canvas = document.getElementById('canvas') + +//hidden or text inputs +var h_th_left = document.getElementById('thb_left') +var h_th_top = document.getElementById('thb_top') +var h_th_right = document.getElementById('thb_right') +var h_th_bottom = document.getElementById('thb_bottom') + +var handleRadius = 10 + +var dragTL = dragBL = dragTR = dragBR = false; +var dragWholeRect = false; + +var rect={} +var current_canvas_rect={} + +var mouseX, mouseY +var startX, startY + +var th_left = 504; +var th_top = 0; +var th_right = 3528; +var th_bottom = 3024; + +var th_width = th_right - th_left; +var th_height = th_bottom - th_top; + +var effective_image_width = 4032; +var effective_image_height = 3024; + +//drawRectInCanvas() connected functions -- START +function updateHiddenInputs(){ + var inverse_ratio_w = effective_image_width / canvas.width; + var inverse_ratio_h = effective_image_height / canvas.height ; + h_th_left.value = Math.round(rect.left * inverse_ratio_w) + h_th_top.value = Math.round(rect.top * inverse_ratio_h) + h_th_right.value = Math.round((rect.left + rect.width) * inverse_ratio_w) + h_th_bottom.value = Math.round((rect.top + rect.height) * inverse_ratio_h) +} + +function drawCircle(x, y, radius) { + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "#c757e7"; + ctx.beginPath(); + ctx.arc(x, y, radius, 0, 2 * Math.PI); + ctx.fill(); +} + +function drawHandles() { + drawCircle(rect.left, rect.top, handleRadius); + drawCircle(rect.left + rect.width, rect.top, handleRadius); + drawCircle(rect.left + rect.width, rect.top + rect.height, handleRadius); + drawCircle(rect.left, rect.top + rect.height, handleRadius); +} + + +function drawRectInCanvas() +{ + var ctx = canvas.getContext("2d"); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.beginPath(); + ctx.lineWidth = "6"; + ctx.fillStyle = "rgba(199, 87, 231, 0.2)"; + ctx.strokeStyle = "#c757e7"; + ctx.rect(rect.left, rect.top, rect.width, rect.height); + ctx.fill(); + ctx.stroke(); + drawHandles(); + updateHiddenInputs() +} +//drawRectInCanvas() connected functions -- END + +function mouseUp(e) { + dragTL = dragTR = dragBL = dragBR = false; + dragWholeRect = false; +} + +//mousedown connected functions -- START +function checkInRect(x, y, r) { + return (x>r.left && x<(r.width+r.left)) && (y>r.top && y<(r.top+r.height)); +} + +function checkCloseEnough(p1, p2) { + return Math.abs(p1 - p2) < handleRadius; +} + +function getMousePos(canvas, evt) { + var clx, cly + if (evt.type == "touchstart" || evt.type == "touchmove") { + clx = evt.touches[0].clientX; + cly = evt.touches[0].clientY; + } else { + clx = evt.clientX; + cly = evt.clientY; + } + var boundingRect = canvas.getBoundingClientRect(); + return { + x: clx - boundingRect.left, + y: cly - boundingRect.top + }; +} + +function mouseDown(e) { + var pos = getMousePos(this,e); + mouseX = pos.x; + mouseY = pos.y; + // 0. inside movable rectangle + if (checkInRect(mouseX, mouseY, rect)){ + dragWholeRect=true; + startX = mouseX; + startY = mouseY; + } + // 1. top left + else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top)) { + dragTL = true; + } + // 2. top right + else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top)) { + dragTR = true; + } + // 3. bottom left + else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top + rect.height)) { + dragBL = true; + } + // 4. bottom right + else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top + rect.height)) { + dragBR = true; + } + // (5.) none of them + else { + // handle not resizing + } + drawRectInCanvas(); +} +//mousedown connected functions -- END + +function mouseMove(e) { + var pos = getMousePos(this,e); + mouseX = pos.x; + mouseY = pos.y; + if (dragWholeRect) { + e.preventDefault(); + e.stopPropagation(); + dx = mouseX - startX; + dy = mouseY - startY; + if ((rect.left+dx)>0 && (rect.left+dx+rect.width)0 && (rect.top+dy+rect.height)150){ + rect.left = rect.left + rect.width - newSide; + rect.top = rect.height + rect.top - newSide; + rect.width = rect.height = newSide; + } + } else if (dragTR) { + e.preventDefault(); + e.stopPropagation(); + var newSide = (Math.abs(mouseX-rect.left)+Math.abs(rect.height + rect.top - mouseY))/2; + if (newSide>150){ + rect.top = rect.height + rect.top - newSide; + rect.width = rect.height = newSide; + } + } else if (dragBL) { + e.preventDefault(); + e.stopPropagation(); + var newSide = (Math.abs(rect.left+rect.width - mouseX)+Math.abs(rect.top - mouseY))/2; + if (newSide>150) + { + rect.left = rect.left + rect.width - newSide; + rect.width = rect.height = newSide; + } + } else if (dragBR) { + e.preventDefault(); + e.stopPropagation(); + var newSide = (Math.abs(rect.left - mouseX)+Math.abs(rect.top - mouseY))/2; + if (newSide>150) + { + rect.width = rect.height = newSide; + } + } + drawRectInCanvas(); +} + +function updateCurrentCanvasRect(){ + current_canvas_rect.height = canvas.height + current_canvas_rect.width = canvas.width + current_canvas_rect.top = image.offsetTop + current_canvas_rect.left = image.offsetLeft +} + +function repositionCanvas(){ + //make canvas same as image, which may have changed size and position + canvas.height = image.height; + canvas.width = image.width; + canvas.style.top = image.offsetTop + "px";; + canvas.style.left = image.offsetLeft + "px"; + //compute ratio comparing the NEW canvas rect with the OLD (current) + var ratio_w = canvas.width / current_canvas_rect.width; + var ratio_h = canvas.height / current_canvas_rect.height; + //update rect coordinates + rect.top = rect.top * ratio_h; + rect.left = rect.left * ratio_w; + rect.height = rect.height * ratio_h; + rect.width = rect.width * ratio_w; + updateCurrentCanvasRect(); + drawRectInCanvas(); +} + +function initCanvas(){ + canvas.height = image.height; + canvas.width = image.width; + canvas.style.top = image.offsetTop + "px";; + canvas.style.left = image.offsetLeft + "px"; + updateCurrentCanvasRect(); +} + +function initRect(){ + var ratio_w = canvas.width / effective_image_width; + var ratio_h = canvas.height / effective_image_height; + //BORDER OF SIZE 6! + rect.height = th_height*ratio_h-6 + rect.width = th_width*ratio_w-6 + rect.top = th_top*ratio_h+3 + rect.left = th_left*ratio_w+3 +} + +function init(){ + canvas.addEventListener('mousedown', mouseDown, false); + canvas.addEventListener('mouseup', mouseUp, false); + canvas.addEventListener('mousemove', mouseMove, false); + canvas.addEventListener('touchstart', mouseDown); + canvas.addEventListener('touchmove', mouseMove); + canvas.addEventListener('touchend', mouseUp); + initCanvas(); + initRect(); + drawRectInCanvas(); +} + +window.addEventListener('load',init) +window.addEventListener('resize',repositionCanvas) + +//