How to manipulate Canvas elements

Canvas - the FlightGear 2D drawing API
Canvas - Main Page Canvas News - for the latest developments Shiva Alternatives - ongoing work for Core Profile support Canvas Efforts - projects using the Canvas system Canvas FAQs - frequently asked questions Canvas - Getting started Canvas Development (core) Canvas Troubleshooting (core) Canvas Sandbox (core) PUI2Canvas (PUI/XML Parser) Canvas GUI Canvas Widgets Canvas Maps Canvas Snippets
RFC
Canvas Instancing Howto:New Canvas Execution Model Canvas SVG Canvas Popout Windows Canvas Scenery Overlays
Frameworks
Canvas Map API (soon deprecated!) Canvas MapStructure Canvas MapStructure Layers MapStructure Snippets Canvas Radar Canvas Animation Framework (WIP) Canvas Plotting Framework (WIP) Canvas MFD Framework Canvas ND Framework Canvas PFD Framework Canvas MCDU Framework Canvas EFB Framework Canvas Wrappers Canvas Glass Cockpit Efforts
Tutorials
Howto:Getting started with Canvas Howto: Canvas Troubleshooting Howto:Adding a canvas to a GUI dialog (PUI!) Howto:Creating a Canvas GUI dialog file (New) Howto:Dynamic Liveries via Canvas (new) Howto:Creating a Canvas GUI Widget Howto:Add a 2D canvas instrument to your aircraft Howto:Parsing 2D Instruments using the Canvas Howto:Creating fullscreen Canvas applications Howto:Use SVG inside a Canvas Howto:Extend the Canvas SVG module Howto:Serializing a Canvas to SVG Howto:Canvas applications as Nasal submodules Howto:Using raster images and nested canvases Canvas HUD Howto:Project 3D to 2D coordinates on desktop canvas
Reference
Canvas Element Group Image Map Path Text Canvas Nasal API MessageBox Layout System Canvas GUI API Canvas draw library Event Handling
Related
Canvas Properties Unifying the 2D rendering backend via canvas Howto:Use a Camera View in an Instrument Howto:Extending Canvas to support rendering 3D models Howto:Extending Canvas to support MathGL
To be ported
Navigation display Map FGCanvas Canvas Nasal/JavaScript Subset
Deprecated by Canvas
Complex Glass Cockpit Avionics
(click on headings to toggle)

The purpose of this document is to introduce the plot2D tool and provide basic information about its use.
Plot2D is nothing more than a collection of helpers that aims to facilitate the task of coding. It makes intensive use of the Canvas API, a mandatory reference for those who intend to refine the result beyond what is offered by plot2D.
It is assumed here that you already have a minimal knowledge about Canvas.
For now Plot2D resides in the SpokenGCA addon (and you may download it from here) , but the idea is that in the future it could be included in the $FG-ROOT/Nasal/canvas directory.

"Create" helpers

line

Plots a line as <group>'s child. Parameters: (group, from, to, color)

• from as [x,y] in pixels.
• to as [x,y] in pixels.
• color optional as [r,g,b] or "#rrggbb", Black by default.

example	Screenshot
var window = canvas.Window.new([200,200],"dialog") .set("title","Plot2D demo" ); var myCanvas = window.createCanvas() .set("background", "#eeeeee"); var root = myCanvas.createGroup(); var myGroup = root.createChild("group"); canvas.plot2D.line(myGroup,[20,20],[50,100]); canvas.plot2D.line(myGroup,[20,180],[180,20],'#ee0000') .setStrokeLineWidth(2);

---

hzLine

Plots an horizontal line as <group>'s child.
Parameters: (group, from, length, color)

• from as [x,y] in pixels.
• length in pixels.
• color optional as [r,g,b] or "#rrggbb". Black by default.

---

vtLine

Plots a vertical line as <group>'s child.
Parameters: (group, from, length, color)

