CANVAS

The CANVAS element lets you draw your own shapes using the Kt::Graphics scripting API.

How else to add graphics?

There are several ways to add graphics in KUIML: you can load external images from files using IMAGE tag (and via multiple IMAGE_... related controls), insert built-in svg directly into KUIML using svg tag, for simple rectangular objects you can use WIDGET or TEXT with background_color attribute.

For static graphics (like icons, etc) it's usually easier to use inline svg (which, by the way, also can be changed on the fly). For custom elements that should be frequently redrawn (like custom meters, rotating knobs, faders, graphs etc) you can either use pre-rendeded PNG/SVG stripes with one of the IMAGE_... controls, or draw them inside KUIML with CANVAS.

Attributes brief detailed show all inherited

	Name	Description	Default
	render_script	inline script that draws onto the current context using Graphics APIExperimental. You can access the current graphics context object in the script using the Kt::Graphics::GetCurrentContext() function	empty
	requires	List of objects expected by the scriptForces the KUIML engine to expose the listed objects to the scripting engine. for example: 'my_object.*;my_string'	empty
	script_handles_opacity	if true, the render script should handle the opacity of the widget	false
Methods
	Invalidate	Call this method to redraw the canvas (on value changes or on timer)
Inherited from widgets
	opacity	Opacity of the widget0% is totally transparent, 100% is opaque	100%
	visible	Show/hide the widget, does not impact the layout, as opposed to the cell's display attribute	true
	enabled	Enable/disable the widget. When disabled, the widget does not react to mouse or keyboard events. it is displayed but inactive.	true
	cursor	Cursor to display when the mouse is over the active part of the widgetThis property works only for mouse sensitive (aka non-passive) widgets	System...
	mouse_sensitive	Enables or disables mouse control on widgetsWarning: for advanced users only.Do not use this property that is set according to widget type, except if you really want to force mouse sensitivity (to enable cursor change etc.)	Dependi...
	auto_focus	Enables or disables auto focusWhen enabled, a widget gets focus when the mouse is over it (you do not need to click on it). When a widget has focus it receives the keyboard events.auto_focus works for mouse_sensitive widgets	Dependi...
	handled_keys	List of keys handled by the widget, which will trigger key_pressed and key_released events(Experimental) Use the character correponding to the selected key or 'all' for all keys, or one of the following for system keys: F1-F20, Enter, Space, Tab, Esc, Shift, Alt, Cmd, Ctrl, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, PgUp, PgDn, Insert, Delete, BackSpace	empty
	default_keys_enabled	Enable or disable the default keys handled natively by the widget.(Experimental) you can disable the default keyboard behavior for any widget if you want to write your own.	true
	buffered	Enable or disable buffering of the widget.For example CANVAS with buffered="true" will make the render_script to run less often, because the buffered image would be used for redraw.	false
	transparent	Enable or disable transparency for the widget.Can help with performance issues.	false
Drag and Drop Attributes
	drag_source_ids	List of objects to use as drag sources for drag and drop operations (each one may have a different applicative type)	empty
	drag_applicative_types	List 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_operations	List of drag operations allowed. 'copy' or 'move' operations are currently supported	empty
	drag_context	Optional string to define the serialization context used for the drag operation	empty
	drag_enabled	Enable drag operations on the widget	true
	drop_target_ids	List of objects to use as drop targets for drag and drop operations (each one may have a different applicative type)	empty
	drop_applicative_types	List 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 string	empty
	drop_file_types	List 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 files	empty
	dropped_file_path_string_ids	List of string objects than can receive the path of a file that was dropped, for each drop target defined by the drop_target_ids list	empty
	drop_context	Optional string to define the deserialization context used for the drop operation	empty
	drop_enabled	Enable drop operations on the widget	true
