Merge pull request #211 from will-moore/page_colour

Page colour

omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py

@@ -130,7 +130,8 @@ def __init__(self, canvas, panel, page, crop, page_height):
                 elif shape['type'] == "Ellipse":
                     self.draw_ellipse(shape)
 
-    def get_rgb(self, color):
+    @staticmethod
+    def get_rgb(color):
         # Convert from E.g. '#ff0000' to (255, 0, 0)
         red = int(color[1:3], 16)
         green = int(color[3:5], 16)
@@ -420,13 +421,6 @@ def get_panel_coords(self, shape_x, shape_y):
 
         return {'x': shape_x, 'y': shape_y}
 
-    def get_rgb(self, color):
-        # Convert from E.g. '#ff0000' to (255, 0, 0)
-        red = int(color[1:3], 16)
-        green = int(color[3:5], 16)
-        blue = int(color[5:7], 16)
-        return (red, green, blue)
-
     def draw_arrow(self, shape):
 
         start = self.get_panel_coords(shape['x1'], shape['y1'])
@@ -437,7 +431,7 @@ def draw_arrow(self, shape):
         y2 = end['y']
         head_size = ((shape['strokeWidth'] * 5) + 9) * self.scale
         stroke_width = shape['strokeWidth'] * self.scale
-        rgb = self.get_rgb(shape['strokeColor'])
+        rgb = ShapeToPdfExport.get_rgb(shape['strokeColor'])
 
         # Do some trigonometry to get the line angle can calculate arrow points
         dx = x2 - x1
@@ -477,7 +471,7 @@ def draw_line(self, shape):
         x2 = end['x']
         y2 = end['y']
         stroke_width = shape['strokeWidth'] * self.scale
-        rgb = self.get_rgb(shape['strokeColor'])
+        rgb = ShapeToPdfExport.get_rgb(shape['strokeColor'])
 
         self.draw.line([(x1, y1), (x2, y2)], fill=rgb, width=int(stroke_width))
 
@@ -493,7 +487,7 @@ def draw_rectangle(self, shape):
         cx = centre['x']
         cy = centre['y']
         scale_w = w * self.scale
-        rgb = self.get_rgb(shape['strokeColor'])
+        rgb = ShapeToPdfExport.get_rgb(shape['strokeColor'])
 
         # To support rotation, draw rect on temp canvas, rotate and paste
         width = int((shape['width'] + w) * self.scale)
@@ -523,7 +517,7 @@ def draw_ellipse(self, shape):
         rx = self.scale * shape['radiusX']
         ry = self.scale * shape['radiusY']
         rotation = (shape['rotation'] + self.panel['rotation']) * -1
-        rgb = self.get_rgb(shape['strokeColor'])
+        rgb = ShapeToPdfExport.get_rgb(shape['strokeColor'])
 
         width = int((rx * 2) + w)
         height = int((ry * 2) + w)
@@ -865,6 +859,16 @@ def draw_labels(self, panel, page):
 
             pos = l['position']
             l['size'] = int(l['size'])   # make sure 'size' is number
+            # If page is black and label is black, make label white
+            page_color = self.figure_json.get('page_color', 'ffffff').lower()
+            label_color = l['color'].lower()
+            label_on_page = pos in ('left', 'right', 'top',
+                                    'bottom', 'leftvert')
+            if label_on_page:
+                if label_color == '000000' and page_color == '000000':
+                    l['color'] = 'ffffff'
+                if label_color == 'ffffff' and page_color == 'ffffff':
+                    l['color'] = '000000'
             if pos in positions:
                 positions[pos].append(l)
 
@@ -1341,6 +1345,19 @@ def create_figure(self):
         self.figure_canvas = canvas.Canvas(
             name, pagesize=(self.page_width, self.page_height))
 
