Adding static image to Lightswitch HTML 2013 Browse Screen

Question

In my case, I have color coded some tiles in the HTML client and I want to add a simple color code key. I have the PNG file I want to use.

I do not require the ability to upload or change the image.

This link seems to achieve what I am looking for, but I am not sure where to implement. Does all of this code go into the PostRender of the Image Control I created?

Add image to lightswitch using local property and file location

Here is what the PostRender of the simple Image data item I created as an Image Local Property, and then dragged into the Solution Designer. It was basically copied from the link above, but I did change the name of the image file to match mine, and I have already added the item to the Content\Images folder structure and it shows in the file view:

myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
// Write code here.
function GetImageProperty(operation) {
    var image = new Image();
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    // XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.  
    // unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch) 
    // still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var url = URL.createObjectURL(this.response);
        image.onload = function () {
            URL.revokeObjectURL(url);
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.drawImage(image, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
        };
        image.src = url;
    };
    xhr.open('GET', this.imageSource, true);
    xhr.responseType = 'blob';
    xhr.send();
};

myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
    // Write code here.
    msls.promiseOperation
    (
        $.proxy(
            GetImageProperty,
            { imageSource: "content/images/Key.png" }
        )
    ).then(
        function (result) {
            contentItem.screen.ImageProperty = result;
        }
    );
};

}

Currently, the Image control does show on the screen in the browser, and is the custom size I choose, but it is just a light blue area that does not display my image file.

I am not sure if I have embedded the image? I am not sure if that is a missing step?

Thank you!!

Answer 1

The easiest method of testing this approach would be to change your postRender to the following (which embeds the helper function within the postRender function):

myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
    function GetImageProperty(imageSource) {
        return msls.promiseOperation(
            function (operation) {
                var image = new Image();
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                // XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.  
                // unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch) 
                // still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
                var xhr = new XMLHttpRequest();
                xhr.onload = function () {
                    var url = URL.createObjectURL(this.response);
                    image.onload = function () {
                        URL.revokeObjectURL(url);
                        canvas.width = image.width;
                        canvas.height = image.height;
                        ctx.drawImage(image, 0, 0);
                        var dataURL = canvas.toDataURL("image/png");
                        operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
                    };
                    image.onerror = function () {
                        operation.error("Image load error");
                    };
                    image.src = url;
                };
                xhr.open('GET', imageSource, true);
                xhr.responseType = 'blob';
                xhr.send();
            }
        );
    };
    GetImageProperty("content/images/Key.png").then(function onComplete(result) {
        contentItem.screen.ImageProperty = result;
    }, function onError(error) {
        msls.showMessageBox(error);
    });
};

This assumes that you named the local property ImageProperty as per my original post and the Image control on your screen is named ColorKey.

In the above example, I've also taken the opportunity to slightly simplify and improve the code from my original post. It also includes a simple error handler which may flag up if there is a problem with loading the image.

If this still doesn't work, you could test the process by changing the image source file-name to content/images/user-splash-screen.png (this png file should have been added as a matter of course when you created your LightSwitch HTML project).

As the GetImageProperty function is a helper routine, rather than embedding it within the postRender you'd normally place it within a JavaScript helper module. This will allow it to be easily reused without repeating the function's code. If you don't already have such a library and you're interested in implementing one, the following post covers some of details involved in doing this:

Lightswitch HTML global JS file to pass variable