|


'input-knob.js' is here : input-knobs.js
GitHub repository : https://github.com/g200kg/input-knobs

Features

input-knobs.js is a Javascript library for Rotating Knobs / Horizontal & Vertical Sliders / Toggle Switches / Radio Buttons style GUI widgets. This is a sub-set of 'webaudio-controls'' and simply replace the appearance of <input/> tags to rotating knobs, sliders or switches.

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. input-knobs.js is not full compatible to 'webaudio-controls' but this problem can be avoided.

input-knobs.js は回転するノブ、水平および垂直のスライダー、トグルスイッチ、ラジオボタン型の GUI ウィジェットの Javascript ライブラリです。 これは 'webaudio-controls' のサブセットで、単純に <input/> タグの外見を 回転するノブやスライダー、スイッチに置き換えます。

'webaudio-controls' は WebComponents を使用するため Firefox / Edge 等ではポリフィルが必要になりますが、 DOM の基本構造を書き換える影響で DOM エレメントを直接引数に取る API 等で不具合が生じる場合があります。 input-knobs.js は 'webaudio-controls' の機能の全ては揃っていませんがこの問題を避ける事ができます。


TagChange to
<input type="range" class="input-knob"/>Rotating Knob
<input type="range" class="input-slider"/>Horizontal Slider
<input type="range" class="input-slider"/>Vertical Slider
<input type="checkbox" class="input-switch"/>Toggle Switch
<input type="radio" class="input-switch"/>Radio Button

Usage


Operation

There are some tips for knobs and sliders operation :

ノブおよびスライダーの操作方法に幾つかの Tips があります :

OperationDescription
Mouse draggingUpward / Right for increase value,
Downward / Left for decrease value
ShiftKey + draggingFine adjustment, 1/5 sensitivity to mouse movement
Mouse WheelUpward : increase value
Downward : descrease value
ShiftKey + Mouse WheelFine adjustment, 1/5 sensitivity to wheel movement
Keyboard
(after focused)
Up / Right arrow : increment value
Down / Left arrow : decrement value
操作説明
マウスドラッグ上または右方向で値を増加
下または左方向で値を減少
Shiftキー + マウスドラッグ微調整。マウスの移動に対する感度が 1/5 になります
マウスホイール上方向 : 値を増加
下方向 : 値を減少
Shiftキー + マウスホイール微調整。ホイールの動きに対する感度が 1/5 になります
キーボード
(フォーカスを当てた後)
カーソル上または右 : 値を1ステップ増加
カーソル下または左 : 値を1ステップ減少

Attributes

AttributeDescription
data-diameter = "nnn" 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.
data-width = "nnn"
data-height = "nnn"
Set the width and height of the knobs, sliders or switches individually in 'px'.
In default, 64 for knobs, 128 for sliders and 32 for switches.
If the size for slider is vertically long, the slider will be a vertical slider.
data-src = "Image URL" Use external image for the knobs/switches.

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.

For Sliders, the image should be a vertically stitched slider-images that represent thumb sliding from min value to max value frame by frame.

For Switches, this image should be a vertically stitched Off state and On state image.

If no image is supplied, input-knobs uses knob/slider/switch images embedded inside (black body and red indicator)
data-sprites = "nnn" For Knob / Sliders only. If you use frame stitched knob/slider-image, this attribute should be the number of frames.

The knobs that specified 'data-src' but not specified this attribute, it will use image rotation instead of frame switching procedure.

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' .
data-fgcolor = "color" Change Knob / Slider / Switch 's pointer color when no external image (data-src) is used. Default is red "#f00".
data-bgcolor = "color" Change Knob / Slider / Switch 's background color when no external image (data-src) is used. Default is black "#000".
属性説明
data-diameter = "nnn" ノブ、スイッチのサイズを 'px' で指定します。これは'data-width="nnn" data-height="nnn"' をまとめて指定する事と等価です。デフォルトではノブは 64、スイッチは 24 になっています。
data-width = "nnn"
data-height = "nnn"
ノブ、スライダー、スイッチの幅および高さを 'px' で指定します。デフォルトではノブは幅、高さ共に 64、スイッチは幅、高さ共に 24 です。

またスライダーのデフォルト値は幅 128、高さ 20 です。スライダーで指定された形状が縦長の場合、自動的に垂直スライダーとなります。
data-src = "Image URL" ノブ、スライダー、スイッチに外部の画像を使用します。

