Hi fellow wiki editors!

To help newly registered users get more familiar with the wiki (and maybe older users too) there is now a {{Welcome to the wiki}} template. Have a look at it and feel free to add it to new users discussion pages (and perhaps your own).

I have tried to keep the template short, but meaningful. /Johan G

Skinnable canvas window

From FlightGear wiki
Jump to: navigation, search
Stand-alone PAR instrument

skinnable.nas implements the skinnable class. It inherits from canvas.
Skinnable objects enables the creation of Graphic UIs overlapping images with hotspot areas. Oscilloscope and PAR addons are examples of its use.


new: func(size, title)

size mandatory as [width, height] vector, the window dimension.
title optional as string , the window title. Empty by default.

 var sk = canvas.skinnable.new([575,290]);


Skinnable objects includes 2 methods:

addSkin: func(filename)

loads the image file and creates Canvas Image element.

filename as the absolute file path. The file must be a .png or a .jpg image.

var sk = canvas.skinnable.new([575,290]);

listen_mouse_events: func(caller, Hots)

Hots as vector of hashes as:
  • {type:"click", x:<x>, y:<y>, action:<action>, tol:<tol>, parms:<parms> }
  • {type:"wheel", x:<x>, y:<y>, action:<action>, tol:<tol> }
  • {type:"cursor", x:<x>, y:<y>, style:<style>, tol:<tol>, tip:<tipText> }
  • {type:"tip", x:<x>, y:<y>, text:<tipText>, tol:<tol> }
where x and y are the local coords of the hotspot.
action (as string) is a function. The event will call the caller['action'] method.
tol is the tolerance, the hotspot radious.
parms (as vector, scalar or nil) will be passed to caller.action() as arguments.
style (as string) is the cursor style to be used over the hotspot.
tipText is the string to be shown over the hotspot. Use an empty string for none.

e.g. (borrowed from Oscilloscope)
var wheelHots = [
	{type:'wheel', x:417, y:82, action:'set1Gain', tol:12 },
	{type:'cursor', x:417, y:82, style:'hand',      tol:12,  tip:'Ch-1 Gain' },
	{type:'click',  x:427, y:82, action:'set1Gain', tol:6 ,  parms:1  },
	{type:'click',  x:403, y:82, action:'set1Gain', tol:6 ,  parms:-1 },...
 me.sk.listen_mouse_events(caller:me, Hots:Hots);



returns the window size as [width, height].


returns the canvas.Window object.


returns the canvas object.


returns the root group/layer.

 var sk = canvas.skinnable.new([575,290]);
 sk.window.set("title","oscilloscope" ).clearFocus();
 sk.canvas.set("background", '#224422');
 myGroup =  sk.root.createChild("group");