D3 picker

lib/wen.rb

@@ -80,6 +80,17 @@ class App < Sinatra::Base
       end
     end
 
+    get '/colours/d3' do
+      headers 'Vary' => 'Accept'
+
+      respond_to do |wants|
+        wants.html do
+          @title = 'Colours » d3 mode'
+          erb :'colours/d3', layout: :default
+        end
+      end
+    end
+
     get '/colours/:wheel/:layer' do
       headers 'Vary' => 'Accept'
 

public/css/styles.css

@@ -8894,7 +8894,40 @@ body {
   right: 80px;
 }
 
-/* line 8, ../sass/styles.scss */
+/* line 1, ../sass/_d3clock.scss */
+svg.clock {
+  stroke-linecap: round;
+}
+
+/* line 5, ../sass/_d3clock.scss */
+.face {
+  stroke: #aac;
+  stroke-width: 6;
+}
+
+/* line 13, ../sass/_d3clock.scss */
+.minutetick.face {
+  stroke-width: 2;
+}
+
+/* line 17, ../sass/_d3clock.scss */
+.hand {
+  stroke: #336;
+  stroke-width: 8;
+}
+
+/* line 22, ../sass/_d3clock.scss */
+.hour.hand {
+  stroke-width: 12;
+}
+
+/* line 29, ../sass/_d3clock.scss */
+.second.hand {
+  stroke: red;
+  stroke-width: 4;
+}
+
+/* line 9, ../sass/styles.scss */
 body {
   background-color: #0644a8;
   background: url(/assets/images/cogs-black.png);
@@ -8903,86 +8936,86 @@ body {
   text-align: center;
 }
 
-/* line 16, ../sass/styles.scss */
+/* line 17, ../sass/styles.scss */
 .btn-default {
   background-color: #fa8100;
   border-color: #fa8100;
   color: #0644a8;
   margin-top: 5px;
 }
 
-/* line 23, ../sass/styles.scss */
+/* line 24, ../sass/styles.scss */
 .btn:hover {
   background-color: #c76700;
   border-color: #944c00;
 }
 
-/* line 28, ../sass/styles.scss */
+/* line 29, ../sass/styles.scss */
 #main-nav {
   padding-top: 5px;
 }
 
-/* line 32, ../sass/styles.scss */
+/* line 33, ../sass/styles.scss */
 .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
   background-color: #fa8100;
   border-color: #fa8100;
   color: #0644a8;
 }
 
-/* line 38, ../sass/styles.scss */
+/* line 39, ../sass/styles.scss */
 .nav-pills > li > a {
   background-color: #944c00;
   border-color: #613200;
   color: #0644a8;
 }
 
-/* line 44, ../sass/styles.scss */
+/* line 45, ../sass/styles.scss */
 .nav-pills > li > a:focus, .nav-pills > li > a:hover {
   background-color: #c76700;
   border-color: #944c00;
   color: #0644a8;
 }
 
-/* line 50, ../sass/styles.scss */
+/* line 51, ../sass/styles.scss */
 .colours {
   margin-bottom: 5px;
 }
 
-/* line 54, ../sass/styles.scss */
+/* line 55, ../sass/styles.scss */
 .layer-label, label {
   font-size: 1.2em;
   font-weight: bold;
 }
 
-/* line 59, ../sass/styles.scss */
+/* line 60, ../sass/styles.scss */
 .layer-label {
   margin-left: 10px;
 }
 
-/* line 63, ../sass/styles.scss */
+/* line 64, ../sass/styles.scss */
 .fa-stack {
   padding-top: 2px;
   width: 1.6em;
   height: 1.7em;
 }
 
-/* line 69, ../sass/styles.scss */
+/* line 70, ../sass/styles.scss */
 h2 {
   font-size: 1.5em;
   margin-top: 5px;
 }
 
-/* line 74, ../sass/styles.scss */
+/* line 75, ../sass/styles.scss */
 .colours {
   height: 40px;
 }
 
-/* line 79, ../sass/styles.scss */
+/* line 80, ../sass/styles.scss */
 #colours .row {
   height: 40px;
 }
 
