Board index FlightGear Development Canvas

Nasal Browser :)  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.

Nasal Browser :)

Postby Philosopher » Thu Jul 11, 2013 12:05 am

I create a Nasal browser for viewing the Nasal state. It's sorta like the property browser, except in Canvas, and with weird controls since I'm not exactly good at Canvas. Tested on 2.10, based off of Hooray's tutorial on the wiki (Hooray: your work on documentation has been much appreciated!). Close button (or the escape key) closes the dialog, upon which point the code refreshes so that changes made will appear when it is next opened (rapid prototyping). Clicking on the title bar will go back in history, clicking on an entry will go inside of that entry -- either a vector or a hash as both can be viewed (other types being displayed inline). Clicking and dragging on the displayed text will scroll the window :lol:. To use, place this file in Nasal/nasal_browser.nas and (preferably) add an entry to the menubar (the name tag should be "Toggle Nasal Browser" or similar and the Nasal script should be «nasal_browser.toggle_window()»).

I pasted the Nasal code here: http://codepad.org/14koLKeg. Enjoy!
Philosopher
 
Posts: 1593
Joined: Sun Aug 12, 2012 7:29 pm

Re: Nasal Browser :)

Postby Hooray » Thu Jul 11, 2013 7:58 am

Image
well, what can I say: that's pretty freakin' cool and could be really useful for runtime-debugging, in fact it could be the foundation for lots of neat tools, not just debuggers !!
Navigation-wise, I'd suggest to add a SVG arrow to the title bar - because you need to click on the non-titled part of the window to navigate back currently.
Probably some highlighting/colors for different primitives would make sense (func, hash, vec, scalar, ghost) and maybe some more treeview-ish display, even if it's just ASCII art for starters:

Image

EDIT: Actually, I'd just use a conventional .. entry at the top to navigate to the previous/parent-level - consistent with file system navigation, and the property browser.
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: Nasal Browser :)

Postby Philosopher » Tue Oct 29, 2013 3:17 pm

Okay, so I tried to convert this to use the new GUI (I'm hoping to add a "scrollable" widget – seeing if I can find my way around the code ;)), and I don't even get an Canvas on top of the window decoration. See this commit in my gitorious branch. Is there something I'm doing wrong here?? I should just be creating a Canvas like Tom’s GUI Demo and adding stuff onto it.
Philosopher
 
Posts: 1593
Joined: Sun Aug 12, 2012 7:29 pm

Re: Nasal Browser :)  

Postby TheTom » Tue Oct 29, 2013 7:35 pm

Set the background color of the canvas to opaque white (255,255,255,1). The default blend mode of a Canvas inside a dialog multiplies everything drawn with the background color (like eg. with textures applied to objects).
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Nasal Browser :)

Postby Philosopher » Tue Oct 29, 2013 8:57 pm

Thanks, that worked. Now I just need to find time to overhaul it for the new system... and implement a scroll bar... and all the other features on my wishlist. :D
Philosopher
 
Posts: 1593
Joined: Sun Aug 12, 2012 7:29 pm

Re: Nasal Browser :)

Postby zakalawe » Tue Oct 29, 2013 11:06 pm

Doesn't Thomas already have some of the widgets, such as the scrollbar? I mean if not I'm sure he'd be happy to have some help developing the widget set!
zakalawe
 
Posts: 1259
Joined: Sat Jul 19, 2008 5:48 pm
Location: Edinburgh, Scotland
Callsign: G-ZKLW
Version: next
OS: Mac

Re: Nasal Browser :)

Postby Hooray » Wed Oct 30, 2013 9:53 am

some of the original canvas demos did have scrollbar support, but those pre-dated most of the development that's been happening during the last 12 month, such as event listeners and canvas improvements.
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: Nasal Browser :)

Postby TheTom » Wed Oct 30, 2013 11:05 am

Yes, with the eventlistener system a scrolling area basically just requires to register an eventlistener on the mousewheel and change the transformation of the client area accordingly. Additionally eg. a simple line/rectangle indicates the position of the client area within the scrolling area. I really like the way Ubuntu does scrollbars with the Overlay Scrollbars and want to also implement this for FlightGear. I think I'll better do this scrollbars on my own, as it requires to draw outside the window/canvas and I'm not sure if everything required is already implemented (Though there should be a version which works completely inside a single canvas).
A "classical" scrollbar is already possible to implement. Just draw a bar within an area indicating the postion and add two buttons on the ends (with click handlers) and you are done.
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Nasal Browser :)

Postby zakalawe » Wed Oct 30, 2013 11:19 am

Personally I hate the scrollbars on Ubuntu, I can never find the right mouse area. But equally I don't hate them enough to provide my own alternative :)
zakalawe
 
Posts: 1259
Joined: Sat Jul 19, 2008 5:48 pm
Location: Edinburgh, Scotland
Callsign: G-ZKLW
Version: next
OS: Mac

Re: Nasal Browser :)

Postby Hooray » Wed Oct 30, 2013 11:24 am

those scrollbars look fancy and really neat - I have been using Ubuntu for several years now, but wasn't aware of those "new" scrollbars, so thanks - I guess, I need to update some things here :D

What you said above sounds really good - I'd just suggest to keep in mind that being able to dynamically place/modify widgets would be awesome to lower the entry barrier for GUI development and allow others to help here, some sort of "layout/design" mode, where an arbitrary widget (canvas group) can be "authored", as in "resized/placed" or restyled.

If that could be also supported at the property tree/canvas level via a handful of Nasal APIs, we would really open up the doors for fgdata developers to help with porting/redesigning the FlightGear GUI - if the widget APIs could be told to make a widget editable, people would need very little Nasal code to come up with WYSWYG gui/dialog or even widget editors.

