Manufacturer as squadron logo source in Custom Content Plugin?

Are you having problems with using or developing a plugin? Let me know here.
OhhNeal
Posts: 17
Joined: Sat Aug 22, 2015 3:38 am

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by OhhNeal » Tue Sep 22, 2015 6:53 pm

Hi Andrew,

As I have a couple of logos for specific registrations even while the manufacturing/SubOp field is filled in I changed your code around a bit so that it will show that reg specific logo instead of the manufacturer/SubOp first. I tested it with a test logo coupled to a reg that was live and it worked. But just to be sure I'm not breaking anything else could you tell me if I did it correctly.

The change I made is in "function customFormatOperatorIcaoImageHtml" from:

Code: Select all

        var codeToUse = '';
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.manufacturer.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.operatorIcao.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.registration.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.icao.val);
to

Code: Select all

        var codeToUse = '';
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.registration.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.manufacturer.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.operatorIcao.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.icao.val);
As you can see I brought the 4th (registration) line up so it would be used before the manufacturer/SubOp line. As I said, I tested it and it works but just want to make sure I don't break anything down the line.

Regards,
Neal

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

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by agw » Thu Oct 01, 2015 12:48 am

That'll work just fine, no worries. You can arrange those four lines any way you like.

I forgot about the stacked images and report changes... I'll do that this weekend :)

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

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by agw » Sun Oct 11, 2015 9:18 pm

