Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple web interface example for running REAPER actions remotely https://i.imgur.com/ZhC3vF4.gif
<!DOCTYPE html>
<html>
<head>
<title>Toolbar demo by cfillion</title>
<meta charset="utf-8"/>
<style>
@font-face {
font-family: 'Bravura';
src: url('https://cdn.rawgit.com/openlilylib/openlilylib/3d6a145a/custom-music-fonts/smufl/bravura-1.12/woff/Bravura.woff');
}
button {
font-family: 'Bravura';
font-size: 40px;
height: 100px;
line-height: 120px;
margin: 5px;
overflow: hidden;
width: 100px;
white-space: pre;
}
</style>
<script src="/main.js"></script>
</head>
<body data-midieditor-proxy="_RSaa0b95d32702e4280da1ed3c64dd12063f680ee4">
<!--
Import the script at https://forum.cockos.com/showthread.php?t=197309 in
the Action List's Main Section and put its command ID in the
data-midieditor-proxy attribute above.
Main action:
<button data-action="command-id">Label</button>
MIDI Editor action:
<button data-action="command-id" data-midieditor>Label</button>
-->
<!-- Grid: Set to 1/2 -->
<button data-action="40203" data-midieditor>&#x1d15e;</button>
<!-- Grid: Set to 1/4 -->
<button data-action="40201" data-midieditor>&#x2669;</button>
<!-- Grid: Set to 1/8 -->
<button data-action="40197" data-midieditor>&#x266a;</button>
<!-- Grid: Set to 1/16 -->
<button data-action="40192" data-midieditor>&#x1d161;</button>
<script>
wwr_start();
function getAction(dataset)
{
var action = encodeURIComponent(dataset.action);
if(dataset.midieditor !== undefined) {
return 'SET/EXTSTATE/run_action/midi_editor/' +
action + ';' + document.body.dataset.midieditorProxy;
}
return action;
}
var elements = document.getElementsByTagName('button');
for(var i = 0; i < elements.length; ++i) {
elements[i].addEventListener('click', function(e) {
wwr_req(getAction(e.target.dataset));
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.