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

From FlightGear wiki
Jump to: navigation, search
m (https://forum.flightgear.org/viewtopic.php?f=37&t=36946&p=362269#p362150)
(See also)
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Stub}}
 
{{Stub}}
 +
 +
== Status ==
 +
Last updated 02/2020
  
 
== Background ==
 
== Background ==
No easy way to browse a list of available fonts in the base package
+
No easy way to browse a list of available [[PUI]] fonts in the base package in-sim, i.e.: https://sourceforge.net/p/flightgear/fgdata/ci/next/tree/Fonts/
  
 
== Idea ==  
 
== Idea ==  
Line 8: Line 11:
  
 
== Approach ==
 
== Approach ==
since FlightGear uses OpenSceneGraph, and since [http://www.openscenegraph.org/index.php/documentation/user-guides/61-osgplugins OSG supports TXF ],  we might use Nasal/Canvas to display a list of fonts and even preview them inside fgfs (?)
+
since FlightGear uses OpenSceneGraph, and since [http://www.openscenegraph.org/index.php/documentation/user-guides/61-osgplugins 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:  
 
To see for yourself, modify the Canvas image example to point to a font file:  
Line 18: Line 21:
  
 
Alternatively, it would be possible to render the menubar completely using the Canvas system: [[Howto:Making_a_Canvas_Menubar]]
 
Alternatively, it would be possible to render the menubar completely using the Canvas system: [[Howto:Making_a_Canvas_Menubar]]
 +
 +
== Proof of Concept ==
 +
<syntaxhighlight lang="nasal">
 +
# 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
 +
</syntaxhighlight>
 +
 +
== Next ==
 +
We can adapt the code by using a layout with a vertical scrollArea, so one image per font file can be added/shown: [[Canvas_Snippets#Canvas_ScrollArea]]
 +
 +
To populate the vector of file names, we can use the [[Nasal_library#directory.28.29|directory()]] API:
 +
 +
<syntaxhighlight lang="nasal">
 +
var fgroot = getprop("/sim/fg-root");
 +
var font_dir = fgroot ~ "/Fonts/";
 +
 +
var files = directory(font_dir);
 +
 +
debug.dump( files );
 +
 +
</syntaxhighlight>
 +
 +
To only look for specific files, we can split each file name using the dot as separator:
 +
 +
<syntaxhighlight lang="nasal">
 +
var myfilename ="Foobar24.txf";
 +
 +
var (basename,extension) = split(".", myfilename);
 +
 +
print("Basename: ", basename);
 +
print("Extension: ", extension);
 +
 +
</syntaxhighlight>
 +
 +
== See also ==
 +
* https://sourceforge.net/p/flightgear/fgdata/ci/next/tree/Fonts/
 +
* http://chateau-logic.com/content/ttf-txf-font-conversion
 +
* https://fileinfo.com/extension/txf
 +
* 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 ==
 +
{{Appendix}}
 +
 +
 +
[[Category:PUI]]

Latest revision as of 12:53, 24 February 2020

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 PUI 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

Next

We can adapt the code by using a layout with a vertical scrollArea, so one image per font file can be added/shown: Canvas_Snippets#Canvas_ScrollArea

To populate the vector of file names, we can use the directory() API:

var fgroot = getprop("/sim/fg-root");
var font_dir = fgroot ~ "/Fonts/";

var files = directory(font_dir);

debug.dump( files );

To only look for specific files, we can split each file name using the dot as separator:

var myfilename ="Foobar24.txf";

var (basename,extension) = split(".", myfilename);

print("Basename: ", basename);
print("Extension: ", extension);

See also

References

References