Add color picker

2 files changed, 66 insertions, 22 deletions

diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py
index dd98c7d5..f7fbffd2 100644
--- a/wqflask/wqflask/correlation/corr_scatter_plot.py
+++ b/wqflask/wqflask/correlation/corr_scatter_plot.py
@@ -29,7 +29,7 @@ class CorrScatterPlot(object):
         try:
             circle_color = params['circle_color']
         except:
-            circle_color = 'steelblue'
+            circle_color = '#3D85C6'
         self.circle_color = circle_color
         
         try:
@@ -41,7 +41,7 @@ class CorrScatterPlot(object):
         try:
             line_color = params['line_color']
         except:
-            line_color = 'red'
+            line_color = '#FF0000'
         self.line_color = line_color
         
         try:
diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html
index dd9168a8..490024ec 100644
--- a/wqflask/wqflask/templates/corr_scatter_plot.html
+++ b/wqflask/wqflask/templates/corr_scatter_plot.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot.css" />
+    <link rel="stylesheet" type="text/css" href="http://bgrins.github.io/spectrum/spectrum.css" />
 {% endblock %}
 
 {% block content %}
@@ -25,24 +26,12 @@
         <td rowspan="2" style="vertical-align:middle;"><button type="submit" class="btn btn-primary"><i class="icon-refresh"></i>Redraw</button></td>
     </tr>
     <tr>
-		<td><input type="text" name="width" value="{{width}}" style="width: 100px;"></td>
-		<td><input type="text" name="height" value="{{height}}" style="width: 100px;"></td>
-        <td>
-            <select name="circle_color" style="width: 100px;">
-                <option value="red">Red</option>
-                <option value="green">Green</option>
-                <option value="blue">Blue</option>
-            </select>
-        </td>
-		<td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></td>
-        <td>
-            <select name="line_color" style="width: 100px;">
-                <option value="red">Red</option>
-                <option value="green">Green</option>
-                <option value="blue">Blue</option>
-            </select>
-        </td>
-		<td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td>
+		<td style="vertical-align:middle;"><input type="text" name="width" value="{{width}}" style="width: 100px; margin: auto;"></td>
+		<td style="vertical-align:middle;"><input type="text" name="height" value="{{height}}" style="width: 100px; margin: auto;"></td>
+        <td style="vertical-align:middle;"><input type="text" name="circle_color" id="circle_color" /></td>
+		<td style="vertical-align:middle;"><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px; margin: auto;"></td>
+        <td style="vertical-align:middle;"><input type="text" name="line_color" id="line_color" /></td>
+		<td style="vertical-align:middle;"><input type="text" name="line_width" value="{{line_width}}" style="width: 100px; margin: auto;"></td>
     </tr>
 </table>
 </form>
@@ -51,9 +40,64 @@
 
 {% block js %}
     <script>
-       js_data = {{ js_data | safe }}
-    </script>
+		js_data = {{ js_data | safe }};
+	</script>
     <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+	<script language="javascript" type="text/javascript" src="http://bgrins.github.io/spectrum/spectrum.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
 	<script language="javascript" type="text/javascript" src="/static/new/javascript/corr_scatter_plot.js"></script>
+    <script>
+		$("#circle_color").spectrum({
+			color: "{{circle_color}}",
+			showInput: true,
+			className: "circle_color",
+			showInitial: true,
+			showPalette: true,
+			showSelectionPalette: true,
+			maxPaletteSize: 10,
+			preferredFormat: "hex",
+			localStorageKey: "circle_color",
+			palette: [
+				["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
+				["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
+				"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
+				["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
+				"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
+				"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
+				"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 
+				"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 
+				"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
+				"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
+				"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
+				"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 
+				"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
+			]
+		});
+		$("#line_color").spectrum({
+			color: "{{line_color}}",
+			showInput: true,
+			className: "line_color",
+			showInitial: true,
+			showPalette: true,
+			showSelectionPalette: true,
+			maxPaletteSize: 10,
+			preferredFormat: "hex",
+			localStorageKey: "line_color",
+			palette: [
+				["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
+				["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
+				"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
+				["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
+				"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
+				"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
+				"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 
+				"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 
+				"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
+				"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
+				"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
+				"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 
+				"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
+			]
+		});
+	</script>
 {% endblock %}
\ No newline at end of file