mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 08:38:00 +00:00
new dropdown menu
This commit is contained in:
Yotam Mann
parent
a9f2e58ed7
commit
5e678265ed
5 changed files with 119 additions and 82 deletions
|
|
@ -48,9 +48,7 @@
|
|||
noise.stop();
|
||||
}
|
||||
});
|
||||
Interface.DropDown("Rack", ["white", "brown", "pink"], function(which){
|
||||
noise.type = which;
|
||||
});
|
||||
Interface.DropDown("Rack", noise, "type", ["white", "brown", "pink"]);
|
||||
Interface.Code("CodeRack", "ToneCode");
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -7,71 +7,52 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.ui.touch-punch.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./Widgets.js"></script>
|
||||
<script type="text/javascript" src="./ExampleList.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/prism.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Oscillator
|
||||
<br>
|
||||
<br>
|
||||
An oscillator with an LFO attached to the detune control.
|
||||
</div>
|
||||
<div id="Content">
|
||||
</div>
|
||||
<div id="Explanation">
|
||||
Oscillator
|
||||
<br>
|
||||
<br>
|
||||
An oscillator with an LFO attached to the detune control.
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
<div id="Content">
|
||||
<div id="Rack"></div>
|
||||
<div id="Code"></div>
|
||||
</div>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
var osc = new Tone.Oscillator(440, "sine").toMaster();
|
||||
osc.volume.value = -10;
|
||||
|
||||
/* global Tone, GUI*/
|
||||
|
||||
var osc = new Tone.Oscillator(440, "sine");
|
||||
|
||||
var vibrato = new Tone.LFO(6, -25, 25);
|
||||
vibrato.start();
|
||||
|
||||
//connect it to the output
|
||||
osc.toMaster();
|
||||
osc.setVolume(-10);
|
||||
vibrato.connect(osc.detune);
|
||||
|
||||
// GUI //
|
||||
|
||||
$(function(){
|
||||
var content = $("#Content");
|
||||
new GUI.TopBar(Tone);
|
||||
new GUI.Checkbox(content, function(on){
|
||||
if (on){
|
||||
osc.start();
|
||||
} else {
|
||||
osc.stop();
|
||||
}
|
||||
}, "start", "stop");
|
||||
new GUI.Oscillator(content, osc, "oscillator");
|
||||
new GUI.Oscillator(content, vibrato.oscillator, "vibrato osc");
|
||||
var vibrato = new Tone.LFO(6, -25, 25)
|
||||
.connect(osc.detune)
|
||||
.start();
|
||||
</script>
|
||||
<script id="GUI" type="text/javascript">
|
||||
Interface.Rack("Rack", "Oscillator");
|
||||
Interface.Toggle("Rack", function(on){
|
||||
if (on){
|
||||
osc.start();
|
||||
} else {
|
||||
osc.stop();
|
||||
}
|
||||
});
|
||||
Interface.DropDown("Rack", osc, "type", ["sine", "square", "triangle", "sawtooth"], "Oscillator Type");
|
||||
Interface.DropDown("Rack", vibrato, "type", ["sine", "square", "triangle", "sawtooth"], "LFO Type");
|
||||
Interface.Code("Code", "ToneCode");
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
text-align: left;
|
||||
height: 110px;
|
||||
width: 240px;
|
||||
}
|
||||
.Checkbox {
|
||||
width: 100%;
|
||||
}
|
||||
.Oscillator {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
nx.showLabels = true;
|
||||
nx.colorize("accent", "#D76767");
|
||||
nx.colorize("fill", "#fff");
|
||||
// nx.colorize("border", "#000");
|
||||
|
||||
var Interface = {};
|
||||
|
||||
|
|
@ -49,6 +50,16 @@ $(window).resize(function(){
|
|||
}
|
||||
});
|
||||
|
||||
Interface._updateList = [];
|
||||
|
||||
Interface.update = function(){
|
||||
requestAnimationFrame(Interface.update);
|
||||
for (var i = 0; i < Interface._updateList.length; i++){
|
||||
Interface._updateList[i]();
|
||||
}
|
||||
};
|
||||
Interface.update();
|
||||
|
||||
Interface.Rack = function(id, name, collapsible){
|
||||
var element = $("#"+id);
|
||||
element.addClass("Rack");
|
||||
|
|
@ -79,15 +90,32 @@ Interface.Toggle = function(container, callback){
|
|||
});
|
||||
};
|
||||
|
||||
Interface.DropDown = function(container, options, callback){
|
||||
var select = nx.add("select", {
|
||||
parent : container
|
||||
});
|
||||
select.choices = options;
|
||||
select.init();
|
||||
select.on("text", function(val){
|
||||
callback(val);
|
||||
Interface.DropDown = function(container, node, parameter, options, label){
|
||||
var element = $("<div>").appendTo("#"+container)
|
||||
.addClass("DropDown");
|
||||
label = label || parameter;
|
||||
$("<div>").appendTo(element)
|
||||
.text(label)
|
||||
.attr("id", "Label");
|
||||
var selectList = $("<select>").appendTo(element);
|
||||
for (var i = 0; i < options.length; i++){
|
||||
$("<option>").text(options[i]).appendTo(selectList);
|
||||
}
|
||||
//set the initial value
|
||||
selectList.val(node[parameter]);
|
||||
selectList.on("change", function(){
|
||||
node[parameter] = selectList.val();
|
||||
});
|
||||
return {
|
||||
listen : function(){
|
||||
function update(){
|
||||
if (selectList.val() !== node[parameter]){
|
||||
selectList.val(node[parameter]);
|
||||
}
|
||||
}
|
||||
Interface._updateList.push(update);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Interface.ContinuousControl = function(container, type, node, parameter, min, max, exp){
|
||||
|
|
@ -114,17 +142,19 @@ Interface.ContinuousControl = function(container, type, node, parameter, min, ma
|
|||
});
|
||||
slider.draw();
|
||||
slider.listen = function(){
|
||||
requestAnimationFrame(slider.listen);
|
||||
var val = node[parameter];
|
||||
if (isTone){
|
||||
val = node[parameter].value;
|
||||
}
|
||||
val = nx.scale(val, min, max, 0, 1);
|
||||
val = Math.pow(val, 1/exp);
|
||||
if (val !== slider.val.value){
|
||||
slider.val.value = val;
|
||||
slider.draw();
|
||||
function update(){
|
||||
var val = node[parameter];
|
||||
if (isTone){
|
||||
val = node[parameter].value;
|
||||
}
|
||||
val = nx.scale(val, min, max, 0, 1);
|
||||
val = Math.pow(val, 1/exp);
|
||||
if (val !== slider.val.value){
|
||||
slider.val.value = val;
|
||||
slider.draw();
|
||||
}
|
||||
}
|
||||
Interface._updateList.push(update);
|
||||
};
|
||||
return slider;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
|
|
|
|||
|
|
@ -110,6 +110,9 @@ body {
|
|||
*/
|
||||
/**
|
||||
* METER
|
||||
*/
|
||||
/**
|
||||
* DROP DOWN
|
||||
*/ }
|
||||
#Content [nx="slider"] {
|
||||
width: 100%;
|
||||
|
|
@ -120,10 +123,6 @@ body {
|
|||
#Content [nx="toggle"] {
|
||||
width: 100%;
|
||||
height: 40px; }
|
||||
#Content [nx="select"] {
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
height: 30px; }
|
||||
#Content .Rack {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -220,5 +219,34 @@ body {
|
|||
right: 10px;
|
||||
text-align: right;
|
||||
color: #EAEAEA; }
|
||||
#Content .DropDown {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
margin-top: 5px; }
|
||||
#Content .DropDown * {
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 100%; }
|
||||
#Content .DropDown #Label {
|
||||
left: 0px;
|
||||
width: 60%;
|
||||
background-color: white; }
|
||||
#Content .DropDown select {
|
||||
right: 0px;
|
||||
width: 40%;
|
||||
line-height: 17.5px;
|
||||
text-align: center;
|
||||
font-style: monospace;
|
||||
border-radius: 0px;
|
||||
border: 0px;
|
||||
background-color: black;
|
||||
color: white; }
|
||||
|
||||
/*# sourceMappingURL=examples.css.map */
|
||||
|
|
|
|||
Loading…
Reference in a new issue