Skip to content

Instantly share code, notes, and snippets.

@maggiben

maggiben/_.md

Created January 30, 2014 21:54
Show Gist options
  • Save maggiben/8720744 to your computer and use it in GitHub Desktop.
Save maggiben/8720744 to your computer and use it in GitHub Desktop.
Download ZIP
switch
Raw
_.md
Raw
config.json
{"description":"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}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/cnxCjOA.png"}
Raw
inlet.js
<!DOCTYPE html>
<meta charset="utf-8">
<title>Crossfilter</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
body {
font-family: arial;
}
.main {
position: relative;
padding: 5px;
display: table;
margin: 0 auto;
/*shape-rendering: crispEdges;*/
/*vector-effect: non-scaling-stroke;*/
stroke-width: 0.5;
}
.glyp {
pointer-events: none;
}
</style>
<body></body>
<script src="http://square.github.io/crossfilter/crossfilter.v1.min.js"></script>
<script src="http://square.github.io/crossfilter/d3.v3.min.js"></script>
<script>
var status = new Object({status: true});
var margin = {
top: 50,
right: 50,
bottom: 50,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var buttonSize = {
width: 420,
height: 160
};
var svg = d3.select("body")
.append("svg")
.attr("class", "main")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
console.log(svg);
var defs = svg.append("defs");
defs.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("x", width / 2)
.attr("y", height / 2)
.attr("width", buttonSize.width)
.attr("height", buttonSize.height)
.attr("rx", buttonSize.height / 2)
.attr("ry", buttonSize.height / 2);
var mask = defs.append("clipPath")
.attr("id", "mask")
.append("circle")
.attr("class", "inner")
.attr("r", (buttonSize.height / 2) - 2)
.attr("cx", function(d) {
return width / 2
})
.attr("cy", height / 2);
var sw = svg.append("g")
//.attr("clip-path", "url(#clip)")
.attr("class", "switch")
var box = sw.append("rect")
.attr("class", "bkg")
.attr("x", width / 2 - buttonSize.width / 2)
.attr("y", height / 2 - buttonSize.height / 2)
.attr("width", buttonSize.width)
.attr("height", buttonSize.height)
.style("fill", "#0f0");
var circle = sw.append("circle")
.datum({status: false})
.attr("class", "inner")
.attr("r", (buttonSize.height / 2) - 2)
.attr("cx", function(d) {
return width / 2
})
.attr("cy", height / 2)
.style("fill", "transparent").style("stroke", "#000");
var on = sw.append("text")
.attr("clip-path", "url(#mask)")
.attr("class", "glyp")
.text("\uf00c")
.style("font-size", buttonSize.height)
.attr('font-family', 'FontAwesome')
.style("dominant-baseline", "central")
.attr("x", function() {
return width / 2 - buttonSize.width / 2
//return width / 2 - this.getBBox().width / 2
})
.attr("y", height / 2)
var off = sw.append("text")
.attr("clip-path", "url(#mask)")
.attr("class", "glyp")
.text("\uf00d")
.style("font-size", buttonSize.height)
.attr('font-family', 'FontAwesome')
.style("dominant-baseline", "central")
.attr("x", function() {
return width / 2 + buttonSize.width / 2 - this.getBBox().width;
})
.attr("y", height / 2)
h = on.node().clientHeight
w = on.node().clientWidth
rc = on.node().getBBox();
console.log(w)
sw.append("rect")
.attr("class", "boxy")
.attr("x", rc.x)
.attr("y", rc.y) // + 22
.attr("width", rc.width)
.attr("height", rc.height) // - 44
.style("fill", "none")
.style("stroke", "#000");
var pp = sw.append("path")
.attr("d", "m 62.543402,17.73322 q 0,1.57654 -1.103537,2.679914 l -28.533438,28.533612 -5.359928,5.359757 q -1.103372,1.103542 -2.679919,1.103542 -1.576393,0 -2.679861,-1.103542 L 16.826899,48.946746 2.5601009,34.679939 Q 1.4565983,33.57645 1.4565983,32.000061 q 0,-1.57655 1.1035026,-2.679925 l 5.3598799,-5.359921 q 1.1035103,-1.103607 2.6798772,-1.103607 1.576566,0 2.679959,1.103607 L 24.86658,35.58645 50.720188,9.6934784 q 1.103408,-1.1035235 2.679961,-1.1035235 1.576357,0 2.679981,1.1035235 l 5.359735,5.3598636 q 1.103537,1.10349 1.103537,2.679878 z")
.attr("transform", function(d){
var rect = this.getBBox();
var widthRatio = rect.width / buttonSize.width;
var heightRatio = rect.height / buttonSize.height;
var scaleX = buttonSize.width / rect.width;
var scaleY = buttonSize.height / rect.height;
var centroid = {
x: function(x) {return (width / 2) * (widthRatio / 2)}
}
console.log("ratio w%s, h%s", scaleX, heightRatio, rect);
//return "translate(" + ((width / 2) ) + "," + ((height / 2) ) + ")";
return "translate(" + ((width / 2) - (rect.width / 2)) + "," + ((height / 2) - (rect.height / 2)) + ")";
//return "scale(" + scaleY + "," + -(scaleY) + ") translate(" + ((width / 2) + 1550 + 121 ) + "," + -((height / 2) + 1782) + ")";
}) //matrix(0.10,0,0,-0.10,10,10)
.style("fill", "transparent")
.style("stroke", "#f00")
.style("stroke-width", "2");
rc = pp.node().getBBox();
console.log(w)
sw.append("rect")
.attr("class", "boxy")
.attr("x", rc.x)
.attr("y", rc.y) // + 22
.attr("width", rc.width)
.attr("height", rc.height) // - 44
.style("fill", "none")
.attr("transform", "translate(" + ((width / 2) - (rc.width / 2)) + "," + ((height / 2) - (rc.height / 2)) + ")")
.style("stroke", "#f00");
/* SHOW CENTROID */
sw.append("line")
.attr("x1", 0)
.attr("x2", width + margin.left + margin.right)
.attr("y1", height / 2 + (buttonSize.height / 2))
.attr("y2", height / 2 + (buttonSize.height / 2))
.style("stroke", "#000");
sw.append("line")
.attr("x1", width / 2)
.attr("x2", width / 2)
.attr("y1", 0)
.attr("y2", height)
.style("stroke", "#f00")
.style("stroke-width", "2");
sw.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", height / 2)
.attr("y2", height / 2)
.style("stroke", "#f00")
.style("stroke-width", "2");
circle.on("touchstart", function(d, i) {
var moving;
moving = false;
var orgMouse = {
x: d3.mouse(this)[0],
y: d3.mouse(this)[1],
};
var event = d3.event;
event.preventDefault();
event.stopImmediatePropagation();
console.log("touchstart:", event)
return d3.select(this).on("touchmove", function(d, i) {
var left, percent, relativeX, right;
var mouse = {
x: d3.mouse(this)[0],
y: d3.mouse(this)[1],
};
var event = d3.event;
relativeX = (event.pageX || event.targetTouches[0].pageX) - sw.node().getBoundingClientRect().left;
percent = (relativeX / buttonSize.width) * 100;
d3.select(this).attr("cx", mouse.x);
mask.attr("cx", mouse.x);
//console.log("touchmove:", mouse.x, "percent: " + percent)
console.log("offset: ", sw.node().getBoundingClientRect().left, "percent:" + percent)
})
.on("touchend", function(d, i) {
var mouse = d3.mouse(this);
var event = d3.event;
event.preventDefault();
event.stopImmediatePropagation();
console.log("touchend:", mouse[0])
d3.select(this).transition().duration(500).attr("cx", orgMouse.x);
mask.transition().duration(500).attr("cx", orgMouse.x);
})
});
var el = document.getElementsByClassName("inner")[0];
circle.node().addEventListener("touchstart", handleStart, false);
//circle.node().addEventListener("mousemove", handleMove, false);
//console.log(circle.node())
function handleStart(event) {
console.log(event)
}
function handleMove(event) {
console.log("mousemove", event)
}
console.log("=======================");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment