Toggle Switch

_.md

[ Launch: Toggle Switch ] 5450946 by garyjbowles
[ 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.3708333333333332,"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,"fullscreen":false}

inlet.js

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


var width = 100;
var height = 40;
var rx = 10;
var textWith = 24;
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("+[200,220]+")")
.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", paddingX)
	.attr("y", textWith+4)
	.attr("font-size", textWith)
	.attr("font-family", "Arial")
	.attr("text-anchor", "start");

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


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) {});		


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