-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathusage.html
More file actions
121 lines (106 loc) · 5.22 KB
/
Copy pathusage.html
File metadata and controls
121 lines (106 loc) · 5.22 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
<html>
<head>
<meta charset="utf-8"/>
<!-- use these scripts if you need to support browsers without ES6 support -->
<!-- <script src="build/es5/polyfill.min.js"></script>
<script src="build/es5/tk-audials.min.js"></script> -->
<!-- this script include is ES6 only! -->
<script src="build/tk-audials.min.js"></script>
<link rel="stylesheet" media="all" href="build/tk-audials.min.css">
<style>
body {font-family:Verdana;}
.panel {float:left;background-color:#dddddd;padding:15px;}
.tk-audial {width:60px;height:60px;margin-top:10px;}
.slider {width:510px;margin:15px 0;color:#666666;}
.slider input {width:100%;}
.slider .slider-labels span {float:right;}
p {margin:15px 0;width:510px;color:#666666;}
#gain-notch svg circle.value-background {background-color:blue;}
#style-4 svg circle.value-background {fill:white;}
</style>
</head>
<body>
<div class="slider">
This range input takes up a bit of space:
<div class="slider-labels">0<span>100</span></div>
<input id="slider-example" type="range" min="0" max="100"/>
</div>
<p>
The TkAudial examples below take up much less space and have four types (so far). A few of which can fit in a similar
space to the one above (granted, it is a bit bigger than necessary).
</p>
<p>
A TkAudial can also be very easily styled using the options object or CSS.
</p>
<p>
The range input above uses the <i>setValue</i> method on the first dial below to control it very easily. Likewise, the dial
will control the range input by using the <i>changed</i> event that the dial generates on its container element.
</p>
<div class="panel">
<span>Gain-Notch:</span>
<div id="gain-notch" class="tk-audial"></div>
</div>
<div class="panel">
<span>Balance-Notch:</span>
<div id="balance-notch" class="tk-audial"></div>
</div>
<div class="panel">
<span>Gain-Fill:</span>
<div id="gain-fill" class="tk-audial"></div>
</div>
<div class="panel">
<span>Balance-Fill:</span>
<div id="balance-fill" class="tk-audial"></div>
</div>
<div style="clear:both;height:15px;"></div>
<div class="panel">
<div id="style-1" class="tk-audial"></div>
</div>
<div class="panel">
<div id="style-2" class="tk-audial"></div>
</div>
<div class="panel">
<div id="style-3" class="tk-audial"></div>
</div>
<div class="panel">
<div id="style-4" class="tk-audial"></div>
</div>
<div class="panel">
<div id="style-5" class="tk-audial"></div>
</div>
<script>
var gainNotch = document.querySelector('#gain-notch');
var balanceNotch = document.querySelector('#balance-notch');
var gainFill = document.querySelector('#gain-fill');
var balanceFill = document.querySelector('#balance-fill');
var gainNotchDial = new TkAudial(gainNotch);
var balanceNotchDial = new TkAudial(balanceNotch, {type:'balance',display:'notch',min:-50,max:50,value:12});
var gainFillDial = new TkAudial(gainFill, {type:'gain',display:'fill'});
var balanceFillDial = new TkAudial(balanceFill, {type:'balance',display:'fill',min:-50,max:50,value:12,inputId:'unique-id'});
var style1 = document.querySelector('#style-1');
var style1Dial = new TkAudial(style1, {type:'gain',display:'notch',min:0.8,max:6.3,step:0.1,value:120,sensitivityMultiplier:0.5,borderWidth:0,indicatorWidth:25,indicatorBackgroundColour:'#567b9a',valueBackgroundColour:'#a1abb4',valueColour:'white',inputId:'dial-1-input'});
var style2 = document.querySelector('#style-2');
var style2Dial = new TkAudial(style2, {type:'gain',display:'fill',min:20,max:20000,value:15000,sensitivityMultiplier:100,alwaysMultiply:false,borderWidth:0,indicatorWidth:25,indicatorBackgroundColour:'rgba(0,0,0,0)',indicatorColour:'rgba(255,100,180,0.5)',valueBackgroundColour:'white',valueColour:'rgba(255,100,180,0.5)',valueFontSize:'0.6em',inputId:'dial-2-input'});
var style3 = document.querySelector('#style-3');
var style3Dial = new TkAudial(style3, {type:'balance',display:'notch',min:-50,max:60,step:4.9,value:0,borderWidth:0,indicatorWidth:25,indicatorBackgroundColour:'orange ',indicatorColour:'yellow',valueBackgroundColour:'grey',valueColour:'rgba(255,255,255,0.85)',inputId:'dial-3-input',enableClipboard:true});
var style4 = document.querySelector('#style-4');
var style4Dial = new TkAudial(style4, {type:'balance',display:'fill',min:-50,max:60,step:5,value:-25,borderWidth:20,borderColour:'rgba(120,180,220,0.6)',indicatorWidth:75,indicatorBackgroundColour:'#567b9a',valueColour:'rgba(0,0,0,0)',inputId:'dial-4-input',enableClipboard:true,hoverHTML:'$value Hz'});
var style5 = document.querySelector('#style-5');
var style5Dial = new TkAudial(style5, {type:'gain',display:'fill',min:0,max:200,step:5,value:180,borderWidth:20,borderColour:'#dddddd',borderWidth:0,indicatorWidth:30,indicatorBackgroundColour:'rgba(0,0,0,0)',indicatorColour:'rgba(120,180,220,0.6)',valueBackgroundColour:'#dddddd',valueColour:'rgba(120,180,220,0.6)',inputId:'dial-5-input'})
var rangeInput = document.querySelector('#slider-example');
rangeInput.addEventListener('input', function(e)
{
gainNotchDial.setValue(this.value);
}, true);
gainNotch.addEventListener('changed', function(e)
{
rangeInput.value = e.detail;
});
gainNotchDial.addEventListener('changed', function(e)
{
console.log('TkAudial event triggered with object: ' + JSON.stringify(e));
// do something with e.value
});
</script>
</body>
</html>