init

3 years ago · 533234ac68
parent dd57aea261
commit 533234ac68
7 changed files with 42 additions and 33 deletions
--- a/assets/map_description_H.jpg
+++ b/assets/map_description_H.jpg
--- a/assets/map_description_V.jpg
+++ b/assets/map_description_V.jpg
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<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="picture.js" defer></script>
 		<script src="panels.js" defer></script>
@ -16,8 +16,7 @@
 	<body>
 		<main id="container">
 			<figure class="background-container">
-				<input type="file" />
-				<img id="background-image" draggable="false" src="#" />
+				<img id="background-image" draggable="false" src="./assets/map_description_H.jpg" />
 			</figure>
 			<div id="editor"></div>
 			<div class="text-input">
@ -37,18 +36,8 @@
 			<button class="close">X</button>
 			<h1 class="title">Concrete 🎏 Label</h1>
 			<p>
-				How could computer read concrete & visual poetry? How does computer navigate through
-				text objects in which layout and graphical elements play a fundamental role?
-			</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.
+				What do we need to know: - text labels-contents - order - position - size - who
+				wrote it ? (random id? name? nothing at all?) - timestamp ? -
 			</p>
 		</aside>
 		<aside class="transcription" id="transcription-panel">
--- a/labels.js
+++ b/labels.js
@ -9,6 +9,8 @@ const cancel = document.getElementById("cancel");

 // List of labels
 let labels = [];
+let labelsObj = [];
+
 let closing = false;

 // Start is where the mouse is pressed, End is where the mouse is released
@ -132,6 +134,24 @@ function drawLabel() {
 			text.innerHTML = input.value;
 			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);
 			container.appendChild(label);
 			createLabelTranscription(label);
--- a/picture.js
+++ b/picture.js
@ -1,25 +1,25 @@
-let fileName = "";
+// let fileName = "";

-window.addEventListener("load", function () {
-	let input = document.querySelector('input[type="file"]');
-	input.addEventListener("change", function () {
-		if (this.files && this.files[0]) {
-			fileName = this.files[0].name;
-			let img = document.querySelector("img");
-			img.onload = () => {
-				img.classList.add("visible");
-				input.classList.add("hidden");
-				URL.revokeObjectURL(img.src); // no longer needed, free memory
-			};
+// window.addEventListener("load", function () {
+// 	let input = document.querySelector('input[type="file"]');
+// 	input.addEventListener("change", function () {
+// 		if (this.files && this.files[0]) {
+// 			fileName = this.files[0].name;
+// 			let img = document.querySelector("img");
+// 			img.onload = () => {
+// 				img.classList.add("visible");
+// 				input.classList.add("hidden");
+// 				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");

 imageButton.addEventListener("click", (e) => {
 	let img = document.querySelector("img");
-	img.classList.toggle("visible");
+	img.classList.toggle("hidden");
 });
--- a/session.js
+++ b/session.js
@ -0,0 +1 @@
+const userID = Math.round(Math.random() * 10000000000);
--- a/style.css
+++ b/style.css
@ -143,7 +143,6 @@ body {
 }

 .background-container img {
-	display: none;
 	max-width: 70w;
 	max-height: 70vh;
 	object-fit: contain;
				`@ -0,0 +1 @@`
				`const userID = Math.round(Math.random() * 10000000000);`