• from as [x,y] in pixels.
• length in pixels.
• color optional as [r,g,b] or "#rrggbb". Black by default.

---

dashedLine

Plots a vertical line as <group>'s child.
Parameters: (group, from, length, color)

• from as [x,y] in pixels.
• to as [x,y] in pixels.
• dash optional dash&space lengths in pixels, 8 pixels by default.
• color optional as [r,g,b] or "#rrggbb". Black by default.

example

Screenshot

var window = canvas.Window.new([200,200],"dialog").set("title","Plot2D demo" ); var myCanvas = window.createCanvas().set("background", "#eeeeee"); var root = myCanvas.createGroup(); var myGroup = root.createChild("group"); canvas.plot2D.dashedLine(myGroup,[20,20],[150,120]).setStrokeLineWidth(2); var (red,blue) = ['#ee0000', [0,0,1] ]; canvas.plot2D.hzLine(myGroup,[30,40],120,red); canvas.plot2D.vtLine(myGroup,[120,180],-110,blue);

---

rectangle

Plots a rectangle as <group>'s child.
Parameters: (group, size ,origin=nil, color="#0", fill=nil, rounded=nil)

• size as [width,height] in pixels.
• origin optional as [x,y] in pixels, [0,0] by default.
• color optional border color as [r,g,b] or "#rrggbb" or nil (for no border). Black by default.
• fill optional fill color as [r,g,b] or "#rrggbb", No filled by default.
• rounded optional corner radius in pixels, Not rounded by default.

---

grid

Plots a grid as <group>'s child.
Parameters: (group, size, dx, dy, origin=nil, color="#0", border=1)

• size as [width,height] in pixels.
• dx tiles width in pixels.
• dy tiles height in pixels.
• color optional grid color as [r,g,b] or "#rrggbb". Black by default.
• origin optional as [x,y] in pixels, [0,0] by default.
• border optional as boolean, True by default.

example

Screenshot

var window = canvas.Window.new([200,200],"dialog").set("title","Plot2D demo" ); var myCanvas = window.createCanvas().set("background", "#eeeeee"); var root = myCanvas.createGroup(); var myGroup = root.createChild("group"); var (red,blue,grey) = ['#ee0000', [0,0,1], [.8,.8,.8] ]; ## Note: to eventually handle an element, you must assign a variable: var myRect = canvas.plot2D.rectangle(myGroup,[40,160],[15,20],red,grey,10); myRect.setStrokeLineWidth(3); canvas.plot2D.grid(myGroup,[120,100],20,25,[70,30],blue).setRotation(30*D2R);

---

polyline

parameters: (group, xSet, ySet, color="#0", symmetrical=)

Plots a polyLine as <group>'s child.

• xSet as [x0,...,xn] in pixels.
• ySet as [y0,...,yn] in pixels.
• color optional grid color as [r,g,b] or "#rrggbb". Black by default.
• symmetrical optional string, may be 'x', 'y', 'xy' or 'yx'.

example

Screenshot

var window = canvas.Window.new([200,200],"dialog").set("title","Plot2D demo" ); var myCanvas = window.createCanvas().set("background", "#eeeeee"); var root = myCanvas.createGroup(); var myGroup = root.createChild("group"); var (red,blue,grey) = ['#ee0000', [0,0,1], [.8,.8,.8] ]; ## with default values: canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[162,130,174,138,146]); canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100]); ## with symmetrical = 'x': canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100],'#0',"x") .setTranslation(-10,-10); ## with symmetrical = 'y': canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100],'#0',"y") .setTranslation(-10,-10); ## with symmetrical = 'xy': canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100],'#0',"x") .setTranslation(-10,-10); ## with symmetrical = 'yx': canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100],'#0',"x") .setTranslation(-10,-10);

grid

1. p.del();
2. var p=g
3. p.setTranslation(0,100);
4. var s='yx';
5. print(s[0]);

p=gca.plot2D.redim(p,[1.2,1.2],'center-bottom');