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/image.txt
image/dzi image/dzi
image/dzi_edited image/dzi_edited

2
README.md
View File

@ -9,4 +9,6 @@ uses
1. https://github.com/Deprecator16/OpenSeadragonSmartScrollZoom/ 1. https://github.com/Deprecator16/OpenSeadragonSmartScrollZoom/
2. https://github.com/openseadragon/openseadragon 2. https://github.com/openseadragon/openseadragon
3. https://github.com/annotorious/annotorious-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 4. https://github.com/VoidVolker/MagickSlicer

42
image/script/generate_annotations.py
View File

@ -1,25 +1,21 @@
import json import json
import uuid 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]}" url = f"https://sketchersunited.org/posts/{folder_name.split('by')[0]}"
headers = {"Accept": "text/json"} headers = {"Accept": "text/json"}
response = requests.get(url, headers=headers) async with session.get(url, headers=headers) as response:
if response.status_code == 200: if response.status == 200:
return response.json() return await response.json()
return None return None
with open('image.txt', 'r') as file: async def process_line(session, line):
lines = file.readlines()
annotations = []
for line in lines:
folder_name, x, y, _, _, _ = line.strip().split() folder_name, x, y, _, _, _ = line.strip().split()
annotation_id = str(uuid.uuid4()) annotation_id = str(uuid.uuid4())
post_data = get_post_data(folder_name) post_data = await get_post_data(session, folder_name)
if post_data: 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>' 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: else:
@ -44,10 +40,22 @@ for line in lines:
} }
} }
annotations.append(annotation)
print(f"Appended annotation for {folder_name}") print(f"Appended annotation for {folder_name}")
return annotation
with open('../annotations/annotations.w3c.json', 'w') as output_file: async def main():
json.dump(annotations, output_file, indent=2) 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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- <!--
.:/+++oo+/:. .:/+++oo+/:.
`:++:.` `s--s/.:++- `:++:.` `s--s/.:++-
`/o- `s- /o. `:o/ `/o- `s- /o. `:o/
-s: `s: .o/ :s. -s: `s: .o/ :s.
-s` `s: :s- .s. -s` `s: :s- .s.
`y. o/ `o+` -s `y. o/ `o+` -s
:o o+ -s: s: :o o+ -s: s:
++ ++ `/oo/ ++ ++ `/oo/
/o +o `.+y: /o +o `.+y:
`y. /o `-:/++/:/y` `y. /o `-:/++/:/y`
-s` /o` `-:+++/-. .s- -s` /o` `-:+++/-. .s-
-s/s`.-/+++/-. -s- -s/s`.-/+++/-. -s-
`+ss/-` -o/` `+ss/-` -o/`
`:o+-. .:+o:` `:o+-. .:+o:`
`-:++++++++:-` `-:++++++++:-`
--> -->
<meta charset="UTF-8">
<title>Sketchers United Collaboration</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <title>Sketchers United Collaboration</title>
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="script/openseadragon/annotorious.min.css"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css"> <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> <link rel="stylesheet" href="script/openseadragon/annotorious.min.css">
<script src="script/openseadragon/openseadragon-smartScrollZoom.js"></script> <link rel="stylesheet" href="style.css">
<script src="script/openseadragon/openseadragon-annotorious.min.js"></script>
<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> </head>
<body> <body>
<div id="viewer"></div> <div id = "container>">
<div id="viewer"></div>
<div id = "mobile-banner">
<img src = "image/banner.png">
</div>
</div>
<!-- MODAL --> <!-- MODAL -->
<div id="modal-overlay"></div> <div id="modal-overlay"></div>
<div id="modal">
<div id="modal-content">
<span id="close-button">&times;</span>
<br>
<img src = "image/banner.png" id = "banner" alt="A banner for the Sketchers United 4th anniversary collab."> <div id="modal">
<h1>Sketchers United 4th Anniversary Collaboration</h1> <div id="modal-content">
<span id="close-button">&times;</span>
<br>
<p>❤️🧡💛💚💙💜 <img src = "image/banner.png" id = "banner" alt="A banner for the Sketchers United 4th anniversary collab.">
<h2>❓ What is this?</h2> <h1>Sketchers United 4th Anniversary Collaboration</h1>
<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>
<h2>🌐 How do I use this page?</h2> <p>❤️🧡💛💚💙💜
<p>Use either the mouse wheel or your fingers to zoom in and out of the view. <h2>❓ What is this?</h2>
<br> (Not yet implemented) You can tap on the image to see who drew it and get a link to the post. <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> <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>ℹ️ The view may get somewhat laggy on a mobile device. For the best experience use a desktop computer. <br>You can use the view here to look at the submitted artworks and view the construction of the collaborative Sketchers United logo.
<br>This is unavoidable due to the number of images downloaded and shown. <br>
<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. <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> <h2>🌐 How do I use this page?</h2>
<p><b>📩 Submit an entry under the hashtag <a href = "https://sketchersunited.org/tags/sucollab" class = "rainbow">#sucollab</a> to enter.</b> <p>Use either the mouse wheel or your fingers to zoom in and out of the view.
<br>Entries can contain any subject matter however inappropriate entries will be discarded. <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> <h2>☝️ How do I join?</h2>
<br>You are allowed to submit more than one entry if you are working with friends to submit a collaborative entry. <p><b>📩 Submit an entry under the hashtag <a href = "https://sketchersunited.org/tags/sucollab" class = "rainbow">#sucollab</a> to enter.</b>
<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. <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> <p><b> You can submit a single entry on your own.</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> <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><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>
<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>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>
<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>❤️🧡💛💚💙💜 <h2>💌 Who can I contact about this?</h2>
<br><br> <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>.
</div> <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.
</div> <br>The website is still under construction and there may be issues.</p>
<!-- 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>
<!--- SCRIPTS --> <p>❤️🧡💛💚💙💜
<script src="script/modal.js"></script> <br><br>
<script src="script/live.js"></script> </div>
<script src="script/viewer.js"></script> </div>
<script src="script/image_load.js"></script>
<script src="script/annotations.js"></script> <!-- 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> </body>
</html> </html>

