Board index FlightGear Development Canvas

Canvas GUI & Michat's GUI mockups

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.

Canvas GUI & Michat's GUI mockups

Postby Hooray » Wed May 01, 2013 11:25 pm

Hey Hooray I did for about 3000 graphics elements, I prepared a lot of material to use for a web page gadget or a interactive banner for OR-FG promos.


I don't know what to say, your mockups really look fantastic - and it seems your skills could be REALLY useful when it comes to porting our existing PLIB/PUI GUI over to use the Canvas system - which will probably be based on SVG/vector images. That effort will require providing a bunch of "widgets" to match the features found in the existing FG GUI - and make them stylable using a form of CSS: http://wiki.flightgear.org/Canvas_Widgets

TheTom has been working on this recently, and Zakalawe already added some Canvas-based tooltips, so it would be great to coordinate the efforts a little - so that we could grow a library of standard widgets for use in FlightGear.

Would you be interested in working out the details of a new GUI toolkit for FlightGear, including the widgets ?
Obviously, this would need to be based on Inkscape images, and use some form of styling - and ideally Nasal for bindings/actions (and maybe animations).

Maybe you could contribute your thoughts to the wiki ?
Again, please see: http://wiki.flightgear.org/Canvas_Widgets

(the wiki article hasn't been updated in a while - but it does demonstrate the original prototyping ideas)

I'm sure that TheTom can fill you in on his plans - and if/how your skills could be put to good use.

EDIT: Sent a heads-up to TheTom, so that we can split the thread and move it to 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: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Michat OpenRadar Ideas all in a row

Postby TheTom » Wed May 01, 2013 11:56 pm

I'm still not completely sure how to implement the GUI, but currently I'm thinking of something similar to most available UI toolkits with mainly using images together with 9-scale/slicing. Theming would be possible by simply exchanging the images and/or modulate them with a color.

For some icons/elements also SVG could be used, and maybe I'll implement the possibility to cache rendered images of SVG elements for faster rendering of them.
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Canvas GUI & Michat's GUI mockups

Postby Michat » Thu May 02, 2013 5:41 pm

I'm happy to know that you liked my mockups and they can fill some space. And yes, I'm very interested in to improve FG's look as good as possible since first day I meet FG.

I have no idea of Vectorial. I did re install InkScape by a suggestion on the IRC. However I knew of it's existence, but I had no time to learn it's use. In four attempts I did nothing, cause is another paradigm method that it uses, wacon tablet needed.

Also, since I knew the existence of the canvas I was very interesting in to know how it works, cause it brings a lot of options. I.e a GUI for the 2-d panel gauges, placement and creation. I love good 2-d panels.

I have no idea of NASAL and animations, but with some good color selection and styles we can easily improve even if we don't use any image, however using images or icons could be a great enhancement, if we know how not to abuse using them.

Count with my help. I'll released this night a special windget series, with some happy ideas. However I think we also need a jcoder, because I though also to use them on a html embebed code to share around the world wide web.

If you have control over color we can share #rgb's.

Gonna read canvas wiki again.

Thanks
Last edited by Michat on Thu May 02, 2013 6:25 pm, edited 1 time in total.
User avatar
Michat
 
Posts: 1226
Joined: Mon Jan 25, 2010 7:24 pm
Location: Spain
Version: 191b
OS: MX 21 Fluxbox oniMac

Re: Canvas GUI & Michat's GUI mockups

Postby Hooray » Thu May 02, 2013 5:51 pm

According to what Tom said earlier, he's apparently no longer convinced to fully base this on on vector images. So your raster images would seem fine for the time being.

Also, since I knew the existence of the canvas I was very interesting in to know how it works, cause it brings a lot of options. I.e a GUI for the 2-d panel gauges, placement and creation. I love good 2-d panels.

Using the canvas and some Nasal code, you can basically make "interactive textures" that respond to events, to implement keyboard/mouse interaction - and you can also animate textures, and create popup windows/tooltips etc.

For example, see:
Subject: Canvas custom GUI
Flying toaster wrote:I am trying to make a custom GUI for the loadout (i.e. without the standard widgets) and I am using the GUI.nas Dialog class to set this up...
Image

Basically, you can define image regions, that receive GUI events (like a mouse click or keyboard events) - and then change/animate a texture, to show a popup or do something else.

However I think we also need a coder, because I though also to use them on a html embebed code to share around the world wide web.

Coding-wise Tom has been implementing the infrastructure to expose the interface to Nasal, from then on it's fairly simple for people to use Nasal to make texture interactive, so that they respond to events - from a coder's point of view, having someone who provides the artwork is REALLY useful - keep in mind that most coders are often not really good artists (and vice versa).

Tom has a bunch of canvas demos in his gitorious repository - you may want to have a look at them, they shouldn't require a rebuilt FG binary, it's all just text files and textures in $FG_ROOT basically - which are made interactive using Nasal. So if we can agree on roadmap, I can help with the scripting side, Tom can continue on the C++ side, and you could focus on providing the artwork.
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 GUI & Michat's GUI mockups

Postby Michat » Thu May 02, 2013 6:31 pm

Excellent I'm agree because you fill all my limitations, we complement each other. Wow the smoke interface is awesome example. I'm dreaming a lot of ideas. :P
User avatar
Michat
 
Posts: 1226
Joined: Mon Jan 25, 2010 7:24 pm
Location: Spain
Version: 191b
OS: MX 21 Fluxbox oniMac

Re: Canvas GUI & Michat's GUI mockups

Postby Michat » Mon May 06, 2013 1:15 am

Gentlemen, we can start with an easy widget. A rally timer.

Clock must start automatic if aircraft speed > 16 kt, and stop <16kt There are two modes big and small. :)

