Tributary inlet

_.md

[ Launch: Tributary inlet ] 5433519 by mtodd

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"patch.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"surface.scss":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"surface.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.coffee

width = 80
height = 80
radius = Math.min(width, height) / 2
xPad = 0
roundPx = 5
turnt = "#336633"

svg = d3.select(".surface").append("svg").attr("width", "100%").attr("height", "100%")

knobIns = d3.selectAll(".knob")

knobSurface = svg.append("g").classed("surface", true)
  .attr("transform", "translate(" + width * knobIns.length + "," + height + ")")

containers = knobSurface.selectAll("rect")
  .data(knobIns)
  .enter()
    .append("rect")
    .classed("knob-container", true)
    .attr("x", (d, i) -> i * width + xPad)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height)
    .attr("rx", roundPx)
    .attr("ry", roundPx)
    .attr("fill", "none")
    .attr("stroke", turnt)
    .attr("stroke-width", 1)

circles = knobSurface.selectAll("circle")
  .data(knobIns)
  .enter()
    .append("circle")
    .classed("knob", true)
    .attr("cx", 5)
    .attr("cy", 50)
    .attr("r", 12)

labels = knobSurface.selectAll("text")
  .data(knobIns)
  .enter()
    .append("text")
    .text((d) -> $(d).val())

knobArcs = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 20)

knobPies = d3.layout.pie()
  .sort(null)
  .value (d) -> Math.max($(d).val(), 1)

knobSurface.append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

g = knobSurface.selectAll(".arc")
  .data(knobPies(knobIns))
  .enter().append("g")
    .classed("arc", true)

g.append("path")
  .attr("d", knobArcs)
  .style("fill", turnt)

knobIns.attr "radius", (d) -> Math.min(width, height) / 2

inlet.js

var width = 80
  , height = 80
  , radius = Math.min(width, height) / 2
  , xPad = 0
  , roundPx = 5
  , turnt = "#336633"

var svg = d3.select(".surface").append("svg").attr("width", "100%").attr("height", "100%")

var knobIns = d3.selectAll(".knob")

var knobSurface = svg.append("g").classed("surface", true)
  .attr("transform", "translate(" + width * knobIns.length + "," + height + ")")

var containers = knobSurface.selectAll("rect")
  .data(knobIns)
  .enter()
    .append("rect")
    .classed("knob-container", true)
    .attr("x", function(d, i){ return i * width + xPad })
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height)
    .attr("rx", roundPx)
    .attr("ry", roundPx)
    .attr("fill", "none")
    .attr("stroke", turnt)
    .attr("stroke-width", 1)

var circles = knobSurface.selectAll("circle")
  .data(knobIns)
  .enter()
    .append("circle")
    .classed("knob", true)
    .attr("cx", 5)
    .attr("cy", 50)
    .attr("r", 12)

var labels = knobSurface.selectAll("text")
  .data(knobIns)
  .enter()
    .append("text")
	.text(function(d){ return $(d).val() })

var knobArcs = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 20)

var knobPies = d3.layout.pie()
  .sort(null)
  .value(function(d){ return Math.max($(d).val(), 1) })

knobSurface.append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

var g = knobSurface.selectAll(".arc")
  .data(knobPies(knobIns))
  .enter().append("g")
    .classed("arc", true)

g.append("path")
  .attr("d", knobArcs)
  .style("fill", turnt)

knobIns.attr("radius", function(d){ return Math.min(width, height) / 2 })

patch.html

<input class="knob a" type="number" min="0" max="127" value="0" />
<input class="knob d" type="number" min="0" max="127" value="60" />
<input class="knob s" type="number" min="0" max="127" value="5" />
<input class="knob r" type="number" min="0" max="127" value="10" />

<div class="surface"></div>

surface.css

/*
$turnt: #336633;
$accent: #fff;
$width: 80px;
$height: 80px;
$xPad: 0px;
$roundPx: 5px;
*/

.surface {
  width: 500px;
  height: 300px;
  background-color: #ddd;
}
.surface text {
  color: #336633;
}
.surface arc path {
  stroke: #fff;
}

surface.scss

$turnt: #336633;
$accent: #fff;
$width: 80px;
$height: 80px;
$xPad: 0px;
$roundPx: 5px;

.surface {
  width: 500px;
  height: 300px;
  background-color: #ddd;

  text {
    color: $turnt;
  }

  .arc path {
    stroke: $accent;
  }
}