Board index FlightGear Development Canvas

Just a little thing in the menu - ruler

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.

Just a little thing in the menu - ruler

Postby Jabberwocky » Tue Sep 09, 2014 12:32 am

Code: Select all

              <menu n="10">
               <label>747-8vvip</label>
               <enabled type="bool">true</enabled>
                             <item>
                                 <label>Autostart</label>
                  <binding>
                         <command>nasal</command>
                         <script>
                        Boeing747.magic_autostart();
                     </script>
                  </binding>
                             </item>
<!--- and here I want a separation, a ruler or something -->
               <item>
                  <label>Lights</label>
                  <binding>
                     <command>nasal</command>
                     <script>
                        var dlg = gui.Dialog.new("/sim/gui/dialogs/lights-config/dialog", "Aircraft/VIP/Dialogs/lights-dialog.xml");
                            </script>
                  </binding>
                  <binding>
                     <command>dialog-show</command>
                     <dialog-name>lightcontrol</dialog-name>
                  </binding>
               </item>


Is there a way, to add a ruler in menus that expand the main menu? If not, it's no biggie, but if, how can I do it?

J.
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Re: Just a little thing in the menu - ruler

Postby Hooray » Tue Sep 09, 2014 12:42 am

the existing GUI is fairly simple, we once had "separators" by simply adding entries that looked like this ------------------ :mrgreen:

The upcoming GUI is much more flexible - basically ANYTHING can be rendered - omega95 already created popup menus with sub menus.
Given Tom's recent work on canvas/keyboard support there shouldn't be too much missing to add a canvas window to the area of the menubar and use a few lines of Nasal to parse our existing menubar.xml file into submenus like those that omega95 created.
If you're interested in giving this a try, please get in touch via the Canvas sub forum.
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: 11573
Joined: Tue Mar 25, 2008 8:40 am

Re: Just a little thing in the menu - ruler

Postby Jabberwocky » Tue Sep 09, 2014 12:54 am

I think, for the update end of the week, I just go with "------" and then, next week, I try to get more time out to read a little about canvas. I am total new at this one. But it sounds interesting.
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Re: Just a little thing in the menu - ruler

Postby Hooray » Tue Sep 09, 2014 1:15 am

The code for this is mostly in place in omega95's repository.
Creating a sub menu should be less than 30 lines of code that you could copy&paste.
Parsing the menubar.xml is also not very involved, because we have functions doing this sort of thing - and it can be greatly simplified by using a props.nas function that returns an XML tree as a Nasal hash.
At that point it's mainly a matter of recursively (=calling itself) calling a function that creates menus and submenus.

As long as you're patient, we can probably walk you through the whole thing within 7-10 days and maybe 20-30 postings.
The whole thing could even be prototyped using the Nasal console.

This is something that would be very useful - and it is likely to go upstream, so any work related to this would be appreciated and fully supported.
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: 11573
Joined: Tue Mar 25, 2008 8:40 am

Re: Just a little thing in the menu - ruler

Postby Jabberwocky » Tue Sep 09, 2014 2:52 am

Ready to do this, but only in a week because real life is atm a bit busy.
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Re: Just a little thing in the menu - ruler

Postby Hooray » Tue Sep 09, 2014 3:11 am

Jabberwocky wrote in Tue Sep 09, 2014 2:52 am:Ready to do this, but only in a week because real life is atm a bit busy.



ok, I've added a stub to the wiki, see: http://wiki.flightgear.org/Howto:Making ... as_Menubar

Depending on your spare time, questions and testing, I'll extend this over time with more code snippets, pointers etc.
I cannot currently run FG, so it's all untested code - so feel free to report back any errors, and once you have something that looks good enough, please do upload a few screen shots so that people can track your progress.

But this really isn't too difficult and also doesn't involve a lot of coding, it's more about plugging together existing code snippets and changing those a little, but it could still be a neat little exercise.

Here's a screen shot showing omega95's work:
Subject: Event Click Listener on SVG element
omega95 wrote: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: 11573
Joined: Tue Mar 25, 2008 8:40 am

Re: Just a little thing in the menu - ruler

Postby Jabberwocky » Fri Sep 12, 2014 6:22 pm

Okay, what Omega is doing appears as a menu on its own, not as an expansion of the main menu ... however, for the future, it would offer also some thing like an aircraft-control menu just triggered by the <plane-name> part of the main menu, so this has some promising outlook. Since my goal is, to make my planes flyable without even touching the main menu, I am all for it.
Now, I am a little bit lost. There is talk about SVGs and some Canvas methods ... looks like, I have to do more reading first to figure what those methods do and what how far I can go with Canvas without touching C++. There seem to be some nomenclatura issues as well. SVG is some graphic format ... I guess. So the SVG Hooray talks about seems to be a canvas layer with graphic in that format on it ... but that's rather a guess.
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Re: Just a little thing in the menu - ruler

