Fix scalebar position by Rdornier · Pull Request #637 · ome/omero-figure

Rdornier · 2025-04-25T12:17:46Z

Fixes #613

The margin can be set by the user (default 5%), as well as the unit (% or pixel)

Tom-TBT · 2025-05-13T15:29:24Z

Is it necessary to have both the pixel and % option? I would use percentage in most cases, because I don't need to change it when resizing the image. What would be a good use case for pixel?
edit: I guess the use case is the one you show with wide VS tall image. Could that be tackled by saying the % always takes the longest edge?

If there's no good reason for it, I'd keep the % only, because the UI gets crowded. With the colorbar coming, adding more lines means that a scrollbar would appear. Without the option, it could fit in the line above.

I got this

with this diff (I did not took care of the logic behind between % and pixel)

diff --git a/src/templates/scalebar_form.template.html b/src/templates/scalebar_form.template.html
index 83028407..cc390136 100644
--- a/src/templates/scalebar_form.template.html
+++ b/src/templates/scalebar_form.template.html
@@ -17,7 +17,7 @@
 <form class="scalebar_form">
     <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
         <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="width:50px">Length</label>
+            <label class="col-form-label col-form-label-sm" style="width:40px">Length</label>
         </div>
         <div class="col-auto input-group-sm">
           <input type="number" class="scalebar-length input-sm form-control"
@@ -107,24 +107,38 @@
             <% } %>
         </div>
     </div>
+
     <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
         <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="width:50px">Height</label>
+            <label class="col-form-label col-form-label-sm" style="width:40px">Height</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
             <input type="number" class="label-text scalebar-height form-control input-sm"
-            placeholder="Height" value="<%= height %>" style="width:52px" />
+            placeholder="Height" value="<%= height %>" style="width:35px" />
         </div>
-        <div class="col-auto input-group-sm" style="margin-right: 10px;">
+        <div class="col-auto input-group-sm" style="margin-right: 5px;">
             <label class="col-form-label col-form-label-sm">px</label>
         </div>

+
+
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="width:50px; padding-left: 5px;">Margin</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text scalebar-margin form-control input-sm"
+            placeholder="Margin" value="<%= margin %>" style="width:35px" />
+        </div>
+        <div class="col-auto input-group-sm" style="margin-right: 2px;">
+            <label for="percentage" class="col-form-label col-form-label-sm">%</label>
+        </div>
+
         <div class="col-auto input-group-sm">
             <label class="form-check-label">Label</label>
             <input type="checkbox" class="scalebar_label form-check-input" <% if (show_label) print("checked") %> />
         </div>

-        <div class="col-auto btn-group" style="padding: 0; width: 50px;">
+        <div class="col-auto btn-group" style="padding: 0; width: 40px;">
             <button type="button" class="scalebar_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
             data-bs-toggle="dropdown" style="width:33px; <% if (!show_label) print("display:none") %>">
                 <span class='dropdown_icon'><%= font_size %></span>
@@ -141,30 +155,4 @@
         </div>
     </div>

-    <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
-        <div class="col-auto input-group-sm">
-            <label class="col-form-label col-form-label-sm" style="width:50px">Margin</label>
-        </div>
-        <div class="form-group col-auto scalebar_length input-group-sm">
-            <input type="number" class="label-text scalebar-margin form-control input-sm"
-            placeholder="Margin" value="<%= margin %>" style="width:52px" />
-        </div>
-
-        <div class="col-auto  input-group-sm">
-            <input type="radio" name="scalebar-margin-unit" id="pixel" class="scalebar_margin_unit"
-            value="px" <% if (margin_unit == "px") print("checked") %>/>
-        </div>
-        <div class="col-auto input-group-sm" style="margin-right: 10px;">
-            <label for="pixel" class="col-form-label col-form-label-sm">px</label>
-        </div>
-        <div class="col-auto  input-group-sm">
-            <input type="radio" name="scalebar-margin-unit" id="percentage" class="scalebar_margin_unit"
-            value="%" <% if (margin_unit == "%") print("checked") %>/>
-        </div>
-        <div class="col-auto input-group-sm" style="margin-right: 10px;">
-            <label for="percentage" class="col-form-label col-form-label-sm">%</label>
-        </div>
-
-    </div>
-
 </form>

