roundabout,
created on Friday, 6 September 2024, 17:25:01 (1725643501),
received on Friday, 6 September 2024, 19:35:57 (1725651357)
Author identity: vlad <vlad.muntoiu@gmail.com>
07c353bb6c4c4b9b889d5d11e8f296078574a225
app.py
@@ -348,7 +348,7 @@ def has_object(id):
return flask.render_template("object.html", object=object_, resources=resources, page_number=page,
page_length=per_page, num_pages=resources.pages, prev_page=resources.prev_num,
next_page=resources.next_num)
next_page=resources.next_num, PictureRegion=PictureRegion)
@app.route("/upload")
@@ -413,6 +413,7 @@ def upload_post():
file.save(path.join(config.DATA_PATH, "pictures", str(resource.id)))
pil_image = Image.open(path.join(config.DATA_PATH, "pictures", str(resource.id)))
resource.width, resource.height = pil_image.size
db.session.commit()
if flask.request.form.get("annotations"):
try:
static/style.css
@@ -29,18 +29,18 @@ iconify-icon {
font-size: 2rem;
}
#annotation-zone {
#annotation-zone, .annotation-zone {
position: relative;
user-select: none;
}
#annotation-image {
#annotation-image, .annotation-image {
user-drag: none;
-webkit-user-drag: none;
image-rendering: pixelated;
}
#annotation-zone > svg {
#annotation-zone > svg, .annotation-zone > svg {
z-index: 1;
position: absolute;
top: 0;
@@ -116,7 +116,7 @@ iconify-icon {
min-height: 2lh;
}
.shape-container-viewonly > .shape {
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
fill: var(--color-info);
stroke: var(--color-info);
fill-opacity: 0;
@@ -125,11 +125,11 @@ iconify-icon {
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
}
.shape-container-viewonly > .shape-polyline {
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
fill: none;
}
.shape-container-viewonly > .shape-point {
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
stroke: var(--color-info);
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
@@ -177,6 +177,11 @@ iconify-icon {
stroke-opacity: 1;
}
.thumbnail-list > li:hover .shape {
fill-opacity: 0.2;
stroke-opacity: 1;
}
/* Disabled for now, until there is more navigation that would benefit from transitions */
/*
@view-transition {
templates/object.html
@@ -10,7 +10,33 @@
{% for resource in resources %}
<li>
<a href="/picture/{{ resource.id }}">
<img src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
<div class="annotation-zone">
<img src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
{% for i in PictureRegion.query.filter_by(resource=resource, object=object) %}
{% if i.json.type == "bbox" %}
<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
<rect x="{{ i.json.shape.x * resource.width }}"
y="{{ i.json.shape.y * resource.height }}"
width="{{ i.json.shape.w * resource.width }}"
height="{{ i.json.shape.h * resource.height }}"
fill="none" class="shape-bbox shape"
></rect>
</svg>
{% elif i.json.type == "polygon" %}
<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
<polygon points="{% for point in i.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
</svg>
{% elif i.json.type == "polyline" %}
<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
<polyline points="{% for point in i.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
</svg>
{% elif i.json.type == "point" %}
<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}">
<circle cx="{{ i.json.shape.x * resource.width }}" cy="{{ i.json.shape.y * resource.height }}" r="0" fill="none" class="shape-point shape"></circle>
</svg>
{% endif %}
{% endfor %}
</div>
<div class="list-detail">
{{ resource.title }}
</div>