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

38
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()
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:
async def main():
annotations = []
async with aiohttp.ClientSession() as session:
with open('image.txt', 'r') as file:
lines = file.readlines()
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.")
print("Annotations JSON file created.")
# Run the asynchronous code
asyncio.run(main())

52
index.html
View File

@ -35,12 +35,17 @@
<script src="script/openseadragon/openseadragon-annotorious.min.js"></script>
</head>
<body>
<div id = "container>">
<div id="viewer"></div>
<div id = "mobile-banner">
<img src = "image/banner.png">
</div>
</div>
<!-- MODAL -->
<div id="modal-overlay"></div>
<!-- MODAL -->
<div id="modal-overlay"></div>
<div id="modal">
<div id="modal">
<div id="modal-content">
<span id="close-button">&times;</span>
<br>
@ -54,14 +59,15 @@
<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>
<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 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>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>ℹ️ 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.
<h2>☝️ How do I join?</h2>
@ -72,7 +78,7 @@
<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.
<p><b>⚠️ Make sure that it is square and at least 1000 pixels wide and high.</b>
<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>
<h2>💌 Who can I contact about this?</h2>
@ -83,25 +89,27 @@
<p>❤️🧡💛💚💙💜
<br><br>
</div>
</div>
</div>
<!-- USER INDICATOR -->
<div id="here-now">
🌈<b class = "rainbow"> Here now:</b> <span id="clientCount">0</span>
</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">
<!--- OPEN MODAL BUTTON -->
<a id = "open-button">
<div id="question">
<span class = "rainbow">❓</span>
</div>
</a>
</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>
<!--- 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

32
style.css
View File

@ -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 {
@ -170,12 +174,40 @@ a {
cursor: pointer;
}
#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%;
}
}