Custom Flags and silhouettes

Are you having problems with using or developing a plugin? Let me know here.
Post Reply
MarkB
Posts: 3
Joined: Sun Mar 18, 2018 10:56 am

Custom Flags and silhouettes

Post by MarkB » Sun Mar 18, 2018 11:22 am

Hi All
I have a Pi feeding flightaware with good results.

I like to use VRS when at home and have been getting it set up so far I have it displaying everything I need Mlat, civil\mil etc I have Chris Alders files for both Flags and Silhouettes.

However I would like to use Chris alders Colour side views as the silhouettes and for Military use them in the Flag column with his colour Sqn .bmps.

If I use database writer I can change Model ICAO and Operator ICAO to suit the .bmps I have but this would be very time consuming for each aircraft and I have read on other posts it breaks the database if changing from the standard ICAO codes.

While looking at posts I found this viewtopic.php?f=3&t=1005

However I cant get the scripts to work with the custom content plugin it still pulls the .bmps from the folders I have selected in options.

If I understand it correctly the script is supposed to look to see if you have a .bmp that matches the ac received so instead of the generic ICAO model B763 it would look for BAW763 and replace all BA flights that meet that criteria?

I would appreciate any help I have two folders of flags and silhouettes that would be a big improvement over the generic .bmps I just dont know how to get VRS to use them.

Cheers Mark

MarkB
Posts: 3
Joined: Sun Mar 18, 2018 10:56 am

Re: Custom Flags and silhouettes

Post by MarkB » Sun Mar 18, 2018 5:01 pm

Hi All

I have managed to get this script to work...and Its working well :D it is now displaying colour side views and logos for AC for mil and some other AC i am using the registration to get the same effect.
However when I run a report it does not show the colour side views instead in reverts back to the generic .bmps the flags are ok any ideas to get the code below to work with the reports as well?
Cheers Mark


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.Silhouette] = new VRS.RenderPropertyHandler({
                    property:               VRS.RenderProperty.Silhouette,
                    surfaces:               VRS.RenderSurface.List + VRS.RenderSurface.DetailHead + VRS.RenderSurface.InfoWindow,
                    headingKey:             'ListOperator',
                    labelKey:               'Operator',
                    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.modelIcao.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 customFormatTypeIcaoImageHtml(aircraft); },
                    tooltipChangedCallback: function(aircraft) { return aircraft.modelIcao.chg || aircraft.operator.chg; },
                    tooltipCallback:        function(aircraft) { return aircraft.formatModelIcaoNameAndDetail(); }
                });
                
            }
        });
    }
    
    function customFormatTypeIcaoImageHtml(aircraft)
    {
        var codeToUse = '';
		codeToUse = customPipeSeparatedCode(codeToUse, aircraft.operatorIcao.val + '' + aircraft.modelIcao.val);
                codeToUse = customPipeSeparatedCode(codeToUse, aircraft.registration.val);
		codeToUse = customPipeSeparatedCode(codeToUse, aircraft.modelIcao.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.manufacturer.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.operatorIcao.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.icao.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 += '/Type.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>

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

Re: Custom Flags and silhouettes

Post by agw » Mon Mar 19, 2018 1:16 am

I'm afraid that there are two sets of renderers - one for the live aircraft pages and one for the report pages. The ones for the reports are in reportRenderer.js, they're basically the same as the live aircraft ones except they don't have to care about whether values have changed. They just have to say whether the value is present for a report row or not.

The report renderers are in VRS.reportPropertyHandlers. I think the ones you need to change are VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.Silhouette] and VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.OperatorFlag]. The default code for both is:

OperatorFlag:

Code: Select all

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'; },
    hasValue: function (json) { return !!json.opFlag || !!json.icao || !!json.reg; },
    renderCallback: function (json) { return VRS.format.operatorIcaoImageHtml(json.owner, json.opFlag, json.icao, json.reg); },
    tooltipCallback: function (json) { return VRS.format.operatorIcaoAndName(json.owner, json.opFlag); }
});
Silhouette:

Code: Select all

VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.Silhouette] = new VRS.ReportPropertyHandler({
    property: VRS.ReportAircraftProperty.Silhouette,
    headingKey: 'ListModelSilhouette',
    labelKey: 'Silhouette',
    surfaces: VRS.ReportSurface.List,
    headingAlignment: VRS.Alignment.Centre,
    fixedWidth: function () { return VRS.globalOptions.aircraftSilhouetteSize.width.toString() + 'px'; },
    hasValue: function (json) { return !!json.icaoType || !!json.icao || !!json.reg; },
    renderCallback: function (json) { return VRS.format.modelIcaoImageHtml(json.icaoType, json.icao, json.reg); },
    tooltipCallback: function (json) { return VRS.format.modelIcaoNameAndDetail(json.icaoType, json.typ, json.engines, json.engType, json.species, json.wtc); }
});

MarkB
Posts: 3
Joined: Sun Mar 18, 2018 10:56 am

Re: Custom Flags and silhouettes

Post by MarkB » Mon Mar 19, 2018 8:26 am

agw wrote:
Mon Mar 19, 2018 1:16 am
I'm afraid that there are two sets of renderers - one for the live aircraft pages and one for the report pages. The ones for the reports are in reportRenderer.js, they're basically the same as the live aircraft ones except they don't have to care about whether values have changed. They just have to say whether the value is present for a report row or not.

The report renderers are in VRS.reportPropertyHandlers. I think the ones you need to change are VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.Silhouette] and VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.OperatorFlag]. The default code for both is:

OperatorFlag:

Code: Select all

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'; },
    hasValue: function (json) { return !!json.opFlag || !!json.icao || !!json.reg; },
    renderCallback: function (json) { return VRS.format.operatorIcaoImageHtml(json.owner, json.opFlag, json.icao, json.reg); },
    tooltipCallback: function (json) { return VRS.format.operatorIcaoAndName(json.owner, json.opFlag); }
});
Silhouette:

Code: Select all

VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.Silhouette] = new VRS.ReportPropertyHandler({
    property: VRS.ReportAircraftProperty.Silhouette,
    headingKey: 'ListModelSilhouette',
    labelKey: 'Silhouette',
    surfaces: VRS.ReportSurface.List,
    headingAlignment: VRS.Alignment.Centre,
    fixedWidth: function () { return VRS.globalOptions.aircraftSilhouetteSize.width.toString() + 'px'; },
    hasValue: function (json) { return !!json.icaoType || !!json.icao || !!json.reg; },
    renderCallback: function (json) { return VRS.format.modelIcaoImageHtml(json.icaoType, json.icao, json.reg); },
    tooltipCallback: function (json) { return VRS.format.modelIcaoNameAndDetail(json.icaoType, json.typ, json.engines, json.engType, json.species, json.wtc); }
});
Hi thanks for the info...how do I use the above scripts do i inject them with custom content plugin or add to my original script or copy them directly to VRS.reportPropertyHandlers file in VRS?

Cheers Mark

Post Reply