-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
612 lines (611 loc) · 35.4 KB
/
index.html
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="input-knobs.js"></script>
<script>window.inputKnobsOptions={}</script>
<style>
body{
font-family: 'Open Sans', sans-serif;
background:#448;
margin:0;
padding:0;
}
#contents {
background:#c0c8f4;
margin:0 auto;
padding:0;
width:85vw;
}
#header{
background: #56d;
color:#fff;
padding:0;
margin:0px 0 10px 0px;
width:100%;
height:80px;
box-shadow:0px 2px 2px rgba(0,0,0,0.5);
}
#header img{
margin:0px 20px 0px 0px;
padding:0;
height:80px;
vertical-align: top;
}
#title{
display:inline-block;
}
#title h1{
font-size:22px;
line-height: 20px;
}
#main{
padding:0px 40px;
margin:20px auto;
}
h2,h3,h4{
color:#228;
}
table{
border:1px solid #88d;
width:80%;
}
td,th{
border:1px solid #88d;
padding:8px;
}
hr{
height:4px;
background:#88d;
border:none;
}
pre{
background:#ddf;
font-size:13px;
padding:8px;
border:1px solid #88a;
overflow:scroll;
}
textarea{
resize:none;
}
</style>
</head>
<body>
<div id="contents">
<div id="header">
<a href="https://www.g200kg.com/"><img src="./images/g200kg160x80.png"/></a>
<div id="title">
<h1>input-knobs.js
<span style="font-size:12px"><br/>Simple Javascript Library for Knobs</span>
</h1>
</div>
</div>
<div style="margin-left:10px">
<button onclick="SetLang('en')" style="width:80px">English</button> | <button onclick="SetLang('ja')" style="width:80px">Japanese</button>
</div>
<div id="main">
<div style="margin-left:20px">
<div style="float:left">
<input type="range" class="input-slider" data-height="110" data-width="12"/>
<input type="range" class="input-slider" data-height="110" data-width="12"/>
<input type="range" class="input-slider" data-height="110" data-width="12"/>
</div>
<input type="range" class="input-knob"/> <input type="range" class="input-knob"/> <input type="range" class="input-knob"/>
<input type="range" class="input-knob" data-src="./images/knob70.png" data-sprites="100"/> <input type="range" class="input-knob" data-src="./images/knob70.png" data-sprites="100"/> <input type="range" class="input-knob" data-src="./images/knob70.png" data-sprites="100"/>
<input type="checkbox" class="input-switch"/> <input type="checkbox" class="input-switch"/> <input type="checkbox" class="input-switch"/>
<input type="radio" name="groupA" class="input-switch" data-src="./images/switch_offon.png" data-diameter="50"/> <input type="radio" name="groupA" class="input-switch" data-src="./images/switch_offon.png" data-diameter="50"/> <input type="radio" name="groupA" class="input-switch" data-src="./images/switch_offon.png" data-diameter="50"/><br/>
<input type="range" class="input-slider" data-width="200" data-height="40" data-sprites="50" data-src="./images/slider3.png"/>
<input type="range" class="input-slider" data-bgcolor="#eee"/>
<input type="range" class="input-slider" data-bgcolor="#eee" data-fgcolor="#0f0"/>
<input type="range" class="input-slider" data-bgcolor="#eee" data-fgcolor="#00f"/>
</div>
<br clear="both"/>
<h4>'input-knob.js' is here : <a href="input-knobs.js">input-knobs.js</a><br/>
GitHub repository : <a href="https://github.com/g200kg/input-knobs">https://github.com/g200kg/input-knobs</a></h4>
<h2>Features</h2>
<p lang="en"><b>input-knobs.js</b> is a Javascript library for Rotating Knobs / Horizontal & Vertical Sliders / Toggle Switches / Radio Buttons style GUI widgets.
This is a sub-set of '<a href="https://github.com/g200kg/webaudio-controls">webaudio-controls</a>''
and simply replace the appearance of <input/> tags to rotating knobs, sliders or switches.<br/><br/>
Since 'webaudio-controls' uses WebComponents, Firefox / Edge etc requires polyfill,
but due to the rewriting of the basic structure of DOM, problems may occur with API which take DOM element directly as argument.
<b>input-knobs.js</b> is not full compatible to 'webaudio-controls' but this problem can be avoided.
</p>
<p lang="ja"><b>input-knobs.js</b> は回転するノブ、水平および垂直のスライダー、トグルスイッチ、ラジオボタン型の GUI ウィジェットの Javascript ライブラリです。
これは '<a href="https://github.com/g200kg/webaudio-controls">webaudio-controls</a>' のサブセットで、単純に <input/> タグの外見を
回転するノブやスライダー、スイッチに置き換えます。<br/><br/>
'webaudio-controls' は WebComponents を使用するため Firefox / Edge 等ではポリフィルが必要になりますが、
DOM の基本構造を書き換える影響で DOM エレメントを直接引数に取る API 等で不具合が生じる場合があります。
<b>input-knobs.js</b> は 'webaudio-controls' の機能の全ては揃っていませんがこの問題を避ける事ができます。
</p>
<br/>
<table>
<tr><th style="width:60%">Tag</th><th>Change to </th></tr>
<tr><td><input type="range" class="input-knob"/></td><td>Rotating Knob</td></tr>
<tr><td><input type="range" class="input-slider"/></td><td>Horizontal Slider</td></tr>
<tr><td><input type="range" class="input-slider"/></td><td>Vertical Slider</td></tr>
<tr><td><input type="checkbox" class="input-switch"/></td><td>Toggle Switch</td></tr>
<tr><td><input type="radio" class="input-switch"/></td><td>Radio Button</td></tr>
</table>
<ul lang="en">
<li>Easy to use by place and load just one file `input-knobs.js`.</li>
<li>Compatible with Chrome / Firefox / Safari / Edge.</li>
<li>Lightweighted. No other libraries are required.</li>
<li>'input' and 'change' events are fired same as normal input tags.</li>
<li>Work even under 'file:///' protocol.</li>
<li>Touch devices support.</li>
</ul>
<ul lang="ja">
<li>単一のファイル `input-knobs.js` を配置して読み込むだけで簡単に使用できます</li>
<li>Chrome / Firefox / Safari / Edge で動作します</li>
<li>軽量です。他のライブラリを必要としません</li>
<li>通常の input タグと同様に 'input' および 'change' イベントを発火します</li>
<li>'file:///' プロトコル上でも使用可能です</li>
<li>タッチデバイスでの動作も可能です</li>
</ul>
<br/>
<h2>Usage</h2>
<ul lang="en">
<li> In the case of bower, use the command `bower install --save g200kg/input-knobs` from the console.
Or just download input-knobs.js </li>
<li>Place `input-knobs.js` to appropriate folder</li>
<li>Load `input-knobs.js` :
<code>
<script src="input-knobs.js"></script>
</code>
</li>
<li>Add class 'input-knob', 'input-slider', 'input-switch' to input tag in your HTML.</li>
<li>Some optional attributes (data-*) are also available for customize</li>
<li>Event handling, get / set current value are similar to ordinary input tags.
However, if you change the size or color of an element after generated, explicit element.refresh() function call is needed for update display.</li>
</ul>
<ul lang="ja">
<li>bower の場合はコンソールからコマンド `bower install --save g200kg/input-knobs` を使用してください。
あるいは単に `input-knobs.js` をダウンロードしてください</li>
<li>`input-knobs.js` を適切なフォルダに配置してください</li>
<li>`input-knobs.js` をロードします :
<code>
<script src="input-knobs.js"></script>
</code>
</li>
<li>HTML の 'input' タグに適宜クラス 'input-knob'、'input-slider'、'input-switch' を追加します</li>
<li>更に幾つかの属性 (data-*) を追加してカスタマイズする事もできます</li>
<li>イベントのハンドリングや現在の値の取得、設定等は通常の input タグと同様です。
ただしエレメントのサイズや色を生成後に変更する場合は element.refresh() 関数を明示的に呼び出して表示を更新する必要があります</li>
</ul>
<br/>
<h2>Operation</h2>
<p lang="en">There are some tips for knobs and sliders operation :</p>
<p lang="ja">ノブおよびスライダーの操作方法に幾つかの Tips があります :</p>
<table lang="en">
<tr><th>Operation</th><th>Description</th></tr>
<tr><th>Mouse dragging</th><td>Upward / Right for increase value,<br/> Downward / Left for decrease value</td></tr>
<tr><th>ShiftKey + dragging</th><td>Fine adjustment, 1/5 sensitivity to mouse movement</td></tr>
<tr><th>Mouse Wheel</th><td>Upward : increase value <br/> Downward : descrease value</td></tr>
<tr><th>ShiftKey + Mouse Wheel</th><td>Fine adjustment, 1/5 sensitivity to wheel movement</td></tr>
<tr><th>Keyboard<br/>(after focused)</th><td>Up / Right arrow : increment value<br/>Down / Left arrow : decrement value</td></tr>
</table>
<table lang="ja">
<tr><th>操作</th><th>説明</th></tr>
<tr><th>マウスドラッグ</th><td>上または右方向で値を増加<br/>下または左方向で値を減少</td></tr>
<tr><th>Shiftキー + マウスドラッグ</th><td>微調整。マウスの移動に対する感度が 1/5 になります</td></tr>
<tr><th>マウスホイール</th><td>上方向 : 値を増加 <br/>下方向 : 値を減少</td></tr>
<tr><th>Shiftキー + マウスホイール</th><td>微調整。ホイールの動きに対する感度が 1/5 になります</td></tr>
<tr><th>キーボード<br/>(フォーカスを当てた後)</th><td>カーソル上または右 : 値を1ステップ増加<br/>カーソル下または左 : 値を1ステップ減少</td></tr>
</table>
<br/>
<h2>Attributes</h2>
<table lang="en" style="width:80vw;text-align:left">
<tr><th style="width:25%">Attribute</th><th>Description</th></tr>
<tr><th>data-diameter = "nnn"</th>
<td>Set the width and height of the knobs or switches in 'px'.
This is equivarent to 'data-width="nnn" data-height="nnn"'. In default, 64 for knobs and 32 for switches.
</td></tr>
<tr><th>data-width = "nnn"<br/>data-height = "nnn"</th>
<td>Set the width and height of the knobs, sliders or switches individually in 'px'.<br/>
In default, 64 for knobs, 128 for sliders and 32 for switches.<br/>
If the size for slider is vertically long, the slider will be a vertical slider.
</td></tr>
<tr><th>data-src = "Image URL"</th>
<td>Use external image for the knobs/switches.<br/><br/>
For Knobs, the image should be single knob-image that pointing upward (12 O'clock),
or a vertically stitched knob-images that represent rotation of the knob frame by frame.
<br/><br/>
For Sliders, the image should be a vertically stitched slider-images that represent thumb sliding from min value to max value frame by frame.
<br/><br/>
For Switches, this image should be a vertically stitched Off state and On state image.
<br/><br/>
If no image is supplied, input-knobs uses knob/slider/switch images embedded inside (black body and red indicator)
</td></tr>
<tr><th>data-sprites = "nnn"</th>
<td>For Knob / Sliders only. If you use frame stitched knob/slider-image,
this attribute should be the <b>number of frames - 1</b>.
<br/><br/>
The knobs that specified 'data-src' but not specified this attribute, it will use image rotation instead of frame switching procedure.
<br/><br/>
The sliders that specified 'data-src' but not specified this attribute, the image is used as slider thumb part and the background is filled by 'data-bgcolor' .
</td></tr>
<tr><th>data-fgcolor = "color"</th>
<td>Change Knob / Slider / Switch 's pointer color when no external image (data-src) is used. Default is red "#f00".
</td></tr>
<tr><th>data-bgcolor = "color"</th>
<td>Change Knob / Slider / Switch 's background color when no external image (data-src) is used.
Default is black "#000".
</td></tr>
</table>
<table lang="ja" style="width:80vw;text-align:left">
<tr><th style="width:25%">属性</th><th>説明</th></tr>
<tr><th>data-diameter = "nnn"</th>
<td>ノブ、スイッチのサイズを 'px' で指定します。これは'data-width="nnn" data-height="nnn"' をまとめて指定する事と等価です。デフォルトではノブは 64、スイッチは 24 になっています。</td></tr>
<tr><th>data-width = "nnn"<br/>data-height = "nnn"</th>
<td>ノブ、スライダー、スイッチの幅および高さを 'px' で指定します。デフォルトではノブは幅、高さ共に 64、スイッチは幅、高さ共に 24 です。<br/><br/>
またスライダーのデフォルト値は幅 128、高さ 20 です。スライダーで指定された形状が縦長の場合、自動的に垂直スライダーとなります。
</td></tr>
<tr><th>data-src = "Image URL"</th>
<td>ノブ、スライダー、スイッチに外部の画像を使用します。<br/><br/>
ノブの場合、この画像は真上(12時の方向)を指した単一の画像、または最小値から最大値までの回転をあらわすコマ毎の画像を縦方向に繋げた画像です。
<br/><br/>
また、スライダーではツマミ部分の1枚の画像または、最小値から最大値までのスライドをあらわすコマ毎のスライダー全体画像を縦方向に繋げた画像を指定します。
<br/><br/>
スイッチの場合、この画像はオフ状態とオン状態の画像を縦方向に繋げた画像でなくてはなりません。
<br/><br/>
画像が指定されない場合は、input-knobs は内部に保持しているノブ/スライダー/スイッチの画像(黒い本体に赤いインジケータ)を使用します。</td></tr>
<tr><th>data-sprites = "nn"</th>
<td>ノブおよびスライダーの場合のみ使用します。
ノブ/スライダーの画像として複数のフレームを繋いだ画像を使用する場合、この属性でフレームの数を指定しなくてはなりません。
指定する数 "nn" は <b>フレームの数 - 1</b> です。
<br/><br/>
data-src を指定したノブでこれを指定しない場合は、1枚の画像を回転させる動作となります。<br/><br/>
data-src を指定したスライダーでこれを指定しない場合、画像はスライダーのツマミ部分だけを表す画像として使用され、背景は黒または 'data-bgcolor' で塗りつぶされます。
</td></tr>
<tr><th>data-fgcolor = "color"</th>
<td>外部画像(data-src)を使用しない場合のポインター部分の色指定です。デフォルトは赤 #f00 になっています。
</td></tr>
<tr><th>data-bgcolor = "color"</th>
<td>外部画像(data-src)を使用しない場合、およびスライダーで 'data-src' をツマミ部分だけに使用する場合の背景の色指定です。デフォルトは黒 #000 になっています。
</td></tr>
</table>
<br/>
<h2>inputKnobsOptions</h2>
<p lang="ja">
グローバルなオブジェクト window.inputKnobsOptions を定義する事により、個別のタグで 'data-*'
属性を設定しない場合のデフォルト値を設定しておく事ができます。
例えば次の行をHTMLファイル内に記述しておく事で、ポインター色、背景色、ノブの直径のデフォルト値を変更できます。
</p>
<p lang="en">
By defining the global object `window.inputKnobsOptions`,
the default values of each attribute are set. These values are used when no 'data-*' attributes are specified in each tag.
For example, following line in the HTML file will set the pointer color, the background color, and the knob diameter.</p>
<pre>
<script>window.inputKnobsOptions={fgcolor:"#00ff00",bgcolor:"#000080",knobDiameter:"48"}</script>
</pre>
<p lang="ja">次の表の項目が inputKnobsOptions で設定できます。</p>
<p lang="en">The items in the following table can be set with inputKnobsOptions.</p>
<table lang="ja">
<tr><th>Key名</th><th>説明</th></tr>
<tr><th>knobDiameter</th><td>ノブの直径</td></tr>
<tr><th>knobWidth</th><td>ノブの幅、これは knobDiameter よりも優先します</td></tr>
<tr><th>knobHeight</th><td>ノブの高さ、これは knobDiameter よりも優先します</td></tr>
<tr><th>sliderWidth</th><td>スライダーの幅</td></tr>
<tr><th>sliderHeight</th><td>スライダーの高さ</td></tr>
<tr><th>switchDiameter</th><td>スイッチの直径</td></tr>
<tr><th>switchWidth</th><td>スイッチの幅、これは switchDiameter よりも優先します</td></tr>
<tr><th>switchHeight</th><td>スイッチの高さ、これは switchDiameter よりも優先します</td></tr>
<tr><th>fgcolor</th><td>インジケータ部の色</td></tr>
<tr><th>bgcolor</th><td>背景の色</td></tr>
</table>
<table lang="en">
<tr><th>Key</th><th>Description</th></tr>
<tr><th>knobDiameter</th><td>Diameter of knobs</td></tr>
<tr><th>knobWidth</th><td>Width of knobs that takes prioriry over knobDiameter</td></tr>
<tr><th>knobHeight</th><td>Height of knobs height that takes priority over knobDiameter</td></tr>
<tr><th>sliderWidth</th><td>Width of sliders</td></tr>
<tr><th>sliderHeight</th><td>Height of sliders</td></tr>
<tr><th>switchDiameter</th><td>Diameter of switches</td></tr>
<tr><th>switchWidth</th><td>Width of switches that takes priority over switchDiameter</td></tr>
<tr><th>switchHeight</th><td>height of switches that takes priority over switchDiameter</td></tr>
<tr><th>fgcolor</th><td>Indicator color</td></tr>
<tr><th>bgcolor</th><td>Background color</td></tr>
</table>
<br/>
<hr/><br/>
<h2>Functions</h2>
<h3>element.refresh()</h3>
<p lang="ja">input-knobs を適用した DOM エレメントに対し、生成後にサイズや色を変更した場合はこの関数を読んで表示を更新する必要があります。</p>
<p lang="en">If you change the size or color after DOM element with input-knobs is generated, this function call is needed for update the display.</p>
<pre><code>
let elem=document.getElementById("knob1"); // get existing input-knob element
elem.setAttribute("data-diameter","40"); // set the diameter to "40"
elem.refresh(); // update display
</code></pre>
<br/>
<hr/><br/>
<h2>Knob Samples</h2>
<input type="range"/><br/>
<p lang="en">This is a usual <input type="range"/>.
class 'input-knob' makes change this to rotating knob.</p>
<p lang="ja">これが通常の <input type="range"/> です。
'input-knob' クラスはこれを回転するノブに置き換えます。</p>
<hr/>
<h4>Simplest</h4>
<p lang="en">Just add the class "input-knob" to <input type="range"> tag.
This behave same as normal <input type="range"> tag except for appearance and mouse operation.
</p>
<p lang="ja">単に "input-knob" クラスを <input type="range"> タグに追加します。
これは見た目とマウス操作方法以外は通常の <input type="range"> タグと同様の動作をします。
</p>
<code><pre><input type="range" class="input-knob"/></pre></code>
<input type="range" class="input-knob"/>
<hr/>
<h4>Diameter Variation</h4>
<p lang="en">You can customize the knob size by attribute 'data-diameter'.</p>
<p lang="ja">ノブのサイズを 'data-diameter' 属性でカスタマイズする事ができます。</p>
<code><pre>
<input type="range" class="input-knob" data-diameter="120"/>
<input type="range" class="input-knob" data-diameter="60"/>
<input type="range" class="input-knob" data-diameter="32"/>
</pre></code>
<input type="range" class="input-knob" data-diameter="120"/>
<input type="range" class="input-knob" data-diameter="60"/>
<input type="range" class="input-knob" data-diameter="32"/>
<hr/>
<h4>Color Variation</h4>
<p lang="en">You can customize the knob color by attribute 'data-fgcolor' and 'data-bgcolor'.</p>
<p lang="ja">ノブの色を 'data-fgcolor' および 'data-bgcolor' 属性でカスタマイズする事ができます。</p>
<code><pre>
<input type="range" class="input-knob" data-fgcolor="#00ff00"/>
<input type="range" class="input-knob" data-bgcolor="#406080"/>
<input type="range" class="input-knob" data-bgcolor="#2040c0" data-fgcolor="#ffc080"/>
</pre></code>
<input type="range" class="input-knob" data-fgcolor="#00ff00"/>
<input type="range" class="input-knob" data-bgcolor="#406080"/>
<input type="range" class="input-knob" data-bgcolor="#2040c0" data-fgcolor="#ffc080"/>
<hr/>
<h4>With External Knob Image</h4>
<img src="./images/knobman96.png" width="60" style="float:left;border:2px solid #66d;margin-right:20px"/>
<p lang="en">The knob image can be specified with 'data-src' attribute.<br/>
This image is a simple single knob-image that pointing upward.<br/>
Image is automatically resized to 'data-diameter' size.
</p>
<p lang="ja">'data-src' 属性でノブの画像を指定する事ができます。<br/>
この画像は単に真上を向いた1枚のノブ画像です。<br/>
画像は自動的に 'data-diameter' の大きさにリサイズされます
</p>
<br clear="both"/>
<code><pre>
<input type="range" class="input-knob" data-diameter="96" data-src="./images/knobman96.png"/>
</pre></code>
<input type="range" class="input-knob" data-diameter="96" data-src="./images/knobman96.png"/>
<hr/>
<h4>With Multi Frame External Image</h4>
<div style="margin-right:20px;float:left;height:200px;width:120px;overflow-y:scroll;border:1px solid #88d"><img src="./images/knob70.png" style="border:2px solid #66d;margin:3px;"/></div>
<p lang="en">The image specified with 'data-src' attribute can be a vertically stitched multi-frame image that represent knob rotation.
In this case, 'data-sprites' attribute should be the number of frames - 1.<br/><br/>
JKnobMan / WebKnobMan may be a help for making these stitched images,
</p>
<p lang="ja">'data-src' 属性で指定する画像として、ノブの回転をあらわす複数のフレームを繋いだ画像を使用できます。
この場合、'data-sprites' 属性でフレームの数を指定します。<br/><br/>
このフレームを接続した画像を作成するには JKnobMan / WebKnobMan が役立つかも知れません。
</p>
<ul lang="en">
<li><a href="http://www.g200kg.com/en/software/knobman.html">JKnobMan</a> -- Java based Knob image creation tool.</li>
<li><a href="http://www.g200kg.com/en/webknobman/">WebKnobMan</a> -- WebApp version of the JknobMan</li>
<li><a href="http://www.g200kg.com/en/webknobman/gallery.php">KnobGallery</a> -- knob data sharing space</li>
</ul>
<ul lang="ja">
<li><a href="http://www.g200kg.com/en/software/knobman.html">JKnobMan</a> -- Java 版ノブ画像作成ツール</li>
<li><a href="http://www.g200kg.com/en/webknobman/">WebKnobMan</a> -- JKnobMan の WebApp 版</li>
<li><a href="http://www.g200kg.com/en/webknobman/gallery.php">KnobGallery</a> -- ノブデータのシェアリングスペース</li>
</ul>
<br clear="both"/>
<code><pre>
<input type="range" class="input-knob" data-diameter="120" data-src="./images/knob70.png" data-sprites="100"/>
<input type="range" class="input-knob" data-diameter="60" data-src="./images/knob70.png" data-sprites="100"/>
<input type="range" class="input-knob" data-diameter="32" data-src="./images/knob70.png" data-sprites="100"/>
</pre></code>
<input type="range" class="input-knob" data-diameter="120" data-src="./images/knob70.png" data-sprites="100"/>
<input type="range" class="input-knob" data-diameter="60" data-src="./images/knob70.png" data-sprites="100"/>
<input type="range" class="input-knob" data-diameter="32" data-src="./images/knob70.png" data-sprites="100"/>
<hr/>
<h4>Events Handling</h4>
<p lang="en">'input' events are fired while dragging, 'change' event is fired when mouseup.<br/>
Usual attributes like 'min', 'max', 'step' are also effective.
</p>
<p lang="ja">ドラッグ中は 'input' イベントが発火し、mouseup の時に 'change' イベントが発火します。<br/>
'min'、'max'、'step' 等の通常の属性も有効です。
</p>
<code><pre><input type="range" class="input-knob" min="-10" max="10" step="0.1"
oninput="inputEventHandler(this)" onchange="changeEventHandler(this)"/></pre></code>
<textarea id="log1" cols="50" rows="10"></textarea>
<input type="range" class="input-knob" min="-10" max="10" step="0.1" oninput="addText(log1,'\'input\' this.value='+this.value+'\n')" onchange="addText(log1,'\'change\' this.value='+this.value+'\n')"/>
<hr/>
<h2>Slider Samples</h2>
<h4>Simplest</h4>
<p lang="en">Just add the class 'input-slider', it is a width 128px, height 20px horizontal slider.</p>
<p lang="ja">単にクラス 'input-slider' を追加した場合、width は 128px、height は 20px の水平スライダーになります。</p>
<code><pre>
<input type="range" class="input-slider"/>
</pre></code>
<input type="range" class="input-slider"/>
<hr/>
<h4>Size Variation</h4>
<p lang="en">You can customize the slider size by attribute 'data-width' and 'data-height'.
At this time, specifying a vertically long shape will automatically become a vertical slider.</p>
<p lang="ja">スライダーのサイズを 'data-width' および 'dat-height' 属性でカスタマイズする事ができます。
この時、縦長の形状を指定すると自動的に縦スライダーになります。</p>
<code><pre>
<input type="range" class="input-slider" data-width="300" data-height="40"/>
<input type="range" class="input-slider" data-width="150"/>
<input type="range" class="input-slider" data-width="100" data-height="16"/>
<input type="range" class="input-slider" data-width="40"/>
<input type="range" class="input-slider" data-height="150"/>
<input type="range" class="input-slider" data-width="16" data-height="100"/>
</pre></code>
<input type="range" class="input-slider" data-width="300" data-height="40"/><br/>
<input type="range" class="input-slider" data-width="150"/><br/>
<input type="range" class="input-slider" data-width="100" data-height="16"/><br/>
<input type="range" class="input-slider" data-width="50" data-height="150"/>
<input type="range" class="input-slider" data-width="40" data-height="120"/>
<input type="range" class="input-slider" data-width="16" data-height="100"/><br/>
<hr/>
<h4>Color Variation</h4>
<p lang="en">You can customize the slider color by attribute 'data-fgcolor' and 'data-bgcolor'.</p>
<p lang="ja">スライダーの色を 'data-fgcolor' および 'data-bgcolor' 属性でカスタマイズする事ができます。</p>
<code><pre>
<input type="range" class="input-slider" data-fgcolor="#00ff00"/>
<input type="range" class="input-slider" data-bgcolor="#406080"/>
<input type="range" class="input-slider" data-bgcolor="#2040c0" data-fgcolor="#ffc080"/>
</pre></code>
<input type="range" class="input-slider" data-fgcolor="#00ff00"/><br/>
<input type="range" class="input-slider" data-bgcolor="#406080"/><br/>
<input type="range" class="input-slider" data-bgcolor="#2040c0" data-fgcolor="#ffc080"/><br/>
<hr/>
<h4>With External Image</h4>
<p lang="en">If an image is specified by 'data-src', it will be used as the slider thumb.
The background color can be specified by 'data-bgcolor' attribute.
</p>
<p lang="ja">'data-src' で画像を指定してスライダーのツマミ部分に使用できます。この時、背景部の色は 'data-bgcolor' で指定できます。</p>
<code><pre>
<input type="range" class="input-slider" data-src="./images/knobman96.png"/>
<input type="range" class="input-slider" data-width="50"
data-height="120" data-src="./images/knobman96.png"/>
<input type="range" class="input-slider" data-width="50" data-height="120"
data-bgcolor="#28f" data-src="./images/knobman96.png"/>
</pre></code>
<input type="range" class="input-slider" data-src="./images/knobman96.png"/>
<input type="range" class="input-slider" data-width="50" data-height="120" data-src="./images/knobman96.png"/>
<input type="range" class="input-slider" data-width="50" data-height="120" data-bgcolor="#28f" data-src="./images/knobman96.png"/>
<hr/>
<h4>With Multi Frame External Image</h4>
<p lang="en">As with knobs, you can also create a full custom slider by specifying the multi-frame stitched image to 'data-src' attribute and specifying the number of frames with 'data-sprites'.</p>
<p lang="ja">ノブの場合と同じようにフレームを接続した画像を 'data-src' 属性で指定して、'data-sprites' でコマ数を指定するとフルカスタムのスライダーを作る事もできます。</p>
<code><pre>
<input type="range" class="input-slider" data-width="200" data-height="40"
data-sprites="50" data-src="./images/slider3.png"/>
</pre></code>
<div style="margin-right:20px;float:left;height:200px;width:250px;overflow-y:scroll;border:1px solid #88d"><img src="./images/slider3.png" style="border:2px solid #66d;margin:3px;"/></div>
<input type="range" class="input-slider" data-width="200" data-height="40" data-sprites="50" data-src="./images/slider3.png"/>
<br clear="both"/>
<hr/>
<h2>Switch Samples</h2>
<input type="checkbox"/>
<p lang="en">This is a usual <input type="checkbox"/>.
class 'input-switch' makes this to a toggle switch.
</p>
<p lang="ja">これは通常の <input type="checkbox"/> タグです。
'input-switch' クラスによってこれをトグルスイッチに置き換えます。
</p>
<hr/>
<h4>Simplest</h4>
<p lang="en">Just add the class 'input-switch' :</p>
<p lang="ja">単にクラス 'input-switch' を追加した場合 :</p>
<code><pre><input type="checkbox" class="input-switch"/></pre></code>
<input type="checkbox" class="input-switch"/>
<hr/>
<h4>Diameter Variation</h4>
<p lang="en">Switch size is changeable by 'data-diameter' attribute or 'data-width' and 'data-height'.</p>
<p lang="ja">'data-diameter' または 'data-width' と 'data-height' 属性でスイッチのサイズを変更できます。</p>
<code><pre>
<input type="checkbox" class="input-switch" data-diameter="64"/>
<input type="checkbox" class="input-switch" data-diameter="32" checked/>
<input type="checkbox" class="input-switch" data-diameter="16"/>
<input type="checkbox" class="input-switch" data-width="40" data-height="20"/>
<input type="checkbox" class="input-switch" data-width="20" data-height="50"/>
</pre></code>
<input type="checkbox" class="input-switch" data-diameter="64"/>
<input type="checkbox" class="input-switch" data-diameter="32" checked/>
<input type="checkbox" class="input-switch" data-diameter="16"/>
<input type="checkbox" class="input-switch" data-width="40" data-height="20"/>
<input type="checkbox" class="input-switch" data-width="20" data-height="50"/>
<hr/>
<h4>Color Variation</h4>
<p lang="en">You can customize the switch color by attribute 'data-fgcolor' and 'data-bgcolor'.</p>
<p lang="ja">スイッチの色を 'data-fgcolor' および 'data-bgcolor' 属性でカスタマイズする事ができます。</p>
<code><pre>
<input type="checkbox" class="input-switch" data-fgcolor="#00ff00" checked/>
<input type="checkbox" class="input-switch" data-bgcolor="#406080"/>
<input type="checkbox" class="input-switch" data-bgcolor="#2040c0" data-fgcolor="#ffc080"/>
</pre></code>
<input type="checkbox" class="input-switch" data-fgcolor="#00ff00" checked/>
<input type="checkbox" class="input-switch" data-bgcolor="#406080"/>
<input type="checkbox" class="input-switch" data-bgcolor="#2040c0" data-fgcolor="#ffc080"/>
<hr/>
<h4>With External Image</h4>
<img src="./images/switch_offon.png" align="left" style="border:2px solid #66d;margin-right:20px"/>
<p lang="en">The switch image can be specified with 'data-src' attribute.
This image should be a image that is vertically stitched off and on state images.
Image is automatically resized to 'data-diameter' size square.
</p>
<p lang="ja">'data-src' 属性によってスイッチの画像を指定する事ができます。
この画像はオフ状態とオン状態を縦方向に繋いだ1枚の画像です。
画像は自動的に 'data-diameter' の大きさにリサイズされます。
</p>
<br clear="both"/>
<code><pre>
<input type="checkbox" class="input-switch" data-src="./images/switch_offon.png" data-diameter="80"/>
<input type="checkbox" class="input-switch" data-src="./images/switch_offon.png" data-diameter="50"/>
<input type="checkbox" class="input-switch" data-src="./images/switch_offon.png" data-diameter="30" checked/>
</pre></code>
<input type="checkbox" class="input-switch" data-src="./images/switch_offon.png" data-diameter="80"/>
<input type="checkbox" class="input-switch" data-src="./images/switch_offon.png" data-diameter="50"/>
<input type="checkbox" class="input-switch" data-src="./images/switch_offon.png" data-diameter="30" checked/>
<hr/>
<h4>Events Handling</h4>
<p lang="en">'change' event is fired when 'checked' state is changed.</p>
<p lang="ja">'checked' の状態が変化した時に、'change' イベントが発火します。</p>
<code><pre><input type="checkbox" class="input-switch" onchange="changeEventHandler(this)"/></pre></code>
<input type="checkbox" class="input-switch" onchange="addText(log2,'\'change\' this.checked='+this.checked+'\n')"/><br/>
<textarea id="log2" cols="50" rows="10"></textarea>
<hr/>
<h4>Radio Buttons</h4>
<p lang="en">Class 'input-switch' is also effective for <input type="radio"/> tag.
</p>
<p lang="ja">'input-switch' クラスは <input type="radio"/> タグに使用する事もできます。
</p>
<code><pre>
<input type="radio" name="group1" class="input-switch"
data-src="./images/switch_offon.png" data-diameter="80"/>
<input type="radio" name="group1" class="input-switch"
data-src="./images/switch_offon.png" data-diameter="80" checked/>
<input type="radio" name="group1" class="input-switch"
data-src="./images/switch_offon.png" data-diameter="80"/>
</pre></code>
<input id="radio1" type="radio" name="group1" class="input-switch" data-src="./images/switch_offon.png" data-diameter="80"/>
<input id="radio2" type="radio" name="group1" class="input-switch" data-src="./images/switch_offon.png" data-diameter="80" checked/>
<input id="radio3" type="radio" name="group1" class="input-switch" data-src="./images/switch_offon.png" data-diameter="80"/>
<hr/>
<h2>License</h2>
<p><b>input-knobs.js</b> is released under the MIT License.</p>
<p>Knob/Switch images in samples are from <a href="https://www.g200kg.com/en/webknobman/gallery.php">KnobGallery</a>,
toggle switch image by az (c) 2011 CC-BY</p>
<hr/>
</div>
</div>
<script>
function addText(el,txt){
txt=el.value+txt;
let rows=txt.split("\n");
if(rows.length>el.rows)
rows.shift();
el.value=rows.join("\n");
}
function SetLang(x) {
let el=document.getElementsByTagName("*");
for(let i=0;i<el.length;++i) {
if(el[i].lang==x||el[i].lang=="")
el[i].style.display=el[i].displaybackup;
else{
if(el[i].style.display!="none")
el[i].displaybackup=el[i].style.display;
el[i].style.display="none";
}
}
}
function GetLang() {
return (navigator.language || navigator.browserLanguage).substring(0, 2);
}
SetLang(GetLang())
</script>
</body>
</html>