Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to adjust Scalebar width #504

Merged
merged 17 commits into from
May 3, 2023
Merged

Add option to adjust Scalebar width #504

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5e1781d
First Draft of scalable bar.
JulianHn Mar 23, 2023
8fb0397
Remove development logging.
JulianHn Mar 23, 2023
adc018c
Modify Figure export script to allow for variable scalebar widths.
JulianHn Mar 23, 2023
b5dc4d5
Add css changes for nicer layout
JulianHn Mar 23, 2023
f77c5e0
Parse string input for height to integer explictly to avoid issues wi…
JulianHn Mar 23, 2023
1cd3f56
Make tiff export with variable width scalebar possible by
JulianHn Mar 23, 2023
7380eda
Relayout the form template to fit in 2 rows.
JulianHn Mar 24, 2023
00b1978
Apply patch suggested by Will <https://github.com/ome/omero-figure/pu…
JulianHn Mar 24, 2023
6a4c708
Make offset of label to bar consistent between tiff and pdf export.
JulianHn Mar 24, 2023
cf2cdc5
Fix Flake8 warning and css styling
JulianHn Mar 24, 2023
038b99d
scalebar form tweaks
will-moore Mar 24, 2023
09a458b
Merge pull request #1 from will-moore/issue-503
JulianHn Mar 24, 2023
ce2aee9
Restore "Enter to submit functionality"
JulianHn Mar 28, 2023
f3708aa
Add reference to newly introduced height parameter
JulianHn Mar 30, 2023
9d4abfa
Add scalebar property "height" to the json model to ensure it is saved.
JulianHn Apr 20, 2023
265cc32
Replace sb["height"] with sb.get("height") with a default value of 3 …
JulianHn Apr 27, 2023
0d41664
Change title of the font size dropdown menu to "Font Size" for consis…
JulianHn Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down Expand Up @@ -1476,7 +1477,7 @@ 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"
Expand All @@ -1498,7 +1499,10 @@ def draw_scalebar(self, panel, region_width, page):
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):
Expand Down Expand Up @@ -2213,10 +2217,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."""
Expand Down
24 changes: 22 additions & 2 deletions omero_figure/static/figure/css/figure.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,12 +275,32 @@
}

.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;
}
.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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/js/views/panel_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion src/js/views/scalebar_form_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,8 @@ var ScalebarFormView = Backbone.View.extend({
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');
Expand All @@ -104,6 +105,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);
});
Expand Down Expand Up @@ -161,6 +163,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
Expand All @@ -170,6 +173,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
Expand All @@ -191,6 +195,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);
Expand Down
227 changes: 120 additions & 107 deletions src/templates/scalebar_form_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,111 +13,124 @@
{print(pixel_size_x + " " + pixel_size_symbol)} %>
</span>
</div>

</div>

<form class="scalebar_form form-inline">

<div class="input-group pull-left">
<input type="text" class="scalebar-length form-control input-sm"
placeholder="Length" value="<%= length %>" />
</div>

<!-- units -->
<div class="btn-group">
<button type="button" class="scalebar-units btn btn-default btn-sm dropdown-toggle"
title="Units" data-toggle="dropdown">
<span data-unit="<%= units %>"><%= units_symbol %></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<% _.each(unit_symbols, function(u){ %>
<li><a href='#'><%= u.unit %> (<span data-unit="<%= u.unit %>"><%= u.symbol %></span>)</a></li>
<% }); %>
</ul>
</div>

<div class="btn-group">
<button type="button" class="label-position btn btn-default btn-sm dropdown-toggle"
title="Position" data-toggle="dropdown">
<span data-position="<%= position %>" class="labelicon-<%= position %> glyphicon
<% if (_.contains(['top','bottom','left','right'],position)) print('glyphicon-log-out'); else {print('glyphicon-new-window')} %>"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Inside Corners</li>
<li><a href="#">
<span data-position="topleft" class="labelicon-topleft glyphicon glyphicon-new-window"></span>
Top Left</a>
</li>
<li><a href="#">
<span data-position="topright" class="labelicon-topright glyphicon glyphicon-new-window"></span>
Top Right</a>
</li>
<li><a href="#">
<span data-position="bottomleft" class="labelicon-bottomleft glyphicon glyphicon-new-window"></span>
Bottom Left</a>
</li>
<li><a href="#">
<span data-position="bottomright" class="labelicon-bottomright glyphicon glyphicon-new-window"></span>
Bottom Right</a>
</li>
</ul>
</div>

<div class="btn-group">
<button type="button" class="label-color btn btn-default btn-sm dropdown-toggle" title="Label Color"
data-toggle="dropdown">
<span data-color="<%= color %>" style="background-color:#<%= color %>">&nbsp &nbsp &nbsp</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu colorpicker" role="menu">
<li><a href="#">
<span data-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
</a></li>
<li><a href="#">
<span data-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
</a></li>
<li><a href="#">
<span data-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
</a></li>
<li><a href="#">
<span data-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
</a></li>
<li><a href="#">
<span data-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
</a></li>
<li><a href="#">
<span data-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
</a></li>
<li><a href="#">
<span data-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
</a></li>
</ul>
</div>

<div class="checkbox">
<label>
<input type="checkbox" class="scalebar_label" <% if (show_label) print("checked") %> > Label
</label>
</div>

<div class="btn-group">
<button type="button" class="scalebar_font_size btn btn-default btn-sm dropdown-toggle" title="Label Size"
data-toggle="dropdown" style="width:33px; <% if (!show_label) print("display:none") %>">
<span><%= font_size %></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
print ("<li><a href='#'><span>"+p+"</span></a></li>")
}); %>
</ul>
</div>

<% if (show){ %>
<button type="submit" class="show_scalebar btn btn-sm btn-success pull-right">Show</button>
<% } else { %>
<button type="button" class="hide_scalebar btn btn-sm btn-default pull-right">Hide</button>
<% } %>
</form>
<form class="scalebar_form">
<div class="row">
<div class="form-group col-sm-2 scalebar_text">
Length
</div>
<div class="form-group col-sm-2 scalebar_length">
<input type="text" id="inputScaleBarLength" class="scalebar-length form-control col-sm-4"
placeholder="Length" value="<%= length %>" />
</div>
<div class="form-group col-sm-auto btn-group scalebar_unit">
<button type="button" class="scalebar-units btn btn-default dropdown-toggle"
title="Units" data-toggle="dropdown">
<span data-unit="<%= units %>"><%= units_symbol %></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<% _.each(unit_symbols, function(u){ %>
<li><a href='#'><%= u.unit %> (<span data-unit="<%= u.unit %>"><%= u.symbol %></span>)</a></li>
<% }); %>
</ul>
</div>
<div class="form-group col-sm-1" />
<div class="form-group col-sm-auto btn-group">
<button type="button" class="label-position btn btn-default dropdown-toggle"
title="Position" data-toggle="dropdown">
<span data-position="<%= position %>" class="labelicon-<%= position %> glyphicon
<% if (_.contains(['top','bottom','left','right'],position)) print('glyphicon-log-out'); else {print('glyphicon-new-window')} %>"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Inside Corners</li>
<li><a href="#">
<span data-position="topleft" class="labelicon-topleft glyphicon glyphicon-new-window"></span>
Top Left</a>
</li>
<li><a href="#">
<span data-position="topright" class="labelicon-topright glyphicon glyphicon-new-window"></span>
Top Right</a>
</li>
<li><a href="#">
<span data-position="bottomleft" class="labelicon-bottomleft glyphicon glyphicon-new-window"></span>
Bottom Left</a>
</li>
<li><a href="#">
<span data-position="bottomright" class="labelicon-bottomright glyphicon glyphicon-new-window"></span>
Bottom Right</a>
</li>
</ul>
</div>
<div class="form-group col-sm-auto btn-group">
<button type="button" class="label-color btn btn-default dropdown-toggle" title="Label Color"
data-toggle="dropdown">
<span data-color="<%= color %>" style="background-color:#<%= color %>">&nbsp &nbsp &nbsp</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu colorpicker" role="menu">
<li><a href="#">
<span data-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
</a></li>
<li><a href="#">
<span data-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
</a></li>
<li><a href="#">
<span data-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
</a></li>
<li><a href="#">
<span data-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
</a></li>
<li><a href="#">
<span data-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
</a></li>
<li><a href="#">
<span data-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
</a></li>
<li><a href="#">
<span data-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="form-group col-sm-2 scalebar_text">
Height
</div>
<div class="form-group col-sm-2 scalebar_length">
<input type="text" class="scalebar-height form-control"
placeholder="Height" value="<%= height %>" />
</div>
<div class="form-group col-sm-1 scalebar_text" style="padding-left: 2px;">
px
</div>
</div>
<div class="row">
<div class="form-group col-sm-2 scalebar_text">
Label?
</div>
<div class="form-group col-sm-2" style="display:flex; justify-content: center; align-items: center;">
<input type="checkbox" class="scalebar_label" <% if (show_label) print("checked") %> />
</div>
<div class="form-group col-sm-auto btn-group">
<button type="button" class="scalebar_font_size btn btn-default dropdown-toggle" title="Label Size"
data-toggle="dropdown" style="width:33px; <% if (!show_label) print("display:none") %>">
<span><%= font_size %></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
print ("<li><a href='#'><span>"+p+"</span></a></li>")
}); %>
</ul>
</div>
<div class="form-group col-sm-6" style="display:flex; justify-content: right;">
<% if (show){ %>
<button type="submit" class="show_scalebar btn btn-success pull-right">Show</button>
<% } else { %>
<button type="button" class="hide_scalebar btn btn-default pull-right">Hide</button>
<% } %>
</div>
</div>
</form>
6 changes: 4 additions & 2 deletions src/templates/scalebar_panel_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@

<div class="scalebar label_<%= position %>" style="background-color: #<%= color %>">
<div class="scalebar label_<%= position %>" style="background-color: #<%= color %>; height: <%= height %>px">
<% if (show_label) { %>
<div class='scalebar-label' style='color: #<%= color %>; font-size: <%= font_size %>px'>
<div class='scalebar-label' style='color: #<%= color %>; font-size: <%= font_size %>px;
<% if(position === "bottomleft" || position === "bottomright") print("margin-bottom:" + height);%>px;
<% if(position === "topleft" || position === "topright") print("margin-top:" + height);%>px;'>
<%= length %> <%= symbol %>
</div>
<% } %>
Expand Down