Image outline #578

Rdornier · 2024-07-19T12:00:49Z

Hello,

This PR implements the feature from #499.
Almost everything is working properly. I only have one small detail that I couldn't fix. The outline rectangle, even if it copies the viewport coordinates, seem to not be centered on the image. I wasn't able to find a solution yet. Still thinking about it...

will-moore · 2024-07-20T08:37:05Z

This is tricky to get right with precise pixel coordinates.

Maybe try instead to add a css border to this.$panel_canvas in the panel_view.js?

Rdornier · 2024-08-08T15:47:33Z

If we stick with the current behavior, I would rather keep the ROI creation than moving to css border. It allows the user to easily delete the border like any other ROIs.

But... as the PR #549 will create some sync insets, I think it is better to integrate this PR to the Inset Feature one and to create a css border (not a ROI anymore) with the same color as the sync rectangle (the strock width can be hardcoded). Having the colored border will help visualizing the "filiation".

The reason I opened this PR was to be able to visually know which zoomed image was linked to which rectangle on the main image. So, if we managed to merge both PRs, it will be very cool !

will-moore · 2024-08-09T15:16:37Z

I'm thinking of adding a Border section the Labels tab, with just a colour-picker and stroke-width picker and show/hide button (like the scalebar but simpler).
This is a bit more work, but it will allow you to add, edit & show/hide a border for multiple selected panels at once, and it will be more obvious than adding this under the Edit ROIs dialog.

into image-outline

Rdornier · 2024-08-13T12:16:13Z

Ok, now I better catch your point. Indeed, it will be easier to include this feature in the right panel.
I'll refactor the code in that direction.
Thanks.

will-moore · 2024-08-13T12:46:08Z

I tried experimenting in the browser dev tools to add borders around image panels (see screenshots on #549).

I guess we need to decide if the border should go inside or outside the current boundary of the panel?
E.g. when you add a border, does it go around the outside of the panel (and reduce the gap between panels) or inside the panel and reduce the image area?
I can see arguments for both, but I think going inside is slightly easier because going outside means that we also need to update the x/y/width/height coordinates of the panel on the page, since it will take up more space. That's maybe not too hard but just something to think about...

into image-outline

Rdornier · 2024-08-27T11:54:15Z

Hi,

I've modified the code to create a CSS border, as discussed above. The border is set inside the panel, so no need to change panel coordinates.
However, when I apply the border, the image is shifted to the bottom right corner. I couldn't find a way to remove this shift.

I also have the same issue with the strokewidth drop-down menu that doesn't display well and prevents selecting more than one width.

will-moore · 2024-08-28T16:08:35Z

A couple of points:
I wonder if we could use the term "border" instead of "outline" everywhere (code and UI)? Maybe I'm just thinking css but to me this feature is a border.

Can you toggle the Show/Hide in the same way that the Scalebar does? I don't think we need a separate Remove button.

I think we need the border to be outside the regular x,y,w,h rectangle, so that it doesn't affect the image area shown.
This means we need to tweak the actual x,y,w,h of the panel on the page.
Your panel show_outline() wasn't being called when the panel initially renders (only when the outline changes) so when you re-load the figure you don't see it.

E.g. duplicated panel, aligned to top:

I updated the render_layout() etc... (not looked at the form drop-down behaviour yet)...

diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index ef692336..8bbeac89 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -40,7 +40,7 @@
                 'change:channels change:zoom change:dx change:dy change:width change:height change:rotation change:labels change:theT change:deltaT change:theZ change:deltaZ change:z_projection change:z_start change:z_end',
                 this.render_labels);
             this.listenTo(this.model, 'change:shapes', this.render_shapes);
-            this.listenTo(this.model, 'change:outline', this.show_outline);
+            this.listenTo(this.model, 'change:outline', this.render_layout);
             // During drag or resize, model isn't updated, but we trigger 'drag'
             this.model.on('drag_resize', this.drag_resize, this);
 
