Hi fellow wiki editors!

To help newly registered users get more familiar with the wiki (and maybe older users too) there is now a {{Welcome to the wiki}} template. Have a look at it and feel free to add it to new users discussion pages (and perhaps your own).

I have tried to keep the template short, but meaningful. /Johan G

Difference between revisions of "Howto:Canvas Skinning"

From FlightGear wiki
Jump to: navigation, search
(Background)
(Background)
Line 3: Line 3:
 
== Background ==
 
== Background ==
 
[[File:Oscilloscope.png|thumb|rleibner's new Oscilloscope addon is working.This screenshot shows the usual c172p "magnetos checking"  Channel 1 (yellow) is '''rpm''' (100 rpm / div).Channel 2 (mauve) is '''magnetos''' (1 / div).Time sweep is 200 ms / div.The idea is to share it as an addon. Mainly to have some feedback about plot2D/graph.<ref>{{cite web  |url    =  https://forum.flightgear.org/viewtopic.php?p=325929#p325929  |title  =  <nowiki> Re: Plot2D and graph helpers </nowiki>  |author =  <nowiki> rleibner </nowiki>  |date  =  Jan 6th, 2018  |added  =  Jan 6th, 2018  |script_version = 0.36  }}</ref>]]
 
[[File:Oscilloscope.png|thumb|rleibner's new Oscilloscope addon is working.This screenshot shows the usual c172p "magnetos checking"  Channel 1 (yellow) is '''rpm''' (100 rpm / div).Channel 2 (mauve) is '''magnetos''' (1 / div).Time sweep is 200 ms / div.The idea is to share it as an addon. Mainly to have some feedback about plot2D/graph.<ref>{{cite web  |url    =  https://forum.flightgear.org/viewtopic.php?p=325929#p325929  |title  =  <nowiki> Re: Plot2D and graph helpers </nowiki>  |author =  <nowiki> rleibner </nowiki>  |date  =  Jan 6th, 2018  |added  =  Jan 6th, 2018  |script_version = 0.36  }}</ref>]]
 +
 +
when creating new instruments/MFDs, you will find that the Canvas GUI API is lacking many widgets that would be useful:
 +
* [[Canvas Widget Matrix]]
 +
* [[Howto:Creating a Canvas GUI Widget]]
 +
 +
Thus, you would end up using either a conventional [[PUI]] dialog, or create custom widgets from scratch.
 +
 +
Alternatively, a good/better workaround may be to use a raster image and register event listeners, to show an embedded canvas with the actual canvas displayed separately - that is an approach that F-JJTH originally came up with.
 +
 +
Basically, you'd have a "shell" with controls (think widgets) and an inner canvas showing the actual graph, which is accomplished using clipping (you can treat another canvas as a raster image and place it in an outer canvas) - for example, the red area is treated as a screen region, where the instrument is displayed, whereas the outer area is just a conventional raster image that responds to "events" to set up the instrument/oscilloscope):[[File:Canvas-mfd-framework-prototyping.png|250px]]Note that this would make it possible to have all sorts of custom "skins" (think themes) for your "oscilloscope" - if  that's what you are having in mind, i.e. without having to create any missing GUI widgets from scratch, and also without having to use the legacy PUI engine.<ref>{{cite web  |url    =  https://forum.flightgear.org/viewtopic.php?p=325378#p325378  |title  =  <nowiki> Re: Plot2D and graph helpers </nowiki>  |author =  <nowiki> Hooray </nowiki>  |date  =  Dec 28th, 2017  |added  =  Dec 28th, 2017  |script_version = 0.36  }}</ref>
  
  

Revision as of 13:42, 7 January 2018

This article is a stub. You can help the wiki by expanding it.

Background

rleibner's new Oscilloscope addon is working.This screenshot shows the usual c172p "magnetos checking" Channel 1 (yellow) is rpm (100 rpm / div).Channel 2 (mauve) is magnetos (1 / div).Time sweep is 200 ms / div.The idea is to share it as an addon. Mainly to have some feedback about plot2D/graph.[1]

when creating new instruments/MFDs, you will find that the Canvas GUI API is lacking many widgets that would be useful:

Thus, you would end up using either a conventional PUI dialog, or create custom widgets from scratch.

Alternatively, a good/better workaround may be to use a raster image and register event listeners, to show an embedded canvas with the actual canvas displayed separately - that is an approach that F-JJTH originally came up with.

Basically, you'd have a "shell" with controls (think widgets) and an inner canvas showing the actual graph, which is accomplished using clipping (you can treat another canvas as a raster image and place it in an outer canvas) - for example, the red area is treated as a screen region, where the instrument is displayed, whereas the outer area is just a conventional raster image that responds to "events" to set up the instrument/oscilloscope):Canvas-mfd-framework-prototyping.pngNote that this would make it possible to have all sorts of custom "skins" (think themes) for your "oscilloscope" - if that's what you are having in mind, i.e. without having to create any missing GUI widgets from scratch, and also without having to use the legacy PUI engine.[2]


this way of setting up the skin using a hash with arguments is pretty elegant - I forgot to mention that you can obtain the coordinates for the hotspot by using a global event listener on the canvas/group and make that print the coordinates for drag/drop to the console. That way, it is easy to come up with the coordinates for all widgets, but also for the inner screen region - i.e. where you'd probably use clipping and/or a canvas image child to reference the actual graph canvas.If you are planning on adding such a skin also to your GCA addon, my suggestion would be to come up with a helper class, e.g. something like "Skinnable", using an outer image and an inner one (potentially, even a vector of images). The helper class could also contain support for setting up hot-spots specific tooltips. I've been in touch with Stuart about this, mainly in the context of his recent FG1000 work, so if you should come up with such a helper class (or even just a wiki tutorial demonstrating the approach), that may be helpful in and of itself.[4]

Related

References
  1. rleibner  (Jan 6th, 2018).  Re: Plot2D and graph helpers .
  2. Hooray  (Dec 28th, 2017).  Re: Plot2D and graph helpers .
  3. Hooray  (Dec 28th, 2017).  Re: Plot2D and graph helpers .
  4. Hooray  (Jan 7th, 2018).  Re: Spoken GCA .