Sort of like having a handful of flags that directly allow groups to be affected all at once, I think we'd really only need some form of "Editable" interface class that is implemented by each widget, so that each widget can expose editable attributes (e.g. x,y,w,h, color/style) - and once the corresponding flags are set, those event listeners would be delegated to use the Editable interface implementation of each widget, rather than the actual callbacks that implement the widget functionality.

For example, there could be a standard interface for rectangular widgets (think buttons, labels, sliders) for changing x/y, w/h - that would be shared by all rect widgets, and then some form of "label" interface for text labels (buttons etc).

Subject: meta modes

Hooray wrote:Referring to:
Subject: Just a comment
Philosopher wrote in Wed Jul 10, 2013 2:31 pm:Actually a good "development extension" would be one that shows the position in pixels when you click on a Canvas -- so I could just say "I want my text *here* [click]"


Hooray wrote:
Code: Select all
my_canvas.addEventListener("click", func(e) globals.gui.popupTip(sprintf("click (%.1f|%.1f)", e.clientX, e.clientY)));

...now change the event-listener callback to directly modify a PropertyList tree in the property tree, and you'll end up with a WYSIWYG-GUI editor that allows you placing canvas-elements on-screen while serializing everything to a runtime tree/XML file.


Thinking about it, a really useful feature would be allowing "meta modes" for groups that automatically affect placement/resizing, so that the bounding box for the corresponding group is rendered as a frame with hot spots (handles) for mouse drag/drop, so that the whole group becomes optionally resizable and draggable, without manually setting the corresponding properties directly - that would allow a simple widget/GUI designer to be provided on top of the canvas with very little work, just by accessing the top-level group - this could be all done through a single boolean property that transparently modifies the underlying properties and locks the thing afterwards. We could then even load our existing XML dialogs and drag/drop & resize widgets around, which would allow contributors to more easily update/port/edit dialogs and widgets.

I think this could be easily provided at the canvas/GUI level through a single parent class in Nasal, without touching the C++ code - Tom ?

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: Nasal Browser :)

Postby TheTom » Wed Oct 30, 2013 12:02 pm

zakalawe wrote in Wed Oct 30, 2013 11:19 am:Personally I hate the scrollbars on Ubuntu, I can never find the right mouse area. But equally I don't hate them enough to provide my own alternative :)

It automatically appears if you move the mouse towards the edge of a scrollable area. Normally it should be easier to get there than with normal scrollbars, but I'll wait for feedback after I've implemented it :-) Probably I'll add a switch to change to "classic" scrollbars...
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Nasal Browser :)

Postby Hooray » Wed Oct 30, 2013 12:19 pm

once we have a scrollbar widget, we should have most things in place to port the property browser in its current form, which is currently a hardcoded PUI widget :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: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Nasal Browser :)

Postby zakalawe » Wed Oct 30, 2013 12:47 pm

TheTom wrote in Wed Oct 30, 2013 12:02 pm:It automatically appears if you move the mouse towards the edge of a scrollable area. Normally it should be easier to get there than with normal scrollbars, but I'll wait for feedback after I've implemented it :-) Probably I'll add a switch to change to "classic" scrollbars...

I was intrigued enough to make an empirical test, and I've figured out my problem. I suspect it's a straight Mac <-> Ubuntu issue.

- on Mac, the 'invisible' scroll bars appear inside the window. (As a translucent layer on top of the content). You mouse in the 'scrollbar area' to use the scrollbar.
- on Ubuntu, the scrollbars appear when you move the mouse into the region inside the window, but you need to click on the floating part (which is outside the window) to interact with them.

So as a Mac user, I see the feedback appear, and try to click/drag on the area just inside the window frame - and instead I get a regular click in the window, e.g. text selection - and the scrollbars disappear! Personally I prefer the Mac style - no need to draw outside the window frame - but switching between the two is really confusing. If I had no experience of the Mac approach I'd probably be fine with the Ubuntu ones.
zakalawe
 
Posts: 1259
Joined: Sat Jul 19, 2008 5:48 pm
Location: Edinburgh, Scotland
Callsign: G-ZKLW
Version: next
OS: Mac

Re: Nasal Browser :)

Postby Philosopher » Wed Oct 30, 2013 2:29 pm

Haha you guys :P

That's okay, Thomas, if you want to implement it. I have some equations for the behavior (referring to a more Mac-esque layout, where: ratio of (length of bar) to (length of scrollbar area) = ratio of (length of content area) to (length of scrollable content);), but I haven't had a chance to do more than prototype them. Currently I'm just using my old "drag text to scroll" method :lol:. (It actually works fairly well, once I implemented speed-based-on-size, which allows me to scroll the whole window in one stroke :D.)
Philosopher
 
Posts: 1593
Joined: Sun Aug 12, 2012 7:29 pm

Re: Nasal Browser :)

Postby Johan G » Wed Oct 30, 2013 9:37 pm

Something I really miss in the current dialogues and mostly in the property browser (note that I am still running 2.4.0) is support for the scroll wheel. These days I rarely use anything else for scrolling except when explicitly forced to. Hint, hint... ;)
Low-level flying — It's all fun and games till someone looses an engine. (Paraphrased from a YouTube video)
Improving the Dassault Mirage F1 (Wiki, Forum, GitLab. Work in slow progress)
Some YouTube videos
Johan G
Moderator
 
Posts: 6629
Joined: Fri Aug 06, 2010 6:33 pm
Location: Sweden
Callsign: SE-JG
IRC name: Johan_G
Version: 2020.3.4
OS: Windows 10, 64 bit

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 6 guests