Merge pull request #17 from emmanuelle/rectangle

emmanuelle · web-flow · commit 81ce2d8e70e7 · 2019-04-18T22:48:50.000+02:00
Added rectangle tool, and small modifications to image_with_contour
diff --git a/dash_canvas/DashCanvas.py b/dash_canvas/DashCanvas.py
@@ -10,15 +10,14 @@ class DashCanvas(Component):
 
 Keyword arguments:
 - id (string; optional): The ID used to identify this component in Dash callbacks
-- label (string; optional): A label that will be printed when this component is rendered.
 - image_content (string; optional): Image data string, formatted as png or jpg data string. Can be
 generated by utils.io_utils.array_to_data_string.
 - zoom (number; optional): Zoom factor
 - width (number; optional): Width of the canvas
 - height (number; optional): Height of the canvas
 - scale (number; optional): Scaling ratio between canvas width and image width
 - tool (string; optional): Selection of drawing tool, among ["pencil", "pan", "circle",
-"select", "line"].
+"rectangle", "select", "line"].
 - lineWidth (number; optional): Width of drawing line (in pencil mode)
 - lineColor (string; optional): Color of drawing line (in pencil mode). Can be a text string,
 like 'yellow', 'red', or a color triplet like 'rgb(255, 0, 0)'.
@@ -31,17 +30,17 @@ class DashCanvas(Component):
 annotations. Use utils.parse_json.parse_jsonstring to parse
 this string.
 - hide_buttons (list; optional): Names of buttons to hide. Names are "zoom", "pan", "line", "pencil",