Exposed Attributes And Events (read-only)
	mouse_over	Set to true when the mouse is over the active area of the widget	false
	mouse_down	Bit 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 zeroExperimental	0
	mouse_position.x	Horizontal position of the mouse in the widget (relative to the upper left corner of the widget)The value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_position.y	Vertical position of the mouse in the widget (relative to the upper left corner of the widget)The value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_screen_position.x	Absolute horizontal position of the mouse on the screenThe value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_screen_position.y	Absolute vertical position of the mouse on the screenThe value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_wheel_up	Event fired when a mouse wheel is turned upExperimental
	mouse_wheel_down	Event fired when a mouse wheel is turned upExperimental
	focus	Set to true when the widget has keyboard focus and receives keyboard events	false
	key_pressed	Event fired when a key (filtered by the handled_key list) is pressedExperimental
	key_pressed.key	last virtual key that was pressedExperimental: enum values are subject to change, check the displayed value (text)
	key_pressed.characters	Character(s) corresponding to the last pressed key, if it was a character key (key_pressed.key=0)Experimental
	key_released	Event fired when a key (filtered by the handled_key list) is released
	key_released.key	last virtual key that was releasedExperimental: enum values are subject to change, check the displayed value (text)
	key_released.characters	Character(s) corresponding to the last released key, if it was a character key (key_released.key=0)Experimental
	dragging	Set to true when a dragging operation is in progress for this widget	false
	drag_operation	type of the current drag operation (None, Copy, Move)Experimental: enum values are subject to change	enumera...
	dropping	Set to true when a dropping operation is in progress for this widget	false
	drop_operation	type of the current drop operation (None, Copy, Move)Experimental: enum values are subject to change	enumera...
Inherited from cell
Properties Relative to Parent Cell
	v_align	Vertical alignment of the cell in its parent cell	center
	h_align	Horizontal alignment of the cell in its parent cell	center
	h_position	Horizontal position of the cell in its parent cellIf defined, it deactivates the h_align property. Use this attribute for horizontal pixel-positioning. The position is relative to the parent cell
	v_position	Vertical position of the cell in its parent cellIf defined, it deactivates the v_align property. Use this attribute for vertical pixel-positioning. The position is relative to the parent cell
	h_offset	horizontal offset of the cell from the position computed by the layout engineUsing this property lets you move a cell without changing the layout around it. The position is relative to the parent cell	0
	v_offset	vertical offset of the cell from the position computed by the layout engineUsing this property lets you move a cell without changing the layout around it. The position is relative to the parent cell	0
	flex	flexibility of the cellThis attribute is used when the parent cell is a row or a column and has free space to distribute to children cells (for example for a fixed size parent cell that is larger than the sum of its children cell sizes). The remaining space will be distributed among children cells according to the flex attribute value	0
	display	include/exclude the cell from the layoutWhen set to false, the content of the cell is not displayed (not visible) AND is not taken into account to compute the layout (the cell is ignored)	true
Cell Properties
	layout_type	Selects a layout type: row, column or layer_stackDetermines how the children cells will be disposed inside the cell: as a row, a column or a stack of layers (each cell on top of each other, the first cell in the background, and the last one on the foreground)	column
	width	Forced width of the cellIf not present, the width will be automatically computed from the children cells widths and layout rules
	min_width	minimum width allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not smaller than min_width pixels
	max_width	maximum width allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not larger than max_width pixels
	height	Forced height of the cellIf not present, the height will be automatically computed from the children cells heights and layout rules
	min_height	minimum height allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not smaller than min_height pixels
	max_height	maximum height allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not larger than max_height pixels
	margin	margin of the cellMay be overridden by the h_margin or v_margin attributes	0
	h_margin	Horizontal margin of the cell	0
	v_margin	Vertical margin of the cell	0
	spacing	Space between children cells	0
	spacing_flex	Flex value to allocate extra space between children cellsSee the flex attribute for more details	0
	internal_v_align	Vertical alignment of children cells group inside the cellThis attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'column' type cell, the horizontal alignment being set individually for each child cell	center
	internal_h_align	Horizontal alignment of children cells group inside the cellThis attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'row' type cell, the vertical alignment being set individually for each child cell	center
	reflow	when 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 accordinglyvalid only for columns with fixed height or rows with fixed width	false
	flip	display children cells in reverse order (right to left or bottom to top)currently valid only for COLUMN and ROW elements	false
