Howto:Creating a Font Browser using Nasal and Canvas: Difference between revisions
(https://forum.flightgear.org/viewtopic.php?f=37&t=36946) |
|||
(18 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{Stub}} | {{Stub}} | ||
== 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 [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: | |||
* [[Canvas_Snippets#Adding_Raster_Images]] | |||
* [[Canvas_Image]] | |||
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 == | |||
<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 16: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
- 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
References
|