ノブの場合、この画像は真上(12時の方向)を指した単一の画像、または最小値から最大値までの回転をあらわすコマ毎の画像を縦方向に繋げた画像です。

また、スライダーではツマミ部分の1枚の画像または、最小値から最大値までのスライドをあらわすコマ毎のスライダー全体画像を縦方向に繋げた画像を指定します。

スイッチの場合、この画像はオフ状態とオン状態の画像を縦方向に繋げた画像でなくてはなりません。

画像が指定されない場合は、input-knobs は内部に保持しているノブ/スライダー/スイッチの画像(黒い本体に赤いインジケータ)を使用します。
data-sprites = "nn" ノブおよびスライダーの場合のみ使用します。 ノブ/スライダーの画像として複数のフレームを繋いだ画像を使用する場合、この属性でフレームの数を指定しなくてはなりません。

data-src を指定したノブでこれを指定しない場合は、1枚の画像を回転させる動作となります。

data-src を指定したスライダーでこれを指定しない場合、画像はスライダーのツマミ部分だけを表す画像として使用され、背景は黒または 'data-bgcolor' で塗りつぶされます。
data-fgcolor = "color" 外部画像(data-src)を使用しない場合のポインター部分の色指定です。デフォルトは赤 #f00 になっています。
data-bgcolor = "color" 外部画像(data-src)を使用しない場合、およびスライダーで 'data-src' をツマミ部分だけに使用する場合の背景の色指定です。デフォルトは黒 #000 になっています。

inputKnobsOptions

グローバルなオブジェクト window.inputKnobsOptions を定義する事により、個別のタグで 'data-*' 属性を設定しない場合のデフォルト値を設定しておく事ができます。 例えば次の行をHTMLファイル内に記述しておく事で、ポインター色、背景色、ノブの直径のデフォルト値を変更できます。

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.

<script>window.inputKnobsOptions={fgcolor:"#00ff00",bgcolor:"#000080",knobDiameter:"48"}</script>

次の表の項目が inputKnobsOptions で設定できます。

The items in the following table can be set with inputKnobsOptions.

Key名説明
knobDiameterノブの直径
knobWidthノブの幅、これは knobDiameter よりも優先します
knobHeightノブの高さ、これは knobDiameter よりも優先します
sliderWidthスライダーの幅
sliderHeightスライダーの高さ
switchDiameterスイッチの直径
switchWidthスイッチの幅、これは switchDiameter よりも優先します
switchHeightスイッチの高さ、これは switchDiameter よりも優先します
fgcolorインジケータ部の色
bgcolor背景の色
KeyDescription
knobDiameterDiameter of knobs
knobWidthWidth of knobs that takes prioriry over knobDiameter
knobHeightHeight of knobs height that takes priority over knobDiameter
sliderWidthWidth of sliders
sliderHeightHeight of sliders
switchDiameterDiameter of switches
switchWidthWidth of switches that takes priority over switchDiameter
switchHeightheight of switches that takes priority over switchDiameter
fgcolorIndicator color
bgcolorBackground color



Functions

element.refresh()

input-knobs を適用した DOM エレメントに対し、生成後にサイズや色を変更した場合はこの関数を読んで表示を更新する必要があります。

If you change the size or color after DOM element with input-knobs is generated, this function call is needed for update the display.


    let elem=document.getElementById("knob1");  // get existing input-knob element
    elem.setAttribute("data-diameter","40");    // set the diameter to "40"
    elem.refresh();                             // update display
  



Knob Samples


This is a usual <input type="range"/>. class 'input-knob' makes change this to rotating knob.

これが通常の <input type="range"/> です。 'input-knob' クラスはこれを回転するノブに置き換えます。


Simplest

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.

単に "input-knob" クラスを <input type="range"> タグに追加します。 これは見た目とマウス操作方法以外は通常の <input type="range"> タグと同様の動作をします。

<input type="range" class="input-knob"/>

Diameter Variation

You can customize the knob size by attribute 'data-diameter'.

ノブのサイズを 'data-diameter' 属性でカスタマイズする事ができます。

<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"/>

Color Variation

You can customize the knob color by attribute 'data-fgcolor' and 'data-bgcolor'.

ノブの色を 'data-fgcolor' および 'data-bgcolor' 属性でカスタマイズする事ができます。

<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"/>

With External Knob Image

The knob image can be specified with 'data-src' attribute.
This image is a simple single knob-image that pointing upward.
Image is automatically resized to 'data-diameter' size.