Inheritable properties: these text properties are inherited by children cells (and can be overridden)
	font_face	Name of the font for text contained in the cell and sub cellsFonts are not the same on all systems, so you should carefuly select the fonts or ensure that users have specific fonts installed	empty
	font_size	Size of the font for any text contained in the cellIf the value starts with + or -, the resulting font size is incremented by this value from the current font size. If the value ends with a %, the resulting font size is the corresponding proportion of the current font size. This value is inherited by children cells but can be overridden	System...
	font_size_mode	Defines how font size is computed to select the right font.Default value is cell mode for backward compatibility reasons but it has been deprecated. It is however recommended to use "character" mode for more precise font size selection. Using the cell size to select the font is less precise and not compatible with standard font sizes expressed in character height.	cell
	font_weight	Weight of the font for any text contained in the cellThe value is inherited by children cells but can be overridden	System...
	font_style	Style of the font for any text contained in the cellThe value is inherited by children cells but can be overridden	System...
	font_quality	Quality of the fontThe value is inherited by children cells but can be overridden	System...
	font_escapement	Escapement (angle in degrees) of the fontThe value is inherited by children cells but can be overridden. If the escapement of the font is non null, the formating options of the text widgets won't apply	0
	text_decoration	Decoration of the text for any text contained in the cellThe value is inherited by children cells but can be overridden	System...
	text_color	Color of any text contained in the cellThe value is inherited by children cells but can be overridden	System...
Common attributes
	id	Identifier of the elementThe id of an element has to be globally unique. Two elements cannot have the same identifier	empty

	Name	Value type	Default	Description	Comment
	render_script	script	empty	inline script that draws onto the current context using Graphics API	Experimental. You can access the current graphics context object in the script using the Kt::Graphics::GetCurrentContext() function
	requires	list of ';' separated identifiers or wildcards	empty	List of objects expected by the script	Forces the KUIML engine to expose the listed objects to the scripting engine. for example: 'my_object.*;my_string'
	script_handles_opacity	boolean	false	if true, the render script should handle the opacity of the widget
Methods
	Invalidate			Call this method to redraw the canvas (on value changes or on timer)
Inherited from widgets
	opacity	percentage	100%	Opacity of the widget	0% is totally transparent, 100% is opaque
	visible	boolean	true	Show/hide the widget, does not impact the layout, as opposed to the cell's display attribute
	enabled	boolean	true	Enable/disable the widget. When disabled, the widget does not react to mouse or keyboard events. it is displayed but inactive.
	cursor	cursor	System Default	Cursor to display when the mouse is over the active part of the widget	This property works only for mouse sensitive (aka non-passive) widgets
	mouse_sensitive	boolean	Depending on widget	Enables or disables mouse control on widgets	Warning: for advanced users only.Do not use this property that is set according to widget type, except if you really want to force mouse sensitivity (to enable cursor change etc.)
	auto_focus	boolean	Depending on widget, usually 'true' for mouse_sensitive widgets	Enables or disables auto focus	When enabled, a widget gets focus when the mouse is over it (you do not need to click on it). When a widget has focus it receives the keyboard events.auto_focus works for mouse_sensitive widgets
	handled_keys	list of keys, separated by ;	empty	List of keys handled by the widget, which will trigger key_pressed and key_released events	(Experimental) Use the character correponding to the selected key or 'all' for all keys, or one of the following for system keys: F1-F20, Enter, Space, Tab, Esc, Shift, Alt, Cmd, Ctrl, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, PgUp, PgDn, Insert, Delete, BackSpace
	default_keys_enabled	boolean	true	Enable or disable the default keys handled natively by the widget.	(Experimental) you can disable the default keyboard behavior for any widget if you want to write your own.
	buffered	boolean	false	Enable or disable buffering of the widget.	For example CANVAS with buffered="true" will make the render_script to run less often, because the buffered image would be used for redraw.
	transparent	boolean	false	Enable or disable transparency for the widget.	Can help with performance issues.
