Changing Logos on Reports Page

Are you having problems with using or developing a plugin? Let me know here.
Post Reply
skaw
Posts: 25
Joined: Sun Jun 05, 2016 9:57 am

Changing Logos on Reports Page

Post by skaw »

Hey,

to show a proper Airbus Helicopters H145 silhouette, i used this code for the desktop and mobile page:

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:             'ListSilhouette',
                    labelKey:               'Silhouette',
                    sortableField:          VRS.AircraftListSortableField.OperatorIcao,
                    headingAlignment:       VRS.Alignment.Centre,
                    suppressLabelCallback:  function() { return true; },
                    fixedWidth:             function() { return VRS.globalOptions.aircraftSilhouetteSize.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.manufacturer.val);
		codeToUse = customPipeSeparatedCode(codeToUse, aircraft.modelIcao.val + '-' + aircraft.operatorIcao.val);
		codeToUse = customPipeSeparatedCode(codeToUse, aircraft.modelIcao.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.operatorIcao.val);
        codeToUse = customPipeSeparatedCode(codeToUse, aircraft.registration.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>
By changing the manufacturer to H45, VRS will use the proper H45 silhouette with fenestron instead of the EC45 silhouette. Works fine..

Now for the reports i did some digging and code changing and got this somehow to work:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            if(VRS.reportPropertyHandlers) {
                // Modifies the operator flag on reports
                VRS.reportPropertyHandlers[VRS.ReportAircraftProperty.Silhouette] = new VRS.ReportPropertyHandler({
                    property:           VRS.ReportAircraftProperty.Silhouette,
                    surfaces:           VRS.ReportSurface.List + VRS.ReportSurface.DetailHead,
                    headingKey:         'ListSilhouette',
                    labelKey:           'Silhouette',
                    headingAlignment:   VRS.Alignment.Centre,
                    fixedWidth:         function() { return VRS.globalOptions.aircraftSilhouetteSize.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.manufacturer || !!json.icao || !!json.reg || !!json.opFlag; },
                    renderCallback:     function(/** VRS_JSON_REPORT_AIRCRAFT */ json) { return customFormatTypeIcaoImageHtml(json.manufacturer, json.opFlag, json.reg, json.icao); },
                    tooltipCallback:    function(/** VRS_JSON_REPORT_AIRCRAFT */ json) { return VRS.format.modelIcaoAndName(json.owner, json.opFlag); }
                });
            }
        });
    }
    
    function customFormatTypeIcaoImageHtmlAircraft(aircraft)
    {
        return customFormatTypeIcaoImageHtml(aircraft.manufacturer.val, aircraft.operatorIcao.val, aircraft.registration.val, aircraft.icao.val);
    }
    
    function customFormatTypeIcaoImageHtml(manufacturer, operatorIcao, registration, icao)
    {
        var codeToUse = '';
        codeToUse = customPipeSeparatedCode(codeToUse, manufacturer);
        codeToUse = customPipeSeparatedCode(codeToUse, registration);
        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 += '/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>
Works only, if the manufacturer line is filled with something. While the upper code is usually using the model code for the silhouette and only the manufacturer line if something is present there, the lower code doesn't show a silhouette if manufacturer is empty, even if there is a legit model code.

Am i missing something? Can someone help me to get this work properly?
Top
Post Reply

Return to “Plugins”