Board index FlightGear Development Canvas

QML and other GUI markup languages

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.

QML and other GUI markup languages

Postby Hooray » Thu Jan 17, 2013 12:44 am

TheTom wrote:Btw. I've also played with the idea of using something similar to QML a Javascript based GUI language used inside Qt Quick. This would enable us to use Qt Designer for creating dialogs which would be a lot easier to use than handcrafted SVG dialogs. Currently this is just an idea with some unresolved issues Eg. even though QML syntax is similar to Nasal it is not possible to create a valid Nasal file which is valid QML at the same time. To use QML we would need a preprocessor which modifies the QML files to become valid Nasal files.


sounds like an interesting idea - but that would require a pretty complex QML/JS parser in the first place, right ?

Maybe there's a way to extend the Qt Designer (or Inkscape) via some script/plugin to add some basic text editing support, so that custom FG-specific Nasal scripts can be directly added instead of QML/JavaScript ?

The QML idea sounds really interesting, but implementing it sounds definitely more complicated than using your existing SVG parser and extending it to support embedded/included Nasal script section...
Otherwise, we'd certainly end up implementing a "full" JavaScript parser in Nasal :shock:

So, personally, I'd probably prefer extending some existing GUI/SVG editor like Inkscape via a custom script to add basic Nasal scripting support.

It seems that Inkscape is similarly extensible as Blender, even via scripts: http://wiki.inkscape.org/wiki/index.php ... extensions
Last edited by Hooray on Thu Jan 17, 2013 5:57 pm, edited 1 time in total.
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 custom GUI

Postby gral » Thu Jan 17, 2013 2:36 am

Hooray wrote in Thu Jan 17, 2013 12:44 am:sounds like an interesting idea - but that would require a pretty complex QML/JS parser in the first place, right ?

Maybe there's a way to extend the Qt Designer (or Inkscape) via some script/plugin to add some basic text editing support, so that custom FG-specific Nasal scripts can be directly added instead of QML/JavaScript ?

The QML idea sounds really interesting, but implementing it sounds definitely more complicated than using your existing SVG parser and extending it to support embedded/included Nasal script section...
Otherwise, we'd certainly end up implementing a "full" JavaScript parser in Nasal :shock:

So, personally, I'd probably prefer extending some existing GUI/SVG editor like Inkscape via a custom script to add basic Nasal scripting support.

It seems that Inkscape is similarly extensible as Blender, even via scripts: http://wiki.inkscape.org/wiki/index.php ... extensions


Hi Hooray

This sounds like you're not very familiar with what blender is based on, and inkscape. It's python here, it's qt there, and I guess before someone start to implement another greenland nasal on canvas it is importsnt to think about a simple webview (probably javascript compatible) on the canvas, isn't it ? Flightgear Nasal in inkscape, what a mad idea ;-)

-gral
gral
 
Posts: 323
Joined: Mon Nov 16, 2009 2:03 pm
Location: Zurich (Switzerland)
Callsign: HB-GRAL
Version: GIT

Re: Canvas custom GUI

Postby TheTom » Thu Jan 17, 2013 11:41 am

I have no plans of replacing Nasal with anything else. I'm just experimenting with different already available UI designers and file formats so we can maybe reuse them for FlightGear. Instead of QML it maybe better to use Qt UI files which is are stored using xml.

As I've already said I'm just brainstorming. For cockpit instruments using Inkscape with maybe a plugin will probably fit better. I'm always looking for any suggestions and ideas :)
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Canvas custom GUI

Postby Hooray » Thu Jan 17, 2013 2:46 pm

Flightgear Nasal in inkscape, what a mad idea


gral, I think you misunderstood: The idea was not to add "Nasal support" to Inkscape - but rather to allow arbitrary scripting code sections (read plain text ASCII) to be directly added/edited via Inkscape to SVG files. So that we could simply add Nasal code there, which would then only be understood by FG obviously. I am aware that both, Inkscape and Blender can be easily extended using python scripts - so that sort of thing would be trivial to support actually, as you'll probably agree :)

