Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Different Colors and Copy Pasting #27

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Different Colors and Copy Pasting #27

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dbef71e
PR#18: Intercept reloading with confirmation box
wasifmehmood Sep 23, 2023
82de67b
PR#24: Edit segmentation in function listenBboxCocoSave
wasifmehmood Sep 23, 2023
57c284f
similar bgcolor for the same class is implemented for all images.
wasifmehmood Sep 23, 2023
362713a
copy/paste bbox with ctrl c and v
wasifmehmood Sep 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 35 additions & 4 deletions ybat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
let images = {}
let classes = {}
let bboxes = {}
const bboxBgColorStore = new Map();

const extensions = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"]

Expand Down Expand Up @@ -85,6 +86,10 @@
alert("Restore function is not supported. If you need it, use Chrome or Firefox instead.")
}

window.onbeforeunload = function(){
return 'Are you sure you want to leave the page?';
};

// Start everything
document.onreadystatechange = () => {
if (document.readyState === "complete") {
Expand Down Expand Up @@ -156,10 +161,15 @@

for (let className in currentBboxes) {
currentBboxes[className].forEach(bbox => {
if(!bboxBgColorStore.has(bbox.class)) {
bboxBgColorStore.set(bbox.class, bbox?.bgColor);
}
setFontStyles(context, bbox.marked)
context.fillText(className, zoomX(bbox.x), zoomY(bbox.y - 2))
if (currentBbox !== null && currentBbox.index === i && bbox.marked) {
context.fillText(className, zoomX(bbox.x), zoomY(bbox.y - 2))
}

setBBoxStyles(context, bbox.marked)
setBBoxStyles(context, bbox.marked, bboxBgColorStore.get(bbox.class))
context.strokeRect(zoomX(bbox.x), zoomY(bbox.y), zoom(bbox.width), zoom(bbox.height))
context.fillRect(zoomX(bbox.x), zoomY(bbox.y), zoom(bbox.width), zoom(bbox.height))

Expand Down Expand Up @@ -1148,12 +1158,12 @@
for (let i = 0; i < bboxes[imageName][className].length; i++) {
const bbox = bboxes[imageName][className][i]

const segmentation = [
const segmentation = [[
bbox.x, bbox.y,
bbox.x, bbox.y + bbox.height,
bbox.x + bbox.width, bbox.y + bbox.height,
bbox.x + bbox.width, bbox.y
]
]]

result.annotations.push({
segmentation: segmentation,
Expand Down Expand Up @@ -1191,10 +1201,31 @@
const listenKeyboard = () => {
const imageList = document.getElementById("imageList")
const classList = document.getElementById("classList")
let copiedBbox;

document.addEventListener("keydown", (event) => {
const key = event.keyCode || event.charCode

// Copying event capture
if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
if(!currentBbox) return;

copiedBbox = {...currentBbox.bbox}
copiedBbox.marked = false;
}

// Pasting event capture
if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
if(!copiedBbox) return;

copiedBbox.x = mouse.realX
copiedBbox.y = mouse.realY
if(!bboxes[currentImage.name] || !bboxes[currentImage.name][copiedBbox.class]) {
bboxes[currentImage.name] = {...bboxes[currentImage.name], [copiedBbox.class]: []}
}
bboxes[currentImage.name][copiedBbox.class].push({...copiedBbox})
}

if (key === 46 || (key === 8 && event.metaKey === true)) {
if (currentBbox !== null) {
bboxes[currentImage.name][currentBbox.bbox.class].splice(currentBbox.index, 1)
Expand Down