Tutorial
DSP
KUIML
How-to
Scripts
ScriptsGUISimple knobs
September 06, 2020   Ilya

Simple knobs

About

This is an example script of how to make a simple knob in KUIML using CANVAS element for drawing and INVISIBLE_PARAM_KNOB for mouse behaviour.

This idea is further developed in LM Skin, where CANVAS-based knobs and faders drawn-on-the fly can have multiple shadows based on light sources.

Download

simple_knobs.cxx  ·  simple_knobs.kuiml

Contents

simple_knobs.cxx

  1. // THE MAIN CODE IS IN KUIML FILE
  2. string name="Very simple knobs";

simple_knobs.kuiml

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <SKIN layout_type="column" h_margin="0" v_margin="0">
  3. <!--
  4. SIMPLE KNOBS using CANVAS
  5. =========================
  6. Demo by Ilya Orlov (LetiMix.com) | St. Petersburg, Russia, 2019-20
  7. Original url: https://pns.letimix.com/scripts/gui/simple_knobs
  8. =========================
  9. Get cool knobs with multiple shadows in Letimix Skin: pns.letimix.com/skin
  10. -->

  12. <!-- couple variables used to generate new element id for each knob -->
  13. <VARIABLE id="LMPR" value="test" override="true" />
  14. <VARIABLE id="LMID" value="500" override="true" />

  16. <!-- main template to create a knob -->
  17. <TEMPLATE id="LMR_TPL_SIMPLE_KNOB_TEST"
  18. param_id="_" visible="true" opacity="1" positions_count="201" pixel_range="128" zoom="1" offset="0" reverse="false"
  19. size="52" body_size="0.95" color="#000000" body_opacity="1"
  20. marker_start="0.0" marker_end="0.56" marker_width="1" marker_color="#FFFFFF" marker_opacity="1" marker_stroke_width="1" marker_type="1"
  21. angle_start="-135" angle_end="135"
  22. >

  24. <!-- generate unique widget_id for each knob, or take it from `id` attr (if set) -->
  25. <LOCAL_VARIABLE id="WID" script="if (&quot;$id$&quot; == &quot;$&quot;+&quot;id$&quot;) return &quot;knob_$LMPR$_$LMID$&quot;; else return &quot;$id$&quot;;" /><VARIABLE id="LMID" formula="$LMID$ + 1" override="true" />

  27. <!-- create param with normalized value (from 0 to 1), also supporting zoom, offset and reverse attributes -->
  28. <FORMULA_PARAM id="$WID$_nval" min="0" max="1" formula="$WID$.zoom*(abs($reverse$-($param_id$-$param_id$.min)/($param_id$.max-$param_id$.min))) - ($WID$.zoom - 1)*$WID$.offset" exposed="true" />

  30. <!-- create knob object on loading, pass all the params into it -->
  31. <SCRIPT script="SimpleKnob obj_$WID$(&quot;$size$;$angle_start$;$angle_end$;$color$;$body_opacity$;$body_size$;$marker_start$;$marker_end$;$marker_width$;$marker_color$;$marker_opacity$;$marker_type$;$marker_stroke_width$&quot;); " />

  33. <!-- now display the knob -->
  34. <CELL>
  35. <LAYER_STACK>

  37. <!-- the canvas element, where all the drawing happens -->
  38. <CANVAS opacity="$opacity$" id="cnv_$WID$" width="$size$" height="$size$" render_script="obj_$WID$.render($WID$_nval);" />

  40. <!-- the invisible knob on top of it to support mouse events -->
  41. <INVISIBLE_PARAM_KNOB id="$WID$" param_id="$param_id$" opacity="$opacity$" width="$size$" height="$size$" positions_count="$positions_count$" visible="$visible$" pixel_range="$pixel_range$" cursor="system::hand" reverse="$reverse$" zoom="$zoom$" offset="$offset$">
  42. <TEMPLATE_INNER_CONTENT /> <!-- in case we want to insert something inside of our knob -->
  43. </INVISIBLE_PARAM_KNOB>

  45. </LAYER_STACK>

  47. <!-- redraw canvas on param changes -->
  48. <ACTION_TRIGGER event_id="$param_id$.value_changed" script="cnv_$WID$.Invalidate()" requires="cnv_$WID$.Invalidate" />
  49. </CELL>

  51. </TEMPLATE>

  53. <!-- add value of pi into variable PI to use un script -->
  54. <VARIABLE id="PI" formula="pi" override="true" />

  56. <!-- script that used for rendering -->
  57. <SCRIPT script=" 

  59. /* enumerated constants to unparse params from string `s_params` in SimpleKnob constructor. RSK_ stands for RenderSimpleKnob */
  60. enum SimpleKnobParams{
  61. RSK_SIZE, RSK_ANGLE_START, RSK_ANGLE_END, RSK_BODY_COLOR, RSK_BODY_OPACITY, RSK_BODY_SIZE, RSK_MARKER_START, RSK_MARKER_END, RSK_MARKER_WIDTH, RSK_MARKER_COLOR, RSK_MARKER_OPACITY, RSK_MARKER_TYPE, RSK_MARKER_STROKE_WIDTH
  62. }

  64. /* different marker types */
  65. enum SimpleKnobMarkers { RSK_MT_NONE, RSK_MT_LINE, RSK_MT_ROUNDED, RSK_MT_ROUNDED_FILLED, RSK_MT_CIRCLE, RSK_MT_CIRCLE_FILLED }

  67. /* now the main class for a knob object */
  68. class SimpleKnob{
  69. double pi = $PI$;
  70. double marker_start, marker_end, marker_width = 3, marker_stroke_width;
  71. double angle_start = -135, angle_end = 135, angle_center = 0, angle_width = 270;
  72. double cw, ch, cw2, ch2, body_radius;
  73. double bodyR, bodyG, bodyB, bodyA;
  74. double markerR, markerG, markerB, markerA;
  75. int marker_type = 1;

  77. /* knob constructor - unparse params from `s_params` and put into vars */
  78. SimpleKnob(string s_params){

  80. /* split incoming parameters */
  81. array&lt;string> ar = s_params.split(&quot;;&quot;);
  82. ar.resize(RSK_MARKER_STROKE_WIDTH+1); /* just to prevent errors, make sure array is always large enough */

  84. this.cw = parseFloat(ar[RSK_SIZE]); /* canvas width and height */
  85. this.ch = this.cw;
  86. cw2 = cw/2; ch2 = ch/2;

  88. body_radius = cw2*parseFloat(ar[RSK_BODY_SIZE]);
  89. marker_width = this.cw*0.1*parseFloat(ar[RSK_MARKER_WIDTH]);
  90. marker_start = cw2*(1-parseFloat(ar[RSK_MARKER_START]))*parseFloat(ar[RSK_BODY_SIZE]);
  91. marker_end = cw2*(1-parseFloat(ar[RSK_MARKER_END]))*parseFloat(ar[RSK_BODY_SIZE]);
  92. marker_type = parseInt(ar[RSK_MARKER_TYPE]);
  93. marker_stroke_width = parseFloat(ar[RSK_MARKER_STROKE_WIDTH])*0.025*this.cw;

  95. angle_start = parseFloat(ar[RSK_ANGLE_START]);
  96. angle_end = parseFloat(ar[RSK_ANGLE_END]);
  97. if (angle_end &lt; angle_start) {
  98. angle_start = -parseFloat(ar[RSK_ANGLE_START]);
  99. angle_end = -parseFloat(ar[RSK_ANGLE_END]);
  100. }

  102. angle_width = (angle_end-angle_start);
  103. angle_center = 90 - (angle_start+angle_end)/2 ;

  105. bodyR = double(parseInt(ar[RSK_BODY_COLOR].substr(1,2),16))/255.0;
  106. bodyG = double(parseInt(ar[RSK_BODY_COLOR].substr(3,2),16))/255.0;
  107. bodyB = double(parseInt(ar[RSK_BODY_COLOR].substr(5,2),16))/255.0;
  108. bodyA = parseFloat(ar[RSK_BODY_OPACITY]);

  110. markerR = double(parseInt(ar[RSK_MARKER_COLOR].substr(1,2),16))/255.0;
  111. markerG = double(parseInt(ar[RSK_MARKER_COLOR].substr(3,2),16))/255.0;
  112. markerB = double(parseInt(ar[RSK_MARKER_COLOR].substr(5,2),16))/255.0;
  113. markerA = parseFloat(ar[RSK_MARKER_OPACITY]);
  114. }

  116. /* the main function to render the knob, uses precalculated values from constructor */
  117. void render(double nval){
  118. /* get graphics object */
  119. auto ctx=Kt::Graphics::GetCurrentContext();

  121. /* do some precalculation, convert angles, etc */
  122. if (nval&lt;0) nval=0;
  123. if (nval>1) nval=1;
  124. double nvalc = nval-0.5;
  125. double adeg = (angle_center - nvalc*angle_width);
  126. double arad = adeg*pi/180;

  128. /* calculate coordinates for the marker */
  129. double si = sin(arad), co = cos(arad);
  130. double dxme = cw2 + co*marker_end;
  131. double dyme = ch2 - si*marker_end;
  132. double dxms = cw2 + co*marker_start;
  133. double dyms = ch2 - si*marker_start;
  134. double mdeg = 270-adeg;

  136. /* now start drawing */
  137. ctx.path.Clear();

  139. /* knob body (filled circle) */
  140. ctx.source.SetRGBA(bodyR, bodyG, bodyB, bodyA);
  141. ctx.path.Arc(cw2, ch2, body_radius, 0.001, 0);
  142. ctx.FillPath();

  144. /* prepare to draw marker */
  145. ctx.path.Clear();
  146. ctx.source.SetRGBA(markerR, markerG, markerB, markerA);

  148. switch(marker_type) {
  149. case RSK_MT_ROUNDED:
  150. case RSK_MT_ROUNDED_FILLED:
  151. case RSK_MT_CIRCLE:
  152. case RSK_MT_CIRCLE_FILLED:
  153. if ((marker_type == RSK_MT_CIRCLE) or (marker_type == RSK_MT_CIRCLE_FILLED)) {
  154. ctx.path.Arc(dxms, dyms, marker_width*0.5, 0.001, 0);
  155. } else {
  156. ctx.path.Arc(dxms, dyms, marker_width*0.5, mdeg, mdeg+180);
  157. ctx.path.Arc(dxme, dyme, marker_width*0.5, mdeg+180, mdeg+360);
  158. }
  159. ctx.path.Close();
  160. if ((marker_type == RSK_MT_ROUNDED_FILLED) or (marker_type == RSK_MT_CIRCLE_FILLED)) {
  161. ctx.FillPath();
  162. } else {
  163. ctx.settings.set_lineWidth(marker_stroke_width);
  164. ctx.StrokePath();
  165. }
  166. break;

  168. default:
  169. ctx.settings.set_lineWidth(marker_width);
  170. ctx.path.MoveTo(dxme, dyme);
  171. ctx.path.LineTo(dxms, dyms);
  172. ctx.StrokePath();
  173. }
  174. }
  175. }

  177.  " />


  180. <!-- make some demo params in kuiml (we can indeed use `custom_param0,1,2` from DSP) -->
  181. <PARAM id="param1" min="-100" max="100" default="0" exposed="true" />
  182. <PARAM id="param2" min="0" max="10" default="3" exposed="true" />
  183. <PARAM id="param3" min="0" max="1" default="3" exposed="true" />

  185. <!-- create some basic knob element using our template (this it optional, we could use template directly) -->
  186. <DEFINE>
  187. <MY_KNOB base_type="LMR_TPL_SIMPLE_KNOB_TEST" size="50" color="#2c9fdf" marker_color="#EEEEEE" marker_end="0.56" />
  188. </DEFINE>

  190. <!-- show the knobs -->
  191. <ROW spacing="20">
  192. <CELL>
  193. <MY_KNOB size="100" param_id="param1" />
  194. <PARAM_TEXT param_id="param1" />
  195. </CELL>
  196. <CELL>
  197. <MY_KNOB size="100" param_id="param2" color="#DD3355" marker_type="3" marker_start="0.2" angle_start="-90" angle_end="90" />
  198. <PARAM_TEXT param_id="param2" />
  199. </CELL>
  200. <CELL>
  201. <MY_KNOB size="100" param_id="param3" color="#22AA44" marker_type="4" marker_start="0.25" angle_start="-180" angle_end="180">
  202. <PARAM_TOOLTIP param_id="param3" content="Value: {value}
  203. This knob is reversly linked to the blue one" />
  204. </MY_KNOB>
  205. <PARAM_TEXT param_id="param3" />

  207. </CELL>
  208. </ROW>

  210. <!-- just for fun, let's link last knob to the first one -->
  211. <PARAM_LINK from="param3" to="param1" normalized="true" reverse="true" />

  213. </SKIN>