We could also wait for the colorbar PR to be merged and refine the UI then.

Rdornier · 2025-05-14T07:10:36Z

Is it necessary to have both the pixel and % option? I would use percentage in most cases, because I don't need to change it when resizing the image. What would be a good use case for pixel?

Beacuse of this example. Different parts of tissues are used in insets, same magnification and same height, to have a nice layout at the end. Users are expected to have the scalebar at the same position as well. For that, I think the pixel option is necessary.

Tom-TBT · 2025-05-15T09:23:17Z

Ok that's a compelling example, makes sense why you would need both. Functionality wise, lgtm. I'm only concerned about the UI.

I still think it should fit in two lines, but it's getting hard. Maybe aligning radio buttons vertically does the trick:

Because it's also "multi panel alignment", I wondered if it could be handled at the figure level (instead of the panel level). But it's not a good idea to scatter the scalebar stuff in different places...

will-moore · 2025-05-15T11:42:34Z

Thanks for your work on this. I think that we could ONLY support px and not %. The percent is less predictable (we have the same problem with setting out grids with a gap of % width etc. and I think users can do all they need with just px?

Rdornier · 2025-06-23T15:13:47Z

Hi,

I try to make things fitting in two lines, but it looks a bit squeezed.

I think that we could ONLY support px and not %.

I gave the choice between px and % in order to be backward compatible. But maybe we'll have to remove % to make UI nicer... I don't know what is the best solution here.

Rémy.

Tom-TBT · 2025-07-09T13:58:13Z

The Margin input needs to be larger, two digits isn't fitting. With pixels I could expect values larger than 100.

I played around with the CSS. The main change is the flex display for the radio buttons. The left and right margin & padding set to 0 is to get the "units" closer to the input fields, so I could make the Margin input field larger with more space on the left of "Margin" label

diff --git a/src/templates/scalebar_form.template.html b/src/templates/scalebar_form.template.html
index b915cbc0..b7399a9d 100644
--- a/src/templates/scalebar_form.template.html
+++ b/src/templates/scalebar_form.template.html
@@ -107,7 +107,7 @@
             <% } %>
         </div>
     </div>
-    <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
+    <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem; margin-top: 0px;">
         <div class="col-auto input-group-sm">
             <label class="col-form-label col-form-label-sm" style="width:40px">Height</label>
         </div>
@@ -115,28 +115,30 @@
             <input type="number" class="label-text scalebar-height form-control input-sm"
             placeholder="Height" value="<%= height %>" style="width:30px" />
         </div>
-        <div class="col-auto input-group-sm" style="margin-right: 5px;">
+        <div class="col-auto input-group-sm" style="margin-right: 0px; padding-left: 0px;">
             <label class="col-form-label col-form-label-sm">px</label>
         </div>

-        <div class="col-auto input-group-sm">
+        <div class="col-auto input-group-sm" style="margin-left: 6px;">
             <label class="col-form-label col-form-label-sm" style="width:40px">Margin</label>
         </div>
         <div class="form-group col-auto scalebar_length input-group-sm">
             <input type="number" class="label-text scalebar-margin form-control input-sm"
-            placeholder="Margin" value="<%= margin %>" style="width:30px" />
+            placeholder="Margin" value="<%= margin %>" style="width:38px; padding-left: 3px; padding-right: 3px;" />
         </div>

-        <div class="col-auto  input-group-sm">
-            <input type="radio" name="scalebar-margin-unit" id="pixel" style="vertical-align: bottom;" class="scalebar_margin_unit"
-            value="px" <% if (margin_unit == "px") print("checked") %>/>
-            <label for="pixel" class="col-form-label col-form-label-sm" style="margin-bottom: -5px;">px</label><br/>
-            <input type="radio" name="scalebar-margin-unit" id="percentage" style="vertical-align: top;" class="scalebar_margin_unit"
-            value="%" <% if (margin_unit == "%") print("checked") %>/>
-            <label for="percentage" class="col-form-label col-form-label-sm" style="vertical-align: top; margin-top: -8px; font-size: 12px;">%</label><br/>
+        <div class="col-auto input-group-sm" style="display: flex; align-items: center; gap: 0px; flex-direction: column; align-items: flex-start; padding-left: 0px;">
+            <div style="display: flex; align-items: center;">
+                <input type="radio" name="scalebar-margin-unit" id="pixel" class="scalebar_margin_unit" value="px" <% if (margin_unit == "px") print("checked") %> />
+                <label for="pixel" class="col-form-label col-form-label-sm" style="font-size: 13px; margin-bottom: 0; margin-right: 5px; padding: 0px">&nbsp;px</label>
+            </div>
+            <div style="display: flex; align-items: center;">
+                <input type="radio" name="scalebar-margin-unit" id="percentage" class="scalebar_margin_unit" value="%" <% if (margin_unit == "%") print("checked") %> />
+                <label for="percentage" class="col-form-label col-form-label-sm" style="font-size: 12px; margin-bottom: 0; padding: 0px">&nbsp;%</label>
+            </div>
         </div>

