2,734
edits
Canvas snippets: Difference between revisions
Jump to navigation
Jump to search
m
Some fixes
Red Leader (talk | contribs) m (Some fixes) |
|||
| Line 1: | Line 1: | ||
{{Stub}} | {{Stub}} | ||
{{-}} | |||
{{ | |||
{{Canvas Navigation}} | {{Canvas Navigation}} | ||
| Line 10: | Line 7: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| | | [[Special:UploadWizard|Upload requested]] || | ||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
| Line 36: | Line 33: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
| Line 45: | Line 41: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[File:Snippets-canvas-dialog.png|left|thumb|This is what the [[Nasal]]/[[Canvas]] snippet will look like once you pasted it into the [[Nasal Console]] and click "Execute".]] || {{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]].}} | | [[File:Snippets-canvas-dialog.png|left|thumb|This is what the [[Nasal]]/[[Canvas]] snippet will look like once you pasted it into the [[Nasal Console]] and click "Execute".]] || {{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]].}} | ||
| Line 63: | Line 59: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
| Line 70: | Line 65: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[File:Canvas Snippets-raster image.png|thumb|Canvas snippet demonstrating how to load a raster image]] || | | [[File:Canvas Snippets-raster image.png|thumb|Canvas snippet demonstrating how to load a raster image]] || | ||
| Line 78: | Line 73: | ||
var path = "Textures/Splash1.png"; | var path = "Textures/Splash1.png"; | ||
# create an image child for the texture | # create an image child for the texture | ||
var child=root.createChild("image") | var child = root.createChild("image") | ||
.setFile(path) | |||
.setTranslation(100, 10) | |||
.setSize(130, 130); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
| Line 92: | Line 86: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[File:Canvas-raster-images-via-url.png|thumb|screen shot demonstrating how Nasal and Canvas can be used to display raster images downloaded on demand]] || | | [[File:Canvas-raster-images-via-url.png|thumb|screen shot demonstrating how Nasal and Canvas can be used to display raster images downloaded on demand]] || | ||
| Line 115: | Line 109: | ||
# create an image child for the texture | # create an image child for the texture | ||
var child=root.createChild("image") | var child=root.createChild("image") | ||
.setFile( url ) | |||
.setTranslation(45,22) # centered, in relation to dialog coordinates | |||
.setSize(310,155); # image dimensions | |||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
| Line 128: | Line 121: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[File:CanvasText-Hello-World.png|thumb|Screen shot showing the CanvasText example contributed by Necolatis]] | | [[File:CanvasText-Hello-World.png|thumb|Screen shot showing the CanvasText example contributed by Necolatis]] | ||
| {{Note|This assumes that you already have a top-level root group set up, and named it '''root'''.}} | |||
| | |||
{{Note|This assumes that you already have a top-level root group set up, and named it '''root'''.}} | |||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
var myText = root.createChild("text") | var myText = root.createChild("text") | ||
| Line 148: | Line 139: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[File:Canvas-Layout-Label-example-by-Necolatis.png|thumb|Canvas demo: Layouts and Labels (by Necolatis)]] | | [[File:Canvas-Layout-Label-example-by-Necolatis.png|thumb|Canvas demo: Layouts and Labels (by Necolatis)]] | ||
| {{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called '''myLayoutItem'''.}} | |||
| | |||
{{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called '''myLayoutItem'''.}} | |||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
# create a new layout | # create a new layout | ||
| Line 168: | Line 157: | ||
myLayout.addItem(label2); | myLayout.addItem(label2); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
| Line 174: | Line 163: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[File:Canvas-demo-layouts-and-buttons-by-Necolatis.png|thumb|Canvas snippet: buttons and layouts (by Necolatis)]] | | [[File:Canvas-demo-layouts-and-buttons-by-Necolatis.png|thumb|Canvas snippet: buttons and layouts (by Necolatis)]] | ||
| | |||
{{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called '''myLayoutItem'''.}} | {{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called '''myLayoutItem'''.}} | ||
| Line 199: | Line 189: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<syntaxhighlight lang="nasal" enclose="div"> | |- | ||
| [[File:Canvas-toggle-button-snippet-by-Necolatis.png|thumb|Canvas toggle button demo by Necolatis]] | |||
| <syntaxhighlight lang="nasal" enclose="div"> | |||
# create a new layout | # create a new layout | ||
var myLayout = canvas.HBoxLayout.new(); | var myLayout = canvas.HBoxLayout.new(); | ||
| Line 223: | Line 215: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
| Line 229: | Line 221: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
|[[File:Snippets-canvas-input-dialog.png|thumb|Canvas input dialog]] | |[[File:Snippets-canvas-input-dialog.png|thumb|Canvas input dialog]] | ||
| Line 239: | Line 231: | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
| Line 259: | Line 251: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[File:Snippets-canvas-mapstructure-dialog.png|thumb|[[MapStructure]] layers shown in a Canvas GUI dialog]] | | [[File:Snippets-canvas-mapstructure-dialog.png|thumb|[[MapStructure]] layers shown in a Canvas GUI dialog]] | ||
| | | {{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. Equally, this snippet assumes that your canvas is named '''myCanvas'''.}} | ||
{{Note|This assumes that you already have a top-level root group set up, and named it '''root''', just change this variable if you want it to be rendered elsewhere. Equally, this snippet assumes that your canvas is named '''myCanvas'''.}} | |||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
| Line 278: | Line 269: | ||
TestMap.addLayer(factory: canvas.SymbolLayer, type_arg: type.name, visible: type.vis, priority: type.zindex,); | TestMap.addLayer(factory: canvas.SymbolLayer, type_arg: type.name, visible: type.vis, priority: type.zindex,); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||