tforgione/annotator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better UI

Browse Source
This commit is contained in:
Thomas Forgione
2023-02-23 16:04:55 +01:00
parent 51fc44a60c
commit 0e27037736
2 changed files with 152 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/annotator.html
+79 -10
View File
@@ -7,6 +7,13 @@
font-family: sans-serif;
}
.main {
position: fixed;
width: calc(90vw - 20px);
left: calc(10vw + 20px);
right: 0px;
}
.centered {
margin-left: auto;
margin-right: auto;
@@ -20,6 +27,13 @@
box-sizing: border-box;
}
.column10 {
display: inline-block;
width: 10vw;
padding: 5px;
box-sizing: border-box;
}
.row:after {
content: "";
display: table;
@@ -31,23 +45,78 @@
max-height: 100%;
}
.selected {
border-style: solid;
border-width: 2px;
border-color: red;
}
.notselected {
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0);
}
#annotations {
margin-left: 20px;
height: auto;
}
#navbar {
position: fixed;
border-right: solid;
border-width: 1px;
height: 100vh;
left: 0;
overflow-y: scroll;
width: 10%;
padding: 10px;
}
table, th, td {
border: 1px solid black;
}
td {
text-align: center;
padding: 5px;
}
p {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1 class="centered">Annotator</h1>
<div class="row">
<div class="column">
<h2 class="centered">Previous frame (<span id="img-1-index">1</span>)</h2>
<img id="img-1">
<div id="navbar" class="row"></div>
<div class="main">
<h1 class="centered">Annotator</h1>
<div class="row">
<div class="column">
<h2 class="centered">Previous frame (<span id="img-1-index">1</span>)</h2>
<img class="notselected" id="img-1">
</div>
<div class="column">
<h2 class="centered">Current frame (<span id="img-2-index">2</span>)</h2>
<img class="selected" id="img-2">
</div>
</div>
<div class="column">
<h2 class="centered">Current frame (<span id="img-2-index">2</span>)</h2>
<img id="img-2">
<h3>Annotations:</h3>
<div id="annotations">
<div class="row">
<div class="column">
<h3 class="centered">Shorcuts:</h3>
<table id="shortcuts" class="centered">
<tr id="shortcuts-index">
</tr>
<tr id="shortcuts-value">
</tr>
</table>
</div>
<div class="column">
<h3>Annotations:</h3>
<div id="annotations">
</div>
</div>
</div>
</div>