Board index FlightGear Development Canvas

Canvas Help - Warning Panel

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.

Re: Canvas Help - Warning Panel

Postby Avionyx » Mon Feb 22, 2021 3:53 pm

Hi Hooray,

Apologies for the radio silence, the weekend rather gets in the way with tinkering.
I've verified the SVG using that tool you've recommended and all comes back as fine.

The error I'm getting can be seen in this dump here. Hope it's useful?

Code: Select all
 68.32 [ALRT]:nasal     /run/media/avionyx/filestore/2020FG/Nasal/canvas/svg.nas:428: parsesvg: parse XML failed [path='/run/media/avionyx/filestore/FG Files/Aircraft/Westland_WS70/Models/Interior/Panels/Instruments/Canvas/Canvas.svg']
   68.32 [INFO]:nasal     /home/jenkins/workspace/Linux-nightly/flightgear/src/Scripting/NasalSys.cxx:556: cannot change immutable string:
 at /run/media/avionyx/filestore/2020FG/Nasal/canvas/svg.nas, line 428
   68.32 [INFO]:nasal     /home/jenkins/workspace/Linux-nightly/flightgear/src/Scripting/NasalSys.cxx:556:   called from: /run/media/avionyx/filestore/2020FG/Nasal/canvas/svg.nas, line 748
   74.09 [INFO]:nasal     /home/jenkins/workspace/Linux-nightly/flightgear/src/Scripting/NasalSys.cxx:556: --------------------------------------------------------------------------------

   74.09 [INFO]:nasal     /home/jenkins/workspace/Linux-nightly/flightgear/src/Scripting/NasalSys.cxx:556: var (width,height) = (320,160);
var title = 'Gear Monitor';

var window = canvas.Window.new([width,height],"dialog")
 .set('title',title);
var myCanvas = window.createCanvas().set("background", "#000000");
var root = myCanvas.createGroup();

     
      var gearMonitor = func(node) {
if (getprop("gear/serviceable")) {

var svg_symbol = root.createChild('group');
canvas.parsesvg(svg_symbol, "Aircraft/Westland_WS70/Models/Interior/Panels/Instruments/Canvas/Canvas.svg");
var msg = svg_symbol.getElementById("fuelbrighttwo");
} else {
var myText = root.createChild("text")
      .setText("GEAR")
      .setFontSize(20, 0.9)         
      .setColor("#00ff00")     
      .setAlignment("center-center")
      .setTranslation(160, 80);
}
}

var path = "gear/serviceable";
var myListener = setlistener(path, gearMonitor);
   74.09 [INFO]:nasal     /home/jenkins/workspace/Linux-nightly/flightgear/src/Scripting/NasalSys.cxx:556: --------------------------------------------------------------------------------


All the best,
Alex
Avionyx
 
Posts: 531
Joined: Mon Jan 11, 2010 4:07 pm
Location: EGMD
Callsign: G-AVYX
Version: 2020.4
OS: Manjaro

Re: Canvas Help - Warning Panel

Postby Hooray » Mon Feb 22, 2021 7:57 pm

The error message is saying clearly that it failed to parse your Canvas.svg file.

It is possible that valid SVG files are not supported by FlightGear, which is because our SVG parser (support module) is a custom one, written/maintained by us. So, that parser only supports a tiny subset of SVG/XML. That is why I suggested to share the file in question and alternatively consider using a simple file for testing purposes, and then take it from there.
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: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Canvas Help - Warning Panel

Postby Avionyx » Tue Feb 23, 2021 10:16 am

Hooray,

Thank you for your patience so far, I'm sure this must be a frustrating process for someone who would find this incredibly easy.

The file is a simple Svg created with inkscape. You can find it here: http://files.netherways.com/Canvas.svg

I originally started with the svg with a text element saying "Gear INOP" which didn't work. I've recreated it as a svg compatible with svg 1.1 to try that and made a more simple shape (red circle with an ID of "path76") as you can see in the linked file.

Calling that in this code:

Code: Select all
var (width,height) = (320,160);
var title = 'Gear Monitor';

var window = canvas.Window.new([width,height],"dialog")
 .set('title',title);