Image

Image

Image

Image

What do you think for a good starting? Is a chrono :mrgreen:
User avatar
Michat
 
Posts: 1226
Joined: Mon Jan 25, 2010 7:24 pm
Location: Spain
Version: 191b
OS: MX 21 Fluxbox oniMac

Re: Canvas GUI & Michat's GUI mockups

Postby TheTom » Mon May 06, 2013 10:50 pm

That was easy :) Copy the files from https://www.dropbox.com/s/zqo13b75niw84 ... -timer.zip to $FG_HOME/Nasal and start up FlightGear. The timer is always visible, started once above 16kt (groundspeed) and stopped once below. Its not configurable, close-able, etc. though, but it shows that it is not hard to create custom widgets. Maybe using better images would improve the appearance :P
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Canvas GUI & Michat's GUI mockups

Postby Michat » Tue May 07, 2013 4:31 am

WOW. It was fantastic I dreamed and requested this function since 4-5 years ago. Now we can do a Great FG Rally, amazing.......LOL time. My very thanks to you.
But, first of all I must declare that I can't test it, I'm using 2 old PC, 333mhz and 800mhz, but I'm getting fun like in the old times.

Okay, lets say it was easy...

What do yo think if we use a sound when rally Timer is activated. What about the classic casio watch chrono sound. Or maybe a voice saying "Rally Timer Activated.

That is up to you because I'm not programmer, but I can read your code so well, it is clear, and it seems easy to me as a code reader to understand a little bit more about canvas and Nasal.

Next gadget could be an smart wind socket. Well I don't like to plan the route, but I think is better to use the designs are ready. Anyway if you have a suggestion for a custom idea I'll be happy to help.

It seems that all I dream becomes reality in FG. 5 years ago I was showing a 2D design for a Radio Station, well in fact nobody cared about it, it was the time of the 3D panel. Now I'm back in the past trying to find that lost file, but I think I still have a flat jpg.

I love 2D. I love canvas. I'll try to do my best.
User avatar
Michat
 
Posts: 1226
Joined: Mon Jan 25, 2010 7:24 pm
Location: Spain
Version: 191b
OS: MX 21 Fluxbox oniMac

Re: Canvas GUI & Michat's GUI mockups

Postby jam007 » Tue May 07, 2013 8:47 am

Where can I read mode about?
Code: Select all
var timer = maketimer(0, func { ... });
timer.start();
jam007
 
Posts: 576
Joined: Sun Dec 16, 2012 11:04 am
Location: Uppsala, Sweden
Version: 2020.4.0
OS: Ubuntu 22.04

Re: Canvas GUI & Michat's GUI mockups

Postby TheTom » Tue May 07, 2013 10:31 am

I've added some info about the new nasal timer objects to the wiki: http://wiki.flightgear.org/List_of_Nasa ... 2.11.2B.29
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Canvas GUI & Michat's GUI mockups

Postby jam007 » Tue May 07, 2013 11:36 am

:) Thanks!
jam007
 
Posts: 576
Joined: Sun Dec 16, 2012 11:04 am
Location: Uppsala, Sweden
Version: 2020.4.0
OS: Ubuntu 22.04

Re: Canvas GUI & Michat's GUI mockups

Postby jam007 » Thu May 09, 2013 9:19 am

One more question.
In the code there is:
Code: Select all
my_canvas.addEventListener("drag", func(e) { dlg.move(e.deltaX, e.deltaY); })

I have been looking for available event types and corresponding members. Since I would like to add an "click at"(?) handling.
Where can I find these?
jam007
 
Posts: 576
Joined: Sun Dec 16, 2012 11:04 am
Location: Uppsala, Sweden
Version: 2020.4.0
OS: Ubuntu 22.04

Re: Canvas GUI & Michat's GUI mockups

Postby TheTom » Thu May 09, 2013 10:37 am

You can attach a "click" event to any type of element placed on a canvas. I've added some information about canvas events to the wiki: http://wiki.flightgear.org/Canvas_-_Event_Handling
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Canvas GUI & Michat's GUI mockups

Postby jam007 » Thu May 09, 2013 1:11 pm

Thanks again!
I tried this:
Code: Select all
var radar = {
  new: func()
  {
    print("Powering up radar...");

    var m = { parents: [radar] };
   
    # create a new canvas...
    m.canvas = canvas.new({
      "name": "RADAR",
      "size": [1024, 1024],
      "view": [1024, 1024],
      "mipmapping": 1
    });
   
    # ... and place it on the object called Screen
    m.canvas.addPlacement({"node": "Screen"});
    m.canvas.setColorBackground(0.20,0.27,0.16);
    m.canvas.addEventListener("click", func(e) { print(e.clientX ~" " ~ e.clientY); });
    var g = m.canvas.createGroup();
    var g_tf = g.createTransform();

 ....


It creates the listener: addEventListener(/canvas[0]/by-index[0]/texture[1], click) and the texture property is correct.
But nothing happens. I get a ground-pick but no print of x y when clicking. (No error massages that I could see.) :?
jam007
 
Posts: 576
Joined: Sun Dec 16, 2012 11:04 am
Location: Uppsala, Sweden
Version: 2020.4.0
OS: Ubuntu 22.04

Re: Canvas GUI & Michat's GUI mockups

Postby TheTom » Thu May 09, 2013 1:15 pm

Ah, you are attaching event listeners currently only works for canvasses placed into pui windows or canvas windows. I'm currently working on passing events to canvasses placed on 3d objects. I'm nearly done and should commit something within the next hours.
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 3 guests