master
km0 3 years ago
parent dd57aea261
commit 533234ac68

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

@ -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">

@ -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);

@ -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");
}); });

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

@ -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;

Loading…
Cancel
Save