+        # Page color - simply draw colored rectangle over whole page
+        page_color = self.figure_json.get('page_color')
+        if page_color and page_color.lower() != 'ffffff':
+            rgb = ShapeToPdfExport.get_rgb('#' + page_color)
+            r = float(rgb[0])/255
+            g = float(rgb[1])/255
+            b = float(rgb[2])/255
+            self.figure_canvas.setStrokeColorRGB(r, g, b)
+            self.figure_canvas.setFillColorRGB(r, g, b)
+            self.figure_canvas.setLineWidth(4)
+            self.figure_canvas.rect(0, 0, self.page_width,
+                                    self.page_height, fill=1)
+
     def save_page(self, page=None):
         """ Called on completion of each page. Saves page of PDF """
         self.figure_canvas.showPage()
@@ -1508,8 +1525,11 @@ def create_figure(self):
         """
         tiff_width = self.scale_coords(self.page_width)
         tiff_height = self.scale_coords(self.page_height)
-        self.tiff_figure = Image.new(
-            "RGBA", (tiff_width, tiff_height), (255, 255, 255))
+        rgb = (255, 255, 255)
+        page_color = self.figure_json.get('page_color')
+        if page_color is not None:
+            rgb = ShapeToPdfExport.get_rgb('#' + page_color)
+        self.tiff_figure = Image.new("RGBA", (tiff_width, tiff_height), rgb)
 
     def paste_image(self, pil_img, img_name, panel, page, dpi=None):
         """ Add the PIL image to the current figure page """

src/js/models/figure_model.js

@@ -17,6 +17,7 @@
             // w & h from reportlab.
             'paper_width': 595,
             'paper_height': 842,
+            'page_color': 'FFFFFF',
             'page_count': 1,
             'page_col_count': 1,    // pages laid out in grid
             'paper_spacing': 50,    // between each page
@@ -73,6 +74,7 @@
                     'orientation': data.orientation,
                     'legend': data.legend,
                     'legend_collapsed': data.legend_collapsed,
+                    'page_color': data.page_color,
                 };
 
             // For missing attributes, we fill in with defaults
@@ -154,6 +156,7 @@
                 orientation: this.get('orientation'),
                 legend: this.get('legend'),
                 legend_collapsed: this.get('legend_collapsed'),
+                page_color: this.get('page_color'),
             };
             if (this.get('figureName')){
                 figureJSON.figureName = this.get('figureName')

src/js/models/panel_model.js

@@ -233,11 +233,6 @@
             }
             // ... then add new labels ...
             for (var j=0; j<labels.length; j++) {
-                // check that we're not adding a white label outside panel (on a white background)
-                if (_.contains(["top", "bottom", "left", "right", "leftvert"], labels[j].position) &&
-                        labels[j].color == "FFFFFF") {
-                    labels[j].color = "000000";
-                }
                 labs.push( $.extend(true, {}, labels[j]) );
             }
             // ... so that we get the changed event triggering OK

src/js/views/colorpicker.js

@@ -180,6 +180,10 @@ var ColorPickerView = Backbone.View.extend({
             this.$submit_btn.prop('disabled', 'disabled');
         }
 
+        if (options.pickedColors) {
+            this.pickedColors = _.uniq(this.pickedColors.concat(options.pickedColors));
+        }
+
         // save callback to use on submit
         if (options.success) {
             this.success = options.success;

src/js/views/figure_view.js

@@ -65,9 +65,12 @@
             this.listenTo(this.model, 'change:unsaved', this.renderSaveBtn);
             this.listenTo(this.model, 'change:figureName', this.renderFigureName);
 
+            // Full render if page_color changes (might need to update labels etc)
+            this.listenTo(this.model, 'change:page_color', this.render);
+            this.listenTo(this.model, 'change:page_color', this.renderPanels);
+
             // refresh current UI
             this.renderZoom();
-            // this.zoom_paper_to_fit();
 
             // 'Auto-render' on init.
             this.render();
@@ -677,7 +680,8 @@
 
         // Add a panel to the view
         addOne: function(panel) {
-            var view = new PanelView({model:panel});    // uiState:this.uiState
+            var page_color = this.model.get('page_color');
+            var view = new PanelView({model:panel, page_color:page_color});
             this.$figure.append(view.render().el);
         },
 
@@ -725,6 +729,15 @@
             }
         },
 
+        renderPanels: function() {
+            // Re-render all the panels...
+            // Remove and re-add
+            $('.imagePanel', this.$figure).remove();
+            this.model.panels.forEach(function(panel){
+                this.addOne(panel);
+            }.bind(this));
+        },
+
         // Render is called on init()
         // Update any changes to sizes of paper or canvas
         render: function() {
@@ -733,6 +746,7 @@
 
             var page_w = m.get('paper_width'),
                 page_h = m.get('paper_height'),
+                page_color = m.get('page_color'),
                 size = this.model.getFigureSize(),
                 canvas_w = Math.max(m.get('canvas_width'), size.w),
                 canvas_h = Math.max(m.get('canvas_height'), size.h),
@@ -757,7 +771,7 @@
                 $pages = $(".paper");
             }
 
-            $pages.css({'width': page_w, 'height': page_h});
+            $pages.css({'width': page_w, 'height': page_h, 'background-color': '#' + page_color});
 
             this.$figure.css({'width': size.w, 'height': size.h,
                     'left': figure_left, 'top': figure_top});

src/js/views/modal_views.js

@@ -44,6 +44,23 @@
             "change .paperSizeSelect": "rerender",
             // "keyup #dpi": "rerenderDb",
             "change input": "rerender",
+            "click .pageColor": "handlePaperColor",
+        },
+
+        handlePaperColor: function(event) {
+            event.preventDefault();
+
+            var page_color = $(event.target).val();
+            FigureColorPicker.show({
+                'color': page_color,
+                'pickedColors': ['#000000', '#ffffff', '#eeeeee'],
+                'success': function(newColor){
+                    // simply update <input>
+                    $('.pageColor', this.$el).val(newColor);
+                }.bind(this)
+            });
+
+            return false;
         },
 
         initialize: function(options) {
@@ -66,8 +83,8 @@
                 orientation = $form.find('input[name="pageOrientation"]:checked').val(),
                 custom_w = parseInt($("#paperWidth").val(), 10),
                 custom_h = parseInt($("#paperHeight").val(), 10),
-                units = $('.wh_units:first', $form).text();
-
+                units = $('.wh_units:first', $form).text(),
+                pageColor = $('.pageColor', $form).val().replace('#', '');
 
             var w_mm, h_m, w_pixels, h_pixels;
             if (size == 'A4') {
@@ -124,6 +141,7 @@
                 'paper_height': h_pixels,
                 'page_count': pageCount,
                 'page_col_count': cols,
+                'page_color': pageColor,
             };
             return rv;
         },

src/js/views/panel_view.js

@@ -28,6 +28,10 @@
             // During drag, model isn't updated, but we trigger 'drag'
             this.model.on('drag_resize', this.drag_resize, this);
 
+            // Used for rendering labels against page_color background
+            if (opts.page_color) {
+                this.page_color = opts.page_color;
+            }
             this.render();
         },
 
@@ -143,6 +147,16 @@
             _.each(labels, function(l) {
                 // check if label is dynamic delta-T
                 var ljson = $.extend(true, {}, l);
+                // If label is same color as page (and is outside of panel)
+                if (ljson.color.toLowerCase() == self.page_color.toLowerCase() &&
+                        ["top", "bottom", "left", "right", "leftvert"].indexOf(l.position) > -1 ) {
+                    // If black -> white, otherwise -> black
+                    if (ljson.color === '000000') {
+                        ljson.color = 'ffffff';
+                    } else {
+                        ljson.color = '000000';
+                    }
+                }
                 if (typeof ljson.text == 'undefined' && ljson.time) {
                     ljson.text = self.model.get_time_label_text(ljson.time);
                 } else {

src/templates/modal_dialogs/paper_setup_modal_template.html

@@ -1,4 +1,18 @@
 
+    <div class="col-sm-12">
+        <div class="form-horizontal">
+            <div class="form-group col-sm-6" style="margin-bottom: 15px;">
+                <label>Page Color</label>
+                <input class="pageColor form-control"
+                    value="#<%= page_color %>"
+                    type="color" style="padding: 0" />
+            </div>
+        </div>
+        <div class="form-group col-sm-6"></div>
+        <div class="clearfix"></div>
+    </div>
+
+
     <div class="col-sm-12">
 
         <div class="form-horizontal">