Template:Canvas snippet

From FlightGear wiki
Jump to navigation Jump to search
WIP.png Work in progress
This article or section will be worked on in the upcoming hours or days.
See history for the latest developments.

Add description

Flag of None.png
# FIXME: Add Nasal script
The following template description is not displayed when the template is inserted in an article.

Goal

This template can be used to add snippets to Canvas Snippets in a more efficient way.

Usage

{{canvas snippet
| description  = 
| script       = 
| link         = 
| contributors = 
| note         = 
| dependencies = 
| image        = 
| alt          = 
}}

The only mandatory parameters are description and script.

description
Short description.
script
Nasal code snippet. Will be syntax highlighted.
link
Link to longer article
contributors
Name of contributors.
note
Text for a note.
dependencies
Required root group, name of canvas, variables etc. and also canvas dimensions and colors.
image
Link to illustrative screenshot, without a File: or Image: prefix.
alt
Caption for the screenshot.

Examples

{{canvas snippet
| description  = Creating a Canvas GUI Window
| script       = 
# create a new window, dimensions are 320 x 160, using the dialog decoration (i.e. titlebar)
var window = canvas.Window.new([320,160],"dialog");

# adding a canvas to the new window and setting up background colors/transparency
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));

# Using specific css colors would also be possible:
# myCanvas.set("background", "#ffaac0");

# creating the top-level/root group which will contain all other elements/group
var root = myCanvas.createGroup();
| link         = 
| contributors = Hooray
| note         = This example uses so called method chaining, if you're not familiar with the concept, please see: [[Object_Oriented_Programming_with_Nasal#More_on_methods:_Chaining|Method Chaining]].
| dependencies = 
| image        = Snippets-canvas-dialog.png
| alt          = This is what the [[Nasal]]/[[Canvas]] snippet will look like once you pasted it into the [[Nasal Console]] and click "Execute".
}}


Creating a Canvas GUI Window

By Hooray|- This example uses so called method chaining, if you're not familiar with the concept, please see: Method Chaining.
This is what the Nasal/Canvas snippet will look like once you pasted it into the Nasal Console and click "Execute".
# create a new window, dimensions are 320 x 160, using the dialog decoration (i.e. titlebar)
var window = canvas.Window.new([320,160],"dialog");

# adding a canvas to the new window and setting up background colors/transparency
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));

# Using specific css colors would also be possible:
# myCanvas.set("background", "#ffaac0");

# creating the top-level/root group which will contain all other elements/group
var root = myCanvas.createGroup();