<!DOCTYPE html>
<html>
<head>
<title>Cindy JS Example</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<script id="csinit" type="text/x-cindyscript">
dropped = (;); // undefined
dropPoint = (;); // undefined
</script>
<script id="csdraw" type="text/x-cindyscript">
img = (;);
txt = (;);
if (!isundefined(dropped),
forall (dropped, i, (
if (i_2 == "image", img = i_1);
if (i_2 == "string", txt = i_1);
));
);
if (!isundefined(img), drawimage(A, B, img),
if (!isundefined(txt), drawtext(A, txt, color->[0, 0.5, 0.75])));
if (!isundefined(dropped), (
drawtext((0, 0), length(dropped) + " files dropped " + "at point " + dropPoint_1 + " " + dropPoint_2);
forall (1..length(dropped), i, (
drawtext((0, -i), dropped_i_2 + " named " + dropped_i_4);
));
), drawtext((0, 0), "Drag and drop files into this area"));
draw(point(dropPoint), color->[0,1,0], alpha->0.5);
</script>
<script id="csondrop" type="text/x-cindyscript">
dropped = dropped();
dropPoint = droppoint();
err(dropped);
</script>
<script type="text/javascript">
var cdy = CindyJS({
ports: [{ id: "CSCanvas", transform: [{ visibleRect: [-1, -25, 25, 1] }] }],
scripts: "cs*",
language: "en",
defaultAppearance: {},
geometry: [
{ name: "A", type: "Free", pos: [5, -20] },
{ name: "B", type: "Free", pos: [15, -20] },
],
});
</script>
</head>
<body style="font-family: Arial">
<div id="CSCanvas" style="width: 500px; height: 500px; border: 2px solid black"></div>
<p>
You can also drag and drop <a href="../package.json" draggable="true">this link</a> (on some browsers) or
these images (on most browsers):<br />
<img src="rost.png" draggable="true" alt="rost" />
<img src="boe.png" draggable="true" alt="boe" />
</p>
</body>
</html>