tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
pandorafms/extras/cats.html

357 lines
14 KiB
HTML
Raw Normal View History

I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
<html>
<head>
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
<title>gatete</title>
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("#test svg");
</script>
<div id="test">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" style="background: black;">
<image id="cat_piano" x="400" y="-100" width="50%" height="50%" xlink:href="https://media.giphy.com/media/ymckEpq27dQ9W/giphy.gif" />
<g id="zoom" transform="translate(-10 20) scale (1)">
<g
Added a second pair of cats to test with two arrows.
2016-03-01 17:09:38 +01:00
transform="translate(100, 300) scale(0.50)"
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
id="cat1">
<path
id="path8068"
d="m 80,286.64792 28.57143,-31.42857 94.28571,60 5.71429,122.85714 L 200,472.3622 l 82.85714,-54.28571 194.28572,8.57143 191.42857,31.42857 48.57143,40 -11.42857,-65.71429 -48.57143,-94.28571 31.42857,-51.42857 14.28571,-88.57143 62.85715,74.28571 65.71428,0 31.42857,-82.85714 42.85715,94.28572 L 920,340.93363 897.14286,423.79078 868.57143,515.21935 800,663.79078 814.28571,795.21935 760,855.21935 734.28571,649.50506 691.42857,672.3622 714.28571,883.79078 640,895.21935 l -8.57143,-208.57143 -85.71428,71.42857 -160,-14.28571 L 317.14286,695.21935 360,838.07649 l -22.85714,65.71429 -74.28572,-200 -11.42857,162.85714 -74.28571,-17.14286 40,-217.14286 -42.85715,-17.14285 5.71429,-85.71429 -5.71429,-54.28571 -2.85714,-108.57143 -20,-42.85714 z"
style="fill:none;fill-rule:evenodd;stroke: red; fill: white; stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
Added a second pair of cats to test with two arrows.
2016-03-01 17:09:38 +01:00
transform="translate(700, 500) scale(0.25)"
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
id="cat2">
<path
id="path8068"
d="m 80,286.64792 28.57143,-31.42857 94.28571,60 5.71429,122.85714 L 200,472.3622 l 82.85714,-54.28571 194.28572,8.57143 191.42857,31.42857 48.57143,40 -11.42857,-65.71429 -48.57143,-94.28571 31.42857,-51.42857 14.28571,-88.57143 62.85715,74.28571 65.71428,0 31.42857,-82.85714 42.85715,94.28572 L 920,340.93363 897.14286,423.79078 868.57143,515.21935 800,663.79078 814.28571,795.21935 760,855.21935 734.28571,649.50506 691.42857,672.3622 714.28571,883.79078 640,895.21935 l -8.57143,-208.57143 -85.71428,71.42857 -160,-14.28571 L 317.14286,695.21935 360,838.07649 l -22.85714,65.71429 -74.28572,-200 -11.42857,162.85714 -74.28571,-17.14286 40,-217.14286 -42.85715,-17.14285 5.71429,-85.71429 -5.71429,-54.28571 -2.85714,-108.57143 -20,-42.85714 z"
style="fill:none;fill-rule:evenodd;stroke: red; fill: white; stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
Added a second pair of cats to test with two arrows.
2016-03-01 17:09:38 +01:00
<g
transform="translate(200, 0) scale(0.25)"
id="cat3">
<path
id="path8068"
d="m 80,286.64792 28.57143,-31.42857 94.28571,60 5.71429,122.85714 L 200,472.3622 l 82.85714,-54.28571 194.28572,8.57143 191.42857,31.42857 48.57143,40 -11.42857,-65.71429 -48.57143,-94.28571 31.42857,-51.42857 14.28571,-88.57143 62.85715,74.28571 65.71428,0 31.42857,-82.85714 42.85715,94.28572 L 920,340.93363 897.14286,423.79078 868.57143,515.21935 800,663.79078 814.28571,795.21935 760,855.21935 734.28571,649.50506 691.42857,672.3622 714.28571,883.79078 640,895.21935 l -8.57143,-208.57143 -85.71428,71.42857 -160,-14.28571 L 317.14286,695.21935 360,838.07649 l -22.85714,65.71429 -74.28572,-200 -11.42857,162.85714 -74.28571,-17.14286 40,-217.14286 -42.85715,-17.14285 5.71429,-85.71429 -5.71429,-54.28571 -2.85714,-108.57143 -20,-42.85714 z"
style="fill:none;fill-rule:evenodd;stroke: red; fill: white; stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
transform="translate(600, 0) scale(0.25)"
id="cat4">
<path
id="path8068"
d="m 80,286.64792 28.57143,-31.42857 94.28571,60 5.71429,122.85714 L 200,472.3622 l 82.85714,-54.28571 194.28572,8.57143 191.42857,31.42857 48.57143,40 -11.42857,-65.71429 -48.57143,-94.28571 31.42857,-51.42857 14.28571,-88.57143 62.85715,74.28571 65.71428,0 31.42857,-82.85714 42.85715,94.28572 L 920,340.93363 897.14286,423.79078 868.57143,515.21935 800,663.79078 814.28571,795.21935 760,855.21935 734.28571,649.50506 691.42857,672.3622 714.28571,883.79078 640,895.21935 l -8.57143,-208.57143 -85.71428,71.42857 -160,-14.28571 L 317.14286,695.21935 360,838.07649 l -22.85714,65.71429 -74.28572,-200 -11.42857,162.85714 -74.28571,-17.14286 40,-217.14286 -42.85715,-17.14285 5.71429,-85.71429 -5.71429,-54.28571 -2.85714,-108.57143 -20,-42.85714 z"
style="fill:none;fill-rule:evenodd;stroke: red; fill: white; stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
</g>
</svg>
</div>
<script type="text/javascript">
var svg = d3.select("svg #zoom");
svg.append("g")
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
.attr("id", "circulo")
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
.attr("transform",
function(d) {
return "translate(" + get_center_element("#cat1")[0] + " " + get_center_element("#cat1")[1] + ")";})
.append("circle")
.attr("style", "fill: rgb(0, 255, 0);")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 20);
svg.append("g")
.attr("transform",
function(d) { return "translate(" + get_pos_element("#cat1")[0] + " " + get_pos_element("#cat1")[1] + ") scale(" + get_scale_element("#cat1") + ")";})
.append("rect")
.attr("style", "fill:none; stroke:#ffff00;stroke-width:5")
.attr("width", function(d) { return get_size_element("#cat1")[0];})
.attr("height", function(d) { return get_size_element("#cat1")[1];});
svg.append("g")
.attr("transform",
function(d) {
return "translate(" + get_center_element("#cat1")[0] + " " + get_center_element("#cat1")[1] + ") scale(" + get_scale_element("#cat1") + ")";})
.append("circle")
.attr("style", "fill: none; stroke-width: 5; stroke: rgb(0, 0, 255);")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", get_radius_element("#cat1"));
Added a second pair of cats to test with two arrows.
2016-03-01 17:09:38 +01:00
svg.append("g")
.attr("id", "circulo")
.attr("transform",
function(d) {
return "translate(" + get_center_element("#cat3")[0] + " " + get_center_element("#cat3")[1] + ")";})
.append("circle")
.attr("style", "fill: rgb(0, 255, 0);")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 20);
svg.append("g")
.attr("transform",
function(d) { return "translate(" + get_pos_element("#cat3")[0] + " " + get_pos_element("#cat3")[1] + ") scale(" + get_scale_element("#cat3") + ")";})
.append("rect")
.attr("style", "fill:none; stroke:#ffff00;stroke-width:5")
.attr("width", function(d) { return get_size_element("#cat3")[0];})
.attr("height", function(d) { return get_size_element("#cat3")[1];});
svg.append("g")
.attr("transform",
function(d) {
return "translate(" + get_center_element("#cat3")[0] + " " + get_center_element("#cat3")[1] + ") scale(" + get_scale_element("#cat3") + ")";})
.append("circle")
.attr("style", "fill: none; stroke-width: 5; stroke: rgb(0, 0, 255);")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", get_radius_element("#cat3"));
The arrow in parts.
2016-02-29 15:41:22 +01:00
arrow_by_pieces("gatete_flecha", "cat1", "cat2");
Added a second pair of cats to test with two arrows.
2016-03-01 17:09:38 +01:00
arrow_by_pieces("gatete_flecha", "cat3", "cat4");
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function get_radius_element
* Return float
* This method get the element radius
*/
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
function get_radius_element(element) {
var size = get_size_element(element);
return Math.sqrt(
Math.pow(size[0] / 2, 2) + Math.pow(size[1] / 2, 2));
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function get_scale_element
* Return float
* This method get the element escale
*/
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
function get_scale_element(element) {
var element_t = d3.transform(d3.select(element).attr("transform"));
var element_t_scale = parseFloat(element_t['scale']);
return element_t_scale;
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function get_size_element
* Return array[2]
* This method get the element size [width, height]
*/
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
function get_size_element(element) {
var element_b = d3.select(element).node().getBBox();
return [element_b['width'], element_b['height']];
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function get_pos_element
* Return array[2]
* This method get the element position [x, y]
*/
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
function get_pos_element(element) {
var element_t = d3.transform(d3.select(element).attr("transform"));
var element_t_scale = parseFloat(element_t['scale']);
var element_b = d3.select(element).node().getBBox();
var box_x = parseFloat(element_t.translate[0]) +
parseFloat(element_b['x']) * element_t_scale;
var box_y = parseFloat(element_t.translate[1]) +
parseFloat(element_b['y']) * element_t_scale;
return [box_x, box_y];
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function get_center_element
* Return array[2]
* This method ge2t the element center point [x, y]
*/
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
function get_center_element(element) {
var element_t = d3.transform(d3.select(element).attr("transform"));
var element_t_scale = parseFloat(element_t['scale']);
var element_b = d3.select(element).node().getBBox();
var box_x = parseFloat(element_t.translate[0]) +
parseFloat(element_b['x']) * element_t_scale;
var box_y = parseFloat(element_t.translate[1]) +
parseFloat(element_b['y']) * element_t_scale;
var width = (element_t_scale * element_b['width']);
var height = (element_t_scale * element_b['height']);
var c_x = box_x + (width / 2);
var c_y = box_y + (height / 2);
return [c_x, c_y];
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function get_distance_between_point
* Return float
* This method get the distance betweeen two points
*/
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
function get_distance_between_point(point1, point2) {
delta_x = Math.abs(point1[0] - point2[0]);
delta_y = Math.abs(point1[1] - point1[1]);
return Math.sqrt(
Math.pow(delta_x, 2) + Math.pow(delta_y, 2));
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function get_angle_of_line
* Return float
* This method get the angle of line and x axe
*/
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
function get_angle_of_line(point1, point2) {
The arrow in parts.
2016-02-29 16:12:17 +01:00
return Math.atan2(point2[1] - point1[1], point2[0] - point1[0]) * 180 / Math.PI;
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function arrow_by_pieces
* Return void
* This method print the arrow by pieces
*/
The arrow in parts.
2016-02-29 15:41:22 +01:00
function arrow_by_pieces(id_arrow, element1, element2, step) {
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
if (typeof(step) === "undefined")
The arrow in parts.
2016-02-29 15:41:22 +01:00
step = 0;
step++;
var callback = "arrow_by_pieces("+
"'" + id_arrow + "', "+
"'" + element1 + "', "+
"'" + element2 + "', "+
" " + step + ");"
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/*-----------------------------------------------*/
/*---------------- Print by steps ---------------*/
/*------------- 1 Link the arrow body -----------*/
/*------------- 2 Link the arrow head -----------*/
/*------------- 3 Print the arrow ---------------*/
/*-----------------------------------------------*/
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
switch (step) {
case 1:
var arrow = svg.append("g")
.attr("id", id_arrow)
.attr("style", "opacity: 0");
arrow.append("g")
.attr("id", "body")
.append("use")
.attr("xlink:href", "body_arrow.svg#body_arrow")
The arrow in parts.
2016-02-29 15:41:22 +01:00
.attr("onload",
callback);
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
break;
case 2:
var arrow = d3.select("#" +id_arrow);
arrow.append("g")
.attr("id", "head")
.append("use")
.attr("xlink:href", "head_arrow.svg#head_arrow")
The arrow in parts.
2016-02-29 15:41:22 +01:00
.attr("onload",
callback);
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
break;
case 3:
The arrow in parts.
2016-02-29 15:41:22 +01:00
var c_elem1 = get_center_element("#" + element1);
var c_elem2 = get_center_element("#" + element2);
var distance = get_distance_between_point(c_elem1, c_elem2);
var transform = d3.transform();
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/*---------------------------------------------*/
/*--- Position of layer arrow (body + head) ---*/
/*---------------------------------------------*/
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
var arrow = d3.select("#" + id_arrow);
The arrow in parts.
2016-02-29 16:12:17 +01:00
var arrow_body = d3.select("#" + id_arrow + " #body");
var arrow_body_b = arrow_body.node().getBBox();
The arrow in parts.
2016-02-29 15:41:22 +01:00
transform.translate[0] = c_elem1[0];
The arrow in parts.
2016-02-29 16:12:17 +01:00
transform.translate[1] = c_elem1[1] - arrow_body_b['height'] / 2;
transform.rotate = get_angle_of_line(c_elem1, c_elem2);
The arrow in parts.
2016-02-29 15:41:22 +01:00
arrow.attr("transform", transform.toString());
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/*---------------------------------------------*/
/*-------- Resize the body arrow width --------*/
/*---------------------------------------------*/
The arrow in parts.
2016-02-29 15:41:22 +01:00
var arrow_body = d3.select("#" + id_arrow + " #body");
var arrow_body_b = arrow_body.node().getBBox();
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
var arrow_head = d3.select("#" + id_arrow + " #head");
var arrow_head_b = arrow_head.node().getBBox();
The arrow in parts.
2016-02-29 15:41:22 +01:00
var body_width = distance - arrow_head_b['width'];
transform = d3.transform();
transform.scale[0] = body_width / arrow_body_b['width'];
arrow_body.attr("transform", transform.toString());
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/*---------------------------------------------*/
/*---------- Position of head arrow -----------*/
/*---------------------------------------------*/
The arrow in parts.
2016-02-29 15:41:22 +01:00
transform = d3.transform();
var arrow_body_t = d3.transform(arrow_body.attr("transform"));
var scale = arrow_body_t.scale[0];
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
var x = 0 + arrow_body_b['width'] * scale;
var y = 0 + (arrow_body_b['height'] / 2 - arrow_head_b['height'] / 2);
transform.translate[0] = x;
transform.translate[1] = y;
arrow_head.attr("transform", transform.toString());
Added a second pair of cats to test with two arrows.
2016-03-01 17:09:38 +01:00
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/*---------------------------------------------*/
/*------- Show the result in one time ---------*/
/*---------------------------------------------*/
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
arrow.attr("style", "opacity: 1");
break;
}
}
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
/**
* Function arrow
* Return void
* This method creates the arrow between two elements
*/
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
function arrow(svg, element1, element2) {
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
d = get_distance_between_point(element1, element2);
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
x = element1[0];
y = element1[1];
svg.append("g")
.attr("transform",
function(d) {
Some work in the example file cats.html
2016-02-29 15:14:25 +01:00
return "translate(" + x + " " + y + ")";})
.append("path")
.attr("style", "fill: none; stroke-width: 5; stroke: rgb(0, 255, 255);")
.attr("d", "M 0 10 L 200 10 L 200 0 L 230 20 L 200 40 L 200 30 L 0 30 z");
x = element2[0];
y = element2[1];
svg.append("g")
.attr("transform",
function(d) {
return "translate(" + x + " " + y + ")";})
I love the cats with potatoes and carrots.
2016-02-29 09:23:43 +01:00
.append("path")
.attr("style", "fill: none; stroke-width: 5; stroke: rgb(0, 255, 255);")
.attr("d", "M 0 10 L 200 10 L 200 0 L 230 20 L 200 40 L 200 30 L 0 30 z");
}
</script>
</body>
New maps in progress... (document arrows code)
2016-03-01 09:45:13 +01:00
</html>