Break it out

lib/wen/clock/clock.rb

@@ -49,7 +49,6 @@ def self.bracketise pin, length
     end
 
     def self.colours params
-      puts params unless IS_PI
       params.each_pair do |wheel, values|
         values.each_pair do |layer, colour|
           $redis.set "#{wheel}/#{layer}", colour.join(', ')

public/js/wen.js

@@ -0,0 +1,101 @@
+function refresh() {
+  $('.picker').each(function() {
+    var id = this.id
+    var s = id.split('-')
+    $.getJSON('/colours/' + s[0] + '/' + s[1], function (data) {
+      if(s[1] == 'face') {
+        $('#' + id).attr('stroke', 'rgb(' + (data['colour'].join(', ')) + ')')
+      } else {
+        $('#' + id).attr('fill', 'rgb(' + (data['colour'].join(', ')) + ')')
+      }
+      $('#' + id).spectrum({
+        color: 'rgb(' + (data['colour'].join(', ')) + ')',
+        showPalette: true,
+        palette: [
+          colours
+        ],
+        showPaletteOnly: true,
+        togglePaletteOnly: true,
+        togglePaletteMoreText: 'more',
+        togglePaletteLessText: 'less',
+        hideAfterPaletteSelect:true,
+        showInitial: true,
+        preferredFormat: "rgb"
+      })
+    })
+  })
+}
+
+function makeClockPicker() {
+  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 = 72
+  var outerRadius = 128
+  var sw = 32 // stroke width
+  var blobSize = 24
+
+  var svg = d3.select("#clock").append("svg")
+    .attr("width", w)
+    .attr("height", h)
+
+  makeClockFace()
+
+  function makeClockFace() {
+    var now = new Date()
+
+    makeWheel(svg, 'minutes-face', cx, cy, outerRadius, sw)
+    makeWheel(svg, 'hours-face', cx, cy, innerRadius, sw)
+
+    makeBlob(svg, 'minutes-hands', cx, cy, outerRadius, blobSize, now)
+    makeBlob(svg, 'hours-hands', cx, cy, innerRadius, blobSize, now)
+  }
+}
+
+function makeWheel(svg, id, x, y, radius, sw) {
+  svg.append('a').attr("xlink:href", '#')
+      .append('svg:circle')
+      .attr('id', id)
+      .attr('class', 'picker')
+      .attr('r', radius)
+      .attr('cx', x)
+      .attr('cy', y)
+      .attr('fill', 'none')
+      .attr('stroke', '#000')
+      .attr('stroke-width', sw)
+      .attr('shape-rendering', 'auto')
+      .attr('opacity', 0.5)
+}
+
+function makeBlob(svg, id, cx, cy, radius, blobSize, now) {
+  var x = cx
+  var y = cy - radius
+
+  var blob = svg.append('a')
+    .attr("xlink:href", '#')
+    .append("svg:circle").attr({
+      cx: x,
+      cy: y,
+      opacity: 1,
+      r: blobSize,
+      fill: "#000",
+      opacity: 0.8,
+      stroke: '#000'
+    });
+
+  var mins = now.getMinutes()
+  var angle = mins * 6
+  if(id.includes('hours')) {
+    var hours = now.getHours()
+    angle = hours * 30
+  }
+
+  blob.attr('transform', 'rotate(' + angle + ', ' + cx + ', ' + cy + ')')
+      .attr("xlink:href", '#')
+      .attr('id', id)
+      .attr('class', 'picker')
+}

views/colours/d3.erb

@@ -1,126 +1,17 @@
 <h2>colours</h2>
-
 <div id='clock'></div>
 
 <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("#clock").append("svg")
-    .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) {
-    if(s[1] == 'face') {
-      $('#' + s[0] + '-' + s[1]).attr('stroke', 'rgb(' + (data['colour'].join(', ')) + ')')
-    } else {
-      $('#' + s[0] + '-' + s[1]).attr('fill', '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"
-    })
-  })
-})
-}
+makeClockPicker()
+
+refresh()
+
 $(".picker").on('change.spectrum', function (ev, tc) {
   d = ev.target.id.split('-')
   x = {}