Canvas draw library: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
m (→‎CanvasDrawDev add-on: add credits / attribution to avoid misconceptions)
Line 3: Line 3:


= CanvasDrawDev add-on =
= CanvasDrawDev add-on =
{{Note|As of 12/2018, the add-on is largely based on GPL'ed code written originally by {{Usr|Rodolfo}} (rleibner on the forums) as part of the [[Spoken GCA]] and Oscilloscope add-ons.}}
{{Note|As of 12/2018, the add-on is largely based on GPL'ed code written originally by {{Usr|Rodolfo}} (rleibner on the forums) as part of the [[Spoken GCA]], [[PAR instrument]] and [[Oscilloscope addon|Oscilloscope]] add-ons.}}


The purpose of this add-on is to develop and grow a nasal library of canvas drawing
The purpose of this add-on is to develop and grow a nasal library of canvas drawing

Revision as of 11:05, 22 December 2018

Note  Canvas draw is currently work in progress. You can test and improve it by downloading the CanvasDrawDev add-on. The canvas.draw library will hopefully be ready to use in FG version 2019.1

CanvasDrawDev add-on

Note  As of 12/2018, the add-on is largely based on GPL'ed code written originally by Rodolfo (rleibner on the forums) as part of the Spoken GCA, PAR instrument and Oscilloscope add-ons.

The purpose of this add-on is to develop and grow a nasal library of canvas drawing functions. This lib should eventually be moved to FGDATA/Nasal once it has reached a sufficient quality.

Motivation

There are basically two ways to populate a canvas, loading an SVG file which has been created with some tool like inkscape, or by writing a nasal program that calls drawing functions of the canvas API.

Both ways are valid and have their pros and cons.

The canvas API is quite limited (at the time of writing), only a few basic commands are available. There should be more drawing commands to allow rapid development of canvas instruments for other aircraft.

Goals

  • Make the code flexible and powerful so people will like to use it
  • Provide complex drawing commands needed for e.g. compass rose or speed tapes
  • Provide easy to use styles
  • Support API versioning to allow later extensions of the library

canvas.draw API

Note  This API is subject to change without notice until it has been released with FG in FGDATA

draw module

All draw methods expect a canvas group element 'cgroup' as first parameter to draw on.

draw.colors

A hash with some standard colors like white, black, red, green, blue, cyan, magenta, yellow, orange. Just in case you need them ;)

circle()

circle(cgroup, radius, center_x = nil, center_y = nil)

radius in pixel

center_x, center_y optional center of circle

ellipse()

ellipse(cgroup, radius, center_x = nil, center_y = nil)

radius_x, radius_y in pixel

center_x, center_y optional center of ellipse

arc()

arc(cgroup, radius, center, from_deg = nil, to_deg = nil)

draw an arc (part of a circle) with given radius around center

center center point of circle as vector [x,y]

from_deg, to_deg start and end of arc in degree of compass rose (0 = North, 90 = East, ...); defaults to 0, 360 (full circle)

rectange()

rectangle(cgroup, width, height, x = 0, y = 0, rounded = nil)

width, height dimensions in pixels

x, y top-left corner of rectangle

rounded optional radius of corners in pixel

square()

square(cgroup, length, center_x = 0, center_y = 0, cfg = nil)

shorthand for rectangle with width = height = length

deltoid()

deltoid (cgroup, dx, dy1, dy2, x = 0, y = 0)

Deltoid draws a kite (dy1 > 0 and dy2 > 0) or a arrow head (dy2 < 0).

dx width

dy1 height of "upper" triangle

dy2 height of "lower" triangle, < 0 draws an arrow head

x, y position of tip

rhombus() / diamond()

rhombus: func(cgroup, dx, dy, center_x = 0, center_y = 0)

draws a diamond

dx width

dy height

grid()

Draw horizontal and verical lines. Two signatures are available

1) (cgroup, [sizeX, sizeY], dx, dy, border = 1)

2) (cgroup, nx, ny, dx, dy, border = 1)

size [width, height] of grid in pixels.

nx, ny number of lines in x/y direction

dx, dy distance between lines in pixels.

border optional boolean, draw lines at sizeX and sizeY, true by default.

Marks

Marks can be used to create scales / gauges.

marksLinear()

marksLinear(cgroup, orientation, num_marks, interval, style)

Draw marks for a linear scale on a canvas group, e.g. speed tape. Mark lines are draws perpendicular to baseline.

orientation of baseline, 0 = horizontal, 1 = vertical

num_marks number of marks to draw

interval distance between marks (pixel)

style marksStyle hash with more parameters

marksCircular()

marksCircular(cgroup, radius, interval, phi_start = 0, phi_stop = 360, style = nil)

draw marks along an arc or circle of given radius

radius of baseline (circle)

interval distance of marks in degree

phi_start position of first mark in degree (default 0 = north)

phi_stop position of last mark in degree (default 360)

draw.style

Base class for styles.

draw.marksStyle

Parameter hash for drawing marks (see above).

new()

Create a new style instance.

var myMarkStyle = canvas.draw.marksStyle.new()

setMarkLength()

Set length of marker in %interval or %radius

setMarkOffset()

Set alignment of markers.

You can use marksStyle.MARK_LEFT marks left of vertical baseline

MARK_UP marks above horizontal baseline

MARK_CENTER marks centered on baseline

MARK_RIGHT marks right of vertical baseline

MARK_DOWN marks below horizontal baseline

var myMarkStyle = canvas.draw.marksStyle.new()
myMarkStyle.setMarkOffset(myMarkStyle.MARK_LEFT);

setMarkWidth()

Set line width in pixel.

setSubdivisions()

Set number of subdivisions (default = 0).

setSubdivisionLength()

Set length of subdivision marker in %marker_length