ted/su-collab
ted
/
su-collab
1
0
Fork 0
Code Pull Requests Activity

remove annotation update events

This commit is contained in:
red 2023-10-02 14:03:04 +01:00
parent 830f36787b
commit 61fafc6a85
8 changed files with 181 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
.idea
image/image.txt
image/dzi
image/dzi_edited

2
README.md
View File

@ -9,4 +9,6 @@ uses
1. https://github.com/Deprecator16/OpenSeadragonSmartScrollZoom/
2. https://github.com/openseadragon/openseadragon
3. https://github.com/annotorious/annotorious-openseadragon
1. https://github.com/wattapik/recogito-client-core
2. ^ you have to build the above with the recogito core i have here
4. https://github.com/VoidVolker/MagickSlicer

42
image/script/generate_annotations.py
View File

@ -1,25 +1,21 @@
import json
import uuid
import requests
import aiohttp
import asyncio
def get_post_data(folder_name):
async def get_post_data(session, folder_name):
url = f"https://sketchersunited.org/posts/{folder_name.split('by')[0]}"
headers = {"Accept": "text/json"}
response = requests.get(url, headers=headers)
if response.status_code == 200:
return response.json()
return None
async with session.get(url, headers=headers) as response:
if response.status == 200:
return await response.json()
return None
with open('image.txt', 'r') as file:
lines = file.readlines()
annotations = []
for line in lines:
async def process_line(session, line):
folder_name, x, y, _, _, _ = line.strip().split()
annotation_id = str(uuid.uuid4())
post_data = get_post_data(folder_name)
post_data = await get_post_data(session, folder_name)
if post_data:
annotation_text = f'🖼️ <a href="https://sketchersunited.org/posts/{post_data["post"]["id"]}">{post_data["post"]["title"]}</a> <br>👤 <a href="https://sketchersunited.org/users/{post_data["post"]["profile"]["id"]}">@{post_data["post"]["profile"]["username"]}</a>'
else:
@ -44,10 +40,22 @@ for line in lines:
}
}
annotations.append(annotation)
print(f"Appended annotation for {folder_name}")
return annotation
with open('../annotations/annotations.w3c.json', 'w') as output_file:
json.dump(annotations, output_file, indent=2)
async def main():
annotations = []
async with aiohttp.ClientSession() as session:
with open('image.txt', 'r') as file:
lines = file.readlines()
print("Annotations JSON file created.")
tasks = [process_line(session, line) for line in lines]
annotations = await asyncio.gather(*tasks)
with open('../annotations/annotations.w3c.json', 'w') as output_file:
json.dump(annotations, output_file, indent=2)
print("Annotations JSON file created.")
# Run the asynchronous code
asyncio.run(main())

182
index.html
View File

