Template:Canvas snippet

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
	# 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();