@@ -63,6 +63,12 @@
                 h = xywh[3];
             if (w == this.model.get('width') && h == this.model.get('height')) {
                 // If we're only dragging - simply update position
+                var outline = this.model.get('outline');
+                if (outline != undefined) {
+                    let sw = outline.strokewidth;
+                    x = x - sw;
+                    y = y - sw;
+                }
                 this.$el.css({'top': y +'px', 'left': x +'px'});
             } else {
                 this.update_resize(x, y, w, h);
@@ -71,15 +77,6 @@
             this.$el.addClass('dragging');
         },
 
-        show_outline: function(){
-            var outline = this.model.get('outline')
-            if(outline != undefined){
-                this.$el.css({'border': 'solid ' +outline.strokewidth+'px '+outline.color})
-            }else{
-                this.$el.css({'border': '', 'outline-offset':''})
-            }
-        },
-
         render_layout: function() {
             var x = this.model.get('x'),
                 y = this.model.get('y'),
@@ -92,15 +89,31 @@
 
         update_resize: function(x, y, w, h) {
 
+            // If we have a panel border, need to adjust x,y,w,h on the page
+            // but NOT the w & h we use for img_css below.
+            var outline = this.model.get('outline');
+            var page_w = w;
+            var page_h = h;
+            if (outline != undefined) {
+                let sw = outline.strokewidth;
+                this.$el.css({'border': `solid ${sw}px ${outline.color}`})
+                x = x - sw;
+                y = y - sw;
+                page_w = w + (sw * 2);
+                page_h = h + (sw * 2);
+            } else {
+                this.$el.css({'border': '', 'outline-offset':''})
+            }
+
             // update layout of panel on the canvas
             this.$el.css({'top': y +'px',
                         'left': x +'px',
-                        'width': w +'px',
-                        'height': h +'px'});
+                        'width': page_w +'px',
+                        'height': page_h +'px'});
 
             // container needs to be square for rotation to vertical
-            $('.left_vlabels', this.$el).css('width', 3 * h + 'px');
-            $('.right_vlabels', this.$el).css('width', 3 * h + 'px');
+            $('.left_vlabels', this.$el).css('width', 3 * page_h + 'px');
+            $('.right_vlabels', this.$el).css('width', 3 * page_h + 'px');
 
             // update the img within the panel

snoopycrimecop · 2024-08-29T14:38:47Z

Conflicting PR. Removed from build OMERO-plugins-push#167. See the console output for more details.
Possible conflicts:

PR Inset feature #549 will-moore 'Inset feature'
- src/templates/rois_form.template.html

--conflicts

into image-outline

snoopycrimecop · 2024-09-04T00:41:59Z

Conflicting PR. Removed from build OMERO-plugins-push#174. See the console output for more details.
Possible conflicts:

PR Inset feature #549 will-moore 'Inset feature'
- src/templates/rois_form.template.html

~~--conflicts~~ Conflict resolved in build OMERO-plugins-push#175. See the console output for more details.

snoopycrimecop · 2024-09-06T00:43:44Z

Conflicting PR. Removed from build OMERO-plugins-push#176. See the console output for more details.
Possible conflicts:

PR Inset feature #549 will-moore 'Inset feature'
- src/templates/rois_form.template.html

--conflicts

will-moore · 2024-09-06T11:32:43Z

I used a different strategy for adding a border for Tiff export:
Do it by pasting the panel onto a bigger "frame" canvas, right before pasting onto the Tiff page:

NB: you'll need to remove the other border logic for Tiff, and there's also a def draw_outline(self, shape): that can be removed.

@@ -2287,10 +2266,23 @@ class TiffExport(FigureExport):
 
         # Now at full figure resolution - Good time to add shapes...
         crop = self.get_crop_region(panel)
-        ShapeToPilExport(pil_img, panel, crop)
+        exporter = ShapeToPilExport(pil_img, panel, crop)
 
         width, height = pil_img.size
