20,741
edits
Canvas troubleshooting: Difference between revisions
Jump to navigation
Jump to search
→Canvas Status
| Line 90: | Line 90: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== Canvas Status === | === Canvas Status === | ||
<syntaxhighlight lang="javascript"> | |||
var (width,height) = (320,320); | |||
var title = 'My new Window'; | |||
# 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); | |||
## | |||
# the del() function is the destructor of the Window | |||
# which will be called upon termination (dialog closing) | |||
# you can use this to do resource management (clean up timers, listeners or background threads) | |||
#window.del = func() | |||
#{ | |||
# print("Cleaning up window:",title,"\n"); | |||
# explanation for the call() technique at: http://wiki.flightgear.org/Object_oriented_programming_in_Nasal#Making_safer_base-class_calls | |||
# call(canvas.Window.del, [], me); | |||
#}; | |||
# 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(); | |||
#################################### | |||
var imgSize = 120; | |||
# path is relative to $FG_ROOT (base package) | |||
var path = "Textures/Splash1.png"; | |||
# create an image child for the texture | |||
var child = root.createChild("image") | |||
.setFile(path) | |||
.setTranslation((width-imgSize)/2, (height-imgSize)/2) | |||
.setSize(imgSize,imgSize); | |||
var text=root.createChild("text") | |||
.setText(getprop("/sim/aircraft")) | |||
.setFontSize(24, 0.9) # font size (in texels) and font aspect ratio | |||
.setColor(1,0,0,1) # red, fully opaque | |||
.setAlignment("center-center") # how the text is aligned to where you place it | |||
.setTranslation(width/2, height/2); # where to place the text | |||
</syntaxhighlight> | |||
=== Modifying the Property Browser to show a Canvas preview === | === Modifying the Property Browser to show a Canvas preview === | ||