Postby Hooray » Fri Sep 12, 2014 7:24 pm

The standard menu cannot be just "extended" - it's hard-coded in C++ and can only be edited by customizing the menubar.xml XML file - for anything else, you'll need to use a custom menubar and disable the default menubar (F10 will hide the menubar, see keyboard.xml for the exact property to hide/show the menubar).

The menu shown above is a MFD menu rendered on top of a glass instrument - however, that doesn't matter - because ultimately, any Canvas can be shown/used everywhere, including other aircraft and/or GUI dialogs. The SVG part doesn't matter too much - the main distinction here is to either "draw" a menubar procedurally by using Canvas API instructions like "setText(....)" or using a pre-created Inkscape SVG file and load all images from there. The GNS530 was fully prototyped without using any SVG files - while Omega95's work is using a hybrid approach. So the question is mostly a matter of taste/style, people who are not into coding will probably appreciate being able to create their artwork using an image editor - people who don't mind reading/writing code can get by just as well without any SVG stuff.

In this particular case, you probably won't benefit at all from using Inkscape/SVG - simply because the degree of artwork is really negligible - i.e. it's mainly popup menus that may contain other widgets, such as for example a checkbox, or a sub menu - but otherwise a menubar is just a collection of popup menus, which are typically just rendered as text elements with some custom style (font, color, background) and some effects (mouseover/hover, click).

I suggest you take a look at the wiki article I created a few days ago and actually try to run the snippet I posted - you'll see that it will add a fairly long menubar "window" which is just a Canvas - and it will also add a text element displaying a string - as well as register an event handler that responds to mouseover/hover events by printing something to the console.

The combination of these features can be used to create multiple menus next to each other.
I think I even added some boilerplate code to demonstrate how to parse menubar.xml - so it's mainly a matter of setting up one sub-menu for each menu entry, and adding entries for each item.
It may seem difficult at first if you haven't done coding any Nasal before - but you'll probably figure out that it's easy enough once you look at the article, the code - and once you play around with the code a little and maybe ask a few questions.

As long as the code is sufficiently generic, you'll probably end up with a few building blocks for creating 1) popup windows (see tooltip.nas), 2) popup menus, 3) a menubar with popup menus

looks like, I have to do more reading first to figure what those methods do and what how far I can go with Canvas without touching C++.

For a dynamic Canvas-based menubar, you will never have to touch any C++ at all, you will not even have to look at any C++ code - a Canvas menubar is just a "looooong" canvas window that has a number of entries for each menu and event listeners that respond to events to show a popup menu.

Alternatively, the window could also be less narrow and use transparency to render the popup menus directly within the same Canvas ...

So the SVG Hooray talks about seems to be a canvas layer with graphic in that format on it ... but that's rather a guess.

SVG is an XML based vector graphics format and not relevant/required here.
I suggest you really start playing with the code I posted, and you'll see that there isn't a whole lot missing to turn this into a flexible widget.
Let's try to walk before we run, okay ? Once you'll start fiddling with the code in the Nasal console, you can exchange things here and there and should get the hang of it pretty quickly.

If in doubt, post questions, and we'll rework the wiki article accordingly.

I would just ask you to please post your code regularly - we've seen some fairly massive Nasal "snippets" that were developed by people who didn't get in touch upfront and instead resorted to coding for weeks or even months, which ultimately meant -more often than not- that they spent a lot of time using a coding method/style that neither scaled very well, and that would cause a lot of additional work.

Like I said previously, this should be a perfect project for someone hoping to dabble a bit with Nasal, it doesn't require any fancy coding and all the code is in place already, so it's mainly a syntax issue (Nasal) and obviously a matter of integrating things - we can help with all of that - as long as you're patient and provide/act upon feedback regularly, this shouldn't take much longer than 2-3 weeks of spare time coding, even for someone completely new to Nasal

http://wiki.flightgear.org/Howto:Making ... nubar#Code
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: 11573
Joined: Tue Mar 25, 2008 8:40 am

Re: Just a little thing in the menu - ruler

Postby Jabberwocky » Fri Sep 12, 2014 9:31 pm

Yeah, I really should play around with this code ... it's just my nature to understand what I do and therefore I like reading. Helped ma a lot with programming the new A/P of the Lineage and find those pesky runttime errors I had to get repaired. So, yup, I take some time to play around at the weekend and see how I like it. Things like athat have aside of "syntax" and "semantics" also this nasty element of "artistic taste" involved ;-)
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Re: Just a little thing in the menu - ruler

Postby Hooray » Sat Sep 13, 2014 1:21 am

http://wiki.flightgear.org/Howto:Making ... nubar#Code
Image
Jabberwocky wrote in Fri Sep 12, 2014 9:31 pm:it's just my nature to understand what I do and therefore I like reading.