-"undo", "select".
+"rectangle", "undo", "select".
 
 Available events: """
     @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, label=Component.UNDEFINED, image_content=Component.UNDEFINED, zoom=Component.UNDEFINED, width=Component.UNDEFINED, height=Component.UNDEFINED, scale=Component.UNDEFINED, tool=Component.UNDEFINED, lineWidth=Component.UNDEFINED, lineColor=Component.UNDEFINED, goButtonTitle=Component.UNDEFINED, filename=Component.UNDEFINED, trigger=Component.UNDEFINED, json_data=Component.UNDEFINED, hide_buttons=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'label', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
+    def __init__(self, id=Component.UNDEFINED, image_content=Component.UNDEFINED, zoom=Component.UNDEFINED, width=Component.UNDEFINED, height=Component.UNDEFINED, scale=Component.UNDEFINED, tool=Component.UNDEFINED, lineWidth=Component.UNDEFINED, lineColor=Component.UNDEFINED, goButtonTitle=Component.UNDEFINED, filename=Component.UNDEFINED, trigger=Component.UNDEFINED, json_data=Component.UNDEFINED, hide_buttons=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
         self._type = 'DashCanvas'
         self._namespace = 'dash_canvas'
         self._valid_wildcard_attributes =            []
         self.available_events = []
-        self.available_properties = ['id', 'label', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
+        self.available_properties = ['id', 'image_content', 'zoom', 'width', 'height', 'scale', 'tool', 'lineWidth', 'lineColor', 'goButtonTitle', 'filename', 'trigger', 'json_data', 'hide_buttons']
         self.available_wildcard_properties =            []
 
         _explicit_args = kwargs.pop('_explicit_args')
diff --git a/dash_canvas/dash_canvas.dev.js b/dash_canvas/dash_canvas.dev.js
diff --git a/dash_canvas/dash_canvas.min.js b/dash_canvas/dash_canvas.min.js
diff --git a/dash_canvas/metadata.json b/dash_canvas/metadata.json
@@ -64,6 +64,13 @@
         "params": [],
         "returns": null
       },
+      {
+        "name": "_rectangletool",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      },
       {
         "name": "_selecttool",
         "docblock": null,
@@ -80,17 +87,6 @@
         "required": false,
         "description": "The ID used to identify this component in Dash callbacks"
       },
-      "label": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "A label that will be printed when this component is rendered.",
-        "defaultValue": {
-          "value": "''",
-          "computed": false
-        }
-      },
       "image_content": {
         "type": {
           "name": "string"
@@ -151,7 +147,7 @@
           "name": "string"
         },
         "required": false,
-        "description": "Selection of drawing tool, among [\"pencil\", \"pan\", \"circle\",\n\"select\", \"line\"].",
+        "description": "Selection of drawing tool, among [\"pencil\", \"pan\", \"circle\",\n\"rectangle\", \"select\", \"line\"].",
         "defaultValue": {
           "value": "\"pencil\"",
           "computed": false
@@ -231,7 +227,7 @@
           }
         },
         "required": false,
-        "description": "Names of buttons to hide. Names are \"zoom\", \"pan\", \"line\", \"pencil\",\n\"undo\", \"select\".",
+        "description": "Names of buttons to hide. Names are \"zoom\", \"pan\", \"line\", \"pencil\",\n\"rectangle\", \"undo\", \"select\".",
         "defaultValue": {
           "value": "[]",
           "computed": false
diff --git a/dash_canvas/utils/__init__.py b/dash_canvas/utils/__init__.py
@@ -5,7 +5,8 @@
                                      superpixel_color_segmentation,
                                      modify_segmentation)
 from .registration import register_tiles, autocrop
-from .parse_json import parse_jsonstring, parse_jsonstring_line, parse_jsonfile
+from .parse_json import (parse_jsonstring, parse_jsonstring_line,
+                        parse_jsonstring_rectangle, parse_jsonfile)
 from .io_utils import array_to_data_url, image_string_to_PILImage
 from .plot_utils import image_with_contour
 from .exposure import brightness_adjust, contrast_adjust
@@ -20,6 +21,7 @@
            'parse_jsonfile',
            'parse_jsonstring',
            'parse_jsonstring_line',
+           'parse_jsonstring_rectangle',
            'random_forest_segmentation',
            'random_walker_segmentation',
            'register_tiles',
diff --git a/dash_canvas/utils/parse_json.py b/dash_canvas/utils/parse_json.py
@@ -113,6 +113,35 @@ def parse_jsonstring_line(string):
     return (np.array(props)).astype(np.int)
 
 
+def parse_jsonstring_rectangle(string):
+    """
+    Return geometry of rectangle objects.
+
+    Parameters
+    ----------
+
+    data : str
+        JSON string of data
+
+    """
+    try:
+        data = json.loads(string)
+    except:
+        return None
+    scale = 1
+    props = []
+    for obj in data['objects']:
+        if obj['type'] == 'image':
+            scale = obj['scaleX']
+        elif obj['type'] == 'rect':
+            scale_factor = obj['scaleX'] / scale
+            props.append([scale_factor * obj['width'],
+                          scale_factor * obj['height'],
+                          scale_factor * obj['left'],
+                          scale_factor * obj['top']])
+    return (np.array(props)).astype(np.int)
+
+
 def parse_jsonfile(filename, shape=None):
     with open(filename, 'r') as fp:
         string = json.load(fp)
diff --git a/dash_canvas/utils/plot_utils.py b/dash_canvas/utils/plot_utils.py
@@ -2,9 +2,9 @@
 import PIL
 import numpy as np
 from skimage import color, img_as_ubyte
+from plotly import colors
 
-
-def image_with_contour(img, labels, shape=None):
+def image_with_contour(img, labels, mode='lines', shape=None):
     """
     Figure with contour plot of labels superimposed on background image.
 
@@ -28,11 +28,19 @@ def image_with_contour(img, labels, shape=None):
         img = img_as_ubyte(color.gray2rgb(img))
         img = PIL.Image.fromarray(img)
     labels = labels.astype(np.float)
+    custom_viridis = colors.PLOTLY_SCALES['Viridis']
+    custom_viridis.insert(0, [0, '#FFFFFF'])
+    custom_viridis[1][0] = 1.e-4
     # Contour plot of segmentation
