Mercurial > hg > digilib-old

changeset 1121:efe4b0f18cf8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
annotator plugin does regions now.
author robcast
date Thu, 08 Nov 2012 18:42:57 +0100
parents 8bd10cd04169
children 75e61bf276fe
files webapp/src/main/webapp/jquery/img/fullscreen/32/annotation-region.png webapp/src/main/webapp/jquery/img/fullscreen3.svg webapp/src/main/webapp/jquery/jquery.digilib.annotator.js webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.geometry.js
diffstat 5 files changed, 106 insertions(+), 36 deletions(-) [+]
line wrap: on
line diff
Binary file webapp/src/main/webapp/jquery/img/fullscreen/32/annotation-region.png has changed
--- a/webapp/src/main/webapp/jquery/img/fullscreen3.svg	Wed Nov 07 18:09:57 2012 +0100
+++ b/webapp/src/main/webapp/jquery/img/fullscreen3.svg	Thu Nov 08 18:42:57 2012 +0100
@@ -120,13 +120,13 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="14.74"
-     inkscape:cx="3.4974471"
+     inkscape:cx="-7.5948188"
      inkscape:cy="15.995577"
-     inkscape:current-layer="g4602"
+     inkscape:current-layer="g3411"
      showgrid="true"
      inkscape:grid-bbox="true"
      inkscape:document-units="px"
-     inkscape:window-width="1837"
+     inkscape:window-width="1842"
      inkscape:window-height="1156"
      inkscape:window-x="1920"
      inkscape:window-y="22"
@@ -664,6 +664,25 @@
        sodipodi:nodetypes="ccccc" />
   </g>
   <g
+     inkscape:groupmode="layer"
+     id="g3411"
+     inkscape:label="annotation-region"
+     style="display:none"
+     transform="translate(-7.8129058,-7.9934033)"
+     sodipodi:insensitive="true">
+    <path
+       style="fill:none;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 14.72282,16.248491 -0.125651,8.412484 14.324821,-0.0701 0.125651,-8.272275 z"
+       id="path3423"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path3421"
+       d="m 21.765939,21.488404 11.278998,0 c -1.773025,8.409248 3.823753,4.013599 2.050729,12.004999 l -11.343086,0 C 25.482882,25.40112 19.907466,29.975104 21.765939,21.488404 z"
+       style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+  </g>
+  <g
      transform="translate(-7.8129058,-7.9934033)"
      style="display:none"
      inkscape:label="annotations-user"
--- a/webapp/src/main/webapp/jquery/jquery.digilib.annotator.js	Wed Nov 07 18:09:57 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.annotator.js	Thu Nov 08 18:42:57 2012 +0100
@@ -29,6 +29,11 @@
             onclick : "setAnnotationMark",
             tooltip : "create an annotation for a point",
             icon : "annotation-mark.png"
+        },
+        annotationregion : {
+            onclick : "setAnnotationRegion",
+            tooltip : "create an annotation for a region",
+            icon : "annotation-region.png"
         }
     };
 
@@ -36,7 +41,7 @@
         // are annotations active?
         'isAnnotationsVisible' : true,
         // buttonset of this plugin
-        'annotationSet' : ['annotations', 'annotationuser', 'annotationmark', 'lessoptions'],
+        'annotationSet' : ['annotations', 'annotationuser', 'annotationmark', 'annotationregion', 'lessoptions'],
         // URL of annotation server
         'annotationServerUrl' : 'http://virtuoso.mpiwg-berlin.mpg.de:8080/AnnotationManager/annotator',
         // URL of authentication token server
@@ -146,6 +151,23 @@
                 console.error("Currently only interactive annotations!");
             }
         },