I've added another version of the original code that's using some object oriented programming, i.e. "classes", "objects" and "methods". Admittedly, if you are not familiar with basic OO concepts, you'll probably have to do some reading now (the wiki's Nasal/OOP section is pretty good and ... your friend :D )
If you find the code too difficult, just look at the previous version of the code that is strictly procedural and very simple. You can basically look up all functions by using the wiki.

This can now be easily extended to support popup menus and all sorts of custom stuff, including widgets/checkboxes or separators, and even background images. The flexibility here is pretty astounding actually thanks to Canvas.

I may add a few more comments and features over time, and even if you should no longer be interested in this, I'll leave it there as a tutorial/howto - we've seen enough threads about making the menubar/UI better and this is a fairly simple thing to do these days - and like I said, this is a good thing to do, because it helps us getting rid of obsolete, and much less flexible, C++ code that hasn't been touched/maintained in years. Also, core developers are hoping to phase out our existing GUI library (PUI/PLIB) so this is a worthwhile thing to look into.

If you should still be interested, I am sure that there'll be more helping hands around here - you don't need to understand everything to work with this, and the key really is playing around with the code and making experiments - if you prefer reading, there's an estimated ~250kbytes of Nasal/Canvas documentation covering all sorts of things though ... :mrgreen:

Besides, we'll probably want to add some kind of "popup menu", I already sent a heads-up to Tom so he's aware of my ideas for doing that - mainly because he stated a few days ago:

Subject: How does serviceable and failures work?
TheTom wrote:For now I want to do all widgets on my own or in close cooporation so that I can see where are problems with the API and what common interface proves useful. For example with the spinbox I've just seen that we need better support for composite widgets.


And a generic "popup" widget that supports styling should come in handy for all kinds of MFDs, including the Avidyne Entegra R9 and the GPSMap196/GNS530 efforts.

The oher thing is that we will be easily able to support multiple menubars - even at the same time, as per:

Subject: Sky to Dark at Night (was: Eye Candy & performance Issues)
Hooray wrote:
Bomber wrote in Wed Jun 25, 2014 9:20 am:And then a version taylored for players.. with all testing debugging menus removed, and only menus used for a player's experience available.


The menubar and all options there are 100% XML-configurable using a PropertyList-dialect, much less sophisticated than any of the FDM/XML that experienced JSBSim developers -like yourself- are familiar with - so there's no reason why you shouldn't be able to edit $FG_ROOT/gui/menubar.xml accordingly.

AFAIK, the menubar can also be reloaded at run-time (the upcoming Canvas-based menubar certainly will be reloadable) - which means, we could probably support different menubars with different "options" for different kinds of users/contributors/developers. It might actually lower our workload by removing a few advanced options and configuration dialogs. But none of this is rocket science, and it also doesn't require any programming skills - it's just "boring" XML editing, and requires much less "knowledge" than creating a working JSBSim FDM.

In other words, if you truly believe this to be a sensible way to proceed, I encourage you to come up with a prototype for this (i.e. two sets of XML files with different menubars) so that people can make up their own mind. Once (IF) you do that, I'll take care to ensure that this will be reviewed so that it can be committed as an alternate option.


Also, once we're using Tom's layouting engine (which we don't currently...I am using a workaround using bounding boxes for now), we can easily support all kinds of menu bars, including even vertical ones or nested menu bars - e.g. for AI/ATC interaction.
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: 11573
Joined: Tue Mar 25, 2008 8:40 am

Re: Just a little thing in the menu - ruler

Postby Jabberwocky » Mon Sep 15, 2014 8:50 pm

Okay, I started to play around and ran into some little trouble ...

1.) I can't find a documentation of the complete API. Currently I try to find out how to position the dialog at 0/0. Since the new constructor in the example takes only two parameters which are obviously width and height and not the left upper corner pos (makes sense), something goes on my screen ant takes a default somewhere (estimated) about at 40/50 and then extends the dialog to 1600 (xsize), means it hangs over the left edge.
In lack of a documentation, I tried the usal suspects like setPos, addPos, setPosition ... in vain ... maybe a hint which method the Canvas application offers to set the position would be helpful.

2.) I am using an FG 3.0 loaded from Saiarcot's repository on Ubuntu. There is some kind of canvas API in Nasal/canvas ... but alas, it never heard about VBoxLayout or HBoxLayout ... which makes me think, there must be a more actual api somewhere. A path to that one would be nice too. Otherwise all I get with that example is "No such member: VBoxLayout".

J.
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Re: Just a little thing in the menu - ruler

Postby Hooray » Mon Sep 15, 2014 9:01 pm

