Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Want to post something that doesn't quite fit into the other forums? This is the place for that.
OhhNeal
Posts: 17
Joined: Sat Aug 22, 2015 3:38 am

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by OhhNeal » Thu Mar 03, 2016 8:17 am

Terry,

If I'm correct your source should just be "/zz-norel-marker-contact-sheet.html". as it is being served by VRS. So VRS will tell from its settings which"network/directory" its coming from.

Someone will correct me if I'm wrong, but at least it gives you an other possibility to try.

Regards,
Neal

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

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by agw » Sat Mar 05, 2016 4:20 pm

I think Terry's got the right address, it's just that the contact sheet is showing the aircraft markers before his script has had a chance to add his custom markers. Presumably your script is similar to the one that was posted earlier in this thread, which started with this block?

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) {
If so then your script won't add your markers because it's waiting for stuff that isn't happening on the contact sheet page.

The easiest way would be to change your script so all of the work is performed within a separate function. Then we can change the contact sheet to call that function.

At the bottom of your script, just before the </script> line, add this:

Code: Select all

    function addCustomAircraftMarkers()
    {
    }
Then cut all of the VRS.globalOptions.aircraftMarkers.unshift lines and paste them into the new function, e.g:

Code: Select all

    function addCustomAircraftMarkers()
    {
        VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
            normalFileName: 'Military.png',
            selectedFileName: 'Military-Selected.png',
            size: { width: 60, height: 60 },
            matches: function(aircraft) { return aircraft.isMilitary.val; }
        }));
        VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
            normalFileName: 'Whatever.png',
            selectedFileName: 'Whatever-Selected.png',
            size: { width: 60, height: 60 },
            matches: function(aircraft) { return !aircraft.isMilitary.val; }
        }));
    }
Finally call the function from where you previously had the unshift calls:

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) {
                addCustomAircraftMarkers();
            }
        });
    }

    function addCustomAircraftMarkers()
    {
        VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
            normalFileName: 'Military.png',
            selectedFileName: 'Military-Selected.png',
            size: { width: 60, height: 60 },
            matches: function(aircraft) { return aircraft.isMilitary.val; }
        }));
        VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
            normalFileName: 'Whatever.png',
            selectedFileName: 'Whatever-Selected.png',
            size: { width: 60, height: 60 },
            matches: function(aircraft) { return !aircraft.isMilitary.val; }
        }));
    }
</script>
Check that the script is still working in the map screen.

Then in the contact sheet page change this section:

Code: Select all

            jQuery(document).ready(function($) {
                $.each(VRS.globalOptions.aircraftMarkers, function(idx, marker) {
and add a call to your addCustomAircraftMarkers function:

Code: Select all

            jQuery(document).ready(function($) {
                addCustomAircraftMarkers();
                $.each(VRS.globalOptions.aircraftMarkers, function(idx, marker) {
I think that should do the trick.

Falcon_viper55
Posts: 25
Joined: Sun Nov 01, 2015 6:55 pm

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by Falcon_viper55 » Sat Mar 05, 2016 9:02 pm

Hi,

I read this topic and give and try but if i change te icon marker than then it does not work.
Only the build icons can i change with other aircraft that work.

but I would have liked for special planes and custom icon

This i my code:

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) {
                addCustomAircraftMarkers();
            }
        });
    }

    function addCustomAircraftMarkers()
    {
        VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
            normalFileName: 'fighter-jet.png',
            selectedFileName: 'fighter-jet1.png',
            size: { width: 60, height: 60 },
            matches: function(aircraft) { return aircraft.modelIcao.val === 'TOR'; }

        }));
    }
</script>

T-EGJA1
Posts: 107
Joined: Sun Sep 08, 2013 12:11 am
Location: Mid-Devon, UK

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by T-EGJA1 » Tue Mar 08, 2016 9:57 am

Andrew, you're a star ... that certainly did do the trick ... the Marker Contact Sheet now displays my custom markers :)

Many thanks for your time and help.

Image
Terry

Falcon_viper55
Posts: 25
Joined: Sun Nov 01, 2015 6:55 pm

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by Falcon_viper55 » Thu Mar 10, 2016 12:15 am

T-EGJA1 wrote:Andrew, you're a star ... that certainly did do the trick ... the Marker Contact Sheet now displays my custom markers :)

Many thanks for your time and help.

Image

Very nice can you explain how you did this?

T-EGJA1
Posts: 107
Joined: Sun Sep 08, 2013 12:11 am
Location: Mid-Devon, UK

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by T-EGJA1 » Thu Mar 10, 2016 12:45 am

Falcon_viper55 wrote: Very nice can you explain how you did this?
I carefully followed Andrew's very helpful and comprehensive instructions from the beginning of this thread and in this one: http://forum.virtualradarserver.co.uk/v ... =805#p4019 ;)

I did hit the odd snag here and there along the way, but got around them with Andrew's kind help. The main issue that I found was getting the folder structure right and the Site Root correctly specified - if you can provide more detail of the problem you're having in getting it to work, I'll try and help, if I can :)
Terry

T-EGJA1
Posts: 107
Joined: Sun Sep 08, 2013 12:11 am
Location: Mid-Devon, UK

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by T-EGJA1 » Thu Mar 10, 2016 10:24 pm

Hi Andrew,

Sorry if I'm being a pain, but I've run up against another issue affecting a new icon that I've added, in that the 'selected' displays on the map, but the 'normal' won't show.
Both icons display correctly in the 'contact sheet' (see screenshot below)
Image

however the browser console displays the following 'not found' errors for the 'normal' icon:
Image

the browser resources shows this for the 'selected' icon:
Image

but his for the 'normal' icon:
Image

Below is the 'match' section of code that I'm using for this icon:

Code: Select all

/* Voyager */          VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
                    normalFileName: 'A332.png',
                    selectedFileName: 'A332-sel.png',
                    size: { width: 52, height: 52 },
					matches: function(aircraft) { return (aircraft.modelIcao.val === 'A332' || aircraft.modelIcao.val === 'A343' || aircraft.modelIcao.val === 'A319') && aircraft.isMilitary.val; }
                }));