Drag and Drop Attributes
	drag_source_ids	list of identifiers, separated by ';'	empty	List of objects to use as drag sources for drag and drop operations (each one may have a different applicative type)
	drag_applicative_types	list of applicative types, separated by ';'	empty	List 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)
	drag_operations	list of drag operations separated by ';'	empty	List of drag operations allowed. 'copy' or 'move' operations are currently supported
	drag_context	string	empty	Optional string to define the serialization context used for the drag operation
	drag_enabled	boolean	true	Enable drag operations on the widget
	drop_target_ids	list of identifiers, separated by ';'	empty	List of objects to use as drop targets for drag and drop operations (each one may have a different applicative type)
	drop_applicative_types	list of applicative types, separated by ';'	empty	List 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 string
	drop_file_types	list of file types wildcards, separated by ';'	empty	List 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 files
	dropped_file_path_string_ids	list of string object identifiers types, separated by ';'	empty	List of string objects than can receive the path of a file that was dropped, for each drop target defined by the drop_target_ids list
	drop_context	string	empty	Optional string to define the deserialization context used for the drop operation
	drop_enabled	boolean	true	Enable drop operations on the widget
Exposed Attributes And Events (read-only)
	mouse_over	boolean	false	Set to true when the mouse is over the active area of the widget
	mouse_down	integer	0	Bit 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 zero	Experimental
	mouse_position.x	integer		Horizontal position of the mouse in the widget (relative to the upper left corner of the widget)	The value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_position.y	integer		Vertical position of the mouse in the widget (relative to the upper left corner of the widget)	The value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_screen_position.x	integer		Absolute horizontal position of the mouse on the screen	The value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_screen_position.y	integer		Absolute vertical position of the mouse on the screen	The value is valid only when the mouse is over the widget or being dragged out of it (experimental)
	mouse_wheel_up	event		Event fired when a mouse wheel is turned up	Experimental
	mouse_wheel_down	event		Event fired when a mouse wheel is turned up	Experimental
	focus	boolean	false	Set to true when the widget has keyboard focus and receives keyboard events
	key_pressed	event		Event fired when a key (filtered by the handled_key list) is pressed	Experimental
	key_pressed.key	enum		last virtual key that was pressed	Experimental: enum values are subject to change, check the displayed value (text)
	key_pressed.characters	string		Character(s) corresponding to the last pressed key, if it was a character key (key_pressed.key=0)	Experimental
	key_released	event		Event fired when a key (filtered by the handled_key list) is released
	key_released.key	enum		last virtual key that was released	Experimental: enum values are subject to change, check the displayed value (text)
	key_released.characters	string		Character(s) corresponding to the last released key, if it was a character key (key_released.key=0)	Experimental
	dragging	boolean	false	Set to true when a dragging operation is in progress for this widget
	drag_operation	boolean	enumeration	type of the current drag operation (None, Copy, Move)	Experimental: enum values are subject to change
	dropping	boolean	false	Set to true when a dropping operation is in progress for this widget
	drop_operation	boolean	enumeration	type of the current drop operation (None, Copy, Move)	Experimental: enum values are subject to change
Inherited from cell
Properties Relative to Parent Cell
	v_align	vertical alignment	center	Vertical alignment of the cell in its parent cell
	h_align	horizontal alignment	center	Horizontal alignment of the cell in its parent cell
	h_position	position in pixels		Horizontal position of the cell in its parent cell	If defined, it deactivates the h_align property. Use this attribute for horizontal pixel-positioning. The position is relative to the parent cell
	v_position	position in pixels		Vertical position of the cell in its parent cell	If defined, it deactivates the v_align property. Use this attribute for vertical pixel-positioning. The position is relative to the parent cell
	h_offset	position in pixels	0	horizontal offset of the cell from the position computed by the layout engine	Using this property lets you move a cell without changing the layout around it. The position is relative to the parent cell
	v_offset	position in pixels	0	vertical offset of the cell from the position computed by the layout engine	Using this property lets you move a cell without changing the layout around it. The position is relative to the parent cell
	flex	real number	0	flexibility of the cell	This attribute is used when the parent cell is a row or a column and has free space to distribute to children cells (for example for a fixed size parent cell that is larger than the sum of its children cell sizes). The remaining space will be distributed among children cells according to the flex attribute value
	display	boolean	true	include/exclude the cell from the layout	When set to false, the content of the cell is not displayed (not visible) AND is not taken into account to compute the layout (the cell is ignored)
