rpd
Version:
RPD is a minimal framework for building Node-Based User Interfaces, powered by Reactive Programming
158 lines (127 loc) • 5.92 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>PD Toolkit — Loading from File</title>
<!-- replace double equals signs with double dashes to get html head like below generated -->
<!-- gulp html-head ==style webpd ==renderer svg ==toolkit webpd ==io pd ==root .. -->
<!-- or run this, and get everything combined in two files: rpd.js and rpd.css -->
<!-- gulp ==style webpd ==renderer svg ==io pd ==toolkit webpd -->
<!-- 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: webpd (svg) -->
<link rel="stylesheet" href="../src/style/webpd/svg.css"></style>
<!-- RPD Toolkit: webpd (svg) -->
<link rel="stylesheet" href="../src/toolkit/webpd/svg.css"></style>
<!-- WebPd -->
<!-- <script src="http://rawgit.com/sebpiq/WebPd/master/dist/webpd-latest.min.js"></script> -->
<!-- <script src="../node-modules/webpd/dist/webpd-latest.min.js"></script> -->
<script src="../node_modules/webpd/dist/webpd-latest.js"></script>
<!-- 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: webpd (svg) -->
<script src="../src/style/webpd/svg.js"></script>
<!-- RPD Renderer: svg -->
<script src="../src/render/svg.js"></script>
<!-- RPD Toolkit: webpd -->
<script src="../src/toolkit/webpd/shared.js"></script>
<script src="../src/toolkit/webpd/toolkit.js"></script>
<!-- RPD Toolkit: webpd (svg) -->
<script src="../src/toolkit/webpd/svg.js"></script>
<!-- RPD I/O: pd -->
<script src="../src/io/pd.js"></script>
</head>
</head>
<body>
<style>
#file {
position: fixed;
right: 0;
top: 0;
margin: 10px;
width: 300px;
}
#pd-code {
position: fixed;
right: 0;
top: 20px;
margin: 15px;
width: 300px;
height: 80%;
font-family: monospace;
}
#load-pd-code {
position: fixed;
margin: 15px;
right: 0;
bottom: 0;
}
/* body {
margin: 0;
} */
</style>
<input type="file" id="file" name="file" accept=".pd" />
<textarea id="pd-code"></textarea>
<button id="load-pd-code">Load</button>
<div id="network"><span id="welcome">[Load something...]</span></div>
<script>
var target = document.getElementById('network'),
textarea = document.getElementById('pd-code'),
loadCode = document.getElementById('load-pd-code'),
fileInput = document.getElementById('file');
// ============ rendering patch
Rpd.renderNext('svg', target, { style: 'webpd', fullPage: true,
inletAcceptsMultipleLinks: true });
// ============ loading from localStorage
textarea.value = localStorage.getItem('last_contents');
loadCode.addEventListener('click', function() {
localStorage.setItem('last_contents', textarea.value);
target.innerHTML = target.textContent = '';
var importedPatch = Rpd.import.pd(textarea.value);
if (importedPatch) {
var model = importedPatch.model;
Pd.start();
model.switchAudioChannel(0, false); // disable audio
model.switchAudioChannel(1, false); // disable audio
//importedPatch.enter(); // entering is done in the import (wrongly?)
//importedPatch.addNode('wpd/edit-switch').move(10, 10);
importedPatch.addNode('wpd/toolbar').move(400, 20);
importedPatch.addNode('wpd/audio-control').move(10, 10);
}
});
// ============ loading from file
if (window.File && window.FileReader && window.FileList && window.Blob) {
fileInput.addEventListener('change', function(evt) {
var files = evt.target.files;
for (var i = 0, file; file = files[i]; i++) {
if (file.name.indexOf('.pd') < 0) {
console.error('File ' + file.name + ' ' +
'is not Pure Data file');
}
var reader = new FileReader();
reader.onload = function(evt) {
textarea.value = evt.target.result;
loadCode.click();
};
reader.readAsText(file);
};
});
} else {
document.body.removeChild(document.getElementById('file'));
if (!textarea.value) {
textarea.value = '#N canvas 200 388 450 300 10;' + '\n' +
'#X obj 53 106 print;' + '\n' +
'#X floatatom 46 32 5 0 0 0 - - -;' + '\n' +
'#X connect 1 0 0 0;' + '\n';
}
}
</script>
</body>
</html>