-        <div class="col-auto input-group-sm">
+        <div class="col-auto input-group-sm" style="padding-left: 0px;">
             <label class="form-check-label">Label</label>
             <input type="checkbox" class="scalebar_label form-check-input" <% if (show_label) print("checked") %> />
         </div>
@@ -153,7 +155,7 @@
             }); %>
             </ul>
         </div>
-        <div class="form-group col-auto scalebar_text" style="padding-left: 2px;">
+        <div class="form-group col-auto scalebar_text" style="padding-left: 0px;">
             <% if (show_label) print("pt") %>
         </div>
     </div>

Before

After

Rdornier · 2025-07-15T08:27:24Z

Thanks @Tom-TBT for reviewing.
The changes you are proposing fit better in the UI

will-moore · 2025-07-28T15:37:15Z

+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text scalebar-margin form-control input-sm"
+            placeholder="Margin" value="<%= margin %>" style="width:38px; padding-left: 3px; padding-right: 3px;" />


I found that we can reduce the width of this input to 30px and it's still wide enough for 2 digits. This fixes an issue I'm seeing with the row being too long and overflowing:

will-moore · 2025-07-28T15:44:06Z

Apologies for the delayed response. I also just read the comments above and see that @Tom-TBT asked for the Margin input to allow for 3 or more digits!
It feels like the css layout we are using is a little too brittle, so that subtle differences in browsers / defaults causes problems like my overflow screenshot above, but I don't know an easy fix for that.

will-moore · 2025-07-28T16:24:17Z

Do we want to keep the % option for Margin? Does it have any value other than for backwards compatibility?

We could get around the backwards compatibility issue by calculating the px equivalent (5 % of max(width, height)) when doing the upgrade step and then we just work in px.

The only minor issue I see is if you have a bunch of different sized panels that were previously all 5 % margin, then they would end up with different Margin px values, so that if you then resized them all to be the same size, and aligned them, you'd notice that the scalebars would have different margins. But this would be easily fixed by selecting all and setting the same margin px for all.

Ah - I just tried that and there's a bug (not coming from this PR) that I think I've noticed before...
If you select different values for E.g scalebar Height or Length (or most other attributes) for scalebars of 2 panels, then you select the panels, the form shows a placeholder e.g. Height instead of a value. Now if you change something in the scalebar form (e.g. colour) then ALL the forms inputs are applied to ALL the scalebar attributes, so you get an invalid/null Height (or Length etc) for all the scalebars.
To fix this, we need to update scalebar like channel - with panel_model.save_channel: function(cIndex, attr, value) only saving the changed attributes.

Rdornier · 2025-07-30T09:43:20Z

Hi @will-moore

Thanks for your inputs.

I found that we can reduce the width of this input to 30px and it's still wide enough for 2 digits. This fixes an issue I'm seeing with the row being too long and overflowing:

I reduce a bit the input size to keep 3 digits instead of 4.

Ah - I just tried that and there's a bug (not coming from this PR) that I think I've noticed before... [...] To fix this, we need to update scalebar like channel - with panel_model.save_channel: function(cIndex, attr, value) only saving the changed attributes.

Sounds like a good idea but I wasn't able to separate the different attributes. There is a form that is submitted for scalebar lenght, color, position and height and the keyup event prevents me to know which attribute was changed (I don't say it is not possible to separate, but I couldn't find a way to do it). Instead, I added a NaN check so that the corresponding attribute is not updated.

Do we want to keep the % option for Margin? Does it have any value other than for backwards compatibility?