'data-src' 属性でノブの画像を指定する事ができます。
この画像は単に真上を向いた1枚のノブ画像です。
画像は自動的に 'data-diameter' の大きさにリサイズされます


<input type="range" class="input-knob" data-diameter="96" data-src="./images/knobman96.png"/>

With Multi Frame External Image

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.

JKnobMan / WebKnobMan may be a help for making these stitched images,

'data-src' 属性で指定する画像として、ノブの回転をあらわす複数のフレームを繋いだ画像を使用できます。 この場合、'data-sprites' 属性でフレームの数を指定します。

このフレームを接続した画像を作成するには JKnobMan / WebKnobMan が役立つかも知れません。


<input type="range" class="input-knob" data-diameter="120" data-src="./images/knob70.png" data-sprites="101"/>
<input type="range" class="input-knob" data-diameter="60" data-src="./images/knob70.png" data-sprites="101"/>
<input type="range" class="input-knob" data-diameter="32" data-src="./images/knob70.png" data-sprites="101"/>

Events Handling

'input' events are fired while dragging, 'change' event is fired when mouseup.
Usual attributes like 'min', 'max', 'step' are also effective.

ドラッグ中は 'input' イベントが発火し、mouseup の時に 'change' イベントが発火します。
'min'、'max'、'step' 等の通常の属性も有効です。

<input type="range" class="input-knob" min="-10" max="10" step="0.1"
   oninput="inputEventHandler(this)" onchange="changeEventHandler(this)"/>

Slider Samples

Simplest

Just add the class 'input-slider', it is a width 128px, height 20px horizontal slider.

単にクラス 'input-slider' を追加した場合、width は 128px、height は 20px の水平スライダーになります。

<input type="range" class="input-slider"/>

Size Variation

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.

スライダーのサイズを 'data-width' および 'dat-height' 属性でカスタマイズする事ができます。 この時、縦長の形状を指定すると自動的に縦スライダーになります。

<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"/>





Color Variation

You can customize the slider color by attribute 'data-fgcolor' and 'data-bgcolor'.

スライダーの色を 'data-fgcolor' および 'data-bgcolor' 属性でカスタマイズする事ができます。

<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"/>




With External Image

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.

'data-src' で画像を指定してスライダーのツマミ部分に使用できます。この時、背景部の色は 'data-bgcolor' で指定できます。

<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"/>

With Multi Frame External Image

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'.

ノブの場合と同じようにフレームを接続した画像を 'data-src' 属性で指定して、'data-sprites' でコマ数を指定するとフルカスタムのスライダーを作る事もできます。

<input type="range" class="input-slider" data-width="200" data-height="40"
    data-sprites="51" data-src="./images/slider3.png"/>


Switch Samples

This is a usual <input type="checkbox"/>. class 'input-switch' makes this to a toggle switch.

これは通常の <input type="checkbox"/> タグです。 'input-switch' クラスによってこれをトグルスイッチに置き換えます。


Simplest

Just add the class 'input-switch' :

単にクラス 'input-switch' を追加した場合 :

<input type="checkbox" class="input-switch"/>

Diameter Variation

Switch size is changeable by 'data-diameter' attribute or 'data-width' and 'data-height'.

'data-diameter' または 'data-width' と 'data-height' 属性でスイッチのサイズを変更できます。

<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"/>

Color Variation

You can customize the switch color by attribute 'data-fgcolor' and 'data-bgcolor'.

スイッチの色を 'data-fgcolor' および 'data-bgcolor' 属性でカスタマイズする事ができます。

<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"/>

With External Image

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.

'data-src' 属性によってスイッチの画像を指定する事ができます。 この画像はオフ状態とオン状態を縦方向に繋いだ1枚の画像です。 画像は自動的に 'data-diameter' の大きさにリサイズされます。


<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/>

Events Handling

'change' event is fired when 'checked' state is changed.

'checked' の状態が変化した時に、'change' イベントが発火します。

<input type="checkbox" class="input-switch" onchange="changeEventHandler(this)"/>


Radio Buttons

Class 'input-switch' is also effective for <input type="radio"/> tag.

'input-switch' クラスは <input type="radio"/> タグに使用する事もできます。

<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"/>

License

input-knobs.js is released under the MIT License.

Knob/Switch images in samples are from KnobGallery, toggle switch image by az (c) 2011 CC-BY