kamo
/
collecting-labels
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
master
km0 3 years ago
parent dd57aea261
commit 533234ac68
7 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/map_description_H.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
assets/map_description_V.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

19
index.html
Unescape Escape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="session.js" defer></script>
<script src="labels.js" defer></script> <script src="labels.js" defer></script>
<script src="picture.js" defer></script> <script src="picture.js" defer></script>
<script src="panels.js" defer></script> <script src="panels.js" defer></script>
@ -16,8 +16,7 @@
<body> <body>
<main id="container"> <main id="container">
<figure class="background-container"> <figure class="background-container">
<input type="file" /> <img id="background-image" draggable="false" src="./assets/map_description_H.jpg" />
<img id="background-image" draggable="false" src="#" />
</figure> </figure>
<div id="editor"></div> <div id="editor"></div>
<div class="text-input"> <div class="text-input">
@ -37,18 +36,8 @@
<button class="close">X</button> <button class="close">X</button>
<h1 class="title">Concrete 🎏 Label</h1> <h1 class="title">Concrete 🎏 Label</h1>
<p> <p>
How could computer read concrete & visual poetry? How does computer navigate through What do we need to know: - text labels-contents - order - position - size - who
text objects in which layout and graphical elements play a fundamental role? wrote it ? (random id? name? nothing at all?) - timestamp ? -
</p>
<p>
With this tool you can upload an image and then annotate it spatially. In doing so
you generate a transcription of the image that keeps track of the order of your
annotations (and so the visual path you take when reading the image), as well as
their position and size. (wip 👹)
</p>
<p>
Neither the image nor the labels nor the transcription will be uploaded online.
Everything happen in your browser.
</p> </p>
</aside> </aside>
<aside class="transcription" id="transcription-panel"> <aside class="transcription" id="transcription-panel">

20
labels.js
Unescape Escape View File

@ -9,6 +9,8 @@ const cancel = document.getElementById("cancel");
// List of labels // List of labels
let labels = []; let labels = [];
let labelsObj = [];
let closing = false; let closing = false;
// Start is where the mouse is pressed, End is where the mouse is released // Start is where the mouse is pressed, End is where the mouse is released
@ -132,6 +134,24 @@ function drawLabel() {
text.innerHTML = input.value; text.innerHTML = input.value;
label.appendChild(text); label.appendChild(text);
let labelObj = {
position: {
x: minX,
y: minY,
},
size: {
width: width,
height: height,
},
index: labels.length,
text: input.value,
timestap: Date.now(),
userID: userID,
};
console.log(labelObj);
labelsObj.push(labelObj);
labels.push(label); labels.push(label);
container.appendChild(label); container.appendChild(label);
createLabelTranscription(label); createLabelTranscription(label);

34
picture.js
Unescape Escape View File

@ -1,25 +1,25 @@
let fileName = ""; // let fileName = "";
window.addEventListener("load", function () { // window.addEventListener("load", function () {
let input = document.querySelector('input[type="file"]'); // let input = document.querySelector('input[type="file"]');
input.addEventListener("change", function () { // input.addEventListener("change", function () {
if (this.files && this.files[0]) { // if (this.files && this.files[0]) {
fileName = this.files[0].name; // fileName = this.files[0].name;
let img = document.querySelector("img"); // let img = document.querySelector("img");
img.onload = () => { // img.onload = () => {
img.classList.add("visible"); // img.classList.add("visible");
input.classList.add("hidden"); // input.classList.add("hidden");
URL.revokeObjectURL(img.src); // no longer needed, free memory // URL.revokeObjectURL(img.src); // no longer needed, free memory
}; // };
img.src = URL.createObjectURL(this.files[0]); // set src to blob url // img.src = URL.createObjectURL(this.files[0]); // set src to blob url
} // }
}); // });
}); // });
const imageButton = document.getElementById("show-image"); const imageButton = document.getElementById("show-image");
imageButton.addEventListener("click", (e) => { imageButton.addEventListener("click", (e) => {
let img = document.querySelector("img"); let img = document.querySelector("img");
img.classList.toggle("visible"); img.classList.toggle("hidden");
}); });

1
session.js
Unescape Escape View File

@ -0,0 +1 @@
const userID = Math.round(Math.random() * 10000000000);

1
style.css
Unescape Escape View File

@ -143,7 +143,6 @@ body {
} }
.background-container img { .background-container img {
display: none;
max-width: 70w; max-width: 70w;
max-height: 70vh; max-height: 70vh;
object-fit: contain; object-fit: contain;

Write Preview
Loading…
Cancel
Save