var myCanvas = window.createCanvas().set("background", "#000000");
var root = myCanvas.createGroup();

     
      var gearMonitor = func(node) {
if (getprop("gear/serviceable")) {

var svg_symbol = root.createChild('group');
canvas.parsesvg(svg_symbol, "Aircraft/Westland_WS70/Models/Interior/Panels/Instruments/Canvas/Canvas.svg");
var msg = svg_symbol.getElementById("path76");
} else {
var myText = root.createChild("text")
      .setText("GEAR")
      .setFontSize(20, 0.9)         
      .setColor("#00ff00")     
      .setAlignment("center-center")
      .setTranslation(160, 80);
}
}

var path = "gear/serviceable";
var myListener = setlistener(path, gearMonitor);


Still gets me the same error.

I'm sure there's something simple I'm missing but I can't see what that might be.

Many thanks,
Alex
Avionyx
 
Posts: 531
Joined: Mon Jan 11, 2010 4:07 pm
Location: EGMD
Callsign: G-AVYX
Version: 2020.4
OS: Manjaro

Re: Canvas Help - Warning Panel

Postby Hooray » Tue Feb 23, 2021 4:45 pm

Like I said, your code is looking good enough - the issue lies inside the SVG file itself, you created it using Inkscape, and it's using some stuff that our tiny little parser doesn't (yet) support (I'd suggest to reach out to some other aircraft devs, since they obviously figured out the options/export settings to use in Inkscape to end up with a "simple" SVG file). That is why I suggested to start off with a simple, handwritten, SVG file first to ensure that you have everything working correctly, and then take it from there.

I am afraid, I cannot currently walk you through all the details, so I will just take your code and post an adapted version that works via the Console, you will need to store the SVG file inside $FG_ROOT/Textures/Canvas.svg (it's just for testing/illustration after all).

The code can then be executed via the Nasal console:

$FG_ROOT/Textures/Canvas.svg
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="myrect" x="10" y="10" height="130" width="680" style="fill: #000000"/>

  <text id="serviceable" x="15" y="35" fill="red">serviceable !</text>
  <text id="not_serviceable" x="15" y="55" fill="red">not serviceable !</text>
</svg>


Nasal snippet:
Code: Select all
    var (width,height) = (360,120);
    var title = 'Gear Monitor';


    var window = canvas.Window.new([width,height],"dialog").set('title',title);
    window.listeners = [];
    var myCanvas = window.createCanvas();
    myCanvas.set("background", "#ffaac0");

    var root = myCanvas.createGroup();

   var svg_symbols = root.createChild('group');
    canvas.parsesvg(svg_symbols, "Textures/Canvas.svg");
   
    var symbol = svg_symbols.getElementById("myrect");

   var serviceable = svg_symbols.getElementById("serviceable");
   var not_serviceable = svg_symbols.getElementById("not_serviceable");

    symbol.show();
    symbol.setScale(0.5);

   var path = "gear/serviceable";
         
    var gearMonitor = func(node) {
    if (getprop(path)) {

    serviceable.show();
    not_serviceable.hide();
   
    } else {
   
    serviceable.hide();
    not_serviceable.show();
    } # not serviceable
    } # gearMonitor()

    append(window.listeners, setlistener(path, gearMonitor, 1));
   
   window.del = func()
   {
   print("Listener cleanup");
   foreach(var l; window.listeners)
      removelistener(l);
   call(canvas.Window.del, [], me);
   }




I would strongly suggest to tinker with this for a while, it doesn't make sense to use automated tools until you know how things hang together here - or you're skipping too many steps.
Also, it's best to share early & often (again, ideally using the wiki)

EDit: Maybe, for the sake of learning: here's just an idea to do some "homework": Try to edit the SVG file to change the color of the rectangle and the color of the text elements.
Once you have that working, copy & paste one element to add a new one saying "Hello World" - then, edit the Nasal code to make it show up there.

Once you know how to make these changes, you are all set to also add other elements to the SVG file, so that you can work on creating your actual warning panel.
Feel free to share you snippets here, so that we can take another look.
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: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Previous

Return to Canvas

Who is online

Users browsing this forum: No registered users and 3 guests