-        box = (x, y, x + width, y + height)
+
+        # Add border if needed - Rectangle around the whole panel
+        if 'border' in panel and panel['border'].get('showBorder'):
+            sw = panel['border'].get('strokeWidth')
+            border_width = scale_to_export_dpi(sw)
+            border_color = panel['border'].get('color')
+            padding = border_width * 2
+
+            canvas = Image.new("RGB", (width + padding, height + padding), exporter.get_rgb(border_color))
+            canvas.paste(pil_img, (border_width, border_width))
+            pil_img = canvas
+            box = (x - border_width, y - border_width, x + width + border_width, y + height + border_width)
+        else:
+            box = (x, y, x + width, y + height)
         self.tiff_figure.paste(pil_img, box)

will-moore · 2024-09-06T14:54:16Z

Ahh - OK, after looking at the PDF export a bit closer, I realise the need for def draw_outline() - forgot that those draw methods are looked-up on the fly!

Maybe rename that and the shape type to "border" and add a comment to that method?

will-moore · 2024-09-06T14:56:38Z

omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py

@@ -520,6 +523,24 @@ def __init__(self, pil_img, panel, crop):
        self.scale = pil_img.size[0] / crop['width']
        self.draw = ImageDraw.Draw(pil_img)

+        if 'border' in panel and panel['border'].get('showBorder'):
+            sw = panel['border'].get('strokeWidth')
+            shift_pos = sw / (float(panel['zoom'])/100)


I'm not sure I understand the need for diving by the zoom here?
When I was testing on a big image, the zoom was very large, so the shift_pos was effectively zero and the border wasn't getting drawn around the outside of the panel. When I simply tried shift_pos = sw it seemed to work OK?

will-moore · 2024-09-06T16:19:38Z

With #549 merged, you should be able to merge in master branch now to resolve those conflicts.

snoopycrimecop · 2024-09-07T00:43:06Z

Conflicting PR. Removed from build OMERO-plugins-push#177. See the console output for more details.
Possible conflicts:

Upstream changes
- src/templates/rois_form.template.html

--conflicts

snoopycrimecop · 2024-09-08T00:41:33Z

Conflicting PR. Removed from build OMERO-plugins-push#178. See the console output for more details.
Possible conflicts:

Upstream changes
- src/templates/rois_form.template.html

--conflicts

snoopycrimecop · 2024-09-09T00:42:03Z

Conflicting PR. Removed from build OMERO-plugins-push#179. See the console output for more details.
Possible conflicts:

Upstream changes
- src/templates/rois_form.template.html

~~--conflicts~~ Conflict resolved in build OMERO-plugins-push#180. See the console output for more details.

…o image-outline

Rdornier · 2024-09-09T08:15:10Z

Hi @will-moore

Thanks for the review

Maybe rename that and the shape type to "border" and add a comment to that method?

Done

I'm not sure I understand the need for diving by the zoom here?

This part has been removed to implement the nicer way you proposed for the Tiff export.
The fact I was dividing by the zoom was necessary for the PDF export to get the border at the right scale.
If I didn't divide by the zoom, it looks like this

will-moore · 2024-09-09T13:05:15Z

@Rdornier I tried the PDF export and found that it's not handling image rotation very well...
Here's the PDF (left) alongside the figure. All the images have some rotation, except the black-bordered Inset:

If you want to try and reproduce, here's the JSON for that figure, using your image from the Inset PR. If you replace the imageId values in the JSON for the ID of that image in your server, you should be able to "File > Import from JSON"

figure.json

