Skip to content

Commit

Permalink
modified about 'change' for keyboard.
Browse files Browse the repository at this point in the history
  • Loading branch information
@g200kg
g200kg committed Sep 13, 2013
1 parent 1d20b42 commit 1ce8f82
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 43 deletions.
32 changes: 26 additions & 6 deletions README.md
View file
Expand Up @@ -75,7 +75,7 @@ Attribute | Options | Default | Description
**sensitivity** | float | `1` | Pointing device sensitivity. min-max range correspond to (128 / 'sensitivity') px
**valuetip** | `0`,`1` | `1` | Enable the overlaid value-tip display.
**tooltip** | string | `null` | Tooltip text that will be shown when mouse hover a while
**enable** | `0`,`1` | `1` | Enable the pointing device control.
**enable** | `0`,`1` | `1` | Enable control with the pointing device.

### webaudio-slider

Expand All @@ -97,7 +97,7 @@ Attribute | Options | Default | Description
**sensitivity** | float | `1` | Pointing device sensitivity. min-max range correspond to (128 / 'sensitivity') px
**valuetip** | `0`,`1` | `1` | Enable the overlaid value-tip display.
**tooltip** | string | `null` | Tooltip text that will be shown when mouse hover a while
**enable** | `0`, `1` | `1` | Enable the pointing device control.
**enable** | `0`, `1` | `1` | Enable control with the pointing device.

### webaudio-switch

Expand All @@ -111,7 +111,7 @@ Attribute | Options | Default | Description
**type** | `"toggle"`,`"kick"`,`"radio"` | `"toggle"` | Switch type. `"toggle"` switch has so-called 'checkbox' function. `"radio"` switch is a radio-button and the `"kick"` switch is a general command button
**group** | string | `null` | Group id string used if the 'type' is `"radio"`. Only one switch will be set to `"1"` in same group
**tooltip** | string | `null` | Tooltip text that will be shown when mouse hover a while
**enable** | `0`,`1` | `1` | Enable the pointing device control
**enable** | `0`,`1` | `1` | Enable control with the pointing device.

### webaudio-param

Expand All @@ -134,20 +134,25 @@ Attribute | Options | Default | Description
**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
**colors** | string | `'#222; #eee;#ccc; #333;#000; #e88;#c44; #c33;#800'` | semicolon separated 9 keyboard colors.<br/>'border;<br/>whitekey-grad-from;whitekey-grad-to;<br/>blackkey-grad-from;blackkey-grad-to;<br/>active-whitekey-grad-from;active-whitekey-grad-to;<br/>active-blackkey-grad-from;active-blackkey-grad-to'.<br/> Each key surface can has garadient left to right with 'from' and 'to'.
**enable** | `0`,`1` | `1` | Enable control with the pointing device.

---
## Functions
### setValue(value)
`webaudio-knob` | `webaudio-slider` | `webaudio-switch`
**description**: Each control can be setup and redraw by calling this function from JavaScript.


### setNote(state,note)
`webaudio-keyboard`
**description**: webaudio-keyboard can be setup pressing state with this function from JavaScript. corresponding key specified by the `note` is pressed if the `state` is non-zero otherwise the key is released. This function will NOT fire the 'change' event.

---
## Events
### 'change'
`webaudio-knob` | `webaudio-slider` | `webaudio-switch` | `webaudio-keyboard`
**description**: 'change' event is emitted everytime value changes.
**Note**: The addEventListener() function is recommended for event handler setup instead of 'onchange=' attribute. 'onchange=' attribute seems not work on Safari.
**description**: 'change' event is emitted everytime value changes. In the event handler of `webaudio-knob`,`webaudio-slider` or `webaudio-switch`, current value can be get with referring `event.target.value`.

```
var knobs = document.getElementsByTagName('webaudio-knob');
Expand All @@ -158,6 +163,21 @@ for (var i = 0; i < knobs.length; i++) {
});
}
```

For the `webaudio-keyboard`, each 'change' event has the property '.note' that contain a array `[key-state, key-number]`. For example `event.note = [1, 60]` if the key#60 is on, or `event.note = [0,60]` if the key#60 is off.

```
var keyboard = document.getElementsById('keyboard');
keyboard.addEventListener('change', function(e) {
if(e.note[0])
console.log("Note-On:"+e.note[1]);
else
console.log("Note-Off:"+e.note[1]);
});
```

