Drawings

Coordinate System:

The coordinate system of the control is from 0, 0 in upper left to 100, 100 in lower right, with decimals. Drawing instructions, such as !canvText.drawLine 0,0,50,50,RED,10 to draw a line with a width of 10 between the given coordinates.

Normal Drawings:

Allows full use of all drawing instructions of lines, arcs, circles, etc. Please see Drawing Instructions for more information. When drawing instructions are issued, they are stored and repeated every time the Canvas ‘repaints’, which occurs automatically and often. To support the ability to draw graphics and update them to represent data, the last drawing instruction may be deleted using the deleteDrawing instruction to allow an ‘updated’ drawing to be made from current data. All drawing may be cleared using the clearDrawings instruction to allow redrawing graphics from the start. For example, the following code may be used for a canvas control in its Event Code which is triggered when data is processed and having access to the incoming data, such as analog values:
 !this.clearDrawings
 // draw filled rectangle from 20,100 to 40, 100 – analog 0 value to go up from bottom
 !this.drawFilledRect 20,100,40,{ 100 – ([ain0]) },RED         
 // draw filled rectangle from 60,100 to 80, 100 – analog 1 value to go up from bottom         
!this.drawFilledRect 60,100,80,{ 100 – ([ain1]) },GREEN               
Note: For math such as 100 - -10, enclose the second value in parenthesis to prevent errors: 100 – (-10)

A value string of 50, 80 received from the controller (or entered in the DEBUG Window) would produce the following, and update whenever new data is received:
 

The Thermometer indicator is an example of a using a background image and drawing a filled bar image on it to indicate the temperature from 0 to 100, with code of:
  // use user property to store calculated height of bar, 100 * .89 for maximum height
 <analog>!this.user={90 - [ain0]*.89}          
 // draw the fill bar from the height to the bulb
<analog>!this.drawImage 40,[this.user],60,91,/indicators/therm_fill.jpg 

The maxDrawings property allows automatic deletion of the oldest drawing instructions. This allows drawings to be performed based on data while keeping only the newest. For examples, the Ovals indicator draws oval based on incoming data, but only keeps the last 20 for some interesting effects as incoming data causes shifting ovals to be drawn.

The waitOnPaint property, when enabled, will not update drawing until the !canv.paint instruction is processed. This allows complex drawings to be ‘built’ using a number of drawing instructions before painting it to the control so that all drawings are buffered and appear at once for a smoother image.

Constant Drawings:

To support placing ‘constant drawing’ on the canvas, such as drawn images or permanent drawn text, constant drawings can be make that are not deleted with deleteDrawing or clearDrawings. To use these, use @ instead of ! for a drawing instruction:
 @canvTest.drawText 20,10,Temperatures,16

In the Event Code, this constant drawing can be done with the <load> event so that it occurs only on load. Constant drawings ARE saved to the file when the interface is saved if the property constFileSave is enabled (off by default). Constant drawings may be deleted with deleteConstDrawing for the last, and clearConstDrawings for all.

The property drawConstFirst can be enabled or not to allow constant drawings to be performed before or after standard drawing instructions.