Changeset 9246

Timestamp:

Jun 9, 2011, 5:32:53 PM (13 years ago)

Author:

dennisw

Message:

Added a colorpicker for the filters.

Location:

src/django_gheat/website

Files:

• static/colorpicker.js (added)
• static/heatmap_extensions.js (modified) (1 diff)
• static/img/arrow.gif (added)
• static/style.css (modified) (1 diff)
• templates/home.html (modified) (2 diffs)

src/django_gheat/website/static/heatmap_extensions.js

@@ -47 +47 @@
     lname = encodeURIComponent(document.getElementById("lname").value);
 
+    // HEX to RGB: http://stackoverflow.com/questions/5798868/need-some-tips-with-how-to-convert-a-hexadecimal-color-value-to-a-rgb-one/5798900#5798900
+    // '#' comes out as '%23', so substr() starts at char 3
+    colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
+
     if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
     if (dataset != ''){dataset='&meetrondje__naam='+dataset;} 
-    if (wlnode != 'All'){wlnode='&accespoint__ssid='+wlnode;}
+    if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
 //    if (enc != ''){enc='&accespoint__encryptie='+enc;} 
 //    if (date != ''){date='&meetrondje__datum='+date;} 

src/django_gheat/website/static/style.css

@@ -111 +111 @@
   color:#DDD;
 }
+
+
+/* Colorpicker */
+ 
+div.color_picker {
+  height: 16px;
+  width: 16px;
+  padding: 0 !important;
+  border: 1px solid #ccc;
+  background: url(img/arrow.gif) no-repeat top right;
+  cursor: pointer;
+  line-height: 16px;
+  z-index:2;
+  float:left;
+  margin-top:-3px;
+  margin-right:3px;
+}
+
+div#color_selector {
+  width: 110px;
+  position: absolute;
+  border: 1px solid #598FEF;
+  background-color: #EFEFEF;
+  padding: 2px;
+  z-index:2;
+}
+  div#color_custom {width: 100%; float:left }
+  div#color_custom label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
+  div#color_custom input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
+
+div.color_swatch {
+  height: 12px;
+  width: 12px;
+  border: 1px solid #000;
+  margin: 2px;
+  float: left;
+  cursor: pointer;
+  line-height: 12px;
+  z-index:2;
+}
+

src/django_gheat/website/templates/home.html

@@ -8 +8 @@
   <script type="text/javascript" language="javascript" src="{{ STATIC_URL }}jquery.chained.js"></script>
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions.js"></script>
+  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}colorpicker.js"></script>
   <script language="javascript" type="text/javascript">
     $(function(){
+      // enable colorpicker
+      $('#colour').colorPicker();
+
       $('#menu_filter').click(function(){
         $('#filter').slideToggle('fast');
@@ -45 +49 @@
           <select id="select_dataset" style="width:104px"></select> Dataset<br />
           <select id="select_node" style="width:104px"></select> Node<br />
-          <input type="text" id="lname" name="lname" size="10"/> Layername<br />
-          <input type="text" id="colour" name="colour" size="10"/> Colour<br />
+          <input type="text" id="lname" name="lname" size="10"/> Layername<br /><br />
+          <input type="text" id="colour" name="colour"/> Colour<br /><br />
           <input type="button" id="add_filter" value="Add filter"/>
         </form>