roundabout,
created on Sunday, 16 February 2025, 09:58:43 (1739699923),
received on Sunday, 16 February 2025, 09:58:45 (1739699925)
Author identity: vlad <vlad.muntoiu@gmail.com>
c883c3ae821c8a97272b31b7a9f0ffcbff66b24a
static/style.css
@@ -593,7 +593,6 @@ dd {
@media screen and (max-width: 768px) {
.rating-box {
flex-direction: column;
margin: 1rem;
}
}
@@ -674,6 +673,22 @@ dd {
.action-list > li {
padding: 0 !important;
}
#picture-view > x-frame > hgroup, #annotation-view-controls, #picture-details {
margin-left: 1rem;
margin-right: 1rem;
}
}
#annotation-view-controls {
display: flex;
flex-flow: row wrap;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
#picture-view > x-frame > hgroup {
margin-bottom: 1rem;
}
.action-list {
templates/picture.html
@@ -70,9 +70,11 @@
</menu>
</x-frame>
<x-frame style="--width: 768px">
<h1>{{ resource.title }}</h1>
<p>by <a href="/profile/{{ resource.author.username }}">{{ resource.author.formatted_name }}</a></p>
<p>{{ resource.description }}</p>
<hgroup>
<h1>{{ resource.title }}</h1>
<p>by <a href="/profile/{{ resource.author.username }}">{{ resource.author.formatted_name }}</a></p>
<p>{{ resource.description }}</p>
</hgroup>
{% if resource.replaced_by %}
<div class="warning">
<h2>Obsolete</h2>
@@ -86,58 +88,58 @@
{% endif %}
</div>
{% endif %}
<x-vbox>
<div id="annotation-zone">
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
{% for region in resource.regions %}
{% if region.json.type == "bbox" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<rect x="{{ region.json.shape.x }}"
y="{{ region.json.shape.y }}"
width="{{ region.json.shape.w }}"
height="{{ region.json.shape.h }}"
fill="none" class="shape-bbox shape"
></rect>
{% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
{% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
</svg>
{% elif region.json.type == "polygon" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<polygon points="{% for point in region.json.shape %}{{ point.x }},{{ point.y }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
{% set top = region.json.shape | sort(attribute='y') | last %}
{% set left = region.json.shape | sort(attribute='x') | first %}
{% set bottom = region.json.shape | sort(attribute='y') | first %}
{% set right = region.json.shape | sort(attribute='x') | last %}
{% set centre_x = (left.x + right.x) / 2 %}
{% set centre_y = (top.y + bottom.y) / 2 %}
</svg>
{% elif region.json.type == "polyline" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<polyline points="{% for point in region.json.shape %}{{ point.x }},{{ point.y }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
{# Median point #}
{% set centre_x = region.json.shape | map(attribute="x") | median %}
{% set centre_y = region.json.shape | map(attribute="y") | median %}
</svg>
{% elif region.json.type == "point" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<circle cx="{{ region.json.shape.x }}" cy="{{ region.json.shape.y }}" r="0" fill="none" class="shape-point shape"></circle>
{% set centre_x = region.json.shape.x %}
{% set centre_y = region.json.shape.y %}
</svg>
{% endif %}
{{ shape_label(centre_x, centre_y, region.object_id) }}
{% endfor %}
</div>
<x-buttonbox id="annotation-view-controls">
<label>
<input type="checkbox" id="show-shapes" checked>
Show shapes
</label>
<label>
<input type="checkbox" id="show-objects" checked>
Show objects
</label>
</x-buttonbox>
<div id="annotation-zone">
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
{% for region in resource.regions %}
{% if region.json.type == "bbox" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<rect x="{{ region.json.shape.x }}"
y="{{ region.json.shape.y }}"
width="{{ region.json.shape.w }}"
height="{{ region.json.shape.h }}"
fill="none" class="shape-bbox shape"
></rect>
{% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
{% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
</svg>
{% elif region.json.type == "polygon" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<polygon points="{% for point in region.json.shape %}{{ point.x }},{{ point.y }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
{% set top = region.json.shape | sort(attribute='y') | last %}
{% set left = region.json.shape | sort(attribute='x') | first %}
{% set bottom = region.json.shape | sort(attribute='y') | first %}
{% set right = region.json.shape | sort(attribute='x') | last %}
{% set centre_x = (left.x + right.x) / 2 %}
{% set centre_y = (top.y + bottom.y) / 2 %}
</svg>
{% elif region.json.type == "polyline" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<polyline points="{% for point in region.json.shape %}{{ point.x }},{{ point.y }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
{# Median point #}
{% set centre_x = region.json.shape | map(attribute="x") | median %}
{% set centre_y = region.json.shape | map(attribute="y") | median %}
</svg>
{% elif region.json.type == "point" %}
<svg class="shape-container-viewonly" viewBox="0 0 1 1" preserveAspectRatio="none">
<circle cx="{{ region.json.shape.x }}" cy="{{ region.json.shape.y }}" r="0" fill="none" class="shape-point shape"></circle>
{% set centre_x = region.json.shape.x %}
{% set centre_y = region.json.shape.y %}
</svg>
{% endif %}
{{ shape_label(centre_x, centre_y, region.object_id) }}
{% endfor %}
</div>
<x-buttonbox id="annotation-view-controls">
<label>
<input type="checkbox" id="show-shapes" checked>
Show shapes
</label>
<label>
<input type="checkbox" id="show-objects" checked>
Show objects
</label>
</x-buttonbox>
<x-vbox id="picture-details">
{% set licences = resource.licences | map(attribute="licence") | list %}
{% set contains = resource.regions | map(attribute="object_id") | set | select | sort | list %}
<h2>Ratings ({{ resource.rating_totals.values() | sum }})</h2>