Board index FlightGear Development Canvas

Improving screen text visibility

Canvas is FlightGear's new fully scriptable 2D drawing system that will allow you to easily create new instruments, HUDs and even GUI dialogs and custom GUI widgets, without having to write C++ code and without having to rebuild FlightGear.

Improving screen text visibility

Postby Talkless » Tue Oct 07, 2014 4:12 pm

Some time ago I've posted feature request to improve multiplayer message visibility, because in some daylights it's illegible:
https://code.google.com/p/flightgear-bu ... il?id=1413

Motivating screenshot attached to this issue (code.google.com attachment):
https://flightgear-bugs.googlecode.com/ ... 0&inline=1

User chrisb tried to improve that, but had some problems with Git. He had patch, also containing various other improvements, posted in forum:
viewtopic.php?p=213370#p213370

Although his solution changed only multiplayer message background, without fixing other possible messages (with various colors), thanks to him now I know where to start!

So I've created personal topics/textvisibility branch for experimenting:
https://gitorious.org/fg/talkless-fgdat ... ffb1fc827c

I'm using small Nasal snipped to test messages with various colours:
Code: Select all
screen.log.write("Default text");

setprop("/sim/messages/atc", "ATC message");
setprop("/sim/messages/approach", "Approach message");
setprop("/sim/messages/ground", "Ground message");
setprop("/sim/messages/pilot", "Pilot message");
setprop("/sim/messages/copilot", "Copilot message");
setprop("/sim/messages/ai-plane", "AI plane message");
setprop("/sim/messages/mp-plane", "Multiplayer plane message");
setprop("/sim/messages/mp-plane", "Multiplayer plane message with callsign TLS");

#setprop("/sim/screen/black", "Black text");
#setprop("/sim/screen/white", "White text");
#setprop("/sim/screen/red", "Red text");
#setprop("/sim/screen/green", "Green text");
#setprop("/sim/screen/blue", "Blue text");
#setprop("/sim/screen/yellow", "Yellow text");
#setprop("/sim/screen/cyan", "Cyan text");


Now, original Flightgear from release/3.2.0 branch, when time is set to Dawn, looks like this:
Image

Image

With one-liner modification, like this:
Image

Image

It doesn't quite fix the problem...

In original version, multiplayer, green and cyan messages looks pretty bad. But otherwise, with dark background, blue and black ones does not look good either.

Maybe it would help to use some sort of "opposite grayscale background color", calculated for each individual message depending on it's colour, for each line individually? If color is dark-ish, background would be lighter, and vice-versa.

Any suggestions?

And,.. is it at all worth it..? I mean, we could simply change multiplayer default message colour and ignore other "exotic" cases, but.. well.. maybe we could fix it properly? :roll:
Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby Hooray » Tue Oct 07, 2014 4:48 pm

We've seen several reports from end-users stating that our old GUI (PLIB's PUI) is causing performance issues, and I've recently confirmed this - so, my only request/suggestion would be modifying the corresponding code to use Canvas directly, which should require under ~20 lines of code probably - i.e. it's just a transparent GUI dialog/window without any GUI decoration (title bar), all the relevant snippets can be found at: http://wiki.flightgear.org/Canvas_Snippets

It shouldn't be very difficult to adapt screen.nas or gui.nas accordingly, and performance should be much better in situations with multiple tooltips shown. Note that there is already a tooltip.nas file using Canvas, which should be easy to adapt for this use-case. Feel free to get in touch via the Canvas forum for additional pointers - for example, Gijs has recently modified the CanvasText element to be better readable: osgText backdrop:

Subject: osgText backdrop
Gijs wrote:If I'm not mistaken that gives a rectangular background (the bounding box), while I'm looking for an outline that follows the shape of the text, which is what backdrop provides. Like this:
Image
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: Improving screen text visibility

Postby Talkless » Wed Oct 08, 2014 9:59 am

Hooray wrote in Tue Oct 07, 2014 4:48 pm:Note that there is already a tooltip.nas file using Canvas, which should be easy to adapt for this use-case.


You suggest I should use Tooltip class itself? Or use it's Canvas code as example for refactoring of screen.window ?

I've made quick test, it works kinda strange..

