rpd
Version:
RPD is a minimal framework for building Node-Based User Interfaces, powered by Reactive Programming
83 lines (66 loc) • 3.42 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Timbre Toolkit</title>
<!-- replace double equals signs with double dashes to get html head like below generated -->
<!-- gulp html-head ==style quartz ==renderer html ==toolkit util ==toolkit timbre ==root .. -->
<!-- or run this, and get everything combined in two files: rpd.js and rpd.css -->
<!-- gulp ==style quartz ==renderer html ==toolkit util ==toolkit timbre -->
<!-- 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: quartz (html) -->
<link rel="stylesheet" href="../src/style/quartz/html.css"></style>
<!-- RPD Toolkit: timbre (html) -->
<link rel="stylesheet" href="../src/toolkit/timbre/html.css"></style>
<!-- RPD Toolkit: util (html) -->
<link rel="stylesheet" href="../src/toolkit/util/html.css"></style>
<!-- Timbre -->
<script src="http://mohayonao.github.io/timbre.js/timbre.js"></script>
<!-- Kefir -->
<script src="../node_modules/kefir/dist/kefir.min.js"></script>
<!-- d3-selection -->
<script src="../node_modules/d3-selection/build/d3-selection.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>
<!-- RPD Toolkit: timbre -->
<script src="../src/toolkit/timbre/shared.js"></script>
<script src="../src/toolkit/timbre/toolkit.js"></script>
<!-- RPD Toolkit: timbre (html) -->
<script src="../src/toolkit/timbre/html.js"></script>
</head>
<body>
<script>
Rpd.renderNext('html', document.body, { style: 'quartz', fullPage: true,
/*, valuesOnHover: true*/ });
var root = Rpd.addPatch('root');
var wave = root.addNode('timbre/wave').move(30, 30);
var freq = root.addNode('util/bounded-number').move(35, 150);
freq.inlets['min'].receive(110);
freq.inlets['max'].receive(880);
freq.inlets['spinner'].receive(440);
var osc = root.addNode('timbre/osc').move(220, 90);
freq.outlets['number'].connect(osc.inlets['freq']);
wave.outlets['wave'].connect(osc.inlets['wave']);
var plot = root.addNode('timbre/plot').move(460, 80);
osc.outlets['sound'].connect(plot.inlets['sound']);
var play = root.addNode('timbre/play').move(430, 270);
var random = root.addNode('util/random').move(45, 275);
random.inlets['min'].receive(110);
random.inlets['max'].receive(880);
random.inlets['bang'].stream(Kefir.interval(3000, {}));
</script>
</body>
</html>