Tutorial
DSP
KUIML
How-to
Scripts
KUIMLReferenceINVISIBLE_PARAM_KNOB
July 15, 2025

INVISIBLE_PARAM_KNOB

Active invisible element that let the user change the value of a prameter by dragging the mouse or clicking on specific keys. For more information, see User Experience. This widget is similar to the IMAGE_PARAM_KNOB element, except that it does not display anything.

Attributes brief detailed show all inherited

Name DescriptionDefault
orientationOrientation of the mouse control for the knobvertical
pixel_rangeRange of the mouse movements to change the parameter value40
Inherited from param_widgetsRead about `param_widgets`
param_idIdentifier of the parameter to displayempty
Exposed: v. 1.2reverseParameter widgets displays the parameter value the other way roundfalse
Exposed: v. 1.2positions_countNumber of states of the param control or viewerDepends...
response_curveThe response curve of the control or viewer: this is the function used to transform the position of the viewer to the parameter value'linear'
scaleParameter pre-scaling'linear'
Exposed: v. 1.2.5zoomZoom on the parameter range1
Exposed: v. 1.2.5offsetoffset on the parameter range0
max_zoomMaximum value allowed for the exposed zoom parameter1
Inherited from param_controlsRead about `param_controls`
fine_ratioRatio between the fine tuning positions count and the positions_count attribute10
reset_modifier_keyModifier key for resetting the parameter value to default with a mouse click'alt'
reverse_mouse_wheelReverses the behavior of the mouse wheel (decrements instead of incrementing)false
Read-only (may work on some controls)
pushedSet to true when the control is "pressed" or "pushed". *If it doesn't work use 'mouse_down'
Inherited from widgetsRead about `widgets`
Exposed: v. 1.2opacityOpacity of the widget100%
Exposed: v. 1.6visibleShow/hide the widget, does not impact the layout, as opposed to the cell's display attributetrue
Exposed: v. 1.6enabledEnable/disable the widget. When disabled, the widget does not react to mouse or keyboard events. it is displayed but inactive.true
cursorCursor to display when the mouse is over the active part of the widgetSystem...
mouse_sensitiveEnables or disables mouse control on widgetsDependi...
auto_focusEnables or disables auto focusDependi...
handled_keysList of keys handled by the widget, which will trigger key_pressed and key_released eventsempty
Exposed: v. 2.7.1default_keys_enabledEnable or disable the default keys handled natively by the widget.true
accept_focusWhen set to false, the widget will not accept keyboard focus (ignored). (Experimental)true
bufferedEnable or disable buffering of the widget.false
transparentEnable or disable transparency for the widget.false
Drag and Drop Attributes
drag_source_idsList of objects to use as drag sources for drag and drop operations (each one may have a different applicative type)empty
drag_applicative_typesList of applicative types to use for each drag source defined by the drag_source_ids listExperimental since 2.7: use the system::text applicative type to drag the content of a parameter or string as system text (can be dropped into any application that supports drag and drop of text content)empty
drag_operationsList of drag operations allowed. 'copy' or 'move' operations are currently supportedempty
drag_contextOptional string to define the serialization context used for the drag operationempty
Exposed: v. 2.6drag_enabledEnable drag operations on the widgettrue
drop_target_idsList of objects to use as drop targets for drag and drop operations (each one may have a different applicative type)empty
drop_applicative_typesList of applicative types to use for each drop target defined by the drop_target_ids list.Experimental since 2.7: use the system::text applicative type to drop text directly into a parameter or stringempty
drop_file_typesList of supported file types to use for each drop target defined by the drop_target_ids list. Each wild card may contain several extensions, separated by ','. For example, with "*.*;*.doc,*.txt", the first drop target will accept all files, and the second one will accept only .doc and .txt filesempty
dropped_file_path_string_idsList of string objects than can receive the path of a file that was dropped, for each drop target defined by the drop_target_ids listempty
drop_contextOptional string to define the deserialization context used for the drop operationempty
Exposed: v. 2.6drop_enabledEnable drop operations on the widgettrue
Exposed Attributes And Events (read-only)
Exposed: v. 2.6mouse_overSet to true when the mouse is over the active area of the widgetfalse
Exposed: v. 2.7mouse_downBit field containing the state of mouse buttons: first bit is left button, second is right and third is mid button. When no button is pushed, the value of mouse_down is zero0
Exposed: v. 2.7mouse_position.xHorizontal position of the mouse in the widget (relative to the upper left corner of the widget)
Exposed: v. 2.7mouse_position.yVertical position of the mouse in the widget (relative to the upper left corner of the widget)
Exposed: v. 2.7mouse_screen_position.xAbsolute horizontal position of the mouse on the screen
Exposed: v. 2.7mouse_screen_position.yAbsolute vertical position of the mouse on the screen
Exposed: v. 2.7.1mouse_wheel_upEvent fired when a mouse wheel is turned up
Exposed: v. 2.7.1mouse_wheel_downEvent fired when a mouse wheel is turned up
Exposed: v. 2.7focusSet to true when the widget has keyboard focus and receives keyboard eventsfalse
Exposed: v. 2.7key_pressedEvent fired when a key (filtered by the handled_key list) is pressed
Exposed: v. 2.7key_pressed.keylast virtual key that was pressed
Exposed: v. 2.7key_pressed.charactersCharacter(s) corresponding to the last pressed key, if it was a character key (key_pressed.key=0)
Exposed: v. 2.7key_releasedEvent fired when a key (filtered by the handled_key list) is released
Exposed: v. 2.7key_released.keylast virtual key that was released
Exposed: v. 2.7key_released.charactersCharacter(s) corresponding to the last released key, if it was a character key (key_released.key=0)
Exposed: v. 2.6draggingSet to true when a dragging operation is in progress for this widgetfalse
Exposed: v. 2.6drag_operationtype of the current drag operation (None, Copy, Move)enumera...
Exposed: v. 2.6droppingSet to true when a dropping operation is in progress for this widgetfalse
Exposed: v. 2.6drop_operationtype of the current drop operation (None, Copy, Move)enumera...
Inherited from cellRead about `cell`
Properties Relative to Parent Cell
Exposed: v. 1.5v_alignVertical alignment of the cell in its parent cellcenter
Exposed: v. 1.5h_alignHorizontal alignment of the cell in its parent cellcenter
Exposed: v. 1.9.1 (read only)h_positionHorizontal position of the cell in its parent cell
Exposed: v. 1.9.1 (read only)v_positionVertical position of the cell in its parent cell
Exposed: v. 1.9.1h_offsethorizontal offset of the cell from the position computed by the layout engine0
Exposed: v. 1.9.1v_offsetvertical offset of the cell from the position computed by the layout engine0
Exposed: v. 1.5flexflexibility of the cell0
Exposed: v. 1.5displayinclude/exclude the cell from the layouttrue
Cell Properties
Exposed: v. 1.5layout_typeSelects a layout type: row, column or layer_stackcolumn
Exposed: v. 1.9.1 (pixels)widthForced width of the cell
Exposed: v. 2.0min_widthminimum width allowed for the cell
Exposed: v. 2.0max_widthmaximum width allowed for the cell
Exposed: v. 1.9.1 (pixels)heightForced height of the cell
Exposed: v. 2.0min_heightminimum height allowed for the cell
Exposed: v. 2.0max_heightmaximum height allowed for the cell
marginmargin of the cell0
Exposed: v. 1.5h_marginHorizontal margin of the cell0
Exposed: v. 1.5v_marginVertical margin of the cell0
Exposed: v. 1.5spacingSpace between children cells0
spacing_flexFlex value to allocate extra space between children cells0
Exposed: v. 1.5internal_v_alignVertical alignment of children cells group inside the cellcenter
Exposed: v. 1.5internal_h_alignHorizontal alignment of children cells group inside the cellcenter
Exposed: v. 2.0reflowwhen set to true, the layout engine will treat chidren cell as reflowable elements. For a fixed height column, the width is computed accordingly, and for a fixed width row, the height is computed accordinglyfalse
Exposed: v. 2.4flipdisplay children cells in reverse order (right to left or bottom to top)false
Inheritable properties: these text properties are inherited by children cells (and can be overridden)
font_faceName of the font for text contained in the cell and sub cells ("Arial")empty
font_sizeSize of the font for any text contained in the cell ("12" or "+2" or "120%")System...
font_weight("bold" or "normal") Weight of the font for any text contained in the cellSystem...
font_style("italic" or "normal") Style of the font for any text contained in the cellSystem...
font_qualityQuality of the font ("default" or "no_anti_alias" or "anti_alias" or "cleartype")System...
font_escapementEscapement - angle in degrees to rotate text ("90")0
text_decoration("underline" or "none") Decoration of the text for any text contained in the cellSystem...
text_colorColor of any text contained in the cell ("#FF0000")System...
Common attributesRead about `common`
idIdentifier of the elementempty