Like I mentioned previously, for such things, you really only need to look at existing features, such as the tooltip, and their source code: $FG_ROOT/Nasal/canvas/tooltip.nas
You'll see how things are positioned there.

The layout stuff is exposed via C++ space (cppbind) and requires an up to date binary - but that doesn't matter, it isn't currently being used, so you can just remove anything related to hbox/vbox and setLayout - I'll update the wiki snippet shortly.

In general, api.nas is the place to look for details on anything that isn't covered in the wiki - but overall I wouldn't focus too much on minor issues and just try to make this increasingly functional, we can still polish the whole thing later on. Besides, what about the code ? Can we proceed with a class/object (OOP) based design or do you prefer the previous version for starters ?

PS: tooltip.nas also demonstrates how to create popups :D
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: 11573
Joined: Tue Mar 25, 2008 8:40 am

Re: Just a little thing in the menu - ruler

Postby Jabberwocky » Mon Sep 15, 2014 9:16 pm

Well, okay, api.nas reading it is then. Now, how to get rid of window decorations. To "replace" the old menu, I would need a simple gray stripe, not a fully blown window ... or a fully blown window that looks like a gray stripe without that header "Canvas Dialog"). I looked in the meantime at Omega's 380, same problem there, all the displayas have window decorations.
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Re: Just a little thing in the menu - ruler

Postby Hooray » Mon Sep 15, 2014 9:22 pm

like I said previously, I added the "dialog" decoration for debugging/development purposes, because you can easily close the menubar - which would otherwise require more functionality than there is currently. To remove the dialog decoration, you only need to remove the "dialog" part and it will render a plain window - however, I really consider that "polishing", because -in its current form- you'd end up with a window that you cannot close :D
Thus, it makes sense to actually make the menubar increasingly functional before you remove debugging tools (or even bother into positioning the thing properly). These two things take 60 seconds to "fix" - but given the current state of the snippet, it is premature optimization to focus on such things - otherwise, you'd need to exit/reset FG all the time. So what I did there makes sense.

You could obviously also add a "close" button - but that is more complicated than just using the existing "dialog" decoration.

Changing the appearance/style, position, size is really easy - but premature to do now, because you'd then end up with a nice-looking menu bar that you cannot develop further because it's still missing the most basic functions, such as popups for example :mrgreen:

Seriously, you would not build a house by constructing the roof first and then the basement, would you ? :wink:

All the advice I've given here was given with all this in mind, so I wouldn't prematurely optimize the thing for styling/appearance before everything else is in place. It's probably another ~50 lines of code that is now missing to show popups and actually use translations/bindings. Once all that works, we can make it look like you want, or better make it style-able. Personally, I would let artwork/SVG folks handle styling though. And then, it would also make sense to update things to use Tom's widget framework and layout engine, while also ensuring that the menubar can be used on an existing canvas (e.g. for MFDs)
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: 11573
Joined: Tue Mar 25, 2008 8:40 am

Re: Just a little thing in the menu - ruler

Postby Jabberwocky » Mon Sep 15, 2014 10:43 pm

Lets just say, we have different opinions about a lot of things, but life would be boring if we would have always the same opinions. Personally, I wouldn't start to dig a hole for the basement before I have any idea whether the house will have a first floow, maybe a second and a roof. And for sure, I wouldn't even start to think about buying the lot before I have at least good reason to think, the complete house will be what I imagine it to be. In other words, if there wouldn't be a way to get rid of the decorations, the thing would be unusable and I wouldn't need start to dig. But since it is, as you confirmed, I dug ...

Now, here is my next problem. For some reason, getBoundingBox doesn't have a value. It returns always 0 on my installation. So, for now, I played a bit around it:
Code: Select all
   maxX += size(menu.name)*12+20;


Note: I went from a size 18 font to size 12, therefore multiplied by 12, not 18 as to expect in the original snippet.
I added a little listener for mouseout and abused them for a little color play,

Code: Select all
   var make_handler = func(group, menu, event) {
      group.addEventListener(event, func() {
         # whenever the listener is triggered, print a message to the console
         print("menubar ",event," event :", menu.name);
         if (event=="mouseover") {
            group.setColor(1, 0, 0, 1);
         }
         if (event=="mouseout") {
            group.setColor(1, 1, 1, 1);
         }
      });
   }


just to color the menuitem I'm on in red, all nice and good. Canvas has the usual 3.0 mess with the Liberation font, but well, 3.2 comes up soon anyway. So, now I have to get a submenu up whenever the item is clicked. And somehow, I have reached for now the point, the world ends at a brickwall, so I bow out for today and continue probably tomorrow.

J.
Jabberwocky
Retired
 
Posts: 1319
Joined: Sat Mar 22, 2014 7:36 pm
Callsign: JWOCKY
Version: 3.0.0
OS: Ubuntu 14.04

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 1 guest