|
Drawing instructions provide a wide range of instructions for drawing text, shapes and images on the following:
•Interface Backgrounds
•Analog and Digital Plots
•Canvas Controls
•Meters/Gauges
The Debug/CLI Window is a great way to test drawing instructions, view the list of them and get help. For help, enter ! to see the list of instructions, select then right-click one for a pop-up, or enter the instruction and press F1 for the help.
.png)
For colors used in drawing controls, please see Colors.
Many instructions support rotation as well. Please see the various drawing instructions.
Drawing on the Main Interface
When drawing on the main interface, the coordinate system is 0,0 at upper-left to 100,100 at the lower-right.
!drawLine 0,0,100,100,RED
!drawCircle 50,50,20,BLUE,5
.png)
Drawing instructions starting with '!' are not saved with the interface file.
Constant drawings ARE saved with the interface and begin with '@'.
@drawLine 0,0,100,100,RED
@drawCircle 50,50,20,BLUE,5
Saving of constant drawing can be disabled with the constFileSave property.
Rotation can be used for image animation. Start a new Interface, add a serial control with a controller sending sin_cos_digital code, and place the following code in Main Interface's Event Code, and connect:
<analog>!deleteDrawing // delete last drawing
<analog>!drawImage 30,30,70,,\icons\fan.png,{ [ain0] * 2 } // draw a fan icon and rotate based on [ain0]
.png)
Other animations can be performed using indexed images with the Canvas Control.
Drawing on Child Interfaces
Drawing on Child Interfaces is the same as using the main interface but the instruction is: intName.draw...
!myInterface.drawLine 0,0,100,100,RED
!myInterface.drawCircle 50,50,20,BLUE,5
Constant drawings are support in the same manner. It has its own constFileSave property.
Drawing on Canvas Canvas Controls
Drawing on Canvas Controls operates the same as on Interfaces, from 0,0, to 100, 100.
!canvTest.drawLine 0,0,100,100,RED
!canvTest.drawCircle 50,50,20,BLUE,5
Constant drawings are support in the same manner. It has its own constFileSave property.
Drawing on Meters/Gauges
Drawing on Canvas Controls operates the same as on Interfaces, from 0,0, to 100, 100.
!metPower.drawLine 0,0,100,100,RED
!metPower.drawCircle 50,50,20,BLUE,5
Constant Drawing are NOT supported.
Drawing on Analog and Digital Plots
Analog and Digital Plots support a different coordinate system. By default, the coordinates on the analog plot are relative to the X (in seconds) and Y values. On the digital plots the Y-Axis is always 0 to 100.
!plot.drawLine 0,0,100,100,RED // draws from Axis coordinates 0,0 to 100,100
To draw outside of the plotting area, the drawFull instructions are used to draw on the full control area.
The plots also support absolute coordinates with 0,0 being LOWER-left and 100,100 being UPPER-right. This is annotated in by suffixing an 'a' to the coordinate. Relative and absolute can be intermixed.
!plot.drawLine 0a,0a,100a,100a,RED // draws from absolute coordinates 0,0 to 100,100
Again, the drawFull instructions can be used to draw outside of the plotting areas.
Using Data for Drawing
To facilitate drawing based on incoming data value and time drawing instructions can reference the analog values, such as [ain0] to [ain99] or for plotted data [plot.ch0] to [plot.ch9], or the prior data's value using [plot.lastValueCh0] to [plot.lastValueCh9].
They can also access the time the data arrived and the time of the last arrival (prior) using [plot.timeCh0] and [plot.lastTimeCh0].
For example the following code in the plot's event code will plot red bars based on the incoming data and times. Note that visibility channel 0 was turned off to prevent the analog plotting line from being seen.
<analog>!this.drawRect [this.lastTimeCh0],0,[this.timeCh0],[ain0],RED
.png)
The use of this in event code will cause this to be replaced with the name of the control when the code runs.
Another interesting use would be using lines to draw from the 0,0 out using relative coordinates based on incoming data (this example used the example sin-cos sketch installed with MakerPlot-J).
Placing this code in the Plot's Event Code and turning off plotting on all channels:
<analog>!this.drawLine 0,0,[ain0],[ain1],BLUE
.png)
As with all instructions, math can be performed on data as well, such as receiving data in radians and converting to degrees. Please see Standard and Post-Fix Math.
!plot.drawLine 20,50,80,100,RED,,{ deg([ain0]) }
Please see the Analog Plot's Drawing for more information on drawing options.
Normal and Constant Drawings
Th drawing areas support both normal and constant drawings. A constant drawing is one that will not be deleted when an interface is reset, additionally, these drawings are saved when saved (to the plot files for analog and digital plots).
A normal drawing starts with !.
!drawLine 0,0,100,100,RED
A Constant Drawing starts with @.
@drawLine 100,0,0,100,BLUE
Clearing and Deleting Drawings
The property maxDrawings for the interface or controls sets the maximum number of non-constant drawings to keep in memory. After this limit is reached, the oldest drawing instructions will be deleted.
The last normal drawing (!draw...) can be deleted for the main interface, child interfaces or controls using:
!deleteDrawing or !name.deleteDrawing
The last normal drawing (!draw...) can be deleted for the main interface, child interfaces or controls using:
!deleteConstDrawing or !name.deleteConstDrawing
All normal drawings (!draw...) can be deleted for the main interface, child interfaces or controls using:
!clearDrawings or !name.clearDrawings
The last normal drawing (!draw...) can be deleted for the main interface, child interfaces or controls using:
!clearDrawings or !name.clearConstDrawings
Canvas Control
The Canvas Control is a specialized control for drawing and displaying images based on data.
Media Paths
For information on media and file paths, please see Portable Interface Development
|
.png){kind=spacer}