Cell Properties
	layout_type	'row' or 'column' or 'layer_stack'	column	Selects a layout type: row, column or layer_stack	Determines how the children cells will be disposed inside the cell: as a row, a column or a stack of layers (each cell on top of each other, the first cell in the background, and the last one on the foreground)
	width	number of pixels or percentage (1.1)		Forced width of the cell	If not present, the width will be automatically computed from the children cells widths and layout rules
	min_width	number of pixels		minimum width allowed for the cell	When set, the layout engine will ensure that the width of the cell is not smaller than min_width pixels
	max_width	number of pixels		maximum width allowed for the cell	When set, the layout engine will ensure that the width of the cell is not larger than max_width pixels
	height	number of pixels or percentage (1.1)		Forced height of the cell	If not present, the height will be automatically computed from the children cells heights and layout rules
	min_height	number of pixels		minimum height allowed for the cell	When set, the layout engine will ensure that the width of the cell is not smaller than min_height pixels
	max_height	number of pixels		maximum height allowed for the cell	When set, the layout engine will ensure that the width of the cell is not larger than max_height pixels
	margin	number of pixels	0	margin of the cell	May be overridden by the h_margin or v_margin attributes
	h_margin	number of pixels	0	Horizontal margin of the cell
	v_margin	number of pixels	0	Vertical margin of the cell
	spacing	number of pixels	0	Space between children cells
	spacing_flex	real number	0	Flex value to allocate extra space between children cells	See the flex attribute for more details
	internal_v_align	vertical alignment	center	Vertical alignment of children cells group inside the cell	This attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'column' type cell, the horizontal alignment being set individually for each child cell
	internal_h_align	horizontal alignment	center	Horizontal alignment of children cells group inside the cell	This attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'row' type cell, the vertical alignment being set individually for each child cell
	reflow	boolean	false	when 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 accordingly	valid only for columns with fixed height or rows with fixed width
	flip	boolean	false	display children cells in reverse order (right to left or bottom to top)	currently valid only for COLUMN and ROW elements
Inheritable properties: these text properties are inherited by children cells (and can be overridden)
	font_face	string	empty	Name of the font for text contained in the cell and sub cells	Fonts are not the same on all systems, so you should carefuly select the fonts or ensure that users have specific fonts installed
	font_size	number of pixels or percentage (1.2.2), with or without +/- sign (1.2.2)	System default value	Size of the font for any text contained in the cell	If the value starts with + or -, the resulting font size is incremented by this value from the current font size. If the value ends with a %, the resulting font size is the corresponding proportion of the current font size. This value is inherited by children cells but can be overridden
	font_size_mode	"cell" or "character"	cell	Defines how font size is computed to select the right font.	Default value is cell mode for backward compatibility reasons but it has been deprecated. It is however recommended to use "character" mode for more precise font size selection. Using the cell size to select the font is less precise and not compatible with standard font sizes expressed in character height.
	font_weight	'bold' or 'normal'	System default value	Weight of the font for any text contained in the cell	The value is inherited by children cells but can be overridden
	font_style	'italic' or 'normal'	System default value	Style of the font for any text contained in the cell	The value is inherited by children cells but can be overridden
	font_quality	'default' or 'no_anti_alias' or 'anti_alias' or 'cleartype'	System default value	Quality of the font	The value is inherited by children cells but can be overridden
	font_escapement	real number	0	Escapement (angle in degrees) of the font	The value is inherited by children cells but can be overridden. If the escapement of the font is non null, the formating options of the text widgets won't apply
	text_decoration	'underline' or 'none'	System default value	Decoration of the text for any text contained in the cell	The value is inherited by children cells but can be overridden
	text_color	color	System default value	Color of any text contained in the cell	The value is inherited by children cells but can be overridden
Common attributes
	id	identifier	empty	Identifier of the element	The id of an element has to be globally unique. Two elements cannot have the same identifier

Canvas drawing example