{"version":8,"panels":[{"x":78.69643584054376,"y":388.80805822339926,"width":194.42739798392267,"height":259.3436530286886,"zoom":2254,"dx":12525.167348651237,"dy":-19057.359365077347,"labels":[],"deltaT":[],"rotation":61,"selected":false,"pixel_size_x_symbol":"µm","pixel_size_x_unit":"MICROMETER","rotation_symbol":"°","max_export_dpi":1000,"channels":[{"active":true,"coefficient":1,"color":"FF0000","emissionWave":null,"family":"linear","inverted":false,"label":"0","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"00FF00","emissionWave":null,"family":"linear","inverted":false,"label":"1","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"0000FF","emissionWave":null,"family":"linear","inverted":false,"label":"2","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}}],"datasetId":null,"datasetName":"Multiple","imageId":3502,"name":"Brightfield H-DAB Dataset.vsi [20x]","orig_height":63895,"orig_width":46622,"pixel_range":[0,255],"pixel_size_x":0.34612796434088866,"pixel_size_y":0.3461277765902012,"pixelsType":"uint8","shapes":[{"area":318197.00257172337,"height":773.0792498487598,"id":9162241,"strokeColor":"#FF0000","strokeWidth":2,"type":"Rectangle","width":546.5293299740173,"x":10549.73533501299,"y":50404.46037507562,"rotation":299},{"area":276128.0211507149,"height":525.0854815946947,"id":67428258,"strokeColor":"#000000","strokeWidth":2,"type":"Rectangle","width":525.4788493847443,"x":10523.260575307628,"y":50742.45725920265,"rotation":0}],"sizeT":1,"sizeZ":1,"theT":0,"theZ":0},{"x":302.5820580816301,"y":389.5590593706576,"width":137.34779490607372,"height":194.28185173413613,"zoom":8265,"dx":12488,"dy":-18843.5,"labels":[],"deltaT":[],"rotation":61,"selected":false,"pixel_size_x_symbol":"µm","pixel_size_x_unit":"MICROMETER","rotation_symbol":"°","max_export_dpi":1000,"border":{"color":"#FF0000","strokeWidth":10,"showBorder":true},"channels":[{"active":true,"coefficient":1,"color":"FF0000","emissionWave":null,"family":"linear","inverted":false,"label":"0","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"00FF00","emissionWave":null,"family":"linear","inverted":false,"label":"1","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"0000FF","emissionWave":null,"family":"linear","inverted":false,"label":"2","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}}],"datasetId":null,"datasetName":"Multiple","imageId":3502,"insetRoiId":9162241,"name":"Brightfield H-DAB Dataset.vsi [20x]","orig_height":63895,"orig_width":46622,"pixel_range":[0,255],"pixel_size_x":0.34612796434088866,"pixel_size_y":0.3461277765902012,"pixelsType":"uint8","shapes":[],"sizeT":1,"sizeZ":1,"theT":0,"theZ":0},{"x":302.6326743072962,"y":602.3523555986417,"width":194.42739798392267,"height":194.28185173413624,"zoom":8872.288590604028,"dx":12525,"dy":-19057.5,"labels":[],"deltaT":[],"rotation":360,"selected":false,"pixel_size_x_symbol":"µm","pixel_size_x_unit":"MICROMETER","rotation_symbol":"°","max_export_dpi":1000,"border":{"color":"#000000","strokeWidth":2,"showBorder":true},"channels":[{"active":true,"coefficient":1,"color":"FF0000","emissionWave":null,"family":"linear","inverted":false,"label":"0","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"00FF00","emissionWave":null,"family":"linear","inverted":false,"label":"1","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"0000FF","emissionWave":null,"family":"linear","inverted":false,"label":"2","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}}],"datasetId":null,"datasetName":"Multiple","imageId":3502,"insetRoiId":67428258,"name":"Brightfield H-DAB Dataset.vsi [20x]","orig_height":63895,"orig_width":46622,"pixel_range":[0,255],"pixel_size_x":0.34612796434088866,"pixel_size_y":0.3461277765902012,"pixelsType":"uint8","shapes":[],"sizeT":1,"sizeZ":1,"theT":0,"theZ":0},{"x":38.525495669603586,"y":64.53769732232564,"width":194.42739798392267,"height":259.3436530286886,"zoom":2254,"dx":12525.167348651237,"dy":-19057.359365077347,"labels":[],"deltaT":[],"rotation":61,"selected":false,"pixel_size_x_symbol":"µm","pixel_size_x_unit":"MICROMETER","rotation_symbol":"°","max_export_dpi":1000,"channels":[{"active":true,"coefficient":1,"color":"FF0000","emissionWave":null,"family":"linear","inverted":false,"label":"0","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"00FF00","emissionWave":null,"family":"linear","inverted":false,"label":"1","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"0000FF","emissionWave":null,"family":"linear","inverted":false,"label":"2","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}}],"datasetId":null,"datasetName":"Multiple","imageId":3502,"name":"Brightfield H-DAB Dataset.vsi [20x]","orig_height":63895,"orig_width":46622,"pixel_range":[0,255],"pixel_size_x":0.34612796434088866,"pixel_size_y":0.3461277765902012,"pixelsType":"uint8","shapes":[{"type":"Rectangle","x":10392.845586151354,"y":50749.41359476116,"width":548.5997081065993,"height":773.0792498487598,"area":422510.4844366586,"strokeWidth":3,"strokeColor":"#00FF00","rotation":299,"id":28784029}],"sizeT":1,"sizeZ":1,"theT":0,"theZ":0},{"x":262.504144591211,"y":65.35268833655357,"width":168.42649302350645,"height":237.34432402572293,"zoom":8265,"dx":12643.854559795347,"dy":-19188.453219685536,"labels":[],"deltaT":[],"rotation":61,"selected":false,"pixel_size_x_symbol":"µm","pixel_size_x_unit":"MICROMETER","rotation_symbol":"°","max_export_dpi":1000,"border":{"color":"#00FF00","strokeWidth":10,"showBorder":true},"channels":[{"active":true,"coefficient":1,"color":"FF0000","emissionWave":null,"family":"linear","inverted":false,"label":"0","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"00FF00","emissionWave":null,"family":"linear","inverted":false,"label":"1","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"0000FF","emissionWave":null,"family":"linear","inverted":false,"label":"2","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}}],"datasetId":null,"datasetName":"Multiple","imageId":3502,"insetRoiId":28784029,"name":"Brightfield H-DAB Dataset.vsi [20x]","orig_height":63895,"orig_width":46622,"pixel_range":[0,255],"pixel_size_x":0.34612796434088866,"pixel_size_y":0.3461277765902012,"pixelsType":"uint8","shapes":[{"type":"Rectangle","strokeWidth":2,"strokeColor":"#FF00FF","x":10454.322035915362,"y":51050.831393755645,"width":182.17644332467248,"height":182.17644332467248,"id":2439834,"rotation":299},{"type":"Rectangle","strokeWidth":2,"strokeColor":"#FFFFFF","x":10575.911778337664,"y":51044.911778337664,"width":182.17644332467248,"height":182.17644332467225,"id":56477384,"rotation":299}],"sizeT":1,"sizeZ":1,"theT":0,"theZ":0},{"x":430.93063761471745,"y":65.35268833655357,"width":137.34779490607372,"height":137.34779490607372,"zoom":25591.673187356544,"dx":12765.589742422302,"dy":-19194.41961541798,"labels":[],"deltaT":[],"rotation":61,"selected":false,"pixel_size_x_symbol":"µm","pixel_size_x_unit":"MICROMETER","rotation_symbol":"°","max_export_dpi":1000,"border":{"color":"#FF00FF","strokeWidth":0.25,"showBorder":true},"channels":[{"active":true,"coefficient":1,"color":"FF0000","emissionWave":null,"family":"linear","inverted":false,"label":"0","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"00FF00","emissionWave":null,"family":"linear","inverted":false,"label":"1","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"0000FF","emissionWave":null,"family":"linear","inverted":false,"label":"2","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}}],"datasetId":null,"datasetName":"Multiple","imageId":3502,"insetRoiId":2439834,"name":"Brightfield H-DAB Dataset.vsi [20x]","orig_height":63895,"orig_width":46622,"pixel_range":[0,255],"pixel_size_x":0.34612796434088866,"pixel_size_y":0.3461277765902012,"pixelsType":"uint8","shapes":[],"sizeT":1,"sizeZ":1,"theT":0,"theZ":0},{"x":361.75547083720585,"y":233.52184558476498,"width":69.1751667775116,"height":69.17516677751152,"zoom":25591.673187356544,"dx":12644,"dy":-19188.5,"labels":[],"deltaT":[],"rotation":61,"selected":false,"pixel_size_x_symbol":"µm","pixel_size_x_unit":"MICROMETER","rotation_symbol":"°","max_export_dpi":1000,"border":{"color":"#FFFFFF","strokeWidth":5,"showBorder":true},"channels":[{"active":true,"coefficient":1,"color":"FF0000","emissionWave":null,"family":"linear","inverted":false,"label":"0","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"00FF00","emissionWave":null,"family":"linear","inverted":false,"label":"1","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}},{"active":true,"coefficient":1,"color":"0000FF","emissionWave":null,"family":"linear","inverted":false,"label":"2","reverseIntensity":false,"window":{"end":255,"max":255,"min":0,"start":0}}],"datasetId":null,"datasetName":"Multiple","imageId":3502,"insetRoiId":56477384,"name":"Brightfield H-DAB Dataset.vsi [20x]","orig_height":63895,"orig_width":46622,"pixel_range":[0,255],"pixel_size_x":0.34612796434088866,"pixel_size_y":0.3461277765902012,"pixelsType":"uint8","shapes":[],"sizeT":1,"sizeZ":1,"theT":0,"theZ":0}],"paper_width":595,"paper_height":842,"page_size":"A4","page_count":"2","paper_spacing":50,"page_col_count":"2","height_mm":297,"width_mm":210,"orientation":"vertical","legend":"","legend_collapsed":true,"page_color":"ffffff","figureName":"Big Image with Insets","fileId":20808}

The TIFF export worked better, but still the issue with rotated ROIs. This is possibly a bug from the Inset PR - I'll look into it...

One other fix is needed, when the border is a fraction of a pt (e.g. 0.25 pt in that case) we need to round to int for TIFF export:

+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -2278,7 +2278,7 @@ class TiffExport(FigureExport):
         # Add border if needed - Rectangle around the whole panel
         if 'border' in panel and panel['border'].get('showBorder'):
             sw = panel['border'].get('strokeWidth')
-            border_width = scale_to_export_dpi(sw)
+            border_width = int(round(scale_to_export_dpi(sw)))

will-moore · 2024-09-09T14:47:07Z

Here is the 'rotation' fix which addresses the rotation of 'rectangle' Shapes within panels (not due to this PR). Line numbers apply to main branch rather than this PR, but hopefully not to hard to find:

+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -216,6 +216,30 @@ class ShapeExport(object):
             point[0] * tf['A10'] + point[1] * tf['A11'] + tf['A12'],
         ] if tf else point
 
+    @staticmethod
+    def apply_rotation(point, centre, rotation):
+        cx = centre[0]
+        cy = centre[1]
+        x = point[0]
+        y = point[1]
+
+        dx = cx - x
+        dy = cy - y
+        # distance of point from centre of rotation
+        h = sqrt(dx * dx + dy * dy)
+        # and the angle
+        angle1 = atan2(dx, dy)
+
+        # Add the rotation to the angle and calculate new
+        # opposite and adjacent lengths from centre of rotation
+        angle2 = angle1 - radians(rotation)
+        newo = sin(angle2) * h
+        newa = cos(angle2) * h
+        # to give correct x and y within cropped panel
+        x = cx - newo
+        y = cy - newa
+        return x, y
+
     def draw_rectangle(self, shape):
         # to support rotation/transforms, convert rectangle to a simple
         # four point polygon and draw that instead
@@ -227,6 +251,17 @@ class ShapeExport(object):
             (shape['x'] + shape['width'], shape['y'] + shape['height']),
             (shape['x'], shape['y'] + shape['height']),
         ]
+
+        if shape.get('rotation' or 0) != 0:
+            rotation = shape.get('rotation')
+            # rotate around centre of rectangle
+            cx = shape['x'] + shape['width'] / 2
+            cy = shape['y'] + shape['height'] / 2
+            points = [
+                self.apply_rotation(point, [cx, cy], rotation)
+                for point in points
+            ]
+
         s['points'] = ' '.join(','.join(
             map(str, self.apply_transform(t, point))) for point in points)
         self.draw_polygon(s)
@@ -633,6 +668,15 @@ class ShapeToPilExport(ShapeExport):
             (shape['x'], shape['y'] + shape['height']),
         ]
         p = []
+        if shape.get('rotation' or 0) != 0:
+            rotation = shape.get('rotation')
+            # rotate around centre of rectangle
+            cx = shape['x'] + shape['width'] / 2
+            cy = shape['y'] + shape['height'] / 2
+            points = [
+                self.apply_rotation(point, [cx, cy], rotation)
+                for point in points
+            ]
         t = shape.get('transform')
         for point in points:
             transformed = self.apply_transform(t, point)

will-moore · 2024-09-12T08:58:27Z

Hi @Rdornier - that's nearly there, but the borders just need expanding by 1/2 their thickness so that they are completely outside the edges of the panel. Compare the figure and pdf:

Rdornier · 2024-09-13T08:22:55Z

Hi @will-moore
I've tried to fix it by removing the division by the zoom factor and mutiplying the strokewidth by 1.5.
It works quite good for me with big images. However, for small images, I still have the bug described in #578 (comment).

I'm wondering if it is again my dev env which just palying tricks with me.
Can you check using one of the image from this zenodo if you also experience the same bug ?

snoopycrimecop · 2024-10-11T00:57:43Z

Conflicting PR. Removed from build OMERO-plugins-push#208. See the console output for more details.
Possible conflicts:

PR Fill rois #577 Rdornier 'Fill rois'
- src/css/figure.css

~~--conflicts~~ Conflict resolved in build OMERO-plugins-push#209. See the console output for more details.

Rdornier added 4 commits July 9, 2024 16:52

Add outline icon and outline image ROI (full image)

2485530

update gitignore

a606cde

adapt rectangle to the viewport

125060c

fix outline area

5c16973

add space to remove useless changes

25ffe0e

Update stockeWidth after creating the Rectangle

822e758

will-moore mentioned this pull request Aug 9, 2024

Inset feature #549

Merged

Rdornier and others added 2 commits August 12, 2024 11:06

Merge branch 'ome:master' into image-outline

7652e92

Merge branch 'image-outline' of https://github.com/Rdornier/omero-figure

90eec45

into image-outline

Rdornier and others added 6 commits August 21, 2024 09:58

Merge branch 'ome:master' into image-outline

4aa3ee6

Merge branch 'image-outline' of https://github.com/Rdornier/omero-figure

97d2638

into image-outline

Merge branch 'ome:master' into image-outline

c9da69a

Merge branch 'image-outline' of https://github.com/Rdornier/omero-figure

47122cd

into image-outline

Add css border to images

09243c1

handle dynamic change of color and stroke width

a8341cd

remove last implementation

0a71133

Rdornier added 2 commits August 29, 2024 09:12

add border ouside panel and replace outline by border

e7925cc

remove extra space and commented code

c0c20fc

will-moore added the include label Aug 29, 2024

Rdornier added 3 commits August 29, 2024 14:32

adjust label margin according to borders

0f5fa39

Fix line-width drop-down thanks to Will

c57f8a8

Toggle show/hide with one button

8413745

Merge branch 'image-outline' of https://github.com/Rdornier/omero-figure

46dbf91

into image-outline

will-moore reviewed Sep 6, 2024

View reviewed changes

Rdornier added 4 commits September 9, 2024 08:30

Merge branch 'master' of https://github.com/Rdornier/omero-figure int…

24fe033

…o image-outline

Fixing margin-top

ec73abb

Fix method name

d538c6d

Fixing tiff export

e5a5963

Rdornier added 2 commits September 9, 2024 10:19

Fix flake8 errors

526f3b6

Fix flake8 errors

5d9e438

Rdornier added 3 commits September 9, 2024 17:37

fix rotation issue on pdf

88de839

Fix rotation issue

5a5063c

Fix border width rounding

cfcbf35

try fixing padding

243ea0c

Merge branch 'ome:master' into image-outline

b59d9ee

will-moore added this to the 7.2.0 milestone Oct 3, 2024

snoopycrimecop mentioned this pull request Oct 4, 2024

Rotate image panel by 90° #595

Open

Merge branch 'ome:master' into image-outline

3e0427f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image outline #578

Image outline #578

Rdornier commented Jul 19, 2024

will-moore commented Jul 20, 2024

Rdornier commented Aug 8, 2024

will-moore commented Aug 9, 2024

Rdornier commented Aug 13, 2024

will-moore commented Aug 13, 2024

Rdornier commented Aug 27, 2024

will-moore commented Aug 28, 2024

snoopycrimecop commented Aug 29, 2024

snoopycrimecop commented Sep 4, 2024 •

edited

Loading

snoopycrimecop commented Sep 6, 2024

will-moore commented Sep 6, 2024

will-moore commented Sep 6, 2024

will-moore Sep 6, 2024

will-moore commented Sep 6, 2024

snoopycrimecop commented Sep 7, 2024

snoopycrimecop commented Sep 8, 2024

snoopycrimecop commented Sep 9, 2024 •

edited

Loading

Rdornier commented Sep 9, 2024 •

edited

Loading

will-moore commented Sep 9, 2024

will-moore commented Sep 9, 2024

will-moore commented Sep 12, 2024

Rdornier commented Sep 13, 2024

snoopycrimecop commented Oct 11, 2024 •

edited

Loading

Image outline #578

Are you sure you want to change the base?

Image outline #578

Conversation

Rdornier commented Jul 19, 2024

will-moore commented Jul 20, 2024

Rdornier commented Aug 8, 2024

will-moore commented Aug 9, 2024

Rdornier commented Aug 13, 2024

will-moore commented Aug 13, 2024

Rdornier commented Aug 27, 2024

will-moore commented Aug 28, 2024

snoopycrimecop commented Aug 29, 2024

snoopycrimecop commented Sep 4, 2024 • edited Loading

snoopycrimecop commented Sep 6, 2024

will-moore commented Sep 6, 2024

will-moore commented Sep 6, 2024

will-moore Sep 6, 2024

Choose a reason for hiding this comment

will-moore commented Sep 6, 2024

snoopycrimecop commented Sep 7, 2024

snoopycrimecop commented Sep 8, 2024

snoopycrimecop commented Sep 9, 2024 • edited Loading

Rdornier commented Sep 9, 2024 • edited Loading

will-moore commented Sep 9, 2024

will-moore commented Sep 9, 2024

will-moore commented Sep 12, 2024

Rdornier commented Sep 13, 2024

snoopycrimecop commented Oct 11, 2024 • edited Loading

snoopycrimecop commented Sep 4, 2024 •

edited

Loading

snoopycrimecop commented Sep 9, 2024 •

edited

Loading

Rdornier commented Sep 9, 2024 •

edited

Loading

snoopycrimecop commented Oct 11, 2024 •

edited

Loading