rpd
Version:
RPD is a minimal framework for building Node-Based User Interfaces, powered by Reactive Programming
62 lines (48 loc) • 2.34 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Core with Network</title>
<!-- gulp html-head ==style quartz ==renderer html ==toolkit util ==root .. -->
<!-- Built with RPD v2.0.0 <http://shamansir.github.io/rpd> -->
<!-- RPD Renderer: svg -->
<link rel="stylesheet" href="../src/render/svg.css"></style>
<!-- RPD Style: quartz (html) -->
<link rel="stylesheet" href="../src/style/quartz/html.css"></style>
<!-- RPD Toolkit: util (html) -->
<link rel="stylesheet" href="../src/toolkit/util/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: quartz (html) -->
<script src="../src/style/quartz/html.js"></script>
<!-- RPD Renderer: html -->
<script src="../src/render/html.js"></script>
<!-- RPD Toolkit: util -->
<script src="../src/toolkit/util/shared.js"></script>
<script src="../src/toolkit/util/toolkit.js"></script>
<!-- RPD Toolkit: util (html) -->
<script src="../src/toolkit/util/html.js"></script>
</head>
<body>
<script>
Rpd.renderNext('html', document.body,
{ style: 'quartz', fullPage: true });
var root = Rpd.addPatch('root').resizeCanvas(800, 400);
var metro1 = root.addNode('util/metro', 'Metro A').move(40, 20);
var metro2 = root.addNode('util/metro', 'Metro B').move(40, 120);
var genA = root.addNode('util/random', 'Generate A').move(300, 10);
var genB = root.addNode('util/random', 'Generate B').move(300, 160);
var sum = root.addNode('util/+', 'Sum').move(520, 80);
genA.outlets['random'].connect(sum.inlets['a']);
genB.outlets['random'].connect(sum.inlets['b']);
metro1.outlets['bang'].connect(genA.inlets['bang']);
metro2.outlets['bang'].connect(genB.inlets['bang']);
</script>
</body>
</html>