My new test Tooltip shown like this:
Code: Select all
iff --git a/Nasal/screen.nas b/Nasal/screen.nas
index 94e216c..e485b07 100644
--- a/Nasal/screen.nas
+++ b/Nasal/screen.nas
@@ -149,6 +149,23 @@ var window = {
 
                fgcommand("dialog-new", me.dialog.prop());
                fgcommand("dialog-show", me.namenode);
+               
+              me._showTooltip();
+       },
+       #experimental Canvas implementation
+       _showTooltip : func {
+               
+               #if (!size(me.lines))
+               #       return;
+               
+               var tt = canvas.Tooltip.new([300, 100]);
+               tt.createCanvas();
+               tt.setTooltipId("some_random_id");
+               tt.setWidthText("width text");
+               tt.setLabel("some label");
+               tt.show();
+               
+               me.toolTip = tt;
        },
        close : func {
                fgcommand("dialog-close", me.namenode);



...results in white rectangle, AND, when I make a screenshot, that "Screenshot saved.." tooltip now has my label text :shock: :
Image

Is this tooltip a sort of sigleton-by-mistake, a bug I should report? Or only one Tooltip can exist by design..?
Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby Talkless » Mon Oct 13, 2014 11:53 am

I am trying to use canvas.gui.Window and Label in screen.nas, but I get error when calling Label constructor if I want to used default style, declared in gui.nas:
Code: Select all
Nasal runtime error: No such member: createChild
  at /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/canvas/gui/styles/DefaultStyle.nas, line 177
  called from: /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/canvas/gui/styles/DefaultStyle.nas, line 22
  called from: /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/canvas/gui/widgets/Label.nas, line 7
  called from: /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/screen.nas, line 165
  called from: /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/screen.nas, line 155
  called from: /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/screen.nas, line 195
  called from: /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/screen.nas, line 117


Code:
Code: Select all
diff --git a/Nasal/screen.nas b/Nasal/screen.nas
index 1fbdc36..41a749f 100644
--- a/Nasal/screen.nas
+++ b/Nasal/screen.nas
@@ -87,6 +87,7 @@ var window = {
       m.lines = [];
       m.skiptimer = 0;
       m.dialog = nil;
+      m.canvasWindow = nil;
       m.namenode = props.Node.new({ "dialog-name": m.name });
       m.writebuffer = [];
       m.MAX_BUFFER_SIZE = 50;
@@ -149,6 +150,24 @@ var window = {
 
       fgcommand("dialog-new", me.dialog.prop());
       fgcommand("dialog-show", me.namenode);
+      
+      #WIP canvas implementation
+      me._showCanvas();
+   },
+   _showCanvas : func {
+      
+      #TODO: do not recreate window every time..?
+      me.canvasWindow = canvas.Window.new([500, 200], nil, "screen");
+      
+      labels = [];
+      
+      foreach (var line; me.lines) {
+         var label = canvas.gui.widgets.Label.new(me.canvasWindow, canvas.style, {wordWrap: 1});
+         label.setText(line[0]);
+         append(labels, label);
+      }
+      
+      me.labels = labels;
    },
    close : func {
       fgcommand("dialog-close", me.namenode);



I've seen that other canvas code, like AircraftCenter, using style directly:
Code: Select all
    var scroll = gui.widgets.ScrollArea.new(m._root, style, {size: [96, 128]})
                                       .move(20, 100);


If I reference style directly from screen.nas:
Code: Select all
Nasal runtime error: undefined symbol: style
  at /home/vincas/code/opensource/flightgear/talkless-fgdata.git/Nasal/screen.nas, line 165

..which is understandable, but how should I use it properly outside of Nasal/canvas ?
Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby TheTom » Mon Oct 13, 2014 12:07 pm

'style' is inside the 'canvas' namespace. Just use 'canvas.style' outside...
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: Improving screen text visibility

Postby Talkless » Mon Oct 13, 2014 1:24 pm

TheTom wrote in Mon Oct 13, 2014 12:07 pm:'style' is inside the 'canvas' namespace. Just use 'canvas.style' outside...


This is exactly what I use, but still get this kind of error. Please check pasted diff in the first post, it's like this:
Code: Select all
var label = canvas.gui.widgets.Label.new(me.canvasWindow, canvas.style, {wordWrap: 1});
Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby Talkless » Tue Oct 14, 2014 5:28 pm

I figured it out by myself, instead of :

var label = canvas.gui.widgets.Label.new(me.canvasWindow, canvas.style, {wordWrap: 1});

Had to be like this:

var label = canvas.gui.widgets.Label.new(me.root, canvas.style, {wordWrap: 1});

Label parent had to be a canvas group, not canvas.Window instance...
Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby Hooray » Wed Oct 15, 2014 9:22 am

this is correct, and while the docs are indeed a little lacking for the time being, all existing examples are using a canvas group for the first parameter
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: Improving screen text visibility

Postby Talkless » Wed Oct 15, 2014 5:41 pm

Yeah, lack of documentation is noticeable...

Now I'm stuck with making canvas.window without background color (transparetn), so only canvas.gui.windgets.Label would be visible.

If I use setColorBackground(0, 0, 0, 0), whole window dissapears, including content. If alpha is 1, then I do see label, but black window background also appears... Here's snippet:

Code: Select all
      me._canvasWindow = canvas.Window.new([500, 200], nil, "screen");
      me._canvasWindow.setPosition(400, 100);
      me._canvasWindow.getCanvas(1).setColorBackground(0, 0, 0, 0); #if alpha zero, nothing is visible; if 1, black background appears
      me._root = me._canvasWindow.getCanvas().createGroup();
      me._testLabel = canvas.gui.widgets.Label.new(me._root, canvas.style, {wordWrap: 1});
      me._testLabel.setText("abcdefghjklmnABCDEFGHIJKLMN");


I am using window and label to avoid code duplication, but for specific use case, maybe I should better create my own canvas with text elements..?
Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby Hooray » Tue Oct 21, 2014 5:17 pm

you should be able to tweak the color of individual elements/groups separately
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: Improving screen text visibility

Postby TheTom » Wed Oct 22, 2014 10:58 am

Try adding one of the following code blocks:

Code: Select all
me._canvasWindow.getCanvas().set("blend-source-alpha", "src-alpha")
                            .set("blend-destination-alpha", "one-minus-src-alpha");


Code: Select all
me._canvasWindow.getCanvas().set("blend-source-alpha", "one")
                            .set("blend-destination-alpha", "zero");
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: Improving screen text visibility

Postby Talkless » Thu Oct 23, 2014 4:10 pm

TheTom wrote in Wed Oct 22, 2014 10:58 am:Try adding one of the following code blocks:

Code: Select all
me._canvasWindow.getCanvas().set("blend-source-alpha", "src-alpha")
                            .set("blend-destination-alpha", "one-minus-src-alpha");


Code: Select all
me._canvasWindow.getCanvas().set("blend-source-alpha", "one")
                            .set("blend-destination-alpha", "zero");


Thank you, that helped:
Image

For next time, I should try to change font color. Should I create my own Style for Label, or use Canvas Text directly for more control?

Current diff:
Code: Select all
diff --git a/Nasal/screen.nas b/Nasal/screen.nas
index 1fbdc36..d8e609c 100644
--- a/Nasal/screen.nas
+++ b/Nasal/screen.nas
@@ -90,6 +90,9 @@ var window = {
       m.namenode = props.Node.new({ "dialog-name": m.name });
       m.writebuffer = [];
       m.MAX_BUFFER_SIZE = 50;
+      m._canvasWindow = nil;
+      m._labels = [];
+      m._root = nil;
       setlistener("/sim/startup/xsize", func m._redraw_());
       setlistener("/sim/startup/ysize", func m._redraw_());
       return m;
@@ -149,6 +152,40 @@ var window = {
 
       fgcommand("dialog-new", me.dialog.prop());
       fgcommand("dialog-show", me.namenode);
+      
+      
+      # -- WIP Canvas implementation -->
+   
+      me._labels = [];
+      
+      if (me._canvasWindow != nil) {
+         me._root.del();
+         me._canvasWindow.del();
+      }
+      
+      me._canvasWindow = canvas.Window.new([500, 200], nil, "screen");
+      me._canvasWindow.setPosition(400, 100);
+      
+      me._vboxLayout = canvas.VBoxLayout.new();
+      me._canvasWindow.setLayout(me._vboxLayout);
+
+      me._canvasWindow.getCanvas(1).set("blend-source-alpha", "src-alpha")
+      .set("blend-destination-alpha", "one-minus-src-alpha");
+      
+      me._canvasWindow.getCanvas().set("blend-source-alpha", "one")
+      .set("blend-destination-alpha", "zero");
+      
+      me._canvasWindow.getCanvas().setColorBackground(0, 0, 0, 0);
+      
+      me._root = me._canvasWindow.getCanvas().createGroup();
+      
+      foreach (var line; me.lines) {
+         var label = canvas.gui.widgets.Label.new(me._root, canvas.style, {wordWrap: 1});
+         label.setText(line[0]);
+         me._vboxLayout.addItem(label);
+         append(me._labels, label);
+      }
+
    },
    close : func {
       fgcommand("dialog-close", me.namenode);

Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby Talkless » Sun Nov 09, 2014 5:19 pm

I've changed Label into "raw" Canvas text element, added stroke color, but got quite strange results.

Stroke is somehow jagged, and with artefacts:

Image

Maybe it's something with blending modes or.. other OpenGL magic.

Here's current screen.nas diff:

Code: Select all
diff --git a/Nasal/screen.nas b/Nasal/screen.nas
index 1fbdc36..bbec932 100644
--- a/Nasal/screen.nas
+++ b/Nasal/screen.nas
@@ -90,6 +90,9 @@ var window = {
       m.namenode = props.Node.new({ "dialog-name": m.name });
       m.writebuffer = [];
       m.MAX_BUFFER_SIZE = 50;
+      m._canvasWindow = nil;
+      m._labels = [];
+      m._root = nil;
       setlistener("/sim/startup/xsize", func m._redraw_());
       setlistener("/sim/startup/ysize", func m._redraw_());
       return m;
@@ -149,6 +152,56 @@ var window = {
 
       fgcommand("dialog-new", me.dialog.prop());
       fgcommand("dialog-show", me.namenode);
+      
+      
+      # -- WIP Canvas implementation -->
+   
+      me._labels = [];
+      
+      if (me._canvasWindow != nil) {
+         me._root.del();
+         me._canvasWindow.del();
+      }
+      
+      var screenWidth = getprop("/sim/startup/xsize");
+      var screenHeight = getprop("/sim/startup/ysize");
+      var canvasWidth = 500;
+      me._canvasWindow = canvas.Window.new([canvasWidth, 400], nil, "screen");
+      me._canvasWindow.setPosition((screenWidth - canvasWidth) / 2, screenHeight / 2);
+      
+      me._vboxLayout = canvas.VBoxLayout.new();
+      me._canvasWindow.setLayout(me._vboxLayout);
+
+      me._canvasWindow.getCanvas(1).set("blend-source-alpha", "src-alpha")
+      .set("blend-destination-alpha", "one-minus-src-alpha");
+      
+      me._canvasWindow.getCanvas().set("blend-source-alpha", "one")
+      .set("blend-destination-alpha", "zero");
+      
+      me._canvasWindow.getCanvas().setColorBackground(0.5, 0.5, 0.5, 1);
+      
+      me._root = me._canvasWindow.getCanvas().createGroup();
+      
+      var i = 0;
+      foreach (var line; me.lines) {
+         #var label = canvas.gui.widgets.Label.new(me._root, canvas.style, {wordWrap: 1});
+         #label.setText(line[0]);
+         #me._vboxLayout.addItem(label);
+         #append(me._labels, label);
+         var text = me._root.createChild("text", "line")
+            .set("font", "LiberationFonts/LiberationSans-Bold.ttf")
+            .set("character-size", 18)
+            .set("alignment", "center-baseline")
+            .set("clip-frame", canvas.Element.PARENT)
+            .set("text", line[0])
+            .setTranslation(canvasWidth / 2, i * 18 + 18)
+            .setColor(line[1], line[2], line[3], line[4])
+            .set("stroke", "rgb(0, 0, 0)");
+         #me._vboxLayout.addItem(text);
+         append(me._labels, text);
+         i += 1;
+      }
+
    },
    close : func {
       fgcommand("dialog-close", me.namenode);

Talkless
 
Posts: 80
Joined: Thu Mar 10, 2011 12:05 pm
Callsign: TLS
Version: git master
OS: Linux

Re: Improving screen text visibility

Postby TheTom » Sun Nov 09, 2014 10:27 pm

Thats a limitation of the way outline rendering in OpenSceneGraph is implemented. It is just shifted around a few times (I think 8 times: top-left, top, top-right, right, etc.). This works well for a thin outline but does not produce nice results for larger borders.
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: Improving screen text visibility

Postby tigert » Mon Nov 10, 2014 6:30 am

How about using the "Solarized" palette for these messages? http://ethanschoonover.com/solarized

We could perhaps even have a set of "logical" colors so that different types of messages would always use the same color, thus you could see from the color what kind of message it is (like, in the cockpit usually red = warning and yellow = caution) - maybe it even works like this already.

Solarized is the color palette that is pretty popular on code editors and other text-based applications, it's basically the ANSI color set with nicely defined color harmony and specifically so that the same colors work for both dark and light backgrounds. In this case I would use the dark background behind all of these messages for legibility.
tigert
 
Posts: 106
Joined: Sat Nov 08, 2014 9:57 am

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 1 guest