Howto:Creating a Font Browser using Nasal and Canvas

From FlightGear wiki
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.

Status

Last updated 02/2020

Background

No easy way to browse a list of available fonts in the base package in-sim, i.e.: https://sourceforge.net/p/flightgear/fgdata/ci/next/tree/Fonts/

Idea

Implement a simple font browser using Nasal and Canvas

Approach

since FlightGear uses OpenSceneGraph, and since OSG supports TXF file, we might be able use Nasal/Canvas to display a list of fonts and even preview them inside fgfs by simply rendering them as a raster image using the canvas image element.

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

# these are the dimensions of the window to be created
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);

# 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.txf";
# create an image child for the texture
var child = root.createChild("image")
    .setFile(path)
    .setTranslation(100, 10)
    .setSize(130, 130); # size of the image

See also


References

References