How to manipulate Canvas elements: Difference between revisions
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
For now '''Plot2D''' resides in the '''SpokenGCA''' addon, but the idea is that in the future it could be included in the $FG-ROOT/Nasal/canvas directory.<br /> | For now '''Plot2D''' resides in the '''SpokenGCA''' addon, but the idea is that in the future it could be included in the $FG-ROOT/Nasal/canvas directory.<br /> | ||
If you have not the SpokenGCA addon installed, you may download '''''plot2D.nas''''' from [https://sourceforge.net/p/flightgear/fgaddon/HEAD/tree/trunk/Addons/SpokenGCA/plot2D.nas here], put it into your ''$FG-HOME/Nasal/'' folder and then execute: | If you have not the SpokenGCA addon installed, you may download '''''plot2D.nas''''' from [https://sourceforge.net/p/flightgear/fgaddon/HEAD/tree/trunk/Addons/SpokenGCA/plot2D.nas here], put it into your ''$FG-HOME/Nasal/'' folder and then execute: | ||
<syntaxhighlight lang= | <syntaxhighlight lang="nasal"> | ||
var root = getprop("/sim/fg-root"); | var root = getprop("/sim/fg-root"); | ||
io.load_nasal( root ~ '/Nasal/plot2D.nas', "canvas" ); | io.load_nasal( root ~ '/Nasal/plot2D.nas', "canvas" ); | ||
Line 22: | Line 22: | ||
! example !! Screenshot | ! example !! Screenshot | ||
|- | |- | ||
| <syntaxhighlight> | | <syntaxhighlight lang="nasal"> | ||
var window = canvas.Window.new([200,200],"dialog") | var window = canvas.Window.new([200,200],"dialog") | ||
.set("title","Plot2D demo" ); | .set("title","Plot2D demo" ); | ||
Line 61: | Line 61: | ||
! example !! Screenshot | ! example !! Screenshot | ||
|- | |- | ||
| <syntaxhighlight> | | <syntaxhighlight lang="nasal"> | ||
var window = canvas.Window.new([200,200],"dialog").set("title","Plot2D demo" ); | var window = canvas.Window.new([200,200],"dialog").set("title","Plot2D demo" ); | ||
var myCanvas = window.createCanvas().set("background", "#eeeeee"); | var myCanvas = window.createCanvas().set("background", "#eeeeee"); | ||
Line 96: | Line 96: | ||
! example !! Screenshot | ! example !! Screenshot | ||
|- | |- | ||
| <syntaxhighlight lang=" | | <syntaxhighlight lang="nasal"> | ||
var window = canvas.Window.new([200,200],"dialog").set("title","Plot2D demo" ); | var window = canvas.Window.new([200,200],"dialog").set("title","Plot2D demo" ); | ||
var myCanvas = window.createCanvas().set("background", "#eeeeee"); | var myCanvas = window.createCanvas().set("background", "#eeeeee"); | ||
Line 130: | Line 130: | ||
|- | |- | ||
| | | | ||
{{Note| This assumes that you already have a top-level root group set up, and his ''group'' child named '''myGroup'''. }} <syntaxhighlight lang=" | {{Note| This assumes that you already have a top-level root group set up, and his ''group'' child named '''myGroup'''. }} <syntaxhighlight lang="nasal"> | ||
var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ]; | var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ]; | ||
canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[52,20,64,28,36]); | canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[52,20,64,28,36]); | ||
Line 164: | Line 164: | ||
|- | |- | ||
| | | | ||
{{Note| This assumes that you already have a top-level root group set up, and his ''group'' child named '''myGroup'''. }} <syntaxhighlight lang=" | {{Note| This assumes that you already have a top-level root group set up, and his ''group'' child named '''myGroup'''. }} <syntaxhighlight lang="nasal"> | ||
var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ]; | var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ]; | ||
canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[52,20,64,28,36]); | canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[52,20,64,28,36]); |
Revision as of 19:29, 5 December 2017
The FlightGear forum has a subforum related to: Canvas |
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, but the idea is that in the future it could be included in the $FG-ROOT/Nasal/canvas directory.
If you have not the SpokenGCA addon installed, you may download plot2D.nas from here, put it into your $FG-HOME/Nasal/ folder and then execute:
var root = getprop("/sim/fg-root");
io.load_nasal( root ~ '/Nasal/plot2D.nas', "canvas" );
Once executed, you can try the examples given below.
"Create" helpers
line
Parameters: (group, from, to, color)
Plots a line as <group>'s child.
- 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
Parameters: (group, from, length, color)
Plots an horizontal line as <group>'s child.
- from as [x,y] in pixels.
- length in pixels.
- color optional as [r,g,b] or "#rrggbb". Black by default.
vtLine
Parameters: (group, from, length, color)
Plots a vertical line as <group>'s child.
- from as [x,y] in pixels.
- length in pixels.
- color optional as [r,g,b] or "#rrggbb". Black by default.
dashedLine
Parameters: (group, from, length, color)
Plots a vertical line as <group>'s child.
- 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
Parameters: (group, size ,origin=nil, color="#0", fill=nil, rounded=nil)
Plots a rectangle as <group>'s child.
- 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
Parameters: (group, size, dx, dy, origin=nil, color="#0", border=1)
Plots a grid as <group>'s child.
- 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); |
text
parameters: (group, text, origin=nil, size=nil, color="#0", align="left-baseline")
Plots a text as <group>'s child.
- text the text itself as string.
- origin optional as [x,y] in pixels, [0,0] by default.
- size optional font size and aspect as [<size-px>,<height/width>]. [11,1] by default.
- color optional font color as [r,g,b] or "#rrggbb". Black by default.
- align optional origin reference. "left-baseline" by default.
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'. Non symmetrical by default.
example | Screenshot | |
---|---|---|
var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ];
canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[52,20,64,28,36]);
## 3 vertices with default values:
canvas.plot2D.polyline(myGroup,[20,30,70],[15,55,65]);
canvas.plot2D.text(myGroup,'defaults',[75,25]);
## 3 vertices with symmetrical = 'x':
canvas.plot2D.polyline(myGroup,[20,30,70],[130,170,180],blue,"x");
canvas.plot2D.text(myGroup,'Symmetrical="x"',[20,195],,blue);
## 3 vertices with symmetrical = 'y':
canvas.plot2D.polyline(myGroup,[150,160,200],[90,130,140],red,"y");
canvas.plot2D.text(myGroup,'Symmetrical="y"',[198,180],,red,'right-baseline');
## 3 vertices with symmetrical = 'xy':
canvas.plot2D.polyline(myGroup,[50,60,100],[100,140,150],green,"xy");
canvas.plot2D.text(myGroup,'Symmetrical="xy"',[55,75],,green);
## 3 vertices with symmetrical = 'yx':
canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100],orange,"yx");
canvas.plot2D.text(myGroup,'Symmetrical="yx"',[12,125],,orange); |
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'. Non symmetrical by default.
example | Screenshot | |
---|---|---|
var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ];
canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[52,20,64,28,36]);
## 3 vertices with default values:
canvas.plot2D.polyline(myGroup,[20,30,70],[15,55,65]);
canvas.plot2D.text(myGroup,'defaults',[75,25]);
## 3 vertices with symmetrical = 'x':
canvas.plot2D.polyline(myGroup,[20,30,70],[130,170,180],blue,"x");
canvas.plot2D.text(myGroup,'Symmetrical="x"',[20,195],,blue);
## 3 vertices with symmetrical = 'y':
canvas.plot2D.polyline(myGroup,[150,160,200],[90,130,140],red,"y");
canvas.plot2D.text(myGroup,'Symmetrical="y"',[198,180],,red,'right-baseline');
## 3 vertices with symmetrical = 'xy':
canvas.plot2D.polyline(myGroup,[50,60,100],[100,140,150],green,"xy");
canvas.plot2D.text(myGroup,'Symmetrical="xy"',[55,75],,green);
## 3 vertices with symmetrical = 'yx':
canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100],orange,"yx");
canvas.plot2D.text(myGroup,'Symmetrical="yx"',[12,125],,orange); |