@ -1,107 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--
.:/+++oo+/:.
`:++:.` `s--s/.:++-
`/o- `s- /o. `:o/
-s: `s: .o/ :s.
-s` `s: :s- .s.
`y. o/ `o+` -s
:o o+ -s: s:
++ ++ `/oo/
/o +o `.+y:
`y. /o `-:/++/:/y`
-s` /o` `-:+++/-. .s-
-s/s`.-/+++/-. -s-
`+ss/-` -o/`
`:o+-. .:+o:`
`-:++++++++:-`
-->
<meta charset="UTF-8">
<title>Sketchers United Collaboration</title>
<!--
.:/+++oo+/:.
`:++:.` `s--s/.:++-
`/o- `s- /o. `:o/
-s: `s: .o/ :s.
-s` `s: :s- .s.
`y. o/ `o+` -s
:o o+ -s: s:
++ ++ `/oo/
/o +o `.+y:
`y. /o `-:/++/:/y`
-s` /o` `-:+++/-. .s-
-s/s`.-/+++/-. -s-
`+ss/-` -o/`
`:o+-. .:+o:`
`-:++++++++:-`
-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<meta charset="UTF-8">
<title>Sketchers United Collaboration</title>
<link rel="stylesheet" href="script/openseadragon/annotorious.min.css">
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<script src="script/openseadragon/openseadragon.min.js"></script>
<script src="script/openseadragon/openseadragon-smartScrollZoom.js"></script>
<script src="script/openseadragon/openseadragon-annotorious.min.js"></script>
<link rel="stylesheet" href="script/openseadragon/annotorious.min.css">
<link rel="stylesheet" href="style.css">
<script src="script/openseadragon/openseadragon.min.js"></script>
<script src="script/openseadragon/openseadragon-smartScrollZoom.js"></script>
<script src="script/openseadragon/openseadragon-annotorious.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<div id = "container>">
<div id="viewer"></div>
<div id = "mobile-banner">
<img src = "image/banner.png">
</div>
</div>
<!-- MODAL -->
<div id="modal-overlay"></div>
<div id="modal">
<div id="modal-content">
<span id="close-button">&times;</span>
<br>
<!-- MODAL -->
<div id="modal-overlay"></div>
<img src = "image/banner.png" id = "banner" alt="A banner for the Sketchers United 4th anniversary collab.">
<h1>Sketchers United 4th Anniversary Collaboration</h1>
<div id="modal">
<div id="modal-content">
<span id="close-button">&times;</span>
<br>
<p>❤️🧡💛💚💙💜
<h2>❓ What is this?</h2>
<p>For the 4th anniversary of Sketchers United, we are going to (attempt to) line up submitted artwork from Sketchers United members such that it resembles a gigantic Sketchers United logo.
<br>The shape won't seem very evident at the beginning, however as more submissions are made the more we can approximate the shape.
<br>You can use the view here to look at the submitted artworks and view the construction of the collaborative Sketchers United logo.
<br>
<br>We aim to update the view every few days with the newest submissions.</p>
<img src = "image/banner.png" id = "banner" alt="A banner for the Sketchers United 4th anniversary collab.">
<h1>Sketchers United 4th Anniversary Collaboration</h1>
<h2>🌐 How do I use this page?</h2>
<p>Use either the mouse wheel or your fingers to zoom in and out of the view.
<br> (Not yet implemented) You can tap on the image to see who drew it and get a link to the post.
<br>
<br>ℹ️ The view may get somewhat laggy on a mobile device. For the best experience use a desktop computer.
<br>This is unavoidable due to the number of images downloaded and shown.
<br>It may also fail to load images correctly on Chrome on newer versions of Android, leading to the page freezing. In this case, use the Firefox browser or a desktop computer.
<p>❤️🧡💛💚💙💜
<h2>❓ What is this?</h2>
<p>For the 4th anniversary of Sketchers United, we are going to (attempt to) line up submitted artwork from Sketchers United members such that it resembles a gigantic Sketchers United logo.
<br>The shape won't seem very evident at the beginning, however as more submissions are made the more we can approximate the shape.
<br>You can use the view here to look at the submitted artworks and view the construction of the collaborative Sketchers United logo.
<br>
<br>We aim to update the view every day with the newest submissions.
<br>The more submissions we get, the higher the resolution of the logo we can build, meaning the better it looks!</p>
<h2>☝️ How do I join?</h2>
<p><b>📩 Submit an entry under the hashtag <a href = "https://sketchersunited.org/tags/sucollab" class = "rainbow">#sucollab</a> to enter.</b>
<br>Entries can contain any subject matter however inappropriate entries will be discarded.
<h2>🌐 How do I use this page?</h2>
<p>Use either the mouse wheel or your fingers to zoom in and out of the view.
<br>You can tap on the image to see who drew it and get a link to the post.
<br>
<br>ℹ️ The view may get somewhat laggy on a mobile device.
<br>This is unavoidable due to the number of images downloaded and shown. For the best experience use a desktop computer.
<br>It may also fail to load images correctly on Chrome on newer versions of Android, leading to the page freezing. In this case, use the Firefox browser or a desktop computer.
<p><b> You can submit a single entry on your own.</b>
<br>You are allowed to submit more than one entry if you are working with friends to submit a collaborative entry.
<br>For example, you can submit an entry with only your own artwork, and then submit another entry which contains your work and the work of others that was created collaboratively.
<h2>☝️ How do I join?</h2>
<p><b>📩 Submit an entry under the hashtag <a href = "https://sketchersunited.org/tags/sucollab" class = "rainbow">#sucollab</a> to enter.</b>
<br>Entries can contain any subject matter however inappropriate entries will be discarded.
<p><b>⚠️ Make sure that it is square and at least 1000 pixels wide and high.</b>
<br>We will be using all of the entries where possible, which means if your entry does not fit these requirements it will be cropped and upscaled, which may be destructive to your art.</p>
<p><b> You can submit a single entry on your own.</b>
<br>You are allowed to submit more than one entry if you are working with friends to submit a collaborative entry.
<br>For example, you can submit an entry with only your own artwork, and then submit another entry which contains your work and the work of others that was created collaboratively.
<h2>💌 Who can I contact about this?</h2>
<p>General questions about the collaboration can be sent to <a href = "https://sketchersunited.org/users/12271" class = "rainbow">@pelunkey</a> and <a href = "https://sketchersunited.org/users/9" class = "rainbow">@username</a>.
<br>This website is run by <a href ="https://sketchersunited.org/users/9" class = "rainbow">@username</a>. If there are any technical issues with the site please send me a message.
<br>The website is still under construction and there may be issues.</p>
<p><b>⚠️ Make sure that it is square and exactly 1000 pixels wide and high. Also turn on the "download" option for the image whilst posting it.</b>
<br>We will be using all of the entries where possible, which means if your entry does not fit these requirements it will be cropped and upscaled, which may be destructive to your art.</p>
<p>❤️🧡💛💚💙💜
<br><br>
</div>
</div>
<!-- USER INDICATOR -->
<div id="here-now">
🌈<b class = "rainbow"> Here now:</b> <span id="clientCount">0</span>
</div>
<!--- OPEN MODAL BUTTON -->
<a id = "open-button">
<div id="question">
<span class = "rainbow">❓</span>
</div>
</a>
<h2>💌 Who can I contact about this?</h2>
<p>General questions about the collaboration can be sent to <a href = "https://sketchersunited.org/users/12271" class = "rainbow">@pelunkey</a> and <a href = "https://sketchersunited.org/users/9" class = "rainbow">@username</a>.
<br>This website is run by <a href ="https://sketchersunited.org/users/9" class = "rainbow">@username</a>. If there are any technical issues with the site please send me a message.
<br>The website is still under construction and there may be issues.</p>
<!--- SCRIPTS -->
<script src="script/modal.js"></script>
<script src="script/live.js"></script>
<script src="script/viewer.js"></script>
<script src="script/image_load.js"></script>
<script src="script/annotations.js"></script>
<p>❤️🧡💛💚💙💜
<br><br>
</div>
</div>
<!-- USER INDICATOR -->
<div id="here-now">
🌈<b class = "rainbow"> Here now:</b> <span id="clientCount">Loading...</span>
</div>
<!--- OPEN MODAL BUTTON -->
<a id = "open-button">
<div id="question">
<span class = "rainbow">❓</span>
</div>
</a>
<!--- SCRIPTS -->
<script src="script/modal.js"></script>
<script src="script/live.js"></script>
<script src="script/viewer.js"></script>
<script src="script/image_load.js"></script>
<script src="script/annotations.js"></script>
</body>
</html>

