diff --git a/docs/figure_file_format.rst b/docs/figure_file_format.rst index e6039c65b..3218d2483 100644 --- a/docs/figure_file_format.rst +++ b/docs/figure_file_format.rst @@ -36,7 +36,7 @@ This is an example of a minimal OMERO.figure JSON file:: { // see older versions below - "version": 6, + "version": 7, "panels": [ { // position of the panel on the page @@ -91,6 +91,7 @@ Optional settings for each panel:: "scalebar": { "show": true, "length": 10, + "height": 3, "units": "MICROMETER", "position": "bottomright", // topright, topleft, bottomleft "color": "FFFFFF", @@ -234,6 +235,10 @@ that lines will not appear thicker on a panel when it is zoomed in. Supported Sh Version history ---------------- +New in version 7: + +- `scalebar`: added 'height': + New in version 6: - 'label': 'time':'seconds' changed to 'text':'[time.seconds]' (for all timestamp formats) diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py index ff79e737a..a4652c9ff 100644 --- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py +++ b/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.get('height', 3) // 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.get("height", 3), + (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) diff --git a/omero_figure/static/figure/css/figure.css b/omero_figure/static/figure/css/figure.css index ff42f02f1..332b65788 100644 --- a/omero_figure/static/figure/css/figure.css +++ b/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; } diff --git a/src/js/models/figure_model.js b/src/js/models/figure_model.js index 3186227fa..a52a1327a 100644 --- a/src/js/models/figure_model.js +++ b/src/js/models/figure_model.js @@ -1,7 +1,7 @@ // Version of the json file we're saving. // This only needs to increment when we make breaking changes (not linked to release versions.) - var VERSION = 6; + var VERSION = 7; // ------------------------- Figure Model ----------------------------------- @@ -260,6 +260,16 @@ }); } + if (v < 7) { + console.log("Transforming to VERSION 7"); + // Adding the height parameter to the JSON + _.each(json.panels, function(p){ + // rename lineWidth to strokeWidth + if (p.scalebar && !p.scalebar.height) { + p.scalebar.height = 3; + } + }); + } return json; }, diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js index 55be217e4..ca9f1599f 100644 --- a/src/js/views/panel_view.js +++ b/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; diff --git a/src/js/views/scalebar_form_view.js b/src/js/views/scalebar_form_view.js index 33efa4c89..1fff4b4a8 100644 --- a/src/js/views/scalebar_form_view.js +++ b/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,10 +203,12 @@ 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); + this.$el.find("[title]").tooltip(); return this; } -}); \ No newline at end of file +}); diff --git a/src/templates/scalebar_form_template.html b/src/templates/scalebar_form_template.html index e06e327b1..21f3c95a9 100644 --- a/src/templates/scalebar_form_template.html +++ b/src/templates/scalebar_form_template.html @@ -13,111 +13,128 @@ {print(pixel_size_x + " " + pixel_size_symbol)} %> - - - -
- -
- -
- - -
- - -
- -
- - -
- -
- -
+ +
+ <% if (show){ %> + + <% } else { %> + + <% } %> +
-
- -
+
+
+ Length +
+
+ +
+
+ + +
+
+
+ + +
+
+ + +
+
-
- - -
+
+
+ Height +
+
+ +
+
+ px +
- <% if (show){ %> - - <% } else { %> - - <% } %> - +
+ Label +
+
+ /> +
+
+ + +
+
+ <% if (show_label) print("pt") %> +
+
+ \ No newline at end of file diff --git a/src/templates/scalebar_panel_template.html b/src/templates/scalebar_panel_template.html index 9c180ba84..a78891eb0 100644 --- a/src/templates/scalebar_panel_template.html +++ b/src/templates/scalebar_panel_template.html @@ -1,7 +1,9 @@ -
+
<% if (show_label) { %> -
+
<%= length %> <%= symbol %>
<% } %>