2022-01-19 10:55:30 +01:00
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Annotations</title>
|
2022-05-30 15:02:28 +02:00
|
|
|
<link rel="stylesheet" href="svganim.css">
|
2022-01-19 10:55:30 +01:00
|
|
|
<style>
|
|
|
|
|
body {
|
2022-05-30 15:02:28 +02:00
|
|
|
background: rgb(39, 40, 41);
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
color: white
|
2022-01-19 10:55:30 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
;
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-30 15:02:28 +02:00
|
|
|
summary h2{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
details[open] summary{
|
|
|
|
|
color: rgb(224, 196, 196);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* details ul{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
details[open] ul{
|
|
|
|
|
display: block;;
|
|
|
|
|
} */
|
|
|
|
|
|
2022-01-19 10:55:30 +01:00
|
|
|
img {
|
|
|
|
|
/* width: 400px; */
|
|
|
|
|
background: white;
|
2022-05-30 15:02:28 +02:00
|
|
|
width: 300px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.svganim_player {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.svganim_player svg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.svganim_player.play:not(.loading) .controls {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.svganim_player:hover .controls {
|
|
|
|
|
visibility: visible !important;
|
2022-01-19 10:55:30 +01:00
|
|
|
}
|
|
|
|
|
</style>
|
2022-05-30 15:02:28 +02:00
|
|
|
<script src="assets/nouislider-15.5.0.js"></script>
|
|
|
|
|
<script src="assets/wNumb-1.2.0.min.js"></script>
|
|
|
|
|
<script src="annotate.js"></script>
|
|
|
|
|
<script src="playlist.js"></script>
|
2022-01-19 10:55:30 +01:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
{% for tag in index.tags %}
|
2022-05-30 15:02:28 +02:00
|
|
|
<details>
|
|
|
|
|
<summary>
|
|
|
|
|
<h2>{{tag}} ({{len(index.tags[tag])}})</h2>
|
|
|
|
|
</summary>
|
|
|
|
|
<ul>
|
|
|
|
|
{% for annotation in index.tags[tag] %}
|
|
|
|
|
<li>
|
|
|
|
|
<img src="/annotation/{{ annotation.id }}.svg" loading="lazy" id="img-{{ annotation_hash(annotation.id) }}">
|
|
|
|
|
<div class="play" id="annotation-{{ annotation_hash(annotation.id) }}"></div>
|
|
|
|
|
<script type='text/javascript'>
|
|
|
|
|
(function () {
|
|
|
|
|
let imgEl = document.getElementById('img-{{ annotation_hash(annotation.id) }}');
|
|
|
|
|
imgEl.addEventListener('click', () => {
|
|
|
|
|
imgEl.style.display = 'none';
|
|
|
|
|
new Annotator(
|
|
|
|
|
document.getElementById("annotation-{{ annotation_hash(annotation.id) }}"),
|
|
|
|
|
"tags.json",
|
|
|
|
|
"{{ annotation.getJsonUrl() }}",
|
|
|
|
|
{ is_player: true, crop_to_fit: true, autoplay: true }
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
<!-- <li><img src="/annotation/{{ annotation.id }}.svg" data-audio="/annotation/{{ annotation.id }}.mp3"></li> -->
|
|
|
|
|
{% end %}
|
|
|
|
|
</ul>
|
|
|
|
|
</details>
|
2022-01-19 10:55:30 +01:00
|
|
|
{% end %}
|
|
|
|
|
<!-- <ul>
|
|
|
|
|
{% for annotation in index.annotations %}
|
|
|
|
|
<li>{{ annotation }}</li>
|
|
|
|
|
{% end %}
|
|
|
|
|
</ul> -->
|
2022-01-19 11:15:55 +01:00
|
|
|
|
|
|
|
|
<hr>
|
2022-03-29 15:07:18 +02:00
|
|
|
<a href="?refresh=1">Reload index</a>
|
2022-01-19 10:55:30 +01:00
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
let images = document.querySelectorAll('[data-audio]');
|
|
|
|
|
for (const image of images) {
|
|
|
|
|
const audio = new Audio(image.dataset.audio);
|
|
|
|
|
console.log(image, audio);
|
2022-05-30 15:02:28 +02:00
|
|
|
image.addEventListener('mouseover', (e) => {
|
2022-01-19 10:55:30 +01:00
|
|
|
audio.play();
|
|
|
|
|
});
|
|
|
|
|
image.addEventListener('mouseout', (e) => {
|
|
|
|
|
audio.pause();
|
|
|
|
|
audio.currentTime = 0;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