23
script/annotations.js
View File

@ -4,27 +4,4 @@ anno.escape = false;
anno.loadAnnotations('annotations/annotations.w3c.json');
let annotationText = ""
function renderHTML()
{
const observer = new MutationObserver(() => {
const annotationTextElement = document.querySelector('.r6o-readonly-comment');
if (annotationTextElement) {
annotationTextElement.innerHTML = annotationText
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
anno.on('clickAnnotation', function(annotation, element)
{
annotationText = annotation.body[0].value
renderHTML()
});
viewer.addHandler('update-viewport', function(event)
{
renderHTML()
});

6
script/openseadragon/annotorious.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
script/openseadragon/openseadragon-annotorious.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
style.css
View File

@ -18,30 +18,30 @@ body {
}
.r6o-editor {
z-index: 3;
height: auto;
z-index: 3;
height: auto;
}
.r6o-widget.comment {
font-size: 1.5em;
background-color: #333
font-size: 1.5em;
background-color: #333
}
.r6o-editor .r6o-arrow:after {
background-color: #333;
border: 3px white solid;
background-color: #333;
border: 3px white solid;
}
.r6o-editor .r6o-editor-inner .r6o-widget {
border: 3px white solid;
border: 3px white solid;
}
.r6o-editor .r6o-editor-inner {
background-color: transparent !important;
background-color: transparent !important;
}
.r6o-footer {
display: none;
display: none;
}
div {
@ -61,6 +61,10 @@ a {
color: white;
padding: 15px;
z-index: 2;
background-color:#333;
border-radius: 1rem;
border: 3px solid white;
margin: 5pt;
}
#question {
@ -99,7 +103,7 @@ a {
}
#banner {
max-width: 100%;
max-width: 100%;
}
#modal {
display: none;
@ -170,12 +174,40 @@ a {
cursor: pointer;
}
@media screen and (max-width: 1081px) and (-webkit-min-device-pixel-ratio: 2) {
#viewer {
width: 100vw;
height: 66vh;
}
#modal-content {
font-size: 20pt;
}
#mobile-banner {
display:none;
}
@media screen and (max-width: 1081px) and (-webkit-min-device-pixel-ratio: 2) {
#viewer {
width: 100vw;
height: 66vh;
border-bottom: 3px white solid;
}
#modal-content {
font-size: 20pt;
}
#container {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
#mobile-banner {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
height: 27vh;
overflow: hidden;
background-color: #444;
}
#mobile-banner img {
max-width: 90%;
max-height: 100%;
}
}