Add option to adjust Scalebar width

omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py

@@ -901,7 +901,7 @@ def get_figure_file_name(self, page=None):
         if self.zip_folder_name is not None:
             full_name = os.path.join(self.zip_folder_name, full_name)
 
-        while(os.path.exists(full_name)):
+        while os.path.exists(full_name):
             index += 1
             full_name = "%s_page_%02d.%s" % (name, index, fext)
             if self.zip_folder_name is not None:
@@ -1434,19 +1434,20 @@ def draw_scalebar(self, panel, region_width, page):
         position = 'position' in sb and sb['position'] or 'bottomright'
         align = 'left'
 
+        half_height = sb['height'] // 2
         if position == 'topleft':
             lx = x + spacer
-            ly = y + spacer
+            ly = y + spacer + half_height
         elif position == 'topright':
             lx = x + width - spacer
-            ly = y + spacer
+            ly = y + spacer + half_height
             align = "right"
         elif position == 'bottomleft':
             lx = x + spacer
-            ly = y + height - spacer
+            ly = y + height - spacer - half_height
         elif position == 'bottomright':
             lx = x + width - spacer
-            ly = y + height - spacer
+            ly = y + height - spacer - half_height
             align = "right"
 
         pixel_size_x = panel['pixel_size_x']
@@ -1476,7 +1477,8 @@ def draw_scalebar(self, panel, region_width, page):
         else:
             lx_end = lx - canvas_length
 
-        self.draw_scalebar_line(lx, ly, lx_end, ly, 3, (red, green, blue))
+        self.draw_scalebar_line(lx, ly, lx_end, ly, sb["height"],
+                                (red, green, blue))
 
         if 'show_label' in sb and sb['show_label']:
             symbol = u"\u00B5m"
@@ -1492,13 +1494,17 @@ def draw_scalebar(self, panel, region_width, page):
                 pass
 
             # For 'bottom' scalebar, put label above
+            # 5 is an empirically determined offset that "works"
             if 'bottom' in position:
-                ly = ly - font_size
+                ly = ly - font_size - 5
             else:
                 ly = ly + 5
 
             self.draw_text(
-                label, (lx + lx_end)/2, ly, font_size, (red, green, blue),
+                label, (lx + lx_end)/2,
+                ly + ((-1 if position in ["bottomleft", "bottomright"]
+                       else 1) * half_height),
+                font_size, (red, green, blue),
                 align="center")
 
     def is_big_image(self, image):
@@ -2213,10 +2219,8 @@ def draw_scalebar_line(self, x, y, x2, y2, width, rgb):
         y2 = scale_to_export_dpi(y2)
         width = scale_to_export_dpi(width)
 
-        for l in range(width):
-            draw.line([(x, y), (x2, y2)], fill=rgb)
-            y += 1
-            y2 += 1
+        for l in range(-width // 2, width // 2):
+            draw.line([(x, y+l), (x2, y2+l)], fill=rgb)
 
     def draw_temp_label(self, text, fontsize, rgb):
         """Returns a new PIL image with text. Handles html."""
@@ -2295,7 +2299,6 @@ def parse_html(self, html):
     def draw_text(self, text, x, y, fontsize, rgb, align="center"):
         """ Add text to the current figure page """
         x = scale_to_export_dpi(x)
-        y = y - 5       # seems to help, but would be nice to fix this!
         y = scale_to_export_dpi(y)
         fontsize = scale_to_export_dpi(fontsize)
 

omero_figure/static/figure/css/figure.css

@@ -275,12 +275,35 @@
     }
 
     .scalebar_form .input-group {
-        width:50px;
+        width:80px;
         margin-right: 4px;
     }
 