**Note**: The addEventListener() function is recommended for event handler setup instead of 'onchange=' attribute. 'onchange=' attribute seems not work on Safari.

### 'click'
`webaudio-switch (kick)`
**description**: 'click' event is emitted if the 'kick' type webaudio-switch has clicked.
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.
36 changes: 26 additions & 10 deletions sample3.html
View file
Expand Up @@ -16,12 +16,12 @@
background: -ms-linear-gradient(top, #444 0%, #aaa 3%,#888 97%,#444 100%);
width:500px;
height:300px;
margin:30px auto;
margin:30px 40px;
padding:0px;
}
</style>
</head>
<body style="background-color:#eee;font-family:sans-serif">
<body style="background-color:#eee;font-family:sans-serif;position:relative">
<h1>WebAudio-Controls Live Demo</h1>
<div id="base">
<webaudio-knob id="knob1" diameter="48" style="position:absolute;left:50px;top:20px"></webaudio-knob>
Expand All @@ -32,16 +32,19 @@ <h1>WebAudio-Controls Live Demo</h1>
<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>
<webaudio-keyboard id="key" width="400" height="100" min="48" keys="25" style="position:absolute;left:48px;top:160px"></webaudio-keyboard>
<webaudio-keyboard id="key2" width="160" height="20" min="36" keys="61" enable="0" colors="#000;#ccf;;#000;;#0fc;;#0fc" style="position:absolute;left:48px;top:270px"></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>
<span style="position:absolute;left:270px;top:20px">&lt;webaudio-slider&gt;</span>
<span style="position:absolute;left:220px;top:120px">&lt;webaudio-switch&gt;</span>
<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>
<div id="events" style="position:absolute;right:0;top:0;background:rgba(128,128,255,0.5);padding:10px;color:#000;text-align:left;width:300px;height:300px;overflow:scroll"></div>

<script type="text/javascript">
var message="";
var log=[];
var knobs = document.getElementsByTagName('webaudio-knob');
for(var i = 0; i < knobs.length; i++)
knobs[i].addEventListener("change",Dump,false);
Expand All @@ -54,15 +57,28 @@ <h1>WebAudio-Controls Live Demo</h1>
}
var key=document.getElementById("key");
key.addEventListener('change',Dump,false);

key.addEventListener('note',Dump,false);
var key2=document.getElementById("key2");

function Dump(e) {
var str="";
if(e.target.id=="key")
str="key : ["+e.target.values+"]";
if(e.target.id=="key") {
key2.setNote(e.note[0],e.note[1]);
str=e.type + " : " + e.target.id + " : [" + e.note + "] ";
}
else
str=e.target.id+" : "+e.target.value;
str=e.type + " : " + e.target.id + " : " + e.target.value + " ";
console.log(str);
document.getElementById("event").innerHTML=str;
log.unshift(str);
log.length=20;
str="";
for(var i=19;i>=0;--i) {
if(log[i])
str+=log[i]+"<br/>";
}
var evview=document.getElementById("events");
evview.innerHTML=str;
evview.scrollTop=evview.scrollHeight;
}
</script>
</body>
Expand Down
81 changes: 54 additions & 27 deletions webcomponents/controls.html
View file
Expand Up @@ -804,7 +804,7 @@
</script>
</polymer-element>

