Board index FlightGear Development Canvas

Why does parsesvg not find an SVG file that is there ?  Topic is solved

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: Why does parsesvg not find an SVG file that is there ?

Postby Hooray » Sat Aug 28, 2021 2:40 pm

Like I said, to use layouts, you need to use the Widget.nas API (see DefaultStyle.nas) - basically, look at some of the really simple widgets first to see how things hang together there.

What you are doing now is mixing two distinct concepts: a group is a low-level Canvas element to organize drawables into a scene graph hierarchy, whereas layouts and widgets are much higher level concepts - which is why you cannot simply add a Widget to a group directly. There is no connection, you need to establish that connection first (see the Canvas Snippets wiki article): https://wiki.flightgear.org/Canvas_snippets

First, you need to assign a top-level layout to your canvas, then you can add other sub-layouts to that root layout - and each layout can then add different widgets, but these must use the Widget.nas API correctly (the meat of which can be found in DefaultStyle.nas) - it's basically an MVC abstraction: https://wiki.flightgear.org/Howto:Creat ... Widget.nas

In other words, you cannot easily use non-Widgets in conjunction with the Layout engine, you need to implement the widget first.

To learn how to do this properly, it's best to leave your code aside for 10-15 minutes and carefully inspect $FG_ROOT/Nasal/canvas/gui/styles/DefaultStyle.nas - you will find a hash with a list of supported widgets, including their implementation - next, search the file for related examples (you want to add a canvas path element, so look for "path").

The first example you can find there is this (I will just post the constructor):
Code: Select all
# A button
DefaultStyle.widgets.button = {
  new: func(parent, cfg)
  {
    me._root = parent.createChild("group", "button");
    me._bg =
      me._root.createChild("path");
    me._border =
      me._root.createChild("image", "button")
              .set("slice", "10 12"); #"7")
    me._label =
      me._root.createChild("text")
              .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
              .set("character-size", 14)
              .set("alignment", "center-baseline");
  },




There you can see how to access the Canvas system so that the Layout system knows how to align new/custom widgets.
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: Why does parsesvg not find an SVG file that is there ?

Postby TheEagle » Sat Aug 28, 2021 3:57 pm

Thank you Hooray, I am now able to show an SVG icon in my Canvas window. But I need to display six of them, and I need three or four letters of text below each. I know I can set a position on a group containing one SVG symbol using setTranslation, but I don't want to have to hardcode the positions. Is this the only way, or is it possible to put these SVG icon groups into the layout ? Sorry for all the questions - I think it's the last one now.
Cessna 210 (Wiki)
My other aircraft: my wiki profile !
Other: FGTools (GitHub)
World tour: View on SkyVector
Please consider donating $1 / €1 to help me finance a new camera !
User avatar
TheEagle
 
Posts: 3413
Joined: Sat May 01, 2021 3:27 pm
Location: France
Pronouns: You, he
Callsign: F-EAGLE
IRC name: none
Version: Git next
OS: Ubuntu Studio 22.04

Re: Why does parsesvg not find an SVG file that is there ?

Postby Hooray » Sun Aug 29, 2021 4:01 pm

are these all the same symbols or are they different in some way (size, style, color etc) ?
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: Why does parsesvg not find an SVG file that is there ?

Postby TheEagle » Sun Aug 29, 2021 4:47 pm

I have six icons, all of a size of 64 x 64 px. but each one looks different - one is an airplane from top on a runway, one from behind, one from the side, one is a VSI gauge, etc. I want each icon to be shown in a box of it's own with a text below (for example "Pitch angle: 3°" below the airplane side view), and I want to rotate / translate some elements of some icons, but not all. I have about achieved what I want by testing out the right positions for each text and icon one by one. Actually, maybe the SVG icons don't need to be put into a layout at all as the canvas window cannot be resized. But, one can load an SVG icon into a "canvas.Image" - maybe I can access the elements from that ?
Cessna 210 (Wiki)
My other aircraft: my wiki profile !
Other: FGTools (GitHub)
World tour: View on SkyVector
Please consider donating $1 / €1 to help me finance a new camera !
User avatar
TheEagle
 
Posts: 3413
Joined: Sat May 01, 2021 3:27 pm
Location: France
Pronouns: You, he
Callsign: F-EAGLE
IRC name: none
Version: Git next
OS: Ubuntu Studio 22.04

Re: Why does parsesvg not find an SVG file that is there ?

Postby Hooray » Sun Aug 29, 2021 4:48 pm

For starters, you could simply add an outer "frame" in Inkscape, and add all your symbols as child elements into that frame.
That way, you can simply add the frame as a single vector image, and then get a handle to each child image.
Thus, you would use Inkscape to define the layout/appearance - you'd merely want to add a placeholder entry below each symbol for the text, and assign a Canvas.Text node to that.

That's basically also how complex avionics are assembled: there's a top-level root group, and aircraft developers then get a handle to various relevant sub-elements that they need to update/animate individually.

Which is why the ND, when opened in Inkscape, looks rather heavy and bloated:
Image

(this happens if you don't get a handle to each child element, so that everything is displayed "as is" - i.e. typically aircraft devs look up relevant elements, update/animate and hide them afterwards)

And yes, Canvas windows can be resized, and yes you can also treat other Canvas elements as a Canvas.Image (which is what the SymbolCache is basically doing automatically for you)

https://wiki.flightgear.org/Canvas_MapS ... ymbolCache
https://wiki.flightgear.org/Canvas_snip ... ymbolCache
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: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Why does parsesvg not find an SVG file that is there ?

Postby jsb » Sun Sep 05, 2021 11:05 pm

Hi TheEagle,
I did not read the full thread but maybe you have a look here: https://wiki.flightgear.org/SVGCanvas
I added this helper class to easily create a canvas from an SVG file (haveing the limitations of our SVG parser, but that should be fine unless you have very specific requirements) - and to animate elements defined in the SVG based on properties.
Sorry, if this does not fit your usecase but maybe it helps.

IIRC from my head, you should try putting the SVG in the same folder as the addon (or below) and give it as relative path/filename.
jsb
 
Posts: 285
Joined: Sat Oct 25, 2014 9:17 pm
Location: Hamburg, Germany
Callsign: D-JSB
Version: next
OS: Win7/Linux

Previous

Return to Canvas

Who is online

Users browsing this forum: No registered users and 3 guests