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

side panel

Browse Source
master
km0 3 years ago
parent e8afdfdfc8
commit 055b47e92b
3 changed files with 104 additions and 3 deletions
Show Stats Download Patch File Download Diff File

25
index.html
Unescape Escape View File

@ -4,13 +4,16 @@
<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="labels.js" defer></script> <script src="labels.js" defer></script>
<script src="picture.js" defer></script> <script src="picture.js" defer></script>
<script src="panel.js" defer></script>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>Concrete Label</title> <title>Concrete Label</title>
</head> </head>
<body> <body>
<div id="container"> <main id="container">
<figure class="background-container"> <figure class="background-container">
<input type="file" /> <input type="file" />
<img id="background-image" draggable="false" src="#" /> <img id="background-image" draggable="false" src="#" />
@ -23,6 +26,24 @@
<button id="cancel">x</button> <button id="cancel">x</button>
</form> </form>
</div> </div>
</div> </main>
<button id="show-info">?</button>
<aside class="info" id="info-panel">
<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.
</p>
</aside>
</body> </body>
</html> </html>

14
panel.js
Unescape Escape View File

@ -0,0 +1,14 @@
const showInfo = document.getElementById("show-info");
const infoPanel = document.getElementById("info-panel");
showInfo.addEventListener("click", (e) => {
if (infoPanel.classList.contains("active")) {
infoPanel.classList.remove("active");
showInfo.classList.remove("active");
showInfo.innerHTML = "?";
} else {
infoPanel.classList.add("active");
showInfo.classList.add("active");
showInfo.innerHTML = "X";
}
});

68
style.css
Unescape Escape View File

@ -2,6 +2,8 @@ html,
body { body {
margin: 0; margin: 0;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
width: 100%;
overflow: hidden;
} }
#container { #container {
@ -88,7 +90,6 @@ body {
z-index: 200; z-index: 200;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
/* display: flex; */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -155,3 +156,68 @@ body {
.hidden { .hidden {
display: none; display: none;
} }
.info {
position: absolute;
right: 0;
bottom: 0;
top: 0;
z-index: 50;
padding: 24px;
margin: 0;
width: 25%;
line-height: 1.6;
background-color: #111;
color: white;
transform: translateX(100%);
transition: transform 0.4s ease-out;
}
.info.active {
transform: translateX(0);
transition: transform 0.4s ease-in;
}
.info .title {
margin: 0;
}
#show-info {
position: absolute;
top: 24px;
right: 24px;
z-index: 100;
background: none;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid currentColor;
color: tomato;
cursor: pointer;
}
#show-info:hover {
border: 1px solid tomato;
background-color: tomato;
color: white;
}
#show-info.active {
color: white;
}
#show-info:hover.active {
border: 1px solid white;
background-color: white;
color: #111;
}

Write Preview
Loading…
Cancel
Save