Okey dokey, sorry for the delay :) I think this should work for the mobile and report pages as well as the desktop page. I've included your reordering of elements to search on:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            if(VRS.renderPropertyHandlers) {
                // Overwrite the standard operator flag renderer with a custom one.
                // THIS MIGHT NEED TO BE MODIFIED WHEN NEW VERSIONS OF VRS ARE RELEASED
                VRS.renderPropertyHandlers[VRS.RenderProperty.OperatorFlag] = new VRS.RenderPropertyHandler({
                    property:               VRS.RenderProperty.OperatorFlag,
                    surfaces:               VRS.RenderSurface.List + VRS.RenderSurface.DetailHead + VRS.RenderSurface.InfoWindow,
                    headingKey:             'ListOperatorFlag',
                    labelKey:               'OperatorFlag',
                    sortableField:          VRS.AircraftListSortableField.OperatorIcao,
                    headingAlignment:       VRS.Alignment.Centre,
                    suppressLabelCallback:  function() { return true; },
                    fixedWidth:             function() { return VRS.globalOptions.aircraftOperatorFlagSize.width.toString() + 'px'; },
                    // Changed the following line to redraw the flag if the manufacturer changes...
                    hasChangedCallback:     function(aircraft) { return aircraft.operatorIcao.chg || aircraft.icao.chg || aircraft.registration.chg || aircraft.manufacturer.chg; },
                    // And changed this line to call our custom function to build the <img> tag instead of the standard one...
                    renderCallback:         function(aircraft) { return customFormatOperatorIcaoImageHtmlAircraft(aircraft); },
                    tooltipChangedCallback: function(aircraft) { return aircraft.operatorIcao.chg || aircraft.operator.chg; },
                    tooltipCallback:        function(aircraft) { return aircraft.formatOperatorIcaoAndName(); }
                });

                VRS.renderPropertyHandlers[VRS.RenderProperty.SilhouetteAndOpFlag] = new VRS.RenderPropertyHandler({
                    property:               VRS.RenderProperty.SilhouetteAndOpFlag,
                    surfaces:               VRS.RenderSurface.List,
                    headingKey:             'ListModelSilhouetteAndOpFlag',
                    labelKey:               'SilhouetteAndOpFlag',
                    headingAlignment:       VRS.Alignment.Centre,
                    sortableField:          VRS.AircraftListSortableField.OperatorIcao,
                    fixedWidth:             function() { return Math.max(VRS.globalOptions.aircraftSilhouetteSize.width, VRS.globalOptions.aircraftOperatorFlagSize.width).toString() + 'px'; },
                    // Changed the following line to include manufacturer
                    hasChangedCallback:     function(aircraft) { return aircraft.modelIcao.chg || aircraft.operatorIcao.chg || aircraft.registration.chg || aircraft.manufacturer.chg; },
                    // And this line to include a call to the custom HTML
                    renderCallback:         function(aircraft) { return aircraft.formatModelIcaoImageHtml() + customFormatOperatorIcaoImageHtmlAircraft(aircraft); },
                    tooltipChangedCallback: function(aircraft) { return aircraft.model.chg || aircraft.modelIcao.chg || aircraft.countEngines.chg || aircraft.engineType.chg || aircraft.species.chg || aircraft.wakeTurbulenceCat.chg || aircraft.operatorIcao.chg || aircraft.operator.chg; },
                    tooltipCallback:        function(aircraft) {
                        var silhouetteTooltip = aircraft.formatModelIcaoNameAndDetail();
                        var opFlagTooltip = aircraft.formatOperatorIcaoAndName();
                        return silhouetteTooltip && opFlagTooltip ? silhouetteTooltip + '. ' + opFlagTooltip : silhouetteTooltip ? silhouetteTooltip : opFlagTooltip;
                    }
                });
            }
            
            if(VRS.reportPropertyHandlers) {
                // Modifies the operator flag on reports
                VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.OperatorFlag] = new VRS.ReportPropertyHandler({
                    property:           VRS.ReportAircraftProperty.OperatorFlag,
                    surfaces:           VRS.ReportSurface.List + VRS.ReportSurface.DetailHead,
                    headingKey:         'ListOperatorFlag',
                    labelKey:           'OperatorFlag',
                    headingAlignment:   VRS.Alignment.Centre,
                    fixedWidth:         function() { return VRS.globalOptions.aircraftOperatorFlagSize.width.toString() + 'px'; },
                    // Changed the following line to indicate that it has a value if the manufacturer is present
                    hasValue:           function(/** VRS_JSON_REPORT_AIRCRAFT */ json) { return !!json.opFlag || !!json.icao || !!json.reg || !!json.manufacturer; },
                    renderCallback:     function(/** VRS_JSON_REPORT_AIRCRAFT */ json) { return customFormatOperatorIcaoImageHtml(json.manufacturer, json.opFlag, json.reg, json.icao); },
                    tooltipCallback:    function(/** VRS_JSON_REPORT_AIRCRAFT */ json) { return VRS.format.operatorIcaoAndName(json.owner, json.opFlag); }
                });
            }
        });
    }
    
    function customFormatOperatorIcaoImageHtmlAircraft(aircraft)
    {
        return customFormatOperatorIcaoImageHtml(aircraft.manufacturer.val, aircraft.operatorIcao.val, aircraft.registration.val, aircraft.icao.val);
    }
    
    function customFormatOperatorIcaoImageHtml(manufacturer, operatorIcao, registration, icao)
    {
        var codeToUse = '';
        codeToUse = customPipeSeparatedCode(codeToUse, registration);
        codeToUse = customPipeSeparatedCode(codeToUse, manufacturer);
        codeToUse = customPipeSeparatedCode(codeToUse, operatorIcao);
        codeToUse = customPipeSeparatedCode(codeToUse, icao);
        
        // The rest of this was copied from format.js operatorIcaoImageHtml
        var size = VRS.globalOptions.aircraftOperatorFlagSize;
        var result = '<img src="images/File-' + encodeURIComponent(codeToUse);
        if(VRS.browserHelper.isHighDpi()) result += '/HiDpi';
        result += '/OpFlag.png"' +
            ' width="' + size.width.toString() + 'px"' +
            ' height="' + size.height.toString() + 'px"' +
            ' />';

        return result;
    }
    
    function customPipeSeparatedCode(text, code)
    {
        var result = text;
        
        if(code && code.length) {
            if(result.length) result += '|';
            result += code;
        }

        return result;
    }
</script>

OhhNeal
Posts: 17
Joined: Sat Aug 22, 2015 3:38 am

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by OhhNeal » Mon Oct 12, 2015 3:15 pm

Hi Andrew,

Thanks for your time in this and don't worry about the delay. It is a hobby after all. ;)

