webaudio-controls

GUI parts library for Web application using WebComponents

Project maintained by g200kg Hosted on GitHub Pages — Theme by mattgraham

Basic Usage :

Advanced Usage and Application Notes :

Determining Knob Size

There are several factors that determine the knob size. The following factors have higher priority from the top and are checked in order.

Note that the width / height specification in the style sheet does not affect the size of the knob display, although the outline of the element changes.

width, height attributes of the element
diameter attribute of the element
knobWidth, knobHeight specified by WebAudioControlsOptions
knobDiameter specified by WebAudioControlsOptions
Image size specified by src
Default size (64px x 64px)

Knob

The default size (64 x 64px) is used if there is no other size factor.

<webaudio-knob></webaudio-knob>

If the diameter is specified, the knob will be that size

<webaudio-knob diameter="32"></webaudio-knob>

When width and height attributes are specified individually.

<webaudio-knob width="200" height="50"></webaudio-knob>

If a src image is specified and nothing else is provided, the original size of the image is used. At this time, sprites are automatically calculated assuming that one frame of the knob image is square.

<webaudio-knob src="../knobs/Aqua.png"></webaudio-knob>

If src and diameter is specified, the original image will be resized.

<webaudio-knob src="../knobs/Aqua.png" diameter="32">
</webaudio-knob>

When width height is specified individually with src.

<webaudio-knob src="../knobs/Aqua.png"
  sprites="100" 
  width="200" height="50">
</webaudio-knob>

If one frame of the knob image is not square, the sprites attribute should be set to (number of frames - 1).

<webaudio-knob src="../knobs/hsw5.png" sprites="4">
</webaudio-knob>

Slider

The default size (24 x 128px) is used if there is no other size factor.

<webaudio-slider></webaudio-slider>

If width and height is specified, it will be the specified size. At this time, the direction of the slider is automatically determined to the longer direction of width or height.

<webaudio-slider width="200" height="50">
</webaudio-slider>

When the src image is specified and width height is not specified, the size of the original src image is used.

<webaudio-slider src="../knobs/hsliderbody.png">
</webaudio-slider>

When width height is specified with the src image, the src image is resized.

<webaudio-slider 
  src="../knobs/hsliderbody.png"
  width="300" height="40">
</webaudio-slider>

knobwidth and knobheight specify the size of thumb. If these are not specified, a square whose side is the smaller of width or height will be used.

<webaudio-slider 
  width="300" height="40"
  knobwidth="20" knobheight="60">
</webaudio-slider>

If the thumb size by knobwidth and knobheight are not specified but the image is served by knobsrc, the original size of the knobsrc image will be used.

<webaudio-slider 
  width="300" height="40"
  knobsrc="../knobs/hsliderknob.png">
</webaudio-slider>

Specifying ditchlength can set the movement range of the thumb.

<webaudio-slider 
  width="300" height="40" 
  knobwidth="30" knobheight="100" 
  ditchlength="150" 
  knobsrc="../knobs/hsliderknob.png">
</webaudio-slider>

Setting src to the empty string “” will stop drawing the background and draw only the thumb.

<webaudio-slider 
  width="300" height="40" 
  knobwidth="30" knobheight="100" 
  src="" 
  outline="1" 
  knobsrc="../knobs/hsliderknob.png">
</webaudio-slider>

Switch

If no size is specified such as width, height, it will be displayed in the default size 32 x 32px.

<webaudio-switch></webaudio-switch>

If width and height are specified, it will be displayed in the specified size.

<webaudio-switch width="120" height="32">
</webaudio-switch>

diameter attribute specify width and height together.

<webaudio-switch diameter="120">
</webaudio-switch>

If the src attribute specifies an image, and width, height, and diameter are not specified, the original image size is used.

<webaudio-switch src="../knobs/redbutton128.png">
</webaudio-switch>

If the src image and size are specified, the src image will be resized to the specified size.

<webaudio-switch src="../knobs/redbutton128.png" diameter="40">
</webaudio-switch>

Param

If no size is specified such as width, height, it will be displayed in the default 32 x 20px.

<webaudio-param></webaudio-param>

If width and height are specified, it will be displayed in the specified size.

<webaudio-param width="100" height="40">
</webaudio-param>

The font size can be specified with the fontsize attribute.

<webaudio-param 
  width="100" height="40"
  fontsize="24">
</webaudio-param> 

If the src image is specified but no width and height is provided, the original size of the src image is used.

<webaudio-param
  src="../knobs/parambg120x32.png">
</webaudio-param> 

If src image, width, height is specified, the src image is resized to specified size.

<webaudio-param 
  src="../knobs/parambg120x32.png" 
  width="50" height="40"
  fontsize="16">
</webaudio-param>

If src is empty string "", background is transparent.

<webaudio-param src="" diameter="32">
</webaudio-param>