From my side, we can keep px unit only and implement the trick you describe to be backward compatible but this is a subjective opinion. I don't see scenario where % is necessary but maybe @Tom-TBT can add more inputs on that, as he was more in favor of % than px.

snoopycrimecop · 2025-08-01T08:06:34Z

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

PR Label on rois #600 Rdornier 'Label on rois'
- src/templates/scalebar_form.template.html

--conflicts

snoopycrimecop · 2025-09-13T00:44:21Z

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

PR Label on rois #600 Rdornier 'Label on rois'
- src/templates/scalebar_form.template.html

--conflicts

snoopycrimecop · 2025-09-24T00:49:51Z

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

PR Label on rois #600 Rdornier 'Label on rois'
- src/templates/scalebar_form.template.html

--conflicts

will-moore · 2025-09-24T08:20:56Z

@Tom-TBT Do you have a strong feeling on whether we need to keep % for scalebar margin?

I think I'm generally in favour of doing the simplest thing, instead of trying to support all possible usages. Supporting more options leads to more complex UI etc, which makes it harder for users and developers.

If we can just support px (same as colorbar margin or panel border or font-sizes etc) then let's just do that. The only reason for % is for historical reasons, but if we keep it now then we'll have to support it forever! We have 2 options for the upgrading:

As I suggested above, we can calculate what the existing 5% border is in pixels, based on the the size of the panel
OR, we can assume that if users never got to choose their scalebar margin before, then they don't really care what the exact margin is and we can just pick a default number e.g. 10 px for all scalebars. This avoids the issue above where every panel will be given a different scalebar margin based on it's current size.

I think I prefer the 2nd option. The default number will also be the margin for all new scalebars. Then, ALL scalebars will be consistently aligned by default, addressing the main issue above. And users can easily choose a different margin if they want. Thoughts?

Tom-TBT · 2025-09-24T08:58:31Z

Sorry I missed on replying to Rémy. No I'm not strongly in favour of keeping %. I see your arguments and I think pixel alone can handle use cases fine.

Then there's good and bad in both implementation you suggest. But setting it 10px makes it less confusing than an "random" & panel-dependant value.

Rdornier · 2025-09-24T09:50:37Z

Ok sounds good for me 👍 . Let's just remove % and fix default 10px margin. Thanks for your inputs

Rdornier · 2025-09-24T12:07:36Z

Should be done. Please tell me if everything works correctly. Thanks:

will-moore · 2025-09-24T12:57:57Z