It works perfectly in the reports now. Now I can see which logos I'm missing or squadron allocations. So far I haven't tried the mobile site yet as I'm of shift at the moment and as such my laptop is not connected to the antenna up on the bridge, so no live data. I'll give it a try when shift starts and all meetings are done but since the reports are working as they are I'm not expecting any problems.

Thanks again and as soon as this trip is over and I'm home expect a new VRS in the directory.

Regards,
Neal

OhhNeal
Posts: 17
Joined: Sat Aug 22, 2015 3:38 am

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by OhhNeal » Sun Feb 21, 2016 10:51 pm

Hi Andrew,

With regards to the manufacturer, would it be possible to add it to the fields criteria for the reports.

As such I could check easily for old/wrong information.

Regards,
Neal

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

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by agw » Thu Feb 25, 2016 12:47 am

I'll add it to the list :) I've a feeling that manufacturer isn't indexed though so it'll probably enforce a date range when it's used (e.g. it won't go back further than a week).

OhhNeal
Posts: 17
Joined: Sat Aug 22, 2015 3:38 am

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by OhhNeal » Fri Feb 26, 2016 9:08 am

Thanks for adding it to the list. Even though it's not indexed, if it's added to the criteria doesn't it also mean it's one of the field that can be used to sort after the report is made?

As far as I can see the only fields available for sorting are also the fields used as criteria. So let's say for example I would like to see the Mil flights in a certain period and then have them sorted first on icao model code and afterwards on manufacturer that would still be possible, right?

Regards,
Neal

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

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by agw » Sun Feb 28, 2016 2:14 am

I wouldn't be surprised if sorting is done at the database level, and even less surprised if it was only on indexed fields. I'll need to check the code :) I'll add a link back to this thread in the Trello card, hopefully that'll remind me to look at sorting when I come to add the criteria.

dedevillela
Posts: 9
Joined: Mon Jan 18, 2016 7:11 pm

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by dedevillela » Tue Mar 01, 2016 8:09 pm

I've managed to get country flags in the listing and details panel but still a W.I.P. with incorrect image size due the use of OpFlag.png, getting 85 x 20 px instead of the 20 x 16 px (BaseStation standard); some thoughts would be very welcome!

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            if(VRS.renderPropertyHandlers) {
                // Overwrite the standard operator flag renderer with a custom one.
                // THIS MIGHT NEED TO BE MODIFIED WHEN NEW VERSIONS OF VRS ARE RELEASED
                VRS.renderPropertyHandlers[VRS.RenderProperty.Country] = new VRS.RenderPropertyHandler({
                    property:               VRS.RenderProperty.Country,
                    surfaces:               VRS.RenderSurface.List + VRS.RenderSurface.DetailHead + VRS.RenderSurface.InfoWindow,
                    headingKey:             'ListCountry',
                    labelKey:               'Country',
                    sortableField:          VRS.AircraftListSortableField.Country,
                    headingAlignment:       VRS.Alignment.Centre,
                    suppressLabelCallback:  function() { return true; },
                    fixedWidth:             function() { return VRS.globalOptions.aircraftTransponderTypeSize.width.toString() + 'px'; },
                    // Changed the following line to redraw the flag if the manufacturer changes...
                    //hasChangedCallback:     function(aircraft) { return aircraft.operatorIcao.chg || aircraft.icao.chg || aircraft.registration.chg || aircraft.manufacturer.chg; },
                    hasChangedCallback:     function(aircraft) { return aircraft.country.chg },
                    // And changed this line to call our custom function to build the <img> tag instead of the standard one...
                    renderCallback:         function(aircraft) { return customFormatCountryFlagImageHtml(aircraft); },
                    //tooltipChangedCallback: function(aircraft) { return aircraft.operatorIcao.chg || aircraft.operator.chg; },
                    //tooltipCallback:        function(aircraft) { return aircraft.formatOperatorIcaoAndName(); }
                });
                
            }
        });
    }
    
    function customFormatCountryFlagImageHtml(aircraft)
    {
        var codeToUse = '';
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.manufacturer.val);
        //codeToUse = customPipeSeparatedCode(codeToUse, aircraft.operatorIcao.val);
        //codeToUse = customPipeSeparatedCode(codeToUse, aircraft.registration.val);
        //codeToUse = customPipeSeparatedCode(codeToUse, aircraft.icao.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.country.val);
        
        // The rest of this was copied from format.js operatorIcaoImageHtml()
        var size = VRS.globalOptions.aircraftOperatorFlagSize;
        var result = '<img src="images/File-' + encodeURIComponent(codeToUse);
        if(VRS.browserHelper.isHighDpi()) result += '/HiDpi';
        result += '/OpFlag.png"' +
            ' width="' + size.width.toString() + 'px"' +
            ' height="' + size.height.toString() + 'px"' +
            ' title="' + aircraft.country.val + '"' +
            ' />';

        return result;
    }
    
    function customPipeSeparatedCode(text, code)
    {
        var result = text;
        
        if(code && code.length) {
            if(result.length) result += '|';
            result += code;
        }

        return result;
    }
    
