Howto:Creating a Font Browser using Nasal and Canvas: Difference between revisions
Jump to navigation
Jump to search
m (→Approach) |
|||
Line 21: | Line 21: | ||
== Proof of Concept == | == Proof of Concept == | ||
<syntaxhighlight lang="nasal"> | <syntaxhighlight lang="nasal"> | ||
# these are the dimensions of the window to be created | |||
var (width,height) = (320,160); | var (width,height) = (320,160); | ||
var title = 'Font Browser (by downpilot)'; | var title = 'Font Browser (by downpilot)'; | ||
Line 43: | Line 44: | ||
.setFile(path) | .setFile(path) | ||
.setTranslation(100, 10) | .setTranslation(100, 10) | ||
.setSize(130, 130); | .setSize(130, 130); # size of the image | ||
</syntaxhighlight> | </syntaxhighlight> |
Revision as of 11:06, 24 February 2020
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 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.
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.png";
# create an image child for the texture
var child = root.createChild("image")
.setFile(path)
.setTranslation(100, 10)
.setSize(130, 130); # size of the image