27th Oct 2016 SVG graphics and .NET 4.6

Discussions about the preview versions of Virtual Radar Server.
Forum rules
Please bear in mind if you do install a preview version that it is unfinished code, there may be bugs, bits missing, things that don't work etc.

Posts in this forum will not show up in forum search results. Old threads will be pruned occasionally.
agw
Posts: 1883
Joined: Fri Feb 17, 2012 3:20 am

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby agw » Sun Nov 06, 2016 2:07 am

egpd1701 wrote:I've loaded the new preview version but I don't see the new embedded SVG's? Is there anything else I need to do to activate them?


Are you saying that you don't see any markers, just the trail lines roaming around, or are you saying that you can see markers but you think they're the same as they were before?

The SVG aircraft markers look pretty much identical to the existing bitmap markers, the only difference you can see on screen is that the text font is slightly different and has a darker shadow behind it. On mono you don't get the black box behind the text any more, it should look markedly different.

If you're just seeing trails and no markers then the SVG's aren't being rendered by your browser. Which browser are you using? If you install the preview dated 5th November do you see markers again? That preview includes support for (hopefully!) detecting browsers that don't support SVG - when that happens the site should fall back to using the old bitmap markers.

egpd1701 wrote:I have another question too. I want to create SVG's per type like we do for dump1090 etc and I would like to see a small (1 or 2 a/c) example of how to code the custom plugin as I'm just missing something on this thread please.


I'll be posting a full code sample of how to add your own markers via the custom content plugin but I might wait until I've stopped fiddling with the SVG bits first :)

egpd1701
Posts: 43
Joined: Fri Nov 08, 2013 3:39 pm

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby egpd1701 » Thu Nov 17, 2016 9:00 pm

Hi

I think I mis-understood the markers. I am seeing them fine, its just that I was thinking of something else.

Still cant figure out how to add my own svg. I'm not sure how VRS knows what the a/c type is and how it relates to the svg code in the custom content.

Nevermind
Posts: 26
Joined: Thu Sep 11, 2014 12:36 am

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby Nevermind » Fri Nov 18, 2016 6:41 am

Hi,

how to transform

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            if(VRS.globalOptions && VRS.globalOptions.aircraftMarkers) {
                VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
                    normalFileName: 'mil.png',
                    selectedFileName: 'mil-sel.png',
                    size: { width: 60, height: 60 },
                    matches: function(aircraft) { return aircraft.isMilitary.val; }
                }));
            }
        });
    }
</script>


to change the Color for svgAircraftMarkerNormalFill ?


Thx :)

egpd1701
Posts: 43
Joined: Fri Nov 08, 2013 3:39 pm

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby egpd1701 » Fri Nov 18, 2016 6:58 pm

HI

I think i'm not understanding something here.

Does the above code work for PNG's or SVG's?

If for PNG's can it be adapted for SVG's and are there any more alterations needed?

Thanks

Nevermind
Posts: 26
Joined: Thu Sep 11, 2014 12:36 am

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby Nevermind » Sat Nov 19, 2016 5:58 am

egpd1701 wrote:Does the above code work for PNG's or SVG's?


It is for png only.

egpd1701 wrote:If for PNG's can it be adapted for SVG's and are there any more alterations needed?


That's what i want to know ;)

agw
Posts: 1883
Joined: Fri Feb 17, 2012 3:20 am

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby agw » Mon Nov 21, 2016 1:45 am

I've been side-tracked back onto the SDM site in my VRS free time so I've not finished off the SVG stuff yet. However, as things stand at the moment, the AircraftMarker_Settings object that you're setting up in the example above has a new (optional) field on it called embeddedSvg. If you supply it then the field needs to point to an object that has two properties:

svg: the SVG for the marker but without the initial XML tag.
aircraftMarkerStatusFillPaths: an optional array of strings. These are the IDs of paths in the SVG that VRS will fill with a colour to indicate the status of the aircraft (i.e. white for not selected, yellow for selected). If this is missing or null then the aircraft doesn't get coloured in when it's selected.

