Changing Image Path based on Variable

Hello all,

We are working on a project in which we'll have 300-500 images. So simply hard coding it to hmi or PLC is not our best option. What we thought is to have a string variable, and PLC will write the changeble part of the Image to that variable.

For example, if that variable is xxx1.png, image should change to "pics/custom/xxx1.png".

I'm trying to do it using local script but I'm not completely sure what I'm doing and I'd definetly use some help about it. I also couldn't figure it out if we have to use composites or just local script and image changer would work.

Normally I wouldn't ask this but if someone provide some example codes it would be really great. You can also see some codes I've tried to do in below, which could be completely faulty.

Thank you very much for your support.

module.run = function (self) {

// Get reference to Image Changer widget

let ic = shmi.getControlByName("iq-image-changer");

// Get variable value

let itemValue = shmi.getInputValue('inputDeneme');

// Define image paths object

let images = {

"1": "pics/custom/parca_Yan_isaretli.png",

"2": "pics/custom/parca_ust_isaretli.png"

};

// Set image source path

let imagePath = images[itemValue];

// Call setCompositePlaceholders to update image source

shmi.setCompositePlaceholders(ic, {

"imageSource": imagePath

});

Hi Atacan.Yucel ,

Here is an example project where you can change the image based on a dropdown menu. You will simply write to the item in your PLC project instead of via the dropdown select.

Here is the local-script that handles the image changing, as well as the entire project. Please let me know if you have any questions.

(function () {

    /**
     * replace module name with a custom name for the local-script.
     *
     * All local-script should be attached to the "custom.ls" package.
     * If more than one script is required for an application, a common root package
     * should be created (e.g. "custom.ls.customerName.*").
     */

    var MODULE_NAME = "image-changer-script",
        ENABLE_LOGGING = false,
        RECORD_LOG = false,
        logger = shmi.requires("visuals.tools.logging").createLogger(MODULE_NAME, ENABLE_LOGGING, RECORD_LOG),
        fLog = logger.fLog,
        log = logger.log,
        module = shmi.pkg( MODULE_NAME );

    // MODULE CODE - START

    /* private variables */

    basePath = "pics/custom/";
    endPath = ".png"

    /* private functions */    
    
    function updateImage(val, control) {
        // update control image
        control.vars.imageEl.src=basePath + val + endPath;    
    }

    /**
     * Implements local-script run function.
     *
     * This function will be called each time a local-script will be enabled.
     *
     * @param {LocalScript} self instance reference of local-script control
     */
    module.run = function (self) {
        //Place your Code here
        const im = shmi.requires("visuals.session.ItemManager");
        self.vars = self.vars || {};
        
        self.vars.cancelable = shmi.onReady({
            controls: {
                demoImageChanger: ".DemoImageChanger"
            }
        }, function(resolved) {
            const demoImageChanger = resolved.controls.demoImageChanger;

            // subscribe item
            self.vars.token = im.subscribe(["virtual:imagePath"], function(name, val, type) {
                // This callback function is called automatically, whenever the value of the item changes
                // check for value of subscribed item and update image
                if (typeof val === "string") {
                    updateImage(val, demoImageChanger);
                }
            });
        });

        /* called when this local-script is disabled */
        self.onDisable = function () {
            self.run = false; /* from original .onDisable function of LocalScript control */
            
            // unsubscribe item - this is very important - otherwise memory leaks might occur
            if (self.vars.token) {
                self.vars.token.unlisten();
            }

            // cancel shmi.onReady to ensure there will nothing be running in the background anymore if the widgets have not been found
            if (self.vars.cancelable) {
                self.vars.cancelable.cancel();
            }
        };
    };


    // MODULE CODE - END

    fLog("module loaded");
})();

imagechangerdemo.zip

5.75MB