Howto:Creating a Canvas GUI Widget: Difference between revisions

Howto:Creating a Canvas GUI Widget (view source)

927 bytes added , 3 July 2016

20,741

edits

@@ Line 223: / Line 223: @@
 <syntaxhighlight lang="diff">
+</syntaxhighlight>
+To actually instantiate the widget, use something along these lines (via the Nasal Console):
+<syntaxhighlight lang="nasal">var (width,height) = (640,480);
+var title = 'MapStructure widget test';
+# create a new window, dimensions are WIDTH x HEIGHT, using the dialog decoration (i.e. titlebar)
+var window = canvas.Window.new([width,height],"dialog").set('title',title);
+# adding a canvas to the new window and setting up background colors/transparency
+var myCanvas = window.createCanvas();
+# 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();
+# create a new layout
+var myLayout = canvas.HBoxLayout.new();
+# assign it to the Canvas
+myCanvas.setLayout(myLayout);
+var map = canvas.gui.widgets.Map.new(root, canvas.style, {});
+myLayout.addItem(map);
 </syntaxhighlight>