rpd
Version:
RPD is a minimal framework for building Node-Based User Interfaces, powered by Reactive Programming
93 lines (72 loc) • 4.04 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Animatron Toolkit</title>
<!-- Animatron -->
<script src="http://player.animatron.com/latest/bundle/animatron.min.js"></script>
<!-- replace double equals signs with double dashes to get html head like below generated -->
<!-- gulp html-head ==style plain ==renderer html ==toolkit anm ==root .. -->
<!-- or run this, and get everything combined in two files: rpd.js and rpd.css -->
<!-- gulp ==style plain ==renderer html ==toolkit anm -->
<!-- Built with RPD v2.0.0 <http://shamansir.github.io/rpd> -->
<!-- RPD Renderer: html -->
<link rel="stylesheet" href="../src/render/html.css"></style>
<!-- RPD Style: plain (html) -->
<link rel="stylesheet" href="../src/style/plain/html.css"></style>
<!-- RPD Toolkit: anm (html) -->
<link rel="stylesheet" href="../src/toolkit/anm/html.css"></style>
<!-- Kefir -->
<script src="../node_modules/kefir/dist/kefir.min.js"></script>
<!-- d3-selection -->
<script src="../node_modules/d3-selection/build/d3-selection.min.js"></script>
<!-- RPD -->
<script src="../src/rpd.js"></script>
<!-- RPD Render Core: -->
<script src="../src/render/shared.js"></script>
<!-- RPD Style: plain (html) -->
<script src="../src/style/plain/html.js"></script>
<!-- RPD Renderer: html -->
<script src="../src/render/html.js"></script>
<!-- RPD Toolkit: anm -->
<script src="../src/toolkit/anm/shared.js"></script>
<script src="../src/toolkit/anm/toolkit.js"></script>
<!-- RPD Toolkit: anm (html) -->
<script src="../src/toolkit/anm/html.js"></script>
<script>
function buildNetwork() {
Rpd.renderNext('html', document.body, { style: 'plain',
fullPage: true,
valuesOnHover: true });
var root = Rpd.addPatch('root');
var positionValues = root.addNode('anm/spread').move(30, 40);
positionValues.inlets['min'].receive(-150);
positionValues.inlets['max'].receive(150);
positionValues.inlets['count'].receive(26);
var positions = root.addNode('anm/vector').move(200, 40);
positionValues.outlets['spread'].connect(positions.inlets['x']);
positionValues.outlets['spread'].connect(positions.inlets['y']);
var colorValues = root.addNode('anm/spread').move(660, 40);
colorValues.inlets['count'].receive(40);
var colors = root.addNode('anm/color').move(380, 100);
colorValues.outlets['spread'].connect(colors.inlets['green']);
colorValues.outlets['spread'].connect(colors.inlets['blue']);
colorValues.outlets['spread'].connect(colors.inlets['alpha']);
var sizeValues = root.addNode('anm/spread').move(550, 320);
sizeValues.inlets['max'].receive(100);
var sizes = root.addNode('anm/vector').move(415, 210);
sizeValues.outlets['spread'].connect(sizes.inlets['x']);
sizeValues.outlets['spread'].connect(sizes.inlets['y']);
var primitive = root.addNode('anm/primitive').move(300, 350);;
primitive.inlets['type'].receive('oval');
positions.outlets['vector'].connect(primitive.inlets['pos']);
colors.outlets['color'].connect(primitive.inlets['color']);
sizes.outlets['vector'].connect(primitive.inlets['size']);
var render = root.addNode('anm/render').move(400, 450);
primitive.outlets['shape'].connect(render.inlets['what']);
}
</script>
</head>
<body onload="buildNetwork()">
</body>
</html>