diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js index 23893e68..e4ed9dd5 100644 --- a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js +++ b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js @@ -17,6 +17,7 @@ globals = { mouseDownY: undefined, currentAnnotations: undefined, allAnnotations: undefined, + allMetadata: undefined, stdColor: '#CC4444', mutColor: '#CC0000' }; @@ -35,6 +36,7 @@ function calculateImageScale() { const FEEDBACK_DISPLAY_TIME = 3000; const ANNOTATE_URL = '/annotations/%s/'; const IMAGE_SET_URL = '/images/imageset/%s/'; + const IMAGE_METADATA_DEL_URL = '/images/image/metadata/delete/'; const PRELOAD_BACKWARD = 2; const PRELOAD_FORWARD = 5; const STATIC_ROOT = '/static/'; @@ -51,6 +53,7 @@ function calculateImageScale() { var gMousepos; let gAnnotationType = -1; let gAnnotationCache = {}; + let gMetadataCache = {}; let gHighlightedAnnotation; var gShiftDown; @@ -259,7 +262,7 @@ function calculateImageScale() { return e.annotation_type.id === gAnnotationType; }); gAnnotationCache[gImageId] = globals.allAnnotations; - + gMetadataCache[gImageId] = globals.allMetadata; tool.drawExistingAnnotations(globals.currentAnnotations); globals.editedAnnotationsId = undefined; @@ -365,6 +368,53 @@ function calculateImageScale() { }); } + function getCookie(name) { + var cookieValue = null; + if (document.cookie && document.cookie !== '') { + var cookies = document.cookie.split(';'); + for (var i = 0; i < cookies.length; i++) { + var cookie = jQuery.trim(cookies[i]); + // Does this cookie string begin with the name we want? + if (cookie.substring(0, name.length + 1) === (name + '=')) { + cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); + break; + } + } + } + return cookieValue; + } + + /** + * Display metadata on current page. + * + * @param annotations + */ + function displayImageMetadata(data, imageId) { + if (data != undefined) { + let table = $('#metadata > tbody'); + table.empty(); + let csrftoken = getCookie('csrftoken'); + for (k in data) { + table.append( + '' + + '' + + '
' + + '' + + '' + + '' + + '
' + + '' + + '' + k + '' + + '' + data[k] + '' + + '' + ); + } + } + + } + /** * Display existing annotations on current page. * @@ -881,6 +931,7 @@ function calculateImageScale() { $('#annotation_type_id').val(gAnnotationType); displayImage(imageId); + displayImageMetadata(gMetadataCache[imageId], imageId); if (!$('#keep_selection').prop('checked')) { $('#concealed').prop('checked', false); $('#blurred').prop('checked', false); @@ -1028,6 +1079,7 @@ function calculateImageScale() { success: function(data) { // save the current annotations to the cache gAnnotationCache[imageId] = data.annotations; + gMetadataCache[imageId] = data.metadata; console.log("Saving annotations for", imageId); }, error: function() { @@ -1100,6 +1152,12 @@ function calculateImageScale() { delete gAnnotationCache[imageId]; } } + for (var imageId in gMetadataCache) { + imageId = parseInt(imageId); + if (gMetadataCache[imageId] !== undefined && keep.indexOf(imageId) === -1) { + delete gMetadataCache[imageId]; + } + } } /** diff --git a/imagetagger/imagetagger/annotations/templates/annotations/annotate.html b/imagetagger/imagetagger/annotations/templates/annotations/annotate.html index a7ef7ecf..8233b339 100644 --- a/imagetagger/imagetagger/annotations/templates/annotations/annotate.html +++ b/imagetagger/imagetagger/annotations/templates/annotations/annotate.html @@ -3,299 +3,423 @@ {% load static %} {% block additional_annotation_css %} - + {% endblock additional_annotation_css %} {% block additional_annotation_js %} - - - + + + {% endblock additional_annotation_js %} {% block bodyblock %} -
- - - - - - - - - - - -
-
- -
- -
-
- - - - +
+ + + + + + + + + + + +
+
+
+ +
+
+ + + + +
+
+
+ {% for set_image in set_images %} + + {{ set_image.name }} + + {% endfor %} +
+
+
-
-
- {% for set_image in set_images %} - - {{set_image.name}} - - {% endfor %} + -
-
-
- -
-
- Picture {{selected_image.name}} not found!
- -
-
-
-

- Annotations: -

-
- {% for annotation in image_annotations %} -
- {{ annotation.annotation_type.name }}: - -
- {% if annotation.vector is not None %} - {% for key, value in annotation.vector.items %} - {% if forloop.counter0 > 0 %} - • - {% endif %} - {{ key }}: {{ value }} - {% endfor %} - {% else %} - {{annotation.content}} - {% endif %} +
+
+ Picture {{ selected_image.name }} not found!
+ +
- {% endfor %} -
-
{% trans 'No annotations found.' %}
- -
-
-
-
-

{{selected_image.name}}

+
+
+

+ Metadata: + +

+
+
+ +
+
+ + + + + + + + + + {% for data, values in selected_image.metadata.items %} + + + + + + {% endfor %} + +
ActionNameDescription
+
+ {% csrf_token %} + + +
+
{{ data }}{{ values }}
+
+
+
+
+ + +
+
+
+

+ Annotations: +

+
+ {% for annotation in image_annotations %} +
+ {{ annotation.annotation_type.name }}: + +
+ {% if annotation.vector is not None %} + {% for key, value in annotation.vector.items %} + {% if forloop.counter0 > 0 %} + • + {% endif %} + {{ key }}: {{ value }} + {% endfor %} + {% else %} + {{ annotation.content }} + {% endif %} +
+ {% endfor %} +
+
{% trans 'No annotations found.' %}
+
-
-
- {% csrf_token %} - -

- -

-

- - -

- {% if 'annotate' in imageset_perms %} +
+
+
+
+

{{ selected_image.name }}

+
+
+ + {% csrf_token %} +

- - +

-

- - -

-

- - -

-

- - + +

-

The bounding box can be moved and resized with i j k l

-
- {% for field in vector_fields %} -
-
- -
-
- -
-
-
- {% endfor %} -
- {% endif %} -
-
- {% if 'annotate' in imageset_perms %} -
- -
-
- -
-

-
- -
-
- -
-

-
- -
-
- -
- {% else %} -
- -
-
- -
+

+ + +

+
+

+ + +

+

+ + +

+

+ + +

+

+ The bounding box can be moved and resized with i j k l

+
+ {% for field in vector_fields %} +
+
+ +
+
+ +
+
+
+ {% endfor %} +
{% endif %} - {% if 'delete_images' in imageset_perms and not imageset_lock %} -

{{ imageset.image_lock }}

-
- +
+
+ + {% if 'annotate' in imageset_perms %} +
+ +
+
+ +
+

+
+ +
+
+ +
+

+
+ +
+
+ +
+ {% else %} +
+ +
+
+ +
+ {% endif %} + {% if 'delete_images' in imageset_perms and not imageset_lock %} +

{{ imageset.image_lock }}

+
+ +
+ {% endif %}
- {% endif %} -
- + +
-
- - - -{% if 'delete_images' in imageset_perms and not imageset_lock %} -