Toggle Switch

_.md

[ Launch: Toggle Switch ] 4560616 by poezn
[ Launch: just another inlet to tributary ] 4559406 by roundrobin

config.json

{"description":"Toggle Switch","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"tab":"edit","display_percent":0.43088555265448214,"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,"hidepanel":false}

inlet.js

var svg = d3.select("svg");


var width = 128;
var height = 40;
var rx = 10;
var textWith = 24;
var animationDuration = 75; // ms
var defs = g.append('svg:defs');


var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('pattermTransform','')
    .attr('height',height)
    .attr('width',height)
    .attr('patternUnits','userSpaceOnUse')

var gradient = defs.append('linearGradient')
    .attr('id','g320')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1','0%')
    .attr('x2','0%')
    .attr('y1','0%')
    .attr('y2',height/1.5) 

gradient.append('stop')
.attr('stop-color','#B3B3B3')
.attr('offset','0');

gradient.append('stop')
.attr('stop-color','#676867')
.attr('offset','1');



//This create an ellipsis shape for the drop shadow texure
defs.append('svg:rect')
.attr("id","rectShape")
.attr("width",width)
.attr("height",height)
.attr("rx",rx)
.attr("ry",rx)


//Creates a clippath for the drop shadow of the ball
var clipPath = g.append('svg:clipPath')
.attr("id","clippy1");

clipPath.append("use")
.attr("xlink:href","#rectShape")
.attr("overflow","visible");

//Create a group for the icon we are about to add to the canvas
var group = g.append("svg:g")
.attr("transform","translate("+[78,100]+")")
.attr("class","group")
.attr("clip-path","url(#clippy1)");




group.append("svg:rect")
	.attr("width",width/2)
	.attr("height",height)
	.attr("fill","#61B672");


group.append("svg:rect")
	.attr("width",width/2)
	.attr("x",width/2)
	.attr("height",height)
	.attr("fill","#FF6600");

var paddingX = 10;

group.append('svg:text')
	.text("on")
	.attr("fill", "#FFFFFF")
	.attr("x", width/4)
	.attr("y", textWith+4)
	.attr("font-size", textWith)
	.attr("font-family", "Arial")
	.attr("text-anchor", "middle");

group.append('svg:text')
	.text("off")
	.attr("fill", "#FFFFFF")
	.attr("x", width/4*3)
	.attr("y", textWith+4)
	.attr("font-size", textWith)
	.attr("font-family", "Arial")
	.attr("text-anchor", "middle");


var dragBehave= d3.behavior.drag()
.on("drag", function(d,i){
	var event = d3.event;
  	var elem = d3.select(this);
  	console.log(parseFloat(elem.attr("x")),event.x);
  	
  if(parseFloat(elem.attr("x")) >= 0){
	elem.attr("x",parseFloat(elem.attr("x")) + event.dx)  
    if(parseFloat(elem.attr("x")) < 0){
    	elem.attr("x",0)
    }
    
  }
  
  if(parseFloat(elem.attr("x")) <= width/2){
	elem.attr("x",parseFloat(elem.attr("x")) + event.dx)  
  }else{
	elem.attr("x",width/2)
  }
  
  
   if(parseFloat(elem.attr("x")) < 0){
    	elem.attr("x",0)
    }
  
  
})
.on("dragstart", function(d, i) {  
})
.on("dragend", function(d, i) {
  	var elem = d3.select(this);
  if (parseFloat(elem.attr("x")) + width/4 <= width / 2) {
  	elem.transition().duration(animationDuration).attr("x", 0);
  } else {
  	elem.transition().duration(animationDuration).attr("x", width/2);
  }
});		


group.append("svg:rect")
	.attr("width",width/2)
	.attr("x",width/2)
	.attr("height",height)
    .attr('fill',"url(#g320)")
	.call(dragBehave);   


group.append("svg:rect")
    .attr("rx",rx)
    .attr("ry",rx)
	.attr("width",width)
	.attr("height",height)
	.attr("fill","none")
	.attr("stroke","#333333")
	.attr("stroke-width","3");