Promotic
WikipediaLinkedInYoutubeTwitterFacebook

Draw - page of object PmgCanvas

Description:
Algorithm definition (JavaScript) for onDraw drawing event that allows to draw into the CanvasCtx drawing area.
Configuration items:
onDrawThis drawing event is called if the object graphics needs to be redrawn.
Parameters:
pEvent(Object) Reference to object describing detailed information about the specific event.
pEvent.GetCtx(state)(Object) Returns the CanvasCtx object, that represents the drawing area. The meaning of the state parameter:
0 - An empty drawing area is obtained, any existing content is discarded. All visible content is drawn again from the start.
1 - The drawing area in current state is obtained, so the existing content is preserved. This way, the new drawings can be added, for example the value progression where the new points are added. The pEvent.CtxExt.isReset() method can be used to detect whether the drawing are is non-initialized (empty) or contains drawings from previous sessions.
pEvent.GetVar()(Object) Returns the variable of the Pmg object on the "Variables" page with defined name. See PmgObject.Vars.
pEvent.GetParentVar()(Object) Returns the variable of parent Pmg object on the "Variables" page with defined name. The "In onDraw the pEvent.GetParentVar() method will be used" configurator must me enabled, in order to access the parent object variables. See PmgObject.Vars.
pEvent.CtxDx(Long) The width of drawing area (in pixels). The drawing area has the same dimensions as the PmgCanvas object.
pEvent.CtxDy(Long) The height of the drawing area (in pixels).
pEvent.CtxExt(Object) Reference to the CanvasCtxExt object.
pEvent.Methods(Object) Designer's methods for drawing.
pEvent.ViewerType(Long) Flag where the the CanvasCtx object is drawn:
0 - development mode
1 - runtime mode (local)
2 - runtime mode(web browser)
Auxiliary methodsBecause some drawings can be very complex it may be handy to divide the whole drawing into assistant user drawing methods that can be created on the same level as the onDraw event.

Assistant drawing methods have the same parameters as the onDraw event and can also have its own extra parameters. It is recommended that the methods have at least one extra parameter ctx, so it does not to be obtained individually - see example:

 

One method draws the scale (named for example DrawScale) and another method draws the value curve (named for example DrawCurve). In the onDraw event, there is just a simple script that calls these methods.

JavaScriptSelect and copy to clipboard

var ctx = pEvent.GetCtx(0);
pEvent.Methods.DrawScale(ctx);
pEvent.Methods.DrawCurve(ctx);
Note:
The drawing algorythms are always written here in JavaScript language, regardless on the setting of "Scripting language settings" configurator in the PmaPanel object.
 

The PmgCanvas object allows automated calling of the onDraw event for redrawing the draw area CanvasCtx if needed:

1) If the drawing area is not initialised (empty) after opening the panel or after changing the dimensions of the PmgCanvas object, or after calling the CtxReset method. In this case the drawing area is always empty (transparent).
2) If the input variables (Variables) of the PmgCanvas object were changed. The drawing method may request an existing drawing area, see pEvent.GetCtx(1), or more commonly non-initialized (empty) drawing area, see pEvent.GetCtx(0).
3) If the variables (Variables) of the parent Pmg object (background) PmgCanvas were changed (valid for embedded object - foreground).

The drawing area is redrawn in the onDraw event only if changed. If no change occurs, then it is not necessary to use the script for redrawing the area and the remembered appearance is used. The onDraw event can access only the values of local variables (Variables) of the PmgCanvas object, that are currently used as data interface of the drawing function. It can also use the Pm object and the drawing area object CanvasCtx. The scripting interface of the CanvasCtx object enables most of the methods and properties for 2D drawing used in HTML5 in the <canvas> tag.

See also:

History:
Pm8.02.05: Created
PROMOTIC 9.0.7 SCADA system documentation - MICROSYS, spol. s r.o.

Send page remarkContact responsible person
© MICROSYS, spol. s r. o.Tavičská 845/21 703 00 Ostrava-Vítkovice