Examples

If we compare this to INVISIBLE_PARAM_SLIDER we can see they are very similar in mouse behaviour. Difference is that slider also changes to the click position, and knob changes only when dragged.

Let's try with the similar simple example as in INVISIBLE_PARAM_SLIDER.

  1. <!-- create demo param -->
  2. <PARAM id="demo_param" min="0" max="1" default="0.5" value_format="0.3" />

  4. <!-- an area of a widget to see -->
  5. <WIDGET background_color="#EEEEEE" layout_type="layer_stack">
  6. <!-- "thumb" rectangle -->
  7. <WIDGET id="v_thumb" background_color="#DD0000" width="100%" height="10" v_align="top" />
  8. <!-- move thumb position according to param value -->
  9. <PARAM_LINK from="demo_param" to="v_thumb.v_offset" formula="100-10-x*(100-10)" /> <!-- widget height minus thumb height -->

  11. <!-- the control that handles mouse and keyboard-->
  12. <INVISIBLE_PARAM_KNOB param_id="demo_param" cursor="system::hand" width="100" height="100" />
  13. </WIDGET>

  15. <!-- text value of a param -->
  16. <PARAM_TEXT_CONTROL param_id="demo_param" />

Let's replace "slider" graphics with a proper "knob" graphics. To draw a knob we can use CANVAS.

  1. <!-- create demo param -->
  2. <PARAM id="demo_param" min="-50" max="50" default="0" value_format="0.1" />

  4. <!-- an area of a widget to see -->
  5. <WIDGET background_color="#EEEEEE" layout_type="layer_stack">
  6. <!-- the canvas element, where all the drawing happens -->
  7. <CANVAS id="demo_canvas" width="100%" height="100%" render_script="renderKnob(this.width, this.height, demo_inv_knob.value);" requires="demo_canvas.width;demo_canvas.height;demo_inv_knob.value" />
  8. <!-- redraw canvas on param changes -->
  9. <ACTION_TRIGGER event_id="demo_param.value_changed" script="demo_canvas.Invalidate()" requires="demo_canvas.Invalidate" />

  11. <!-- the control that handles mouse and keyboard-->
  12. <INVISIBLE_PARAM_KNOB id="demo_inv_knob" param_id="demo_param" cursor="system::hand" width="100" height="100" />
  13. </WIDGET>

  15. <!-- text value of a param -->
  16. <PARAM_TEXT_CONTROL param_id="demo_param" />

  18. <!-- script to draw on canvas -->
  19. <SCRIPT script=" 
  20. void renderKnob(double w, double h, double nvalue){
  21. /* get graphics object */
  22. auto ctx=Kt::Graphics::GetCurrentContext();

  24. /* scale to virtual coordinates from -1 to 1 */
  25. ctx.transform.Scale(w/2,h/2);
  26. ctx.transform.Translate(1,1);

  28. /* add a circle */
  29. ctx.path.Clear();
  30. ctx.source.SetRGBA(0.3, 0.8, 1, 0.2); /* r,g,b, alpha */
  31. ctx.path.Arc(0, 0, 0.9, 0, 360); /* add a circle with radius 0.9 */
  32. ctx.FillPath();

  34. /* draw circle border */
  35. ctx.source.SetRGBA(0, 0, 0.2, 0.5);
  36. ctx.settings.set_lineWidth(0.02);
  37. ctx.StrokePath();

  39. /* calculate coordinates for the marker */
  40. double angle_start = -135, angle_end = 135;
  41. double angle_width = (angle_end-angle_start);
  42. double angle_center = 90 - (angle_start+angle_end)/2;
  43. double adeg = (angle_center - (nvalue-0.5)*angle_width);
  44. double arad = adeg*pi/180;
  45. double si = sin(arad), co = cos(arad);
  46. double marker_start = 0.7, marker_end = 0.35, marker_width=0.2;
  47. double dxme = co*marker_end;
  48. double dyme = -si*marker_end;
  49. double dxms = co*marker_start;
  50. double dyms = -si*marker_start;
  51. double mdeg = 270-adeg;

  53. /* draw a marker */
  54. ctx.path.Clear();
  55. ctx.path.Arc(dxms, dyms, marker_width*0.5, mdeg, mdeg+180);
  56. ctx.path.Arc(dxme, dyme, marker_width*0.5, mdeg+180, mdeg+360);
  57. ctx.source.SetRGBA(0, 0.3, 0.3, 0.8);
  58. ctx.FillPath();

  60. /* write text with normalized value */
  61. ctx.font.SetFontSize(0.27);
  62. ctx.source.SetRGBA(0, 0, 0, 0.7);
  63. string s = (&quot;&quot;+nvalue).substr(0,3);
  64. ctx.path.MoveTo(- ctx.font.GetTextSize(s).x/2, 0.7);
  65. ctx.WriteText(s);

  67. }" />

This is a very rough demo of what can be done with CANVAS. Take a look at Simple knobs article to see more demos.

Ready-to-use knobs

Here are some demo knobs created inside LM Skin using CANVAS and INVISIBLE_PARAM_KNOB. You can easily change the size, colors and other parameters without touching Gimp or Photoshop. Open LM Skin -> Skin Scanner to observe them and LM Skin -> Controls customizer to adapt them to your needs.

Take a look at INVISIBLE_PARAM_SLIDER and IMAGE_PARAM_KNOB.

Comments

Please, authorize to view and post comments.