23
script/annotations.js
View File

@ -4,27 +4,4 @@ anno.escape = false;
anno.loadAnnotations('annotations/annotations.w3c.json'); anno.loadAnnotations('annotations/annotations.w3c.json');
let annotationText = "" 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 { .r6o-editor {
z-index: 3; z-index: 3;
height: auto; height: auto;
} }
.r6o-widget.comment { .r6o-widget.comment {
font-size: 1.5em; font-size: 1.5em;
background-color: #333 background-color: #333
} }
.r6o-editor .r6o-arrow:after { .r6o-editor .r6o-arrow:after {
background-color: #333; background-color: #333;
border: 3px white solid; border: 3px white solid;
} }
.r6o-editor .r6o-editor-inner .r6o-widget { .r6o-editor .r6o-editor-inner .r6o-widget {
border: 3px white solid; border: 3px white solid;
} }
.r6o-editor .r6o-editor-inner { .r6o-editor .r6o-editor-inner {
background-color: transparent !important; background-color: transparent !important;
} }
.r6o-footer { .r6o-footer {
display: none; display: none;
} }
div { div {
@ -61,6 +61,10 @@ a {
color: white; color: white;
padding: 15px; padding: 15px;
z-index: 2; z-index: 2;
background-color:#333;
border-radius: 1rem;
border: 3px solid white;
margin: 5pt;
} }
#question { #question {
@ -99,7 +103,7 @@ a {
} }
#banner { #banner {
max-width: 100%; max-width: 100%;
} }
#modal { #modal {
display: none; display: none;
@ -170,12 +174,40 @@ a {
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 1081px) and (-webkit-min-device-pixel-ratio: 2) { #mobile-banner {
#viewer { display:none;
width: 100vw;
height: 66vh;
}
#modal-content {
font-size: 20pt;
}
} }
@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%;
}
}