Bottom line being, the main idea is really what Tom mentioned: We should strive to support some existing standard tool or even tool chain to help us with this - simply because that would save us quite a lot of time and effort, because we wouldn't have to recreate the necessary tools (GUI editor, widget designer etc).

Thus, finding a good way to reuse an existing GUI editor to create/edit/update and maintain the future FG GUI will be a huge step forward, and would improve the current situation massively. Like Tom mentioned, this isn't primarily about using Inkscape - it's just about finding some existing solution that could adapted for use in FG.
I'm really not at all set on using Inkscape and SVG images for the GUI, it's just what seemed straightforward and scalable last we checked. I really agree with Tom that it would be great to find a full fledged GUI editor that comes with support for standard widgets and some form of dynamic/interactive behavior.
If/When we find something better, we should update the wiki accordingly.

And Gral: Regarding the tile map, I think you raised that one on the devel list already, see: http://www.mail-archive.com/flightgear- ... 38354.html
If you're concerned that your idea may be lost, please feel free to add your idea to the wiki's canvas section - or even to the issue tracker (after all, that's its whole point!).
Thread hijacking for the sake of reminding us isn't really too helpful - as you can see, neither of us has forgotten about it, and Tom mentioned already several times, that he was going to support your use-case :D
Your idea is definitely good and it will be useful for other purposes, too. Extending the "poor man's map" system is planned anyhow, so all feedback is valuable.
For now, you could just copy/paste your comments to the wiki/issue tracker and post links to related discussions to ensure that we'll be aware of it :P
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 custom GUI

Postby gral » Thu Jan 17, 2013 3:25 pm

Arghh, yes, you're completely right Hooray. Misunderstood and then hit the reply button too fast, and I feel some pain now having hijacked this thread. This was not my intention, apologize for that. I need to get into the loop myself first. So I will follow the canvas discussion as suggested. And many thanks to you guys taking tiling and map idea into account. gral
gral
 
Posts: 323
Joined: Mon Nov 16, 2009 2:03 pm
Location: Zurich (Switzerland)
Callsign: HB-GRAL
Version: GIT

Re: Canvas custom GUI

Postby Hooray » Thu Jan 17, 2013 5:55 pm

TheTom wrote in Thu Jan 17, 2013 11:41 am:I'm just experimenting with different already available UI designers and file formats so we can maybe reuse them for FlightGear. Instead of QML it maybe better to use Qt UI files which is are stored using xml. I'm always looking for any suggestions and ideas :)


Exactly, my thoughts are also just a brainstorming so far...
And just for the sake of completeness: ARINC 661 also has (very basic) GUI support: http://en.wikipedia.org/wiki/ARINC_661
And the J661 project does provide a WYSIWYG GUI editor, and there are plans to also provide a widget editor, too:
Image

Obviously, that would require a JRE to run J661 as a "GUI editor". And GUI support would be nowhere near as complete as QML and similar markup languages: http://en.wikipedia.org/wiki/List_of_us ... _languages
Extending J661 such that it would allow actions/events to be specified via plain text blobs (i.e. Nasal) would be simple.
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: QML and other GUI markup languages

Postby zakalawe » Fri Jan 18, 2013 9:45 am

Just so you guys are aware, there is no real GUI editor for QML / QQ2 at this time. There is something that /looks/ like one, but in practice all the real work is done by editing QML as text. The GUI editor exists so when people ask about one, we can point to it. (Qt Designer generates .ui XML files, which are different again - they could be used to specify dialog boxes, but since we can already reload dialogs dynamically, not much benefit). Editing QML is a nicer syntax than our XML PropertyLists, and more compact, but that's about the only difference: QML is 'just' a JSON object tree really.

My suggestion would be to make interactive editing work - since with the tools Tom is building, that should be doable. I.e select an element, bring up a 'canvas inspector', tweak properties. Re-arranging the tree would need a tree widget, which I would not relish creating, but for adjusting the animations on a dial or similar, I think it would be good.

