Skinnable canvas window

From FlightGear wiki
Jump to navigation Jump to 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 =[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 =[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 },...
        ];, 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 =[575,290]);
 sk.window.set("title","oscilloscope" ).clearFocus();
 sk.canvas.set("background", '#224422');
 myGroup =  sk.root.createChild("group");