-/* line 84, ../sass/styles.scss */
+/* line 85, ../sass/styles.scss */
 .spectrum-colours {
   background-color: #b7b7b7;
   border-radius: 4px;
@@ -8991,22 +9024,22 @@ h2 {
 }
 
 /* http://cssdeck.com/labs/custom-radiobutton-and-checkbox-with-fontawesome-full-style-solution */
-/* line 92, ../sass/styles.scss */
+/* line 93, ../sass/styles.scss */
 input[type="radio"] {
   display: none;
 }
 
-/* line 93, ../sass/styles.scss */
+/* line 94, ../sass/styles.scss */
 input[type="radio"] + label .fa-check-square {
   display: none;
 }
 
-/* line 94, ../sass/styles.scss */
+/* line 95, ../sass/styles.scss */
 input[type="radio"]:checked + label .fa-check-square {
   display: block;
 }
 
-/* line 95, ../sass/styles.scss */
+/* line 96, ../sass/styles.scss */
 input[type="radio"]:checked + label .fa-square-o {
   display: none;
 }

public/sass/_d3clock.scss

@@ -0,0 +1,33 @@
+svg.clock {
+    stroke-linecap: round;
+}
+
+.face {
+    stroke: #aac;
+    stroke-width: 6;
+}
+
+.hourtick.face {
+}
+
+.minutetick.face {
+    stroke-width: 2;
+}
+
+.hand {
+    stroke: #336;
+    stroke-width: 8;
+}
+
+.hour.hand {
+    stroke-width: 12;
+}
+
+.minute.hand {
+}
+
+.second.hand {
+    stroke: red;
+    stroke-width: 4;
+}
+

public/sass/styles.scss

@@ -4,6 +4,7 @@
 @import 'footer';
 @import 'github-corner';
 @import 'spectrum';
+@import 'd3clock';
 
 body {
   background-color: $brand-secondary;

views/colours/d3.erb

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>D3 Clock</title>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
+        <link href="d3clock.css" rel="stylesheet">
+    </head>
+    <body>
+    </body>
+</html>
+
+<script>
+var showD3Clock = function() {
+
+  var w = 320             // Width of SVG element
+  var h = 320             // Height of SVG element
+
+  var cx = w / 2          // Center x
+  var cy = h / 2          // Center y
+  var margin = 20
+  var r = w / 2 - margin  // Radius of clock face
+  var innerRadius = 88
+  var outerRadius = 128
+  var sw = 20 // stroke width
+
+  var svg = d3.select("body").append("svg")
+    .attr("class", "clock")
+    .attr("width", w)
+    .attr("height", h)
+
+  makeClockFace()
+
+  function makeClockFace() {
+    svg.append('a').attr("xlink:href", '#')
+        .append('svg:circle')
+        .attr('id', 'minutes-face')
+        .attr('class', 'picker')
+        .attr('r', outerRadius)
+        .attr('cx', cx)
+        .attr('cy', cy)
+        .attr('fill', 'none')
+        .attr('stroke', '#fff')
+        .attr('stroke-width', sw)
+        .attr('shape-rendering', 'auto')
+
+    svg.append('a').attr("xlink:href", '#')
+        .append('svg:circle')
+        .attr('id', 'hours-face')
+        .attr('class', 'picker')
+        .attr('r', innerRadius)
+        .attr('cx', cx)
+        .attr('cy', cy)
+        .attr('fill', 'none')
+        .attr('stroke', '#fff')
+        .attr('stroke-width', sw)
+        .attr('shape-rendering', 'auto')
+
+    var outerOriginX = cx + ((outerRadius) * Math.sin(0));
+    var outerOriginY = cy - ((outerRadius) * Math.cos(0));
+
+    var outerBlob = svg.append('a').attr("xlink:href", '#').append("svg:circle").attr({
+      cx: outerOriginX,
+      cy: outerOriginY,
+      opacity: 1,
+      r: 20,
+      fill: "#f00"
+    });
+
+    var now = new Date()
+    var mins = now.getMinutes()
+
+    outerBlob.attr('transform', 'rotate(' + mins * 6 + ', ' + cx + ', ' + cy + ')')
+              .attr("xlink:href", '#')
+              .attr('id', 'minutes-hands')
+              .attr('class', 'picker')
+
+    var innerOriginX = cx + ((innerRadius) * Math.sin(0));
+    var innerOriginY = cy - ((innerRadius) * Math.cos(0));
+
+    var innerBlob = svg.append('a').attr("xlink:href", '#').append("svg:circle").attr({
+      cx: innerOriginX,
+      cy: innerOriginY,
+      opacity: 1,
+      r: 20,
+      fill: "#f00"
+    });
+
+    var hours = now.getHours()
+
+    innerBlob.attr('transform', 'rotate(' + hours * 30 + ', ' + cx + ', ' + cy + ')')
+              .attr("xlink:href", '#')
+              .attr('id', 'hours-hands')
+              .attr('class', 'picker')
+  }
+}
+
+showD3Clock()
+refresh()
+
+var colours = [
+  <% Wen::Config.instance.config.colours.each do |name, rgb| %>
+    'rgb(<%= rgb.join(', ') %>);',
+  <% end %>
+]
+
+function refresh() {
+$('.picker').each(function() {
+  var s = this.id.split('-')
+  $.getJSON('/colours/' + s[0] + '/' + s[1], function (data) {
+    $('.' + s[0] + '-' + s[1]).attr('fill', 'rgb(' + (data['colour'].join(', ')) + ')')
+  //  $('.' + s[0] + '-' + s[1] + '-disc').attr('stroke', 'rgb(' + (data['colour'].join(', ')) + ')')
+
+    $('#' + s[0] + '-' + s[1]).spectrum({
+      color: 'rgb(' + (data['colour'].join(', ')) + ')',
+      showPalette: true,
+      palette: [
+        colours
+      ],
+      showPaletteOnly: true,
+      togglePaletteOnly: true,
+      togglePaletteMoreText: 'more',
+      togglePaletteLessText: 'less',
+      hideAfterPaletteSelect:true,
+      showInitial: true,
+      preferredFormat: "rgb"
+    })
+  })
+})
+}
+$(".picker").on('change.spectrum', function (ev, tc) {
+  d = ev.target.id.split('-')
+  x = {}
+  x[d[1]] = [tc['_r'], tc['_g'], tc['_b']]
+  y = {}
+  y[d[0]] = x
+
+  $.ajax({
+    url: '/colours/',
+    data: JSON.stringify(y),
+    type: 'PATCH',
+    contentType: 'application/json'
+  })
+
+  refresh()
+})
+</script>