<CANVAS id="shapes"
width="300" height="300" opacity=".8" render_script="
Kt::Graphics::Context@ ctx = Kt::Graphics::GetCurrentContext();
if (@ctx != null) {
double w = this.width;
double h = this.height;
/* scale to virtual coordinates from -1 to 1 */
ctx.transform.Scale(w/2,h/2);
ctx.transform.Translate(1,1);
/* set color in RGB (0 to 1 values) */
double r = 0.2;
double g = 0.4;
double b = 0.6;
ctx.source.SetRGBA(r,g,b,1);
/* calculate nice line width for that virtual coords */
double lineW=3*2/sqrt(w*w+h*h);
ctx.settings.lineWidth=lineW;
/* start new path */
ctx.path.Clear();
/* add three crossed lines */
ctx.path.MoveTo(-.7,-.7);
ctx.path.LineTo(.7,.7);
ctx.path.MoveTo(.7,-.7);
ctx.path.LineTo(-.7,.7);
ctx.path.MoveTo(-1,0);
ctx.path.LineTo(1,0);
/* add a circle */
ctx.path.NewSubPath();
ctx.path.Arc(0, 0, 1-lineW/2 , 0, 360);
/* now stroke (draw) the path */
ctx.StrokePath();
/* add radial gradient */
Kt::Graphics::GradientDrawPattern@ gradient=ctx.patterns.NewRadialGradient(0,0,0,0,0,1);
gradient.AddColorStopRGBA(0,r,g,b,0);
gradient.AddColorStopRGBA(1,r,g,b,0.9);
gradient.SelectAsSource();
ctx.FillPath();
/* move to center */
ctx.path.MoveTo(0,0);
/* scale back */
ctx.transform.Scale(2/w,2/w);
/* now add text */
ctx.path.Clear();
Kt::Graphics::DrawPattern@ rgba=ctx.patterns.NewRGBA(1,0.9,0.6,1);
rgba.SelectAsSource();
ctx.font.SelectFontFace("Georgia");
ctx.font.SetFontSize(70);
ctx.path.Text("ABC");
/* fill text */
ctx.FillPath();
/* add a borderline (stroke) for text */
ctx.source.SetRGBA(0,0,0,0.5);
ctx.settings.lineWidth=1;
ctx.StrokePath();
}" requires="shapes.width;shapes.height" />

How to make a simple slider using CANVAS

To demonstrate how you can create your own controls we'll create a simple "volume" slider.

First we create a PARAM that keeps the volume value and add a simple PARAM_TEXT_CONTROL to see and control it.

<PARAM id="volume" min="0" max="100" default="50" unit="%" />
<PARAM_TEXT_CONTROL param_id="volume" />

Now let's add the CANVAS element that draws a simple rectangle according to the volume level, and add an ACTION_TRIGGER that makes the CANVAS redraw each time the volume value changes.

<CANVAS id="slider_canvas"
width="200" height="30" opacity="1" render_script="
/* convert parameter value to 0..1 range */
double param_normalized = (volume-volume.min)/(volume.max-volume.min);
/* get canvas width and height */
double w = this.width;
double h = this.height;
/* get the context object to draw */
auto ctx = Kt::Graphics::GetCurrentContext();
if (@ctx != null) {
/* draw a rectangle with calculated width */
ctx.source.SetRGB(0.29, 0.701, 0.956);
ctx.path.Clear();
ctx.path.Rectangle(0, 0, w*param_normalized, h/2);
ctx.FillPath();
}
" requires="slider_canvas.*;volume.*" />
<ACTION_TRIGGER event_id="volume.value_changed" script="slider_canvas.Invalidate()" requires="slider_canvas.Invalidate" />

We can wrap the CANVAS element into a LAYER_STACK and add an INVISIBLE_PARAM_SLIDER on top of it to make it react to mouse events.

<PARAM id="volume" min="0" max="100" default="50" unit="%" />
<ROW>
<LAYER_STACK>
<CANVAS id="slider_canvas"
width="200" height="30" opacity="1" render_script="
/* convert parameter value to 0..1 range */
double param_normalized = (volume-volume.min)/(volume.max-volume.min);
/* get canvas width and height */
double w = this.width;
double h = this.height;
/* get the context object to draw */
auto ctx = Kt::Graphics::GetCurrentContext();
if (@ctx != null) {
/* draw a rectangle with calculated width */
ctx.source.SetRGB(0.29, 0.701, 0.956);
ctx.path.Clear();
ctx.path.Rectangle(0, 0, w*param_normalized, h);
ctx.FillPath();
}
" requires="slider_canvas.*;volume.*" />
<INVISIBLE_PARAM_SLIDER param_id="volume" width="100%" height="100%" orientation="horizontal" />
</LAYER_STACK>
<PARAM_TEXT_CONTROL param_id="volume" width="65"/>
</ROW>
<ACTION_TRIGGER event_id="volume.value_changed" script="slider_canvas.Invalidate()" requires="slider_canvas.Invalidate" />