The aircraftMarkerStatusFillPaths bit is the part that's most likely to change / get removed before development is finished.

You can see examples of these embedded SVG objects in the embeddedSvgs.js file:

https://github.com/vradarserver/vrs/blob/master/VirtualRadar.WebSite/Site/Web/script/vrs/embeddedSvgs.js

That JavaScript is actually the output from the TypeScript compiler. The original source is here, but note that it's not valid JavaScript, if you want to base your markers on this then you'll need to pass it through the TypeScript compiler (which you can download from Microsoft if you don't already have Visual Studio installed):

https://github.com/vradarserver/vrs/blob/master/VirtualRadar.WebSite/Site/Web/script/vrs/embeddedSvgs.ts

The SVG you supply will be stuck into a group and then rotated and sized to whatever size is specified in the original aircraft marker settings object (e.g. 60x60 in your example above), which is why you need to make sure that you don't have the usual <?xml version="1.0" encoding="UTF-8" standalone="no"?> tag at the start of the SVG. There's a whole pile of SVG going into the marker before and after your SVG.

What I did was I drew the SVG in InkScape, then opened the SVG with a text editor (SVG files are just text, they're XML), copied it into the source and then stripped out all of the inkscape and sodipodi namespace elements. However you should be alright if you leave InkScape or Adobe custom tags in, I just didn't want to waste space with them as they're not going to be used. I think I tidied up some IDs as well.

So, as a final example - here's the aircraft marker settings for the Medium 2 Jet marker:

Code: Select all

new VRS.AircraftMarker({
    normalFileName: 'WTC-Medium-2-Jet.png',
    selectedFileName: 'WTC-Medium-2-Jet-Selected.png',
    embeddedSvg: VRS.EmbeddedSvgs.Marker_Medium2Jet,
    size: { width: 40, height: 40 },
    matches: function (aircraft) { return aircraft.wakeTurbulenceCat.val === VRS.WakeTurbulenceCategory.Medium && aircraft.countEngines.val !== '4' && aircraft.engineType.val === VRS.EngineType.Jet; }
})


You'll see that embeddedSvg is pointing off to a separate object but that's only so I could avoid spamming up the aircraft plotter JavasScript file with SVGs. That file is getting too large as it is. Here's the definition of VRS.EmbeddedSvgs.Marker_Medium2Jet:

Code: Select all

EmbeddedSvgs.Marker_Medium2Jet = {
    svg: "<svg\n   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n   xmlns:cc=\"http://creativecommons.org/ns#\"\n   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n   xmlns:svg=\"http://www.w3.org/2000/svg\"\n   xmlns=\"http://www.w3.org/2000/svg\"\n   xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n   width=\"40\"\n   height=\"40\"\n   viewBox=\"0 0 40 40\"\n   id=\"svg2\"\n   version=\"1.1\">\n  <defs\n     id=\"defs4\">\n    <filter\n       style=\"color-interpolation-filters:sRGB\"\n       id=\"filter4194\">\n      <feFlood\n         flood-opacity=\"1\"\n         flood-color=\"rgb(0,0,0)\"\n         result=\"flood\" />\n      <feComposite\n         in=\"flood\"\n         in2=\"SourceGraphic\"\n         operator=\"in\"\n         result=\"composite\" />\n      <feGaussianBlur\n         in=\"composite\"\n         stdDeviation=\"1\"\n         result=\"blur\" />\n      <feComposite\n         in=\"SourceGraphic\"\n         in2=\"blur\"\n         operator=\"over\" />\n    </filter>\n  </defs>\n  <g\n     id=\"outline\"\n     transform=\"translate(0,9.0000004)\"\n     style=\"display:inline;opacity:1\">\n    <path\n       style=\"fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.75;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter4194);stroke-miterlimit:4;stroke-dasharray:none\"\n       d=\"m 20.047765,-1.4164221 c -1.077558,0.031588 -1.578202,2.37408345 -1.633331,2.6993142 -0.07206,1.2300474 -0.0472,4.7773739 -0.0472,4.7773739 l -0.673248,0.3459711 -0.01669,-0.3170476 -0.05006,-0.8343336 -1.902283,0 -0.06675,1.6019214 0.166868,0.5506616 c 0,0 -4.742758,2.4104002 -5.9237742,3.0870381 -0.1926247,0.211639 -0.083434,1.835536 -0.083434,1.835536 l 6.4577482,-2.052463 2.102523,4e-6 3e-6,4.889199 0.35042,1.969029 -2.803363,1.735415 0,1.81885 3.287277,-0.967829 0.317047,1.101322 1.051262,4e-6 0.20024,-1.151381 3.354024,0.834334 -0.133493,-1.702042 -2.753304,-1.668669 0.383794,-1.969029 0.03337,-4.922573 1.835536,0 6.975035,2.185956 c 0,0 -0.04908,-1.577846 -0.266986,-1.885596 C 29.177708,9.9695601 24.285221,7.4241329 24.285221,7.4241329 l 0.23361,-0.6674708 -0.05006,-1.4684292 -2.002402,0.01669 c -0.03854,0.6147912 -0.219772,0.4596316 -0.18355,1.0679481 L 21.698797,6.1058836 c -0.0172,-1.6764379 0.07023,-3.1346146 -0.06674,-4.805766 -0.310453,-2.08555889 -1.148455,-2.729316 -1.584292,-2.7165397 z\"\n       id=\"outline-path\"\n       transform=\"matrix(1.0556793,0,0,1.0556793,-1.0835713,0.79709884)\"\n    />\n  </g>\n</svg>",
    aircraftMarkerStatusFillPaths: ['outline-path']
};


If I wanted to keep the SVG and the aircraft marker options together in one object then I could also have written it like this:

Code: Select all

new VRS.AircraftMarker({
    normalFileName: 'WTC-Medium-2-Jet.png',
    selectedFileName: 'WTC-Medium-2-Jet-Selected.png',
    embeddedSvg:  {
        svg: "<svg\n   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n   xmlns:cc=\"http://creativecommons.org/ns#\"\n   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n   xmlns:svg=\"http://www.w3.org/2000/svg\"\n   xmlns=\"http://www.w3.org/2000/svg\"\n   xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n   width=\"40\"\n   height=\"40\"\n   viewBox=\"0 0 40 40\"\n   id=\"svg2\"\n   version=\"1.1\">\n  <defs\n     id=\"defs4\">\n    <filter\n       style=\"color-interpolation-filters:sRGB\"\n       id=\"filter4194\">\n      <feFlood\n         flood-opacity=\"1\"\n         flood-color=\"rgb(0,0,0)\"\n         result=\"flood\" />\n      <feComposite\n         in=\"flood\"\n         in2=\"SourceGraphic\"\n         operator=\"in\"\n         result=\"composite\" />\n      <feGaussianBlur\n         in=\"composite\"\n         stdDeviation=\"1\"\n         result=\"blur\" />\n      <feComposite\n         in=\"SourceGraphic\"\n         in2=\"blur\"\n         operator=\"over\" />\n    </filter>\n  </defs>\n  <g\n     id=\"outline\"\n     transform=\"translate(0,9.0000004)\"\n     style=\"display:inline;opacity:1\">\n    <path\n       style=\"fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.75;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter4194);stroke-miterlimit:4;stroke-dasharray:none\"\n       d=\"m 20.047765,-1.4164221 c -1.077558,0.031588 -1.578202,2.37408345 -1.633331,2.6993142 -0.07206,1.2300474 -0.0472,4.7773739 -0.0472,4.7773739 l -0.673248,0.3459711 -0.01669,-0.3170476 -0.05006,-0.8343336 -1.902283,0 -0.06675,1.6019214 0.166868,0.5506616 c 0,0 -4.742758,2.4104002 -5.9237742,3.0870381 -0.1926247,0.211639 -0.083434,1.835536 -0.083434,1.835536 l 6.4577482,-2.052463 2.102523,4e-6 3e-6,4.889199 0.35042,1.969029 -2.803363,1.735415 0,1.81885 3.287277,-0.967829 0.317047,1.101322 1.051262,4e-6 0.20024,-1.151381 3.354024,0.834334 -0.133493,-1.702042 -2.753304,-1.668669 0.383794,-1.969029 0.03337,-4.922573 1.835536,0 6.975035,2.185956 c 0,0 -0.04908,-1.577846 -0.266986,-1.885596 C 29.177708,9.9695601 24.285221,7.4241329 24.285221,7.4241329 l 0.23361,-0.6674708 -0.05006,-1.4684292 -2.002402,0.01669 c -0.03854,0.6147912 -0.219772,0.4596316 -0.18355,1.0679481 L 21.698797,6.1058836 c -0.0172,-1.6764379 0.07023,-3.1346146 -0.06674,-4.805766 -0.310453,-2.08555889 -1.148455,-2.729316 -1.584292,-2.7165397 z\"\n       id=\"outline-path\"\n       transform=\"matrix(1.0556793,0,0,1.0556793,-1.0835713,0.79709884)\"\n    />\n  </g>\n</svg>",
        aircraftMarkerStatusFillPaths: ['outline-path']
    },
    size: { width: 40, height: 40 },
    matches: function (aircraft) { return aircraft.wakeTurbulenceCat.val === VRS.WakeTurbulenceCategory.Medium && aircraft.countEngines.val !== '4' && aircraft.engineType.val === VRS.EngineType.Jet; }
})

Nevermind
Posts: 26
Joined: Thu Sep 11, 2014 12:36 am

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby Nevermind » Mon Nov 21, 2016 3:42 pm

Thank you for this detailed description! I think I understood.

But maybe I misrepresented my question.
I dont need the png files. This is just my current code for military aircraft.

I thought it would be a little easier. Like:

Code: Select all

new VRS.AircraftMarker({
   svgAircraftMarkerNormalFill: '#FF0000'
   matches: function(aircraft) { return aircraft.isMilitary.val; }
})


So all military aircraft are filled with the color red.
I'm sorry if I confused you with the code from the first post.

egpd1701
Posts: 43
Joined: Fri Nov 08, 2013 3:39 pm

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby egpd1701 » Mon Nov 21, 2016 4:59 pm

Hi Andrew

That makes a lot more sense now, thank you.

Just have 1 most silly question - why do we still need .png's if the a/c are being drawn my svg's?

normalFileName: 'WTC-Medium-2-Jet.png',
selectedFileName: 'WTC-Medium-2-Jet-Selected.png',

Wouldn't it be better to just draw the a/c by svg in the first place?

OK, 2 questions. I'm creating new SVG's, do I need to create a PNG to replace with the svg?

agw
Posts: 1883
Joined: Fri Feb 17, 2012 3:20 am

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby agw » Mon Nov 28, 2016 1:03 am

Support for dynamically changing the colour of specific markers isn't in there yet. That'll be coming later.

The PNGs aren't necessary if you intend to use SVG, the reason that I still support them is that people might not want SVG. Also it's nice to have a fallback position if something goes wrong with SVG and it's not discovered until after the release, or a future version of Google Maps stops working with SVG on some browser or other. If you're never going to use them then you don't need to provide them (although at the moment you might have to fill something in for the normalFileName, I can't remember if there's validation on the marker settings to throw an exception if you don't... if there is then it'll get fixed for the release proper).

egpd1701
Posts: 43
Joined: Fri Nov 08, 2013 3:39 pm

Re: 27th Oct 2016 SVG graphics and .NET 4.6

Postby egpd1701 » Mon Nov 28, 2016 5:00 pm

Hi

I need help guys, pleeeeeeeeaaaaasssee.

I've tried and tried and tried, but I cannot get my own svg's to work.

Can I have a step by step guide to doing this please. I can draw svg's etc, that's not a problem its the code and files for VRS that's got me stumped. Its not as easy as changing logo's :(


Return to “Preview Versions”

Who is online

Users browsing this forum: No registered users and 1 guest