Canvas Image

Canvas - the FlightGear 2D drawing API
Canvas - Main Page Canvas News - for the latest developments Shiva Alternatives - ongoing work for Core Profile support 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: 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)

setPixel

• Version: FlightGear >= 2020.1
• Format: setPixel(x_position, y_position, color)
• Color Format: Can be a vector of size 3 or 4 (rgba as 0 to 1). Or a string with hexadecimal colors, for example "#7f3f1f".

Will change a single pixel to a specified color in the image. End the changing by calling dirtyPixels.

setPixel and fillRect is typically used when having to change an image alot. So to avoid using possibly hundreds of path elements on top of the image, changing the image pixel colors is more efficient.

dirtyPixels

• Version: FlightGear >= 2020.1

After operations on setPixel is done, the method dirtyPixels() must be run.

imageSize

• Version: Flightgear >= 2020.4

Returns the raw image size.

fillRect

• Version: FlightGear >= 2020.1
• Format: fillRect(dimension, color)
• Dimension Format: Can be a vector of size 4 [x_position,y_position,x_size,y_size]. The numbers is in absolute pixel coordinates, not 0 to 1.
• Color Format: Can be a vector of size 3 or 4 (rgba as 0 to 1). Or a string with hexadecimal colors, for example "#7f3f1f".

Will fill a specified rectangle inside the image with a specified color.

Properties

Additionally to the properties supported by every Canvas Element, Canvas Images support the following properties:

src

• Version: FlightGear >= 3.1
• Format: [<protocol>://]<path> (Supported protocols: canvas://, http://)

# Use file inside default search paths
img.set("src", "gui/dialogs/images/exit.png");

# Show canvas with index 3
img.set("src", "canvas://by-index/texture[3]");

# Download and show FlightGear logo
img.set("src", "http://wiki.flightgear.org/skins/common/images/icons-fg-135.png");

# Show canvas available as object
img.set("src", my_canvas.getPath());

fill

• Format: <color> (#rrggbb | rgb(r, g, b) | rgba(r, g, b, a))

where r, g, b must be in range 0 - 255 and a must be in range 0.0 - 1.0.

• Default: #ffffff (white)

Image background color. Each pixel is modulated with the background color. If the image shall be displayed unchanged use white as background color.

# White with alpha of 0.5 (=half transparent)
img.set("fill", "rgba(255,255,255,0.5)");

# red completely opaque
img.set("fill", "#ff0000");

slice

• Format: [<number>%?]{1,4} fill?
• Default: (empty) (disabled)

Image slicing (or scale-9, 9-slice) is a technique for dividing an image into nine regions. While scaling such an image the four corner regions will be shown undistorted, whereas the other regions are scaled to fit into the remaining parts. See the CSS3 border-image-slice property for more information.

# Top/bottom offset 10%, left/right offset 5%, fill center
img.set("slice", "10% 5% fill");

# All offsets 8 pixels, only draw border and do not fill center
img.set("slice", "8");

# Disable slicing
img.set("slice", "");

outset

• Format: [<number>%?]{1,4}
• Default: (empty) (disabled)

Let the image extend outside its specified size. The areas extending outside the original dimensions are just drawn but not included in the bounding box, and therefore ignored for event handling and distance/margin calculations. This could be used, for example, to draw a shadow around an element which is ignored for handling events.

# Top outset 10%, left/right outset 5%, bottom outset 10 pixels
img.set("outset", "10% 5% 10");

# All offsets 8 pixels
img.set("outset", "8");

# Disable outset
img.set("outset", "");

file (deprecated)

• Version: FlightGear <= 3.0

Same as src. Use src with FlightGear >= 3.1.