Repository navigation
Expand file tree
/
Copy pathsample2.html
More file actions
executable file
·174 lines (145 loc) · 10.4 KB
/
Copy pathsample2.html
File metadata and controls
executable file
·174 lines (145 loc) · 10.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[Polymer] WebAudio Controls Test page</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="webaudio-controls.html">
<style>
body {
font-family: sans-serif;
}
code {
color: #ff4;
font-family: sans-serif;
font-size: normal;
}
</style>
<script type="text/javascript">
function Init() {
var knobs = document.getElementsByTagName('webaudio-knob');
for (var i = 0; i < knobs.length; ++i)
knobs[i].addEventListener('change', LogChange);
var sliders = document.getElementsByTagName('webaudio-slider');
for (var i = 0; i < sliders.length; ++i)
sliders[i].addEventListener('change', LogChange);
var switches = document.getElementsByTagName('webaudio-switch');
for (var i = 0; i < switches.length; ++i)
switches[i].addEventListener('change', LogChange);
for (var i = 0; i < switches.length; ++i)
switches[i].addEventListener("click", LogClick);
window.addEventListener('scroll', Scroll);
}
function LogChange(e) {
var str = "change: id=" + e.target.id + " value:" + e.target.value;
var con = document.getElementById("cons");
var conframe = document.getElementById("consframe");
con.innerHTML += (str + "<br/>");
conframe.scrollTop = con.scrollHeight;
console.log(str);
}
function LogClick(e) {
var str = "click:" + e.target.id;
document.getElementById("cons").innerHTML += (str + "<br/>");
console.log(str);
}
function Scroll() {
document.getElementById("consframe").style.top = window.scrollY + "px";
}
function Clear() {
document.getElementById("cons").innerHTML = "--- Events ---<br/>";
}
</script>
</head>
<body style="background-color:#eee;" onload="Init()">
<div id="side" style="position:fixed;right:0;top:0;height:100%">
<div id="consframe" style="width:250px;height:100%;background:#ccc;overflow:scroll;margin:0;padding:0px 10px">
<div id="cons"><br/><br/>--- Events ---<br/></div>
</div>
<button onclick="Clear()" style="position:absolute;left:0;top:0">Clear</button>
</div>
<h1>WebAudio-Controls Test Page</h1>
<div style="background-color:#444;color:#eee;width:640px;margin:30px;padding:20px;overflow:hidden">
<h2>WebAudio-Knobs</h2>
<webaudio-knob id="knob1"></webaudio-knob>
<webaudio-knob id="knob1a" colors="#fc0;#000;#444"></webaudio-knob><br/>
<code><webaudio-knob id="knob1"></webaudio-knob></code><br/>
<code><webaudio-knob id="knob1a" colors="#fc0;#000;#444"></webaudio-knob></code>
<div>Default webaudio-knob. If no knob-image is specified, simple embedded image resource is used. Colors are customizable.</div><br/><br/>
<webaudio-knob id="knob2" src="img/LittlePhatty.png" sprites="100" value="60" min="-100" max="100" step="20" diameter="64"></webaudio-knob><br/>
<code><webaudio-knob id="knob2" src="img/LittlePhatty.png" sprites="100" value="60" min="-100" max="100" step="20" diameter="64"></webaudio-knob></code>
<div>Knob image file is assigned. Value range can be specified by min/max. The initial value is "60". The value is changed in step of "20".</div><br/><br/>
<webaudio-knob id="knob3" src="img/LittlePhatty.png" sprites="100" diameter="32"></webaudio-knob><br/>
<code><webaudio-knob id="knob3" src="img/LittlePhatty.png" sprites="100" diameter="32"></webaudio-knob></code>
<div>The knob image will be resized to specified size (even recommended to prepare required size image for clear display)</div><br/><br/>
<webaudio-knob id="knob4" src="img/hsw5.png" sprites="4" value="2" min="0" max="4" width="128" height="32"></webaudio-knob><br/>
<code><webaudio-knob id="knob4" src="img/hsw5.png" sprites="4" value="2" min="0" max="4" width="128" height="32"></webaudio-knob></code>
<div>non-square image is used with specifying width/height instead of diameter.</div><br/><br/>
<webaudio-knob id="knob5" src="img/LittlePhatty.png" sprites="100" diameter="64" valuetip="0" tooltip="Knob Test"></webaudio-knob>
<webaudio-param link="knob5"></webaudio-param><br/>
<code><webaudio-knob id="knob5" src="img/LittlePhatty.png" sprites="100" diameter="64" valuetip="0" tooltip="Knob Test"></webaudio-knob><br/>
<webaudio-param link="knob5"></webaudio-param>
</code>
<div>webaudio-knob can has tooltip-text and editable parameter display field with webaudio-param</div><br/><br/>
<hr/>
<h2>WebAudio-Sliders</h2>
<webaudio-slider id="slider1"></webaudio-slider>
<webaudio-slider id="slider1a" colors="#850;#230;#fff"></webaudio-slider>
<webaudio-slider id="slider2" direction="horz"></webaudio-slider><br/>
<code><webaudio-slider id="slider1"></webaudio-slider><br/>
<webaudio-slider id="slider1a" colors="#850;#230;#fff"></webaudio-slider><br/>
<webaudio-slider id="slider2" direction="horz"></webaudio-slider></code>
<div>Default webaudio-slider. If no slider-image is specified, simple embedded image resource is used. The slider direction is specified by "direction" attribute.
</div><br/><br/>
<webaudio-slider id="slider3" direction="horz" src="img/hsliderbody.png" knobsrc="img/hsliderknob.png" log="1"></webaudio-slider><br/>
<code><webaudio-slider id="slider3" direction="horz" src="img/hsliderbody.png" knobsrc="img/hsliderknob.png"></webaudi-slider><br/></code>
<div>Specifying the sliderbase and sliderknob images.
</div><br/><br/>
<webaudio-slider id="slider4" direction="horz" src="img/hsliderbody.png" knobsrc="img/hsliderknob.png" min="0" max="1" step="0.1" width="60" height="20" valuetip="0" tooltip="Slider Test"></webaudio-slider>
<webaudio-param link="slider4"></webaudio-param><br/>
<code><webaudio-slider id="slider4" direction="horz" src="img/hsliderbody.png" knobsrc="img/hsliderknob.png" min="0" max="1" step="0.1" width="60" height="20" valuetip="0" tooltip="Slider Test"></webaudio-slider><br/>
<webaudio-param link="slider4"></webaudio-param></code>
<div>Value step is specified, resized, tooltip-text and webaudio-param is added.
</div><br/><br/>
<hr/>
<h2>WebAudio-Switches</h2>
<webaudio-switch id="toggle1"></webaudio-switch>
<webaudio-switch id="toggle1a" colors="#0c0;#008;#fff"></webaudio-switch><br/>
<code><webaudio-switch id="toggle1"></webaudio-switch><br/>
<webaudio-switch id="toggle1a" colors="#0c0;#008;#fff"></webaudio-switch></code>
<div>Default webaudio-switch. If no switch-image is specified, simple embedded image resource is used.</div><br/><br/>
<webaudio-switch id="toggle2" src="img/switch_toggle.png" width="32" height="32"></webaudio-switch>
<webaudio-switch id="toggle3" src="img/switch_toggle.png" width="54" height="54"></webaudio-switch><br/>
<code><webaudio-switch id="toggle2" src="img/switch_toggle.png" width="32" height="32"></webaudio-switch><br/>
<webaudio-switch id="toggle3" src="img/switch_toggle.png" width="54" height="54"></webaudio-switch></code>
<div>Image file is specified. Images are resized to specified size.</div><br/><br/>
<webaudio-switch id="kick1" src="img/switch_toggle.png" type="kick" width="54" height="54"></webaudio-switch><br/>
<code><webaudio-switch id="kick1" src="img/switch_toggle.png" type="kick" width="54" height="54"></webaudio-switch></code>
<div>Kick type switch. In this mode, this switch is on only while pressing.</div><br/><br/>
<webaudio-switch id="radioA" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" value="1" tooltip="Radio-A"></webaudio-switch>
<webaudio-switch id="radioB" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-B"></webaudio-switch>
<webaudio-switch id="radioC" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-C"></webaudio-switch><br/>
<code>
<webaudio-switch id="radioA" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" value="1" tooltip="Radio-A"></webaudio-switch><br/>
<webaudio-switch id="radioB" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-B"></webaudio-switch&bt;<br/>
<webaudio-switch id="radioC" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-C"></webaudio-switch><br/>
</code>
<div>Radio type switch. In this mode, only one switch is activated in the group.</div><br/><br/>
</div>
<div>
<h2>Specification</h2>
<p>Refer the following page for detail specifications</p>
<b><a href="https://github.com/g200kg/webaudio-controls">https://github.com/g200kg/webaudio-controls</a></b>
</div>
<div>
<h2>License</h2>
WebAudio-Controls is based on <br/>
<a href="https://github.com/agektmr/webaudio-knob" target="_blank">WebAudio-Knob</a> by <a href="http://google.com/+agektmr" target="_blank">Eiji Kitamura</a><br/>
<a href="https://github.com/ryoyakawai/webaudio-slider" target="_blank">WebAudio-Slider</a> by <a href="https://plus.google.com/108242669191458983485/posts" target="_blank">Ryoya Kawai</a><br/>
<a href="http://aikelab.net/switch/" target="_blank">WebAudio-Switch</a> by <a href="http://d.hatena.ne.jp/aike/" target="_blank">Keisuke Ai</a><br/> Integrated and enhanced by <a href="http://www.g200kg.com/" target="_blank">g200kg</a><br/><br/> Using <a href="http://polymer-project.org/" target="_blank">Polymer</a> and <a href="http://www.w3.org/TR/components-intro/" target="_blank">WebComponents</a><br/><br/>
<p>Copyright (c) 2013 Eiji Kitamura / Ryoya KAWAI / Keisuke Ai / g200kg (Tatsuya Shinyagaito)<br/> webaudio-controls is licensed under the Apache License, Version 2.0</p>
Knob/Switch images are from <a href="http://www.g200kg.com/en/webknobman/gallery.php" target="_blank">Knob Gallery</a><br/>
<a href="http://www.g200kg.com/en/webknobman/gallery.php?m=p&p=58" target="_blank">switch_toggle.knob</a> by <a href="http://bji.yukihotaru.com/" target="_blank">az</a> Copyright (c) 2011 <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC-BY</a>
</div>
</body>
</html>