-                    }
-                    if (p.scalebar && !p.scalebar.margin_unit) {
-                        p.scalebar.margin_unit = '%';
+                        p.scalebar.margin = 10;


I think !p.scalebar.margin should instead check if p.scalebar.margin == undefined because I think if the margin is 0 then !p.scalebar.margin will be True (assuming 0 is a valid margin)

Ok, but shouldn't we do the same also with scalebar height (line 284) ?

Hmmm - possibly, although you could argue that a scalebar height of 0 is not valid, whereas a margin of 0 is possibly valid (but still unlikely).

Ah I see... fair enough. Let's correct only the margin

will-moore · 2025-09-24T13:01:18Z

        json.height = json.height || 3;
-        json.margin = json.margin || 5;
-        json.margin_unit = json.margin_unit || '%';
+        json.margin = json.margin || 10;


Also this won't support a margin of 0;
I think you want json.margin = json.margin ?? 10; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

will-moore · 2025-09-24T13:02:53Z

-        "margin": 5,
-        "margin_unit": "%"
+        "margin": 10,
+        "margin_unit": "px"


Don't think we need margin_unit anywhere now

Yes, you're right. I forget to check this file.

will-moore · 2025-09-24T13:04:06Z

                sb_json.length = sb.length;
                sb_json.height = sb.height;
+                sb_json.margin = sb.margin;
+                sb_json.margin_unit = sb.margin_unit;


Don't need margin_unit here now?

snoopycrimecop · 2025-09-26T09:00:13Z

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

PR Label on rois #600 Rdornier 'Label on rois'
- src/templates/scalebar_form.template.html

--conflicts

snoopycrimecop · 2025-11-26T00:41:57Z

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

PR Label on rois #600 Rdornier 'Label on rois'
- src/templates/scalebar_form.template.html

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

snoopycrimecop · 2025-12-05T00:34:27Z

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

PR Label on rois #600 Rdornier 'Label on rois'
- src/templates/scalebar_form.template.html

--conflicts

snoopycrimecop · 2025-12-17T21:06:34Z

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

PR Label on rois #600 Rdornier 'Label on rois'
- src/templates/scalebar_form.template.html

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

…o fix-scalebar-position

…mero-figure into fix-scalebar-position

Rdornier · 2025-12-18T14:25:49Z

Conflicts are fixed.
Ready to merge

will-moore

Testing on new merge-ci after conflicts resolved. Looking good, thanks.

Rdornier added 6 commits April 25, 2025 08:55

add scalebar margin as user input

8b515ae

update figure version

5761e55

add choice between pixel and percentage

85ed9c8

reformat px/% choice

5942be0

fix pdf and tiff export

4f5de56

update figure version

fe9f146

jburel requested a review from Tom-TBT May 9, 2025 12:08

Rdornier and others added 2 commits June 13, 2025 16:24

Merge branch 'ome:master' into fix-scalebar-position

86ac943

fitting on two lines

69e5fe4

Update UI according to Tom inputs

d6231e5

will-moore added the include label Jul 28, 2025

will-moore reviewed Jul 28, 2025

View reviewed changes

Rdornier added 2 commits July 29, 2025 11:14

reducing margin width to keep 3 digits

d1225fa

fix NaN error when updating scalebar on multiple selections

3470d49

Merge branch 'ome:master' into fix-scalebar-position

d15ebc2

Merge branch 'ome:master' into fix-scalebar-position

ac58011

Rdornier added 2 commits September 23, 2025 13:47

Merge branch 'ome:master' into fix-scalebar-position

8c3601e

Merge branch 'ome:master' into fix-scalebar-position

2e94809

Only keep pixel unit for scalebar margin

3213bf8

will-moore reviewed Sep 24, 2025

View reviewed changes

Rdornier added 2 commits September 24, 2025 15:13

allow for 0px margin

8b25d60

remove all unnecessary margin-unit

31d53f8

Merge branch 'ome:master' into fix-scalebar-position

8a77378

jburel closed this Dec 2, 2025

jburel reopened this Dec 2, 2025

will-moore added this to the 7.3.0 milestone Dec 15, 2025

Rdornier added 2 commits December 18, 2025 15:19

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

f0bdfe0

…o fix-scalebar-position

Merge branch 'fix-scalebar-position' of https://github.com/Rdornier/o…

c5e9436

…mero-figure into fix-scalebar-position

will-moore approved these changes Dec 18, 2025

View reviewed changes

will-moore merged commit 88b01ef into ome:master Dec 18, 2025
1 check passed

will-moore mentioned this pull request Dec 19, 2025

Scalebar in exported tiffs #370

Closed

Conversation

Rdornier commented Apr 25, 2025

Uh oh!

Tom-TBT commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Rdornier commented May 14, 2025

Uh oh!

Tom-TBT commented May 15, 2025

Uh oh!

will-moore commented May 15, 2025

Uh oh!

Rdornier commented Jun 23, 2025

Uh oh!

Tom-TBT commented Jul 9, 2025

Uh oh!

Rdornier commented Jul 15, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

will-moore commented Jul 28, 2025

Uh oh!

will-moore commented Jul 28, 2025

Uh oh!

Rdornier commented Jul 30, 2025

Uh oh!

snoopycrimecop commented Aug 1, 2025

Uh oh!

snoopycrimecop commented Sep 13, 2025

Uh oh!

snoopycrimecop commented Sep 24, 2025

Uh oh!

will-moore commented Sep 24, 2025

Uh oh!

Tom-TBT commented Sep 24, 2025

Uh oh!

Rdornier commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Rdornier commented Sep 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snoopycrimecop commented Sep 26, 2025

Uh oh!

snoopycrimecop commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

snoopycrimecop commented Dec 5, 2025

Uh oh!

snoopycrimecop commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Rdornier commented Dec 18, 2025

Uh oh!

will-moore left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Tom-TBT commented May 13, 2025 •

edited

Loading

Rdornier commented Sep 24, 2025 •

edited

Loading

snoopycrimecop commented Nov 26, 2025 •

edited

Loading

snoopycrimecop commented Dec 17, 2025 •

edited

Loading