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)
m (https://forum.flightgear.org/viewtopic.php?f=37&t=36946&p=362269#p362269)
Line 18: Line 18:
  
 
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">
 +
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);
 +
 +
 +
##
 +
# the del() function is the destructor of the Window
 +
# which will be called upon termination (dialog closing)
 +
# you can use this to do resource management (clean up timers, listeners or background threads)
 +
#window.del = func()
 +
#{
 +
#  print("Cleaning up window:",title,"\n");
 +
# explanation for the call() technique at: http://wiki.flightgear.org/Object_oriented_programming_in_Nasal#Making_safer_base-class_calls
 +
#  call(canvas.Window.del, [], me);
 +
#};
 +
 +
# 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);
 +
</syntaxhighlight>

Revision as of 07:03, 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 , we might use Nasal/Canvas to display a list of fonts and even preview them inside fgfs (?)

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

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


##
# the del() function is the destructor of the Window
# which will be called upon termination (dialog closing)
# you can use this to do resource management (clean up timers, listeners or background threads)
#window.del = func()
#{
#  print("Cleaning up window:",title,"\n");
# explanation for the call() technique at: http://wiki.flightgear.org/Object_oriented_programming_in_Nasal#Making_safer_base-class_calls
#  call(canvas.Window.del, [], me);
#};

# 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);