+    .scalebar_form .form-group {
+        margin-bottom: 0;
+    }
+
+    .scalebar_form .row {
+        align-items: center;
+        display: flex;
+        gap: 3px;
+        margin-top: 3px;
+    }
+
+    .scalebar_form .scalebar_length {
+        padding-right: 0;
+    }
+
+    .scalebar_form .scalebar_text {
+        padding-right: 0;
+    }
+
+    .scalebar_form .scalebar_unit {
+        padding-left: 0;
+        padding-right: 10px;
+    }
+
     .scalebar {
-        height: 3px;
         position: absolute;
         margin: 5% !important;
     }

src/js/views/panel_view.js

@@ -276,10 +276,10 @@
                 sb_json.position = sb.position;
                 sb_json.color = sb.color;
                 sb_json.length = sb.length;
+                sb_json.height = sb.height;
                 sb_json.font_size = sb.font_size;
                 sb_json.show_label = sb.show_label;
                 sb_json.symbol = sb.units;
-
                 // Use global LENGTH_UNITS to get symbol for unit.
                 if (window.LENGTH_UNITS && window.LENGTH_UNITS[sb.units]){
                     sb_json.symbol = window.LENGTH_UNITS[sb.units].symbol;

src/js/views/scalebar_form_view.js

@@ -27,7 +27,15 @@ var ScalebarFormView = Backbone.View.extend({
         "click .pixel_size_display": "edit_pixel_size",
         "keypress .pixel_size_input"  : "enter_pixel_size",
         "blur .pixel_size_input"  : "save_pixel_size",
-    },
+        //"keyup input[type='text']"  : "handle_keyup",
+     },
+
+    handle_keyup: function (event) {
+        // If Enter key - submit form...
+        if (event.which == 13) {
+            this.update_scalebar();
+        }
+    }, 
 
     // simply show / hide editing field
     edit_pixel_size: function() {
@@ -74,14 +82,15 @@ var ScalebarFormView = Backbone.View.extend({
     // called when form changes
     update_scalebar: function(event) {
 
-        var $form = $('#scalebar_form form');
+        var $form = $('#scalebar_form');
 
         var length = $('.scalebar-length', $form).val(),
             units = $('.scalebar-units span:first', $form).attr('data-unit'),
             position = $('.label-position span:first', $form).attr('data-position'),
             color = $('.label-color span:first', $form).attr('data-color'),
             show_label = $('.scalebar_label', $form).prop('checked'),
-            font_size = $('.scalebar_font_size span:first', $form).text().trim();
+            font_size = $('.scalebar_font_size span:first', $form).text().trim(),
+            height = parseInt($('.scalebar-height', $form).val());
 
         this.models.forEach(function(m){
             var old_sb = m.get('scalebar');
@@ -104,6 +113,7 @@ var ScalebarFormView = Backbone.View.extend({
             if (color != '-') sb.color = color;
             sb.show_label = show_label;
             if (font_size != '-') sb.font_size = font_size;
+            if (height != '-') sb.height = height;
 
             m.save_scalebar(sb);
         });
@@ -161,6 +171,7 @@ var ScalebarFormView = Backbone.View.extend({
                     json.color = sb.color;
                     json.show_label = sb.show_label;
                     json.font_size = sb.font_size;
+                    json.height = sb.height;
                 }
                 else {
                     // combine attributes. Use '-' if different values found
@@ -170,6 +181,7 @@ var ScalebarFormView = Backbone.View.extend({
                     if (json.color != sb.color) json.color = '-';
                     if (!sb.show_label) json.show_label = false;
                     if (json.font_size != sb.font_size) json.font_size = '-';
+                    if (json.height != sb.height) json.height = '-';
                 }
             }
             // if any panels don't have scalebar - we allow to add
@@ -191,6 +203,7 @@ var ScalebarFormView = Backbone.View.extend({
         json.color = json.color || 'FFFFFF';
         json.font_size = json.font_size || 10;
         json.pixel_size_symbol = json.pixel_size_symbol || '-';
+        json.height = json.height || 3;
 
         var html = this.template(json);
         this.$el.html(html);