Skip to content

Commit

Permalink
update sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@g200kg
g200kg committed Sep 11, 2013
1 parent 7718d7a commit 1d20b42
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 26 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Expand Up @@ -129,11 +129,12 @@ Attribute | Options | Default | Description

Attribute | Options | Default | Description
--- | --- | --- | ---
**values** | int array | `[]` | The array of current pressed key numbers. "values" may has more than one elements in multi-touch environment.
**values** | int array | `[]` | The array of current pressed key numbers. "values" may has more than one element in multi-touch environment.
**width** | int | `480` | Keyboard display width in px
**height** | int | `128` | Keyboard display height in px
**min** | int | `0` | Lowest Key number. Each key is numbered incrementally from this number. If the "min" is not `0` and the modulo 12 is not zero, the keyboard is started from corresponding position (not-C). Note that the specified key should be a 'white-key'.
**keys** | int | `25` | Number of keys. `25` means 25 keys keyboard.
**enable** | `0`,`1` | `1` | Enable the pointing device control

---
## Functions
Expand Down
Binary file modified img/sample3.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 46 additions & 18 deletions sample3.html
View file
@@ -1,40 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[Polymer] WebAudio-Controls Live Demo</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.0.20130816/polymer.min.js"></script>
<link rel="import" href="webcomponents/controls.html">
</head>
<body style="background-color:#eee;">
<head>
<meta charset="utf-8">
<title>[Polymer] WebAudio-Controls Live Demo</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.0.20130816/polymer.min.js"></script>
<link rel="import" href="webcomponents/controls.html">
<style>
#base {
color:#027;
position:relative;
background:#888;
background: linear-gradient(top, #444 0%, #aaa 3%,#888 97%,#444 100%);
background: -webkit-linear-gradient(top, #444 0%, #aaa 3%,#888 97%,#444 100%);
background: -moz-linear-gradient(top, #444 0%, #aaa 3%,#888 97%,#444 100%);
background: -ms-linear-gradient(top, #444 0%, #aaa 3%,#888 97%,#444 100%);
width:500px;
height:300px;
margin:30px auto;
padding:0px;
}
</style>
</head>
<body style="background-color:#eee;font-family:sans-serif">
<h1>WebAudio-Controls Live Demo</h1>
<div style="color:#057;font-weight:900;position:relative;background:#888;width:500px;height:300px;margin:30px auto;padding:0px;">
<div id="base">
<webaudio-knob id="knob1" diameter="48" style="position:absolute;left:50px;top:20px"></webaudio-knob>
<webaudio-knob id="knob2" diameter="48" style="position:absolute;left:120px;top:20px"></webaudio-knob>
<webaudio-param link="knob1" style="position:absolute;left:60px;top:75px"></webaudio-param>
<webaudio-param link="knob2" style="position:absolute;left:130px;top:75px"></webaudio-param>
<webaudio-slider id="slider1" width="16" height="80" style="position:absolute;left:380px;top:50px"></webaudio-slider>
<webaudio-slider id="slider2" direction="horz" style="position:absolute;left:240px;top:50px"></webaudio-slider>
<webaudio-switch id="switch1" style="position:absolute;left:220px;top:90px"></webaudio-switch>
<webaudio-switch id="switch2" style="position:absolute;left:260px;top:90px"></webaudio-switch>
<webaudio-keyboard id="key" width="400" height="100" keys="25" style="position:absolute;left:48px;top:160px"></webaudio-keyboard>
<span style="position:absolute;left:60px;top:100px">&lt;webaudio-knob&gt;</span>
<span style="position:absolute;left:60px;top:120px">&lt;webaudio-param&gt;</span>
<webaudio-slider width="16" height="80" style="position:absolute;left:380px;top:50px"></webaudio-slider>
<webaudio-slider direction="horz" style="position:absolute;left:240px;top:50px"></webaudio-slider>
<span style="position:absolute;left:270px;top:20px">&lt;webaudio-slider&gt;</span>
<webaudio-switch style="position:absolute;left:220px;top:90px"></webaudio-switch>
<webaudio-switch style="position:absolute;left:260px;top:90px"></webaudio-switch>
<span style="position:absolute;left:220px;top:120px">&lt;webaudio-switch&gt;</span>
<webaudio-keyboard id="key" width="400" height="100" keys="25" style="position:absolute;left:48px;top:160px"></webaudio-keyboard>
<span style="position:absolute;left:320px;top:265px">&lt;webaudio-keyboard&gt;</span>
</div>
<div id="event" style="padding:10px;background:#336;color:#fff;text-align:center;height:20px"></div>
<div>
<script type="text/javascript">
var knobs = document.getElementsByTagName('webaudio-knob');
for(var i = 0; i < knobs.length; i++)
knobs[i].addEventListener("change",Dump,false);
var sliders = document.getElementsByTagName('webaudio-slider');
for(var i = 0; i < sliders.length; i++)
sliders[i].addEventListener("change",Dump,false);
var switches = document.getElementsByTagName('webaudio-switch');
for(var i = 0; i < switches.length; i++) {
switches[i].addEventListener("change",Dump,false);
}
var key=document.getElementById("key");
key.addEventListener('change',Dump,false);

function Dump(e) {
if(key.values.length==0)
document.title="---";
var str="";
if(e.target.id=="key")
str="key : ["+e.target.values+"]";
else
document.title=key.values;
console.log(key.values);
str=e.target.id+" : "+e.target.value;
console.log(str);
document.getElementById("event").innerHTML=str;
}
</script>
</body>
Expand Down
24 changes: 17 additions & 7 deletions webcomponents/controls.html
View file
Expand Up @@ -867,13 +867,17 @@
bwidth: 0,
wwidth: 0,
press: 0,
enable: 0,
enable: 1,
pointerdown: function(e) {
this.press=1;
this.pointermove(e);
if(this.enable) {
this.press=1;
this.pointermove(e);
}
e.preventDefault();
},
pointermove: function(e) {
if(!this.enable)
return;
var r=e.target.getBoundingClientRect();
var v=[];
if(e.touches)
Expand Down Expand Up @@ -905,20 +909,26 @@
this.redraw();
},
pointerup: function(e) {
this.press = 0;
this.values=[];
this.redraw();
this.sendevent();
if(this.enable) {
this.press = 0;
this.values=[];
this.redraw();
this.sendevent();
}
e.preventDefault();
},
pointerover: function(e) {
if(!this.enable)
return;
if(typeof(e.buttons)!="undefined")
var btn = e.buttons;
else
var btn = e.which;
this.press = btn?1:0;
},
pointerout: function(e) {
if(!this.enable)
return;
this.press = 0;
this.values=[];
this.sendevent();
Expand Down

0 comments on commit 1d20b42

Please sign in to comment.