I've checked the png image file - even re-created it - (it's just a re-coloured copy of the 'selected' icon), but cannot find anything wrong with it. The fact that it displays fine in the contact sheet but won't show on the map is really confusing me and I'm at a loss as to what to try next.

Once again, I appreciate any help you can offer.
Terry

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

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by agw » Sat Mar 12, 2016 2:23 am

Yes, that's certainly odd :) I don't explicitly set a cache header on 404 results but it's possible that they're getting added further on down the chain, so it's possible that if you didn't have an A332.png image at some point and a lot of rotations were requested - and got 404 responses - then the browser might be caching the 404 responses. But then I'd expect it to use the same cached response on the contact sheet, the 270° and 300° rotations would have been shown on there.

Just to rule out the possibility I would start by clearing the browser's cache, or using a fresh browser that's never tried to display the A332 image before.

T-EGJA1
Posts: 107
Joined: Sun Sep 08, 2013 12:11 am
Location: Mid-Devon, UK

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by T-EGJA1 » Tue Mar 15, 2016 12:22 am

Once again, many thanks for your help, Andrew - clearing the browser cache seems to have fixed the problem - all my custom icons are displaying correctly now :)

I should have thought of trying that, but I was getting frustrated looking too deeply into it and overlooked the simple things.
Terry

Falcon_viper55
Posts: 25
Joined: Sun Nov 01, 2015 6:55 pm

Re: Different Colour Icons for Military and Civil Aircraft & Flight Level Filtering.

Post by Falcon_viper55 » Sat Mar 19, 2016 10:11 pm

Hi,

I'm really stuck someone please help
Can someone send the correct files?

When i go to /VirtualRadar/zz-norel-marker-contact-sheet.html display notting when i remove line what i add addCustomAircraftMarkers(); than display orignal icons...

zz-norel-marker-contact-sheet.html file code:

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <!-- iOS bare minimum configuration -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

        <title>Marker Contact Sheet</title>
        <script src="script/jquery.js" type="text/javascript"></script>
        <script src="script/vrs/enums.js" type="text/javascript"></script>
        <script src="script/vrs/aircraftPlotter.js" type="text/javascript"></script>
        <style type="text/css">
            body {
                font-family: sans-serif;
            }
            p {
                font-size: 10pt;
                margin: 4px;
            }
            .detail {
                font-size: 8pt;
                text-transform: uppercase;
            }
            .detail span:not(:first-child) {
                margin-left: 10px;
            }
            code {
                font-size: 8pt;
            }
        </style>
    </head>
    <body>
        <div id="sheet">
        </div>
        <script type="text/javascript">
            var _StepAngle = 11.25;
        
            function formFullPath(rotationAngle, folder, fileName)
            {
                return folder + '/top/no-cache/Rotate-' + rotationAngle + '/' + fileName;
            }
        
            jQuery(document).ready(function($) {
                addCustomAircraftMarkers();
                $.each(VRS.globalOptions.aircraftMarkers, function(idx, marker) {
                    $('#sheet')
                    .append($('<p />')
                        .append($('<span />')
                            .text(marker.getNormalFileName())
                        )
                    )
                    .append($('<p />')
                        .addClass('detail')
                        .append($('<span />')
                            .text('' + marker.getSize().width + 'x' + marker.getSize().height)
                        ).append($('<span />')
                            .text(' ' + marker.getFolder())
                        ).append($('<span />')
                            .text(' ' + (marker.getIsAircraft() ? 'aircraft' : 'not aircraft'))
                        ).append($('<span />')
                            .text(' ' + (marker.getIsPre22Icon() ? 'old icon' : 'new icon'))
                        )
                    )
                    .append($('<code />')
                        .text(marker.getMatches().toString())
                    );
                    
                    for(var innerCount = 0;innerCount < 2;++innerCount) {
                        var folder = marker.getFolder();
                        var fileName = innerCount == 0 ? marker.getNormalFileName() : marker.getSelectedFileName();
                        if(innerCount == 1) {
                            if(fileName == marker.getNormalFileName()) continue;
                            $('#sheet')
                            .append($('<p />')
                                .append($('<span />')
                                    .text(fileName)
                                )
                            );
                        }
                    
                        var container = $('<div />').addClass('container');
                        $('#sheet').append(container);
                    
                        var step = marker.getCanRotate() ? _StepAngle : 999;
                        for(var angle = 0;angle < 361;angle += step) {
                            var normalisedAngle = angle % 360;
                            $('<img />')
                                .attr('src', formFullPath(normalisedAngle, folder, fileName))
                                .appendTo(container);
                        }
                    }
                    $('#sheet').append('<hr />');
                });
            });
        </script>
    </body>
</html>

AddMarkers.html file code:

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) {
                addCustomAircraftMarkers();
            }
        });
    }

    function addCustomAircraftMarkers()
    {
        VRS.globalOptions.aircraftMarkers.unshift(new VRS.AircraftMarker({
            normalFileName: 'fighter-jet.png',
            selectedFileName: 'fighter-sec.png',
            size: { width: 60, height: 60 },
            matches: function(aircraft) { return aircraft.modelIcao.val === 'TOR'; }

        }));
    }
</script>
I Have custom content root folder set and image folder.

Post Reply