Skip to main content
Version: 8.1

Vision - Paintable Canvas

Component Palette Icon:


The Paintable Canvas component is a component that can be custom "painted" using Jython scripting. By responding to the component's repaint event, a designer can use Java2D to draw anything within the component's bounds. Whenever any dynamic properties on the component change, the component is re-painted automatically, making it possible to create dynamic, vector-drawn components that can represent anything.

This component is an advanced component for those who are very comfortable using scripting. It is not user-friendly. The upside is that it is extraordinarily powerful, as your imagination is the only limit with what this component can be.

When you first drop a Paintable Canvas onto a window, you'll notice that it looks like a placeholder. If you switch the Designer into preview mode, you'll see an icon of a pump displayed. The pump is an example that comes pre-loaded into the Paintable Canvas. By editing the component's event scripts, you can dissect how the pump was drawn. You will notice that the script uses Java2D. You can read more about Java2D here. You will notice that as you resize the pump, it scales beautifully in preview mode. Java2D is a vector drawing library, enabling you to create components that scale very gracefully.

  • Don't forget that you can add dynamic properties to this component, and use the styles feature. Use the values of dynamic properties in your repaint code to create a dynamic component. The component will repaint automatically when these values change.
  • You can create an interactive component by responding to mouse and keyboard events
  • You can store your custom components on a custom palette and use them like standard components.


NameDescriptionProperty TypeScriptingCategory
Background ColorThe background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.Color.backgroundAppearance
BorderThe border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.
Note: The border is unaffected by rotation.

Changed in 8.1.21
As of 8.1.21, the "Button Border" and "Other Border" options are removed.
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE
FocusableIf the component is focusable, it will receive keyboard input and can detect if it is the focus owner.boolean.focusableBehavior
FontFont of text on this component.Font.fontAppearance
Foreground ColorThe foreground color of the component. See Color Selector.Color.foregroundAppearance
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
StylesContains the component's styles.Dataset.stylesAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon


Component Functions

This component does not have component functions associated with it.

Extension Functions

This component does not have extension functions associated with it.

Event Handlers

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page



The component comes prescripted to render the following pump: