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

[OhhNeal]

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]

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]

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]

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.

[Falcon_viper55]

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.

Very nice can you explain how you did this?

[T-EGJA1]

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

[T-EGJA1]

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)


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


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


but his for the 'normal' icon:


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.

[agw]

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]

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.

[Falcon_viper55]

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.