Board index FlightGear Development Canvas

SVG Clips and Masks in canvas space

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.

SVG Clips and Masks in canvas space

Postby omega95 » Thu Jul 17, 2014 9:38 pm

So, I found out about the efforts to make an HUD on canvas http://wiki.flightgear.org/Canvas_HUD but it looks like it's missing some functionality as a heads up display instrument itself.

I wanted something more like this -
Image

So, I created an SVG and learnt about clips and masks and set it up on inkskape -
Image

But after loading it on FlightGear, the clips seem to be pretty messed up -
Image

So, I was wondering if Clips/Masks are actually parsed by canvas but I found that Gijs' PFD svg file uses lots of clips.

Some help here please?

[b]--------------------------------- EDIT ----------------------------[/b

In Gijs' canvas PFD nasal file, I found this line -

Code: Select all
horizon.set("clip", "rect(244, 705, 764, 230)");


What exactly does that do?
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: SVG Clips and Masks in canvas space

Postby Philosopher » Thu Jul 17, 2014 9:57 pm

it sets a mask with the coordinates, so that anything outside of the box is not displayed (effectively doesn't exist). I don't think SVG clipping got implemented yet, and only rectangles are support AFAIK.
Thanks,
Philosopher
(inactive but lurking occasionally...)
Philosopher
 
Posts: 1590
Joined: Sun Aug 12, 2012 6:29 pm
Location: Stuck in my head...
Callsign: AFTI
Version: Git
OS: Mac OS X 10.7.5

Re: SVG Clips and Masks in canvas space

Postby omega95 » Thu Jul 17, 2014 10:00 pm

and only rectangles are support AFAIK.


Hmm, But the horizon in Gijs' PFD has curved edges. But I should be good with just rectangles for now, thank you! :)
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: SVG Clips and Masks in canvas space

Postby Philosopher » Thu Jul 17, 2014 10:13 pm

Vide etiam: viewtopic.php?f=71&t=20911&p=190621&hilit=+clip#p190621

I believe Tom also mentioned somewhere that one could make a transparent masking object (i.e. alpha=0) and set the blend mode to ensure that masks everything beneath it (I don't recall details, but some of the other blend modes will allow alpha=0 objects to cover elements beneath them, whereas normally it will have no graphical effect).
Thanks,
Philosopher
(inactive but lurking occasionally...)
Philosopher
 
Posts: 1590
Joined: Sun Aug 12, 2012 6:29 pm
Location: Stuck in my head...
Callsign: AFTI
Version: Git
OS: Mac OS X 10.7.5

Re: SVG Clips and Masks in canvas space

Postby omega95 » Thu Jul 17, 2014 11:11 pm

So, here's the code I have so far -

Code: Select all
var t = {parents:[hud]};
      
      t.display = canvas.new({
         "name": "HUD",
         "size": [1024, 740],
         "view": [1024, 740],
         "mipmapping": 1
      });
      
      var font_mapper = func(family, weight)
      {
         if( family == "Liberation Sans" and weight == "normal" )
            return "LiberationFonts/LiberationSans-Regular.ttf";
      };
      
      t.props = interface_props;
      t.params = flight_params;
      t.display.addPlacement({"node": obj_name});
      t.symbols = t.display.createGroup();
      
      canvas.parsesvg(t.symbols, svg_path, {'font-mapper': font_mapper});
      t.display.setColorBackground(0.36, 1, 0.3, 0.02);
      
      # t.symbols.getElementById("wind_arrow").updateCenter();
      
      # Set Clips
      ## Central Horizon box
      t.symbols.getElementById("horizon_heading").set("clip", "rect(115,205,80,220)");
      t.symbols.getElementById("horizon_lines").set("clip", "rect(115,205,80,220)");
      ## Speed Tape box - horizontal clipping is not important anymore
      t.symbols.getElementById("spd_tape").set("clip", "rect(200,0,220,0)");
      t.symbols.getElementById("stall_tape").set("clip", "rect(200,0,220,0)");
      t.symbols.getElementById("flaps_tape").set("clip", "rect(200,0,220,0)");
      ## Altitude Tape box
      t.symbols.getElementById("alt_tape_text").set("clip", "rect(200,0,220,0)");
      ## Altitude Marker Tape boxes
      t.symbols.getElementById("alt_tape_markers_top").set("clip", "rect(360,0,220,0)");
      t.symbols.getElementById("alt_tape_markers_bottom").set("clip", "rect(200,0,400,0)");
      ## Alitude 100s Tape box
      t.symbols.getElementById("alt_tape_100s").set("clip", "rect(325,0,350,0)");
      ## Vertical Speed Indicator box
      t.symbols.getElementById("vs_pointer").set("clip", "rect(230,0,250,0)");
      
      return t;


The object names are correct and I don't get any errors but it doesn't seem to be clipping them. Do I have to actually also have a clip on the SVG file instead of just leaving them there?

Image
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: SVG Clips and Masks in canvas space

Postby Necolatis » Thu Jul 17, 2014 11:59 pm

Not sure how it works with SVG. But when you have something transparent and something opaque in canvas, the transparent object will only be shown then it is overlapping the opaque item. Guess that could be used to make a custom mask. I can confirm it works since I had that issue.
"Airplane travel is nature's way of making you look like your passport photo."
— Al Gore
User avatar
Necolatis
 
Posts: 2045
Joined: Mon Oct 29, 2012 12:40 am
Location: EKOD
Callsign: Leto
IRC name: Neco
Version: 2019.1.2
OS: Windows 10

Re: SVG Clips and Masks in canvas space

Postby omega95 » Fri Jul 18, 2014 12:28 am

But I don't have any transparent items - I'm only using rectangular clips on the nasal file - nothing at all on SVG itself. :| Do I need anything on the SVG file?
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: SVG Clips and Masks in canvas space

Postby Necolatis » Fri Jul 18, 2014 12:39 am

Yeah, I might have spoken too soon, not sure now how that can be used now either actually, cause you would be able to see the mask, which defies its purpose, sorry.
"Airplane travel is nature's way of making you look like your passport photo."
— Al Gore
User avatar
Necolatis
 
Posts: 2045
Joined: Mon Oct 29, 2012 12:40 am
Location: EKOD
Callsign: Leto
IRC name: Neco
Version: 2019.1.2
OS: Windows 10

Re: SVG Clips and Masks in canvas space

Postby Philosopher » Fri Jul 18, 2014 12:48 am

No, you don't have to change the SVG file, everything can be done through Nasal. Try not using 0 for the y coordinates – just a guess but it might be rejecting a zero-width bounding box. Also, I'm not sure if it's x1,y1,x2,y2 or x,y,w,h – but I suspect the latter – so you'll probably have to change it.
Thanks,
Philosopher
(inactive but lurking occasionally...)
Philosopher
 
Posts: 1590
Joined: Sun Aug 12, 2012 6:29 pm
Location: Stuck in my head...
Callsign: AFTI
Version: Git
OS: Mac OS X 10.7.5

Re: SVG Clips and Masks in canvas space

Postby omega95 » Fri Jul 18, 2014 12:53 am

http://wiki.flightgear.org/Canvas_Nasal_API#set_2

Looks like it's distance from top, right, bottom, left. I didn't have any right or left bounds, so I left them as 0, but ok - I'll try changing them. :)

EDIT - Doesn't work. :(
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: SVG Clips and Masks in canvas space

Postby Hooray » Fri Jul 18, 2014 5:49 am

Last I checked, you had to keep your translation in mind, but it worked properly.
Here's a MapStructure map added as a clipped rectangle to an existing canvas, basically acting as a "sub-screen":
http://wiki.flightgear.org/MapStructure ... map_dialog
Image
(see the giit repo for the code setting up clipping here)
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: SVG Clips and Masks in canvas space

Postby omega95 » Fri Jul 18, 2014 10:07 am

I found out what was going on - I entered the distance between the clip bounds and the vector image sides as in the rect() fields. But it seems that, all distances are measured from the top-left corner instead of each side. Found this out by taking a closer look at Gijs' PFD (the left an right bounds were 1024 and 0 :) ) But then I took a look at CSS clipping page referenced in the wiki -

Image

Thank you very much!

P.S. I'm going to be out for about 2 days - flying back to the US.
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: SVG Clips and Masks in canvas space

Postby TheTom » Fri Jul 18, 2014 10:10 am

The 'clip' property has the exact same format as with CSS: http://www.w3.org/TR/CSS21/visufx.html#clipping All distances are measured in the global coordinate frame of the canvas (rect(y1, x2, y2, x1)). You can change the reference frame by setting 'clip-frame' to canvas.Element.GLOBAL (the default value), canvas.Element.PARENT or canvas.Element.LOCAL.

I've already started to work on parsing rectangular SVG masks and clipPaths, so if you are using them in your SVG they should work automatically soon.

edit: seems like you already found out how it works^^
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am


Return to Canvas

Who is online

Users browsing this forum: No registered users and 2 guests