Let's make slider a little more interesting by adding several bars that are clipped by the rectangular area.

<PARAM id="volume" min="0" max="100" default="50" unit="%" />
<ROW>
<LAYER_STACK>
<CANVAS id="slider_canvas"
width="200" height="30" opacity="1" render_script="
/* convert parameter value to 0..1 range */
double param_normalized = (volume-volume.min)/(volume.max-volume.min);
/* get canvas width and height */
double w = this.width;
double h = this.height;
/* get the context object to draw */
auto ctx = Kt::Graphics::GetCurrentContext();
if (@ctx != null) {
/* create a rectangle with calculated width */
ctx.source.SetRGB(0.29, 0.701, 0.956);
ctx.path.Clear();
ctx.path.Rectangle(0, 0, w*param_normalized, h);
/* make this a clip area, so future drawing is clipped */
ctx.ClipWithPath();
/* make several bars of different height */
ctx.path.Clear();
double columns = 16;
double colw = (w/columns)*0.7;
for (int n=0;n<columns;n++) {
double colx = n*(w/columns);
double colh = h*((n+1)/columns);
ctx.path.Rectangle(colx, h-colh, colw, colh);
}
ctx.FillPath();
}
" requires="slider_canvas.*;volume.*" />
<INVISIBLE_PARAM_SLIDER param_id="volume" width="100%" height="100%" orientation="horizontal" />
</LAYER_STACK>
<PARAM_TEXT_CONTROL param_id="volume" width="65"/>
</ROW>
<ACTION_TRIGGER event_id="volume.value_changed" script="slider_canvas.Invalidate()" requires="slider_canvas.Invalidate" />

We can paint with a gradient instead of a solid flat color.

<PARAM id="volume" min="0" max="100" default="100" unit="%" />
<ROW>
<LAYER_STACK>
<CANVAS id="slider_canvas"
width="200" height="30" opacity="1" render_script="
/* convert parameter value to 0..1 range */
double param_normalized = (volume-volume.min)/(volume.max-volume.min);
/* get canvas width and height */
double w = this.width;
double h = this.height;
/* get the context object to draw */
auto ctx = Kt::Graphics::GetCurrentContext();
if (@ctx != null) {
/* create a rectangle with calculated width */
ctx.source.SetRGB(0.29, 0.701, 0.956);
ctx.path.Clear();
ctx.path.Rectangle(0, 0, w*param_normalized, h);
/* make this a clip area, so future drawing is clipped */
ctx.ClipWithPath();
/* make several bars of different height */
ctx.path.Clear();
double columns = 16;
double colw = (w/columns)*0.7;
for (int n=0;n<columns;n++) {
double colx = n*(w/columns);
double colh = h*((n+1)/columns);
ctx.path.Rectangle(colx, h-colh, colw, colh);
}
/* add a colorful gradient */
auto gradient = ctx.patterns.NewLinearGradient(0,0,w,0);
gradient.AddColorStopRGBA(0, .5,.76,.52, 1);
gradient.AddColorStopRGBA(0.55, .5,.76,.52, 1);
gradient.AddColorStopRGBA(0.63, 1,0.86,0, 1);
gradient.AddColorStopRGBA(0.75, 1,0.86,0, 1);
gradient.AddColorStopRGBA(1, 0.92,0.33,0.18, 1);
gradient.SelectAsSource();
ctx.FillPath();
}
" requires="slider_canvas.*;volume.*" />
<INVISIBLE_PARAM_SLIDER param_id="volume" width="100%" height="100%" orientation="horizontal" />
</LAYER_STACK>
<PARAM_TEXT_CONTROL param_id="volume" width="65"/>
</ROW>
<ACTION_TRIGGER event_id="volume.value_changed" script="slider_canvas.Invalidate()" requires="slider_canvas.Invalidate" />

If you want to make this slider reusable you can wrap into the TEMPLATE element, like shown in this demo: How to make simple knobs.

Find more drawing examples in CANVAS Graphics API.