+
+        /**
+         * set a region-annotation by clicking (or giving a position and a text)
+         *
+         * @param data
+         * @param mpos
+         * @param text
+         */
+        setAnnotationRegion : function (data, rect, text) {
+            if (rect == null) {
+                // interactive
+                setAnnotationRegion(data);
+            } else {
+                // use position and text (and user-id)
+                console.error("Currently only interactive annotations!");
+            }
+        }
     };
 
     /**
@@ -214,6 +236,25 @@
     };
 
     /**
+     * add a region-annotation where clicked.
+     */
+    var setAnnotationRegion = function(data) {
+        var annotator = data.annotator;
+        digilib.fn.defineArea(data, function (data, rect) {
+        	if (rect == null) return;
+            // event handler adding a new mark
+            console.log("setAnnotationRegion at=", rect);
+            // mark selected areas
+            annotator.selectedAreas = [rect];
+            // create and edit new annotation
+            var mpos = rect.getPt1();
+            var pos = data.imgTrafo.transform(mpos);
+            var annotation = annotator.createAnnotation();
+            annotator.showEditor(annotation, pos.getAsCss());
+        });
+    };
+
+    /**
      * place annotations on the image
      */
     var renderAnnotations = function (data) {
@@ -247,23 +288,34 @@
         var annotator = data.annotator;
         var annotation = annot.annotation;
         var idx = annot.idx ? annot.idx : '?';
-        var pos = geom.position(annotation.areas[0]);
-        if (data.zoomArea.containsPosition(pos)) {
-            var mpos = data.imgTrafo.transform(pos);
-            console.debug("renderannotations: pos=", mpos);
+        var area = geom.rectangle(annotation.areas[0]);
+        var screenRect = null;
+        var $annotation = null;
+        if (area.isRectangle()) {
+        	var clippedArea = data.zoomArea.intersect(area);
+        	if (clippedArea == null) return;
+            screenRect = data.imgTrafo.transform(clippedArea);
+            // console.debug("renderRegion: pos=",geom.position(screenRect));
+	        $annotation = $('<div class="'+cssPrefix+'annotationregion '+cssPrefix+'overlay annotator-hl">'+idx+'</div>');
+        	//addRegionAttributes(data, $regionDiv, attr);
+        } else {
+	        var pos = area.getPosition();
+	        if (!data.zoomArea.containsPosition(pos)) return;
+            var screenRect = data.imgTrafo.transform(pos);
+            console.debug("renderannotations: pos=", pos);
             // create annotation
             var html = '<div class="'+cssPrefix+'annotationmark '+cssPrefix+'overlay annotator-hl">'+idx+'</div>';
-            var $annotation = $(html);
-            // save annotation in data for Annotator
-            $annotation.data('annotation', annotation);
-            // save reference to div
-            annot.$div = $annotation;
-            $elem.append($annotation);
-            // hook up Annotator events
-            $annotation.on("mouseover", annotator.onHighlightMouseover);
-            $annotation.on("mouseout", annotator.startViewerHideTimer);
-            mpos.adjustDiv($annotation);
-        }
+            $annotation = $(html);
+	    }
+        // save annotation in data for Annotator
+        $annotation.data('annotation', annotation);
+        // save reference to div
+        annot.$div = $annotation;
+        $elem.append($annotation);
+        // hook up Annotator events
+        $annotation.on("mouseover", annotator.onHighlightMouseover);
+        $annotation.on("mouseout", annotator.startViewerHideTimer);
+        screenRect.adjustDiv($annotation);
     };
 
 	/**
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Wed Nov 07 18:09:57 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Thu Nov 08 18:42:57 2012 +0100
@@ -178,17 +178,12 @@
 	}
 
 /* annotations */
-div.dl-digilib div.dl-annotationbody {
-     background-color: yellow;
-     border-radius: 5px;
-}
-div.dl-digilib div.dl-annotationbody div.dl-text {
-    padding: 10px;
-}
-div.dl-digilib div.dl-annotationbody div.dl-creator {
-    color: gray;
-    padding: 5px;
-    border-top: 1px solid silver;
+div.dl-digilib div.dl-annotationregion {
+    background-color: rgba(255, 255, 10, 0.3);
+    border-radius: 5px;
+    border: 1px solid black;
+    padding: 2px 4px;
+    font-weight: bold;
 }
 	
 div.dl-digilib #dl-cm {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Wed Nov 07 18:09:57 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Thu Nov 08 18:42:57 2012 +0100
@@ -66,8 +66,8 @@
                 if (x.x != null) {
                     // position object
                     that = {
-                        x : x.x,
-                        y : x.y
+                        x : parseFloat(x.x),
+                        y : parseFloat(x.y)
                     };
                 }
                 if (x.pageX != null) {
@@ -156,10 +156,10 @@
             } else if (y == null) {
                 // assume x is rectangle
                 that = {
-                    x : x.x || 0,
-                    y : x.y || 0,
-                    width : x.width || 0,
-                    height : x.height || 0
+                    x : parseFloat(x.x) || 0,
+                    y : parseFloat(x.y) || 0,
+                    width : parseFloat(x.width) || 0,
+                    height : parseFloat(x.height) || 0
                 };
             } else {
                 // assume x and y are Position
@@ -346,6 +346,10 @@
         that.getAsSvg = function() {
             return [this.x, this.y, this.width, this.height].join(" ");
         };
+        // returns if this rectangle is a rectangle
+        that.isRectangle = function () {
+        	return this.width > 0 && this.height > 0;
+        };
         // returns size and position of this rectangle formatted for ??? (w x h@x,y)
         that.toString = function() {
             return this.width + "x" + this.height + "@" + this.x + "," + this.y;