<polymer-element name="webaudio-keyboard" attributes="width height min keys enable">
<polymer-element name="webaudio-keyboard" attributes="width height min keys colors enable">
<template>
<div id="wac-body" touch-action="none"></div>
<style>
Expand Down Expand Up @@ -853,10 +853,12 @@
this.addEventListener('touchcancel',this.pointerup,false);
this.addEventListener('mouseover',this.pointerover,false);
this.addEventListener('mouseout',this.pointerout,false);
this.coltab=this.colors.split(";");
this.redraw();
},
values: [],
valuesold: [],
valuesold: [],
dispvalues: [],
min: 0,
keys: 25,
max: 72,
Expand All @@ -867,6 +869,8 @@
bwidth: 0,
wwidth: 0,
press: 0,
keyenable: 1,
colors: '#222;#eee;#ccc;#333;#000;#e88;#c44;#c33;#800',
enable: 1,
pointerdown: function(e) {
if(this.enable) {
Expand Down Expand Up @@ -912,8 +916,8 @@
if(this.enable) {
this.press = 0;
this.values=[];
this.redraw();
this.sendevent();
this.redraw();
}
e.preventDefault();
},
Expand All @@ -935,27 +939,36 @@
this.redraw();
},
sendevent: function() {
var f=0;
if(this.values.length!=this.valuesold.length)
f=1;
else {
for(var i=0;i<this.values.length;++i) {
if(this.values[i]!=this.valuesold[i]) {
f=1;
break;
}
}
var notes=[];
for(var i=0,j=this.valuesold.length;i<j;++i) {
if(this.values.indexOf(this.valuesold[i])<0)
notes.push([0,this.valuesold[i]]);
}
if(f) {
for(var i=0,j=this.values.length;i<j;++i) {
if(this.valuesold.indexOf(this.values[i])<0)
notes.push([1,this.values[i]]);
}
if(notes.length) {
this.valuesold=this.values;
this.fire('change');
for(var i=0;i<notes.length;++i) {
this.setdispvalues(notes[i][0],notes[i][1]);
var ev=document.createEvent('HTMLEvents');
ev.initEvent('change',true,true);
ev.note=notes[i];
this.dispatchEvent(ev);
}
}
},
redraw: function() {
function rrect(ctx, x, y, w, h, r, c1, c2) {
var g=ctx.createLinearGradient(x,y,x+w,y);
g.addColorStop(0,c1);
g.addColorStop(1,c2);
if(c2) {
var g=ctx.createLinearGradient(x,y,x+w,y);
g.addColorStop(0,c1);
g.addColorStop(1,c2);
ctx.fillStyle=g;
}
else
ctx.fillStyle=c1;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x+w, y);
Expand All @@ -964,10 +977,9 @@
ctx.lineTo(x+r, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-r);
ctx.lineTo(x, y);
ctx.fillStyle=g;
ctx.fill();
}
this.ctx.fillStyle = "#222";
this.ctx.fillStyle = this.coltab[0];
this.ctx.fillRect(0,0,this.width,this.height);
var x0=7*((this.min/12)|0)+this.kp[this.min%12];
var x1=7*((this.max/12)|0)+this.kp[this.max%12];
Expand All @@ -979,22 +991,37 @@
for(var i=this.min,j=0;i<=this.max;++i) {
if(this.kf[i%12]==0) {
var x=this.wwidth*(j++);
if(this.values.indexOf(i)>=0)
rrect(this.ctx,x,1,this.wwidth-1,this.height-2,r,"#e88","#c44");
if(this.dispvalues.indexOf(i)>=0)
rrect(this.ctx,x,1,this.wwidth-1,this.height-2,r,this.coltab[5],this.coltab[6]);
else
rrect(this.ctx,x,1,this.wwidth-1,this.height-2,r,"#eee","#ccc");
rrect(this.ctx,x,1,this.wwidth-1,this.height-2,r,this.coltab[1],this.coltab[2]);
}
}
r=Math.min(8,this.bwidth*0.2);
r=Math.min(8,this.bwidth*0.3);
for(var i=this.min;i<this.max;++i) {
if(this.kf[i%12]) {
var x=this.wwidth*this.ko[this.min%12]+this.bwidth*(i-this.min);
if(this.values.indexOf(i)>=0)
rrect(this.ctx,x-1,1,this.bwidth+2,h2,r,"#c33","#800");
if(this.dispvalues.indexOf(i)>=0)
rrect(this.ctx,x,1,this.bwidth,h2,r,this.coltab[7],this.coltab[8]);
else
rrect(this.ctx,x-1,1,this.bwidth+2,h2,r,"#333","#000");
rrect(this.ctx,x,1,this.bwidth,h2,r,this.coltab[3],this.coltab[4]);
this.ctx.strokeStyle=this.coltab[0];
this.ctx.stroke();
}
}
},
setdispvalues: function(state,note) {
var n=this.dispvalues.indexOf(note);
if(state) {
if(n<0) this.dispvalues.push(note);
}
else {
if(n>=0) this.dispvalues.splice(n,1);
}
},
setNote: function(state,note) {
this.setdispvalues(state,note);
this.redraw();
}
};
})());
Expand Down

0 comments on commit 1ce8f82

Please sign in to comment.