</script>

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

Re: Manufacturer as squadron logo source in Custom Content Plugin?

Post by agw » Sat Mar 05, 2016 3:55 pm

The OpFlag request always returns an image sized (or resized) to 85x20, however if you specify a 20x16 size on the img tag then it should get resized back to its original 20x16:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            if(VRS.renderPropertyHandlers) {
                // Overwrite the standard operator flag renderer with a custom one.
                // THIS MIGHT NEED TO BE MODIFIED WHEN NEW VERSIONS OF VRS ARE RELEASED
                VRS.renderPropertyHandlers[VRS.RenderProperty.Country] = new VRS.RenderPropertyHandler({
                    property:               VRS.RenderProperty.Country,
                    surfaces:               VRS.RenderSurface.List + VRS.RenderSurface.DetailHead + VRS.RenderSurface.InfoWindow,
                    headingKey:             'ListCountry',
                    labelKey:               'Country',
                    sortableField:          VRS.AircraftListSortableField.Country,
                    headingAlignment:       VRS.Alignment.Centre,
                    suppressLabelCallback:  function() { return true; },
                    fixedWidth:             function() { return '20px'; },
                    hasChangedCallback:     function(aircraft) { return aircraft.country.chg; },
                    renderCallback:         function(aircraft) { return customFormatCountryFlagImageHtml(aircraft); },
                    tooltipChangedCallback: function(aircraft) { return aircraft.country.chg; },
                    tooltipCallback:        function(aircraft) { return aircraft.country.val; }
                });
                
            }
        });
    }
    
    function customFormatCountryFlagImageHtml(aircraft)
    {
        var codeToUse = '';
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.manufacturer.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.country.val);
        
        var result = '<img src="images/File-' + encodeURIComponent(codeToUse);
        if(VRS.browserHelper.isHighDpi()) result += '/HiDpi';
        result += '/OpFlag.png" width="20px" height="16px" />';

        return result;
    }
    
    function customPipeSeparatedCode(text, code)
    {
        var result = text;
        
        if(code && code.length) {
            if(result.length) result += '|';
            result += code;
        }

        return result;
    }
</script>
You might have an issue with using the operator flag folder for your country flags, you run the risk of there being a clash between operator ICAOs and three letter country names. If you put the country flags into a separate folder then you could form up the URL in JavaScript for fetches from that folder.

To do this you would need to create a folder called Web somewhere and set that as the site root in the custom content plugin.

Under the Web folder create a folder called images and within that create a folder called country. Copy your country flags into the country folder. Make sure that the names are the same as the country names that VRS uses.

Then replace the customFormatCountryFlagImageHtml function in your script with this:

Code: Select all

    function customFormatCountryFlagImageHtml(aircraft)
    {
        var result = '';
        
        if(aircraft.country.val) {
            var codeToUse = aircraft.country.val;
            
            result = '<img src="images/web-country/Wdth-20/Hght-16';
            if(VRS.browserHelper.isHighDpi()) result += '/HiDpi';
            result += '/' + encodeURIComponent(codeToUse) + '.bmp" width="20px" height="16px" />';
        }

        return result;
    }

Post Reply