From 2b73a920f644529b93bffac5785f4ae334846178 Mon Sep 17 00:00:00 2001 From: William Moore Date: Fri, 24 Mar 2017 11:33:00 +0000 Subject: [PATCH 1/7] Handle markdown in Panel lablels --- src/js/views/panel_view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js index 93cad8758..ca616ea53 100644 --- a/src/js/views/panel_view.js +++ b/src/js/views/panel_view.js @@ -146,8 +146,8 @@ if (typeof ljson.text == 'undefined' && ljson.time) { ljson.text = self.model.get_time_label_text(ljson.time); } else { - // Escape all labels so they are safe - ljson.text = _.escape(ljson.text); + // Markdown also escapes all labels so they are safe + ljson.text = markdown.toHTML(ljson.text); } positions[l.position].push(ljson); }); From 5d6b56fdf374176baee12154b92087930ed5dec7 Mon Sep 17 00:00:00 2001 From: William Moore Date: Sun, 26 Mar 2017 21:59:54 +0100 Subject: [PATCH 2/7] Export script handles markdown labels --- .../omero/figure_scripts/Figure_To_Pdf.py | 47 +++++++++++++++---- 1 file changed, 38 insertions(+), 9 deletions(-) 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 4044eba10..ed1985768 100644 --- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py +++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py @@ -51,9 +51,10 @@ try: from reportlab.pdfgen import canvas - from reportlab.lib.styles import getSampleStyleSheet + from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle from reportlab.lib.units import inch from reportlab.platypus import Paragraph + from reportlab.lib.enums import TA_LEFT, TA_CENTER, TA_RIGHT reportlab_installed = True except ImportError: reportlab_installed = False @@ -1338,25 +1339,53 @@ def save_figure(self): def draw_text(self, text, x, y, fontsize, rgb, align="center"): """ Adds text to PDF. Overwritten for TIFF below """ - ly = y + fontsize - ly = self.page_height - ly + 5 + if markdown_imported: + # convert markdown to html + text = markdown.markdown(text) + + y = self.page_height - y c = self.figure_canvas + # Needs to be wide enough to avoid wrapping + para_width = self.page_width red, green, blue = rgb red = float(red)/255 green = float(green)/255 blue = float(blue)/255 - c.setFont("Helvetica", fontsize) - c.setFillColorRGB(red, green, blue) + + alignment = TA_LEFT if (align == "center"): - c.drawCentredString(x, ly, text) + alignment = TA_CENTER + x = x - (para_width/2) elif (align == "right"): - c.drawRightString(x, ly, text) + alignment = TA_RIGHT + x = x - para_width elif (align == "left"): - c.drawString(x, ly, text) + pass elif align == 'vertical': + # Switch axes c.rotate(90) - c.drawCentredString(self.page_height - y, -(x + fontsize), text) + px = x + x = y + y = -px + # Align center + alignment = TA_CENTER + x = x - (para_width/2) + + style_n = getSampleStyleSheet()['Normal'] + style = ParagraphStyle( + 'label', + parent=style_n, + alignment=alignment, + textColor=(red, green, blue), + fontSize=fontsize) + + para = Paragraph(text, style) + w, h = para.wrap(para_width, y) # find required space + para.drawOn(c, x, y - h + int(fontsize * 0.25)) + + # Rotate back again + if align == 'vertical': c.rotate(-90) def draw_line(self, x, y, x2, y2, width, rgb): From 1136ebfd9b0932c88aaaa91e8cc1e04907986a8d Mon Sep 17 00:00:00 2001 From: William Moore Date: Wed, 5 Apr 2017 16:49:41 +0100 Subject: [PATCH 3/7] Handle markdown labels for TIFF export --- .../omero/figure_scripts/Figure_To_Pdf.py | 128 ++++++++++++++---- 1 file changed, 103 insertions(+), 25 deletions(-) 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 ed1985768..d586efdeb 100644 --- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py +++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py @@ -1454,7 +1454,6 @@ def __init__(self, conn, script_params, export_images=None): from omero.gateway import THISPATH self.GATEWAYPATH = THISPATH - self.font_path = os.path.join(THISPATH, "pilfonts", "FreeSans.ttf") self.ns = "omero.web.figure.tiff" self.mimetype = "image/tiff" @@ -1463,10 +1462,18 @@ def add_rois(self, panel, page): """ TIFF export doesn't add ROIs to page (does it to panel)""" pass - def get_font(self, fontsize): + def get_font(self, fontsize, bold=False, italics=False): """ Try to load font from known location in OMERO """ + font_name = "FreeSans.ttf" + if bold and italics: + font_name = "FreeSansBoldOblique.ttf" + elif bold: + font_name = "FreeSansBold.ttf" + elif italics: + font_name = "FreeSansOblique.ttf" + path_to_font = os.path.join(self.GATEWAYPATH, "pilfonts", font_name) try: - font = ImageFont.truetype(self.font_path, fontsize) + font = ImageFont.truetype(path_to_font, fontsize) except: font = ImageFont.load( '%s/pilfonts/B%0.2d.pil' % (self.GATEWAYPATH, 24)) @@ -1550,35 +1557,106 @@ def draw_line(self, x, y, x2, y2, width, rgb): y += 1 y2 += 1 + def draw_temp_label(self, text, fontsize, rgb): + """Returns a new PIL image with text. Handles html.""" + tokens = self.parse_html(text) + + widths = [] + heights = [] + for t in tokens: + font = self.get_font(fontsize, t['bold'], t['italics']) + txt_w, txt_h = font.getsize(t['text']) + widths.append(txt_w) + heights.append(txt_h) + + label_w = sum(widths) + label_h = max(heights) + + temp_label = Image.new('RGBA', (label_w, label_h), (255, 255, 255, 0)) + textdraw = ImageDraw.Draw(temp_label) + + w = 0 + for t in tokens: + font = self.get_font(fontsize, t['bold'], t['italics']) + txt_w, txt_h = font.getsize(t['text']) + textdraw.text((w, 0), t['text'], font=font, fill=rgb) + w += txt_w + return temp_label + + def parse_html(self, html): + """ + Parse html to give list of tokens with bold or italics + + Returns list of [{'text': txt, 'bold': true, 'italics': false}] + """ + in_bold = False + in_italics = False + + # Remove any

tags + html = html.replace('

', '') + html = html.replace('

', '') + + tokens = [] + token = "" + i = 0 + while i < len(html): + new_bold = False + new_italics = False + # look for start / end of b or i elements + start_bold = html[i:].startswith("") + end_bold = html[i:].startswith("") + start_ital = html[i:].startswith("") + end_ital = html[i:].startswith("") + + if start_bold: + i += len("") + elif end_bold: + i += len("") + elif start_ital: + i += len("") + elif end_ital: + i += len("") + + # if style has changed: + if start_bold or end_bold or start_ital or end_ital: + # save token with previous style + tokens.append({'text': token, 'bold': in_bold, 'italics': in_italics}) + token = "" + if start_bold or end_bold: + in_bold = start_bold + elif start_ital or end_ital: + in_italics = start_ital + else: + token = token + html[i] + i += 1 + tokens.append({'text': token, 'bold': in_bold, 'italics': in_italics}) + return tokens + def draw_text(self, text, x, y, fontsize, rgb, align="center"): """ Add text to the current figure page """ x = self.scale_coords(x) + y = y - 5 # seems to help, but would be nice to fix this! + y = self.scale_coords(y) fontsize = self.scale_coords(fontsize) - font = self.get_font(fontsize) - txt_w, txt_h = font.getsize(text) + if markdown_imported: + # convert markdown to html + text = markdown.markdown(text) + + temp_label = self.draw_temp_label(text, fontsize, rgb) + if align == "vertical": - # write text on temp image (transparent) - y = self.scale_coords(y) - x = int(round(x)) - y = int(round(y)) - temp_label = Image.new('RGBA', (txt_w, txt_h), (255, 255, 255, 0)) - textdraw = ImageDraw.Draw(temp_label) - textdraw.text((0, 0), text, font=font, fill=rgb) - w = temp_label.rotate(90, expand=True) - # Use label as mask, so transparent part is not pasted - y = y - (w.size[1]/2) - self.tiff_figure.paste(w, (x, y), mask=w) - else: - y = y - 5 # seems to help, but would be nice to fix this! - y = self.scale_coords(y) - textdraw = ImageDraw.Draw(self.tiff_figure) - if align == "center": - x = x - (txt_w / 2) - elif align == "right": - x = x - txt_w - textdraw.text((x, y), text, font=font, fill=rgb) + temp_label = temp_label.rotate(90, expand=True) + y = y - (temp_label.size[1]/2) + elif align == "center": + x = x - (temp_label.size[0] / 2) + elif align == "right": + x = x - temp_label.size[0] + x = int(round(x)) + y = int(round(y)) + # Use label as mask, so transparent part is not pasted + self.tiff_figure.paste(temp_label, (x, y), mask=temp_label) def save_page(self): """ From 4b57266081065aed4c2788fc7c6c5090161d883b Mon Sep 17 00:00:00 2001 From: William Moore Date: Mon, 24 Apr 2017 13:56:30 +0100 Subject: [PATCH 4/7] Add markdown info button beside 'Add Labels' in right panel --- omero_figure/static/figure/css/figure.css | 12 ++++++++++-- omero_figure/templates/figure/index.html | 12 ++++++++---- src/js/views/right_panel_view.js | 6 ++++++ 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/omero_figure/static/figure/css/figure.css b/omero_figure/static/figure/css/figure.css index 17b096b96..8913294bc 100644 --- a/omero_figure/static/figure/css/figure.css +++ b/omero_figure/static/figure/css/figure.css @@ -160,7 +160,6 @@ .markdown-info { padding: 3px 12px; color: #aaa; - display: none; text-align: right; padding-left: 40px; background: url(../images/markdown_light32x20.png) 0% center no-repeat; @@ -168,10 +167,19 @@ .markdown-info:hover { background: url(../images/markdown_dark32x20.png) 0% center no-repeat; } - .editing .markdown-info { + .legend-container .markdown-info { + display: none; + } + .legend-container .editing .markdown-info { display: block; } + #labelsTab .markdown-info { + height: 18px; + margin: 9px 9px 0; + float: left" + } + /* hide appropriate collapse/hide button */ .legend-collapsed .collapse-legend{ display: none; diff --git a/omero_figure/templates/figure/index.html b/omero_figure/templates/figure/index.html index cd68bd763..639306cad 100644 --- a/omero_figure/templates/figure/index.html +++ b/omero_figure/templates/figure/index.html @@ -455,12 +455,13 @@
-

Legend Formatting

+

Markdown Formatting

You can use "Markdown" syntax to add formatting to plain text. For example, - **this text will be bold** and this *word* will be italic. + **this text will be bold** and this *word* will be italic. NB: Links are not + supported for panel labels.

@@ -876,9 +877,12 @@
Scalebar
-
Add Labels
- +
Add Labels
+ +
+
Edit Labels
diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js index 2dcfb80f9..e900db226 100644 --- a/src/js/views/right_panel_view.js +++ b/src/js/views/right_panel_view.js @@ -249,6 +249,12 @@ events: { "submit .new-label-form": "handle_new_label", "click .dropdown-menu a": "select_dropdown_option", + "click .markdown-info": "markdownInfo", + }, + + markdownInfo: function(event) { + event.preventDefault(); + $("#markdownInfoModal").modal('show'); }, // Handles all the various drop-down menus in the 'New' AND 'Edit Label' forms From 07feec4e5c60e63fc293f89ee6f389428a02d1d2 Mon Sep 17 00:00:00 2001 From: William Moore Date: Mon, 24 Apr 2017 15:31:32 +0100 Subject: [PATCH 5/7] Don't wrap long labels to panel width/height --- omero_figure/static/figure/css/figure.css | 14 ++++++++++---- src/js/views/panel_view.js | 6 ------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/omero_figure/static/figure/css/figure.css b/omero_figure/static/figure/css/figure.css index 8913294bc..570f8a700 100644 --- a/omero_figure/static/figure/css/figure.css +++ b/omero_figure/static/figure/css/figure.css @@ -321,6 +321,9 @@ .label_layout { position:absolute; } + .label_layout p { + margin: 0; + } .left_vlabels>div { margin-bottom: 5px; } @@ -334,9 +337,10 @@ .left_vlabels{ position: absolute; - height: 100%; right: 100%; - width:400px; + height: 300%; + top: -100%; + width: 300%; text-align: center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); @@ -356,13 +360,15 @@ /* Classes here are generated in templates from 'top' etc See labelicon classes below */ .label_top { bottom: 100%; - width: 100%; + width: 300%; + left: -100%; text-align: center; margin-bottom: 3px; } .label_bottom { top: 100%; - width: 100%; + width: 300%; + left: -100%; text-align:center; } .label_left { diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js index ca616ea53..ef5088e47 100644 --- a/src/js/views/panel_view.js +++ b/src/js/views/panel_view.js @@ -64,9 +64,6 @@ 'width': w +'px', 'height': h +'px'}); - // container needs to be square for rotation to vertical - $('.left_vlabels', this.$el).css('width', h + 'px'); - // update the img within the panel var zoom = this.model.get('zoom'), vp_css = this.model.get_vp_img_css(zoom, w, h), @@ -167,9 +164,6 @@ }); self.$el.append(html); - // need to force update of vertical labels layout - $('.left_vlabels', self.$el).css('width', self.$el.height() + 'px'); - return this; }, From ff99cba461817e04d361b9544ced391f9c431916 Mon Sep 17 00:00:00 2001 From: William Moore Date: Mon, 24 Apr 2017 15:35:57 +0100 Subject: [PATCH 6/7] flake8 fixes --- .../scripts/omero/figure_scripts/Figure_To_Pdf.py | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) 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 d586efdeb..d4d5a15b0 100644 --- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py +++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py @@ -1568,7 +1568,7 @@ def draw_temp_label(self, text, fontsize, rgb): txt_w, txt_h = font.getsize(t['text']) widths.append(txt_w) heights.append(txt_h) - + label_w = sum(widths) label_h = max(heights) @@ -1600,8 +1600,6 @@ def parse_html(self, html): token = "" i = 0 while i < len(html): - new_bold = False - new_italics = False # look for start / end of b or i elements start_bold = html[i:].startswith("") end_bold = html[i:].startswith("") @@ -1620,7 +1618,8 @@ def parse_html(self, html): # if style has changed: if start_bold or end_bold or start_ital or end_ital: # save token with previous style - tokens.append({'text': token, 'bold': in_bold, 'italics': in_italics}) + tokens.append({'text': token, 'bold': in_bold, + 'italics': in_italics}) token = "" if start_bold or end_bold: in_bold = start_bold @@ -1645,7 +1644,6 @@ def draw_text(self, text, x, y, fontsize, rgb, align="center"): temp_label = self.draw_temp_label(text, fontsize, rgb) - if align == "vertical": temp_label = temp_label.rotate(90, expand=True) y = y - (temp_label.size[1]/2) From 4296c5619c036fec597b57c7b542c1415b57f5a3 Mon Sep 17 00:00:00 2001 From: William Moore Date: Mon, 8 May 2017 22:58:53 +0100 Subject: [PATCH 7/7] Fix vertical labels positioning for non-square images --- src/js/views/panel_view.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js index ef5088e47..d62d5f0d2 100644 --- a/src/js/views/panel_view.js +++ b/src/js/views/panel_view.js @@ -64,6 +64,9 @@ 'width': w +'px', 'height': h +'px'}); + // container needs to be square for rotation to vertical + $('.left_vlabels', this.$el).css('width', 3 * h + 'px'); + // update the img within the panel var zoom = this.model.get('zoom'), vp_css = this.model.get_vp_img_css(zoom, w, h), @@ -164,6 +167,9 @@ }); self.$el.append(html); + // need to force update of vertical labels layout + $('.left_vlabels', self.$el).css('width', 3 * self.$el.height() + 'px'); + return this; },