+    print('mode is', mode)
+    opacity = 0.4 if mode is None else 1
     cont = go.Contour(z=labels[::-1],
-            contours=dict(coloring='lines'),
-            line=dict(width=3),
+            contours=dict(start=0, end=labels.max() + 1, size=1,
+                          coloring=mode),
+            line=dict(width=1),
             showscale=False,
+            colorscale=custom_viridis,
+            opacity=opacity,
             )
     # Layout
     layout= go.Layout(
@@ -59,8 +67,8 @@ def image_with_contour(img, labels, shape=None):
                   showline=False,
                   scaleanchor="x",
                   ticks='',
-                  showticklabels=False,
-    ))
+                  showticklabels=False,),
+            margin=dict(b=5, t=20))
     fig = go.Figure(data=[cont], layout=layout)
     return fig
 
diff --git a/src/lib/components/DashCanvas.react.js b/src/lib/components/DashCanvas.react.js
@@ -2,7 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {SketchField, Tools} from 'react-sketch';
 import {ZoomMinusIcon, ZoomPlusIcon, EditIcon, PanIcon,
-	ArrowLeftIcon, PlotLineIcon, TagOutlineIcon} from 'plotly-icons';
+	ArrowLeftIcon, PlotLineIcon, SquareIcon, TagOutlineIcon} 
+	from 'plotly-icons';
 
 
 const styles = {
@@ -156,6 +157,12 @@ export default class DashCanvas extends Component {
 	};
 
 
+    _rectangletool(){
+	this.props.setProps({tool: "rectangle"});
+	};
+
+
+
     _selecttool(){
 	this.props.setProps({tool: "select"});
 	};
@@ -170,13 +177,15 @@ export default class DashCanvas extends Component {
         toolsArray["line"] = Tools.Line;
         toolsArray["circle"] = Tools.Circle;
         toolsArray["select"] = Tools.Select;
+        toolsArray["rectangle"] = Tools.Rectangle;
 	const hide_buttons = this.props.hide_buttons;
 	const show_line = !(hide_buttons.includes("line"));
 	const show_pan = !(hide_buttons.includes("pan"));
 	const show_zoom = !(hide_buttons.includes("zoom"));
 	const show_pencil = !(hide_buttons.includes("pencil"));
 	const show_undo = !(hide_buttons.includes("undo"));
 	const show_select = !(hide_buttons.includes("select"));
+	const show_rectangle = !(hide_buttons.includes("rectangle"));
 	var width_defined = this.props.width > 0;
 	var width = width_defined ? this.props.width : null;
         return (
@@ -218,6 +227,13 @@ export default class DashCanvas extends Component {
 		<PlotLineIcon/>
 	    </button>
 	    }
+	    {show_rectangle &&
+	    <button style={styles.button}
+		    title="Rectangle tool"
+		    onClick={(e) => this._rectangletool()}>
+		<SquareIcon/>
+	    </button>
+	    }
 	    {show_pan &&
 	    <button style={styles.button}
 		    title="Pan"
@@ -253,7 +269,7 @@ export default class DashCanvas extends Component {
 
 }
 
-DashCanvas.defaultProps = {filename:'', label:'',
+DashCanvas.defaultProps = {filename:'',
 			   json_data:'', image_content:'', trigger:0,
 			   width:500, height:500, scale:1, lineWidth:10,
 			   lineColor:'red', tool:"pencil", zoom:1,
@@ -265,11 +281,6 @@ DashCanvas.propTypes = {
      */
     id: PropTypes.string,
 
-    /**
-     * A label that will be printed when this component is rendered.
-     */
-    label: PropTypes.string.isRequired,
-
     /**
      * Image data string, formatted as png or jpg data string. Can be
      * generated by utils.io_utils.array_to_data_string.
@@ -299,7 +310,7 @@ DashCanvas.propTypes = {
  
     /**
      * Selection of drawing tool, among ["pencil", "pan", "circle",
-     * "select", "line"].
+     * "rectangle", "select", "line"].
      */
     tool: PropTypes.string,
  
@@ -342,7 +353,7 @@ DashCanvas.propTypes = {
 
     /**
      * Names of buttons to hide. Names are "zoom", "pan", "line", "pencil",
-     * "undo", "select".
+     * "rectangle", "undo", "select".
      */
     hide_buttons: PropTypes.arrayOf(PropTypes.string),
     
