Difference between revisions of "Howto:Creating a Font Browser using Nasal and Canvas"

From FlightGear wiki
Jump to: navigation, search
m (Approach)
m (Proof of Concept)
Line 49: Line 49:
     .setSize(130, 130); # size of the image
     .setSize(130, 130); # size of the image
== See also ==
* http://plib.sourceforge.net/fnt/
* https://en.wikibooks.org/wiki/Celestia/Internationalization#Building_.txf_font_texture_files
* https://www.opengl.org/archives/resources/code/samples/glut_examples/texfont/texfont.html
* https://fontforge.org/en-US/
== References ==

Revision as of 09:35, 24 February 2020

This article is a stub. You can help the wiki by expanding it.


Last updated 02/2020


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/


Implement a simple font browser using Nasal and Canvas


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")

# 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")
    .setTranslation(100, 10)
    .setSize(130, 130); # size of the image

See also