Howto:Creating a Font Browser using Nasal and Canvas

From FlightGear wiki
Revision as of 11:03, 24 February 2020 by Hooray (talk | contribs) (https://forum.flightgear.org/viewtopic.php?f=37&t=36946&p=362269#p362269)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
This article is a stub. You can help the wiki by expanding it.

Background

No easy way to browse a list of available fonts in the base package

Idea

Implement a simple font browser using Nasal and Canvas

Approach

since FlightGear uses OpenSceneGraph, and since OSG supports TXF , we might use Nasal/Canvas to display a list of fonts and even preview them inside fgfs (?)

To see for yourself, modify the Canvas image example to point to a font file:

If this works, this can be trivially extended to show a list of all fonts including a preview, by adapting this snippet: Canvas_Snippets#Canvas_ScrollArea

Alternatively, it would be possible to render the menubar completely using the Canvas system: Howto:Making_a_Canvas_Menubar

Proof of Concept

var (width,height) = (320,160);
var title = 'Font Browser (by downpilot)';

# 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();

# path is relative to $FG_ROOT (base package)
var path = "Fonts/Helvetica.png";
# create an image child for the texture
var child = root.createChild("image")
    .setFile(path)
    .setTranslation(100, 10)
    .setSize(130, 130);