Also keep in mind, aside from 'custom' UIs like was mentioned in another thread (which look cool!), we don't want most people creating widgets using the canvas (cockpit displays, sure) - we want to keep compatibility with the existing dialog XML files. The dialog XML syntax is pretty straightforward and clean, much easier for most people to edit and understand the canvas and raw event handling.
zakalawe
 
Posts: 1259
Joined: Sat Jul 19, 2008 5:48 pm
Location: Edinburgh, Scotland
Callsign: G-ZKLW
Version: next
OS: Mac

Re: QML and other GUI markup languages

Postby Hooray » Fri Jan 18, 2013 3:26 pm

zakalawe wrote in Fri Jan 18, 2013 9:45 am:My suggestion would be to make interactive editing work - since with the tools Tom is building, that should be doable. I.e select an element, bring up a 'canvas inspector', tweak properties. Re-arranging the tree would need a tree widget, which I would not relish creating, but for adjusting the animations on a dial or similar, I think it would be good.


We have talked about that too (a while back admittedly), but that would seem like a lot of work - unless we can find an architecture where "editing" and GUI/widget creation is an inherit part of the design, so that it could be trivially supported out of the box ... Personally, I really found the idea appealing to find an existing GUI designer that supports XML output, and then create a canvas parser to load such GUI XML files.

The whole inkscape idea was all about specifying the widget via inkscape and then linking it to a Nasal file to add "behavior".
That should definitely be do-able - and according to the pointers we have collected in the wiki, this has been done before.

Also keep in mind, aside from 'custom' UIs like was mentioned in another thread (which look cool!), we don't want most people creating widgets using the canvas (cockpit displays, sure) - we want to keep compatibility with the existing dialog XML files. The dialog XML syntax is pretty straightforward and clean, much easier for most people to edit and understand the canvas and raw event handling.


There are two different issues actually: The existing PropertyList GUI XML format can be supported by writing a parser that turns the markup into canvas widgets. However, at the moment, we simply don't have a library of "canvas widgets". Which is why it would be great to re-use existing stuff. Once you take a look at the wiki, you'll see that there are a bunch of SVG-based widget libraries that contain embedded JavaScript. Given that Nasal is also based on ECMAScript and given that Tom's designed the Canvas event handling system to be based on the DOM, too - it should be feasible to manually port existing widgets from JavaScript to Nasal so that we could re-use such widgets, just to get things started quickly.

Now, supporting the existing GUI markup is obviously a huge priority, but that could be accomplished by writing an XML parser and another parser for the existing layouting engine, so that the old behavior can be fully retained.

Maybe we'll find a better solution eventually. But the long-term idea was to find a standard tool chain for creating a styl-able GUI (skins/themes) using CSS/XSL. Being able to use an existing GUI designer would make it much easier for us to port the existing PUI widgets to the canvas system. Personally, I'm really not too keen on manually implementing each PUI widget via the canvas (wich would be required otherwise).

Now, the wiki's canvas section hasn't been updated in a while admittedly, but we did look for alternatives.
Bottom line being, supporting the existing GUI XML isn't affected/blocked by the ability to design custom widgets, in fact the former could be significantly faciliated by the latter ...

Here are some of the SVG/JS widgets that we talked about a while ago:
http://www.carto.net/svg/gui/combobox/index.svg
http://www.carto.net/svg/gui/tabgroup/index.svg
http://www.carto.net/svg/gui/Window/index.svg

Make sure to take a look at the source code (SVG/JS).
Tons of other SVG/GUI demos: http://www.carto.net/svg/samples/

That's basically what got the whole XML/CSS idea started ...

More info to be found at:
http://wiki.flightgear.org/Canvas_Widge ... on_via_SVG
http://wiki.flightgear.org/Canvas_Widge ... UI_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


Return to Canvas

Who is online

Users browsing this forum: No registered users and 2 guests