Skip to content

Instantly share code, notes, and snippets.

@poezn

poezn/_.md

Forked from roundrobin/_.md
Created January 17, 2013 22:51
Download ZIP

Revisions

  1. poezn revised this gist Jan 17, 2013. 2 changed files with 15 additions and 7 deletions.
    2 changes: 1 addition & 1 deletion config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"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}
    {"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}
    20 changes: 14 additions & 6 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,11 @@
    var svg = d3.select("svg");


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


    @@ -76,20 +77,20 @@ var paddingX = 10;
    group.append('svg:text')
    .text("on")
    .attr("fill", "#FFFFFF")
    .attr("x", paddingX)
    .attr("x", width/4)
    .attr("y", textWith+4)
    .attr("font-size", textWith)
    .attr("font-family", "Arial")
    .attr("text-anchor", "start");
    .attr("text-anchor", "middle");

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


    var dragBehave= d3.behavior.drag()
    @@ -121,7 +122,14 @@ var dragBehave= d3.behavior.drag()
    })
    .on("dragstart", function(d, i) {
    })
    .on("dragend", 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")
  2. poezn revised this gist Jan 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    [ <a href="http://tributary.io/inlet/4559406">Launch: just another inlet to tributary</a> ] 4559406 by roundrobin<br>
    [ <a href="http://tributary.io/inlet/4560616">Launch: Toggle Switch</a> ] 4560616 by poezn<br>[ <a href="http://tributary.io/inlet/4559406">Launch: just another inlet to tributary</a> ] 4559406 by roundrobin<br>
  3. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -56,6 +56,9 @@ var group = g.append("svg:g")
    .attr("class","group")
    .attr("clip-path","url(#clippy1)");




    group.append("svg:rect")
    .attr("width",width/2)
    .attr("height",height)
    @@ -129,3 +132,11 @@ group.append("svg:rect")
    .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");
  4. @roundrobin roundrobin revised this gist Jan 17, 2013. No changes.
  5. @roundrobin roundrobin revised this gist Jan 17, 2013. No changes.
  6. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 14 additions and 2 deletions.
    16 changes: 14 additions & 2 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -93,15 +93,27 @@ var dragBehave= d3.behavior.drag()
    .on("drag", function(d,i){
    var event = d3.event;
    var elem = d3.select(this);
    console.log(event,elem);
    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",0)
    elem.attr("x",width/2)
    }


    if(parseFloat(elem.attr("x")) < 0){
    elem.attr("x",0)
    }


    })
    .on("dragstart", function(d, i) {
  7. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 8 additions and 1 deletion.
    9 changes: 8 additions & 1 deletion inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -94,7 +94,14 @@ var dragBehave= d3.behavior.drag()
    var event = d3.event;
    var elem = d3.select(this);
    console.log(event,elem);
    elem.attr("x",parseFloat(elem.attr("x")) + event.dx)

    if(parseFloat(elem.attr("x")) >= 0){

    }else{
    elem.attr("x",0)
    }



    })
    .on("dragstart", function(d, i) {
  8. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -90,12 +90,14 @@ group.append('svg:text')


    var dragBehave= d3.behavior.drag()
    .on("drag", function(d,i){})
    .on("dragstart", function(d, i) {
    var event = d3.event;
    console.log(event);

    .on("drag", function(d,i){
    var event = d3.event;
    var elem = d3.select(this);
    console.log(event,elem);
    elem.attr("x",parseFloat(elem.attr("x")) + event.dx)

    })
    .on("dragstart", function(d, i) {
    })
    .on("dragend", function(d, i) {});

  9. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 13 additions and 2 deletions.
    15 changes: 13 additions & 2 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -89,11 +89,22 @@ group.append('svg:text')
    .attr("text-anchor", "start");


    var dragBehave= d3.behavior.drag()
    .on("drag", function(d,i){})
    .on("dragstart", function(d, i) {
    var event = d3.event;
    console.log(event);


    })
    .on("dragend", function(d, i) {});


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

    .attr('fill',"url(#g320)")
    .call(dragBehave);


  10. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 27 additions and 1 deletion.
    28 changes: 27 additions & 1 deletion inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,32 @@ 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")
    @@ -67,7 +93,7 @@ group.append("svg:rect")
    .attr("width",width/2)
    .attr("x",width/2)
    .attr("height",height)
    .attr("fill","#46403B");
    .attr('fill',"url(#g320)");



  11. @roundrobin roundrobin revised this gist Jan 17, 2013. 2 changed files with 57 additions and 6 deletions.
    2 changes: 1 addition & 1 deletion config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"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}},"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}
    {"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}
    61 changes: 56 additions & 5 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,73 @@
    var svg = d3.select("svg");


    var width = 100;
    var height = 40;
    var rx = 10;
    var textWith = 24;
    var defs = g.append('svg:defs');

    //This create an ellipsis shape for the drop shadow texure
    defs.append('svg:path')
    .attr("id","ellipsis")
    .attr("d","M25.323,44.2c-11.529,0-20.871-1.29-20.871-2.87s9.342-2.87,20.871-2.87c11.521,0,20.862,1.29,20.862,2.87 S36.844,44.2,25.323,44.2");
    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","#ellipsis")
    .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","matrix(1 0 0 1 -2.384186e-07 0)")
    .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", 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");


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



  12. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 18 additions and 18 deletions.
    36 changes: 18 additions & 18 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,22 @@
    var svg = d3.select("svg");

    var defs = g.append('svg:defs');
    var defs = g.append('svg:defs');

    //This create an ellipsis shape for the drop shadow texure
    defs.append('svg:path')
    .attr("id","ellipsis")
    .attr("d","M25.323,44.2c-11.529,0-20.871-1.29-20.871-2.87s9.342-2.87,20.871-2.87c11.521,0,20.862,1.29,20.862,2.87 S36.844,44.2,25.323,44.2");

    //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","#ellipsis")
    .attr("overflow","visible");
    //This create an ellipsis shape for the drop shadow texure
    defs.append('svg:path')
    .attr("id","ellipsis")
    .attr("d","M25.323,44.2c-11.529,0-20.871-1.29-20.871-2.87s9.342-2.87,20.871-2.87c11.521,0,20.862,1.29,20.862,2.87 S36.844,44.2,25.323,44.2");

    //Create a group for the icon we are about to add to the canvas
    var group = g.append("svg:g")
    .attr("transform","matrix(1 0 0 1 -2.384186e-07 0)")
    .attr("class","group")
    .attr("clip-path","url(#clippy1)");
    //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","#ellipsis")
    .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","matrix(1 0 0 1 -2.384186e-07 0)")
    .attr("class","group")
    .attr("clip-path","url(#clippy1)");
  13. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"description":"An inlet to Tributary","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}},"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}
    {"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}},"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}
  14. @roundrobin roundrobin revised this gist Jan 17, 2013. 2 changed files with 21 additions and 11 deletions.
    1 change: 1 addition & 0 deletions config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"description":"An inlet to Tributary","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}},"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}
    31 changes: 20 additions & 11 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,22 @@
    var svg = d3.select("svg");

    svg.append("rect")
    .attr("width", 100)
    .attr("height", 100)
    .attr("x", 100)
    .attr("y", 100)
    .attr("rx", 15)
    .style("fill", "#1F00FF")
    .style("fill-opacity", 0.5)
    .style("stroke", "#0033FF")
    .style("stroke-width", 5)

    var defs = g.append('svg:defs');

    //This create an ellipsis shape for the drop shadow texure
    defs.append('svg:path')
    .attr("id","ellipsis")
    .attr("d","M25.323,44.2c-11.529,0-20.871-1.29-20.871-2.87s9.342-2.87,20.871-2.87c11.521,0,20.862,1.29,20.862,2.87 S36.844,44.2,25.323,44.2");

    //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","#ellipsis")
    .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","matrix(1 0 0 1 -2.384186e-07 0)")
    .attr("class","group")
    .attr("clip-path","url(#clippy1)");
  15. @roundrobin roundrobin revised this gist Jan 17, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [ <a href="http://tributary.io/inlet/4559406">Launch: just another inlet to tributary</a> ] 4559406 by roundrobin<br>
  16. @enjalot enjalot created this gist Jul 29, 2012.
    13 changes: 13 additions & 0 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    var svg = d3.select("svg");

    svg.append("rect")
    .attr("width", 100)
    .attr("height", 100)
    .attr("x", 100)
    .attr("y", 100)
    .attr("rx", 15)
    .style("fill", "#1F00FF")
    .style("fill-opacity", 0.5)
    .style("stroke", "#0033FF")
    .style("stroke-width", 5)