cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

Change language via PLC variable

Change language via PLC variable

SchneJoe
Established Member
I'm using Web IQ Designer 2.10. The Web IQ HMI will be shown in a frame inside a 3rd party HMI software. This HMI software should have the possibility to change the language of the Web IQ Screens. I have the language setting available inside the ctrlX PLC. How can I change the language with an PLC variable without pressing a button? I would assume it should be possible via JS. But I have no experience with JS and I need an example. Could someone help?
4 REPLIES 4

webiq-sk
Frequent Contributor

In WebIQ the language of the HMI is bound to the user, not globally. We have a UI Action "setlocale (final)" which could be triggered from within a LocalScript when the corresponding item changes. However, changing the locale in WebIQ always forces a reload of the HMI which is probably not what you want as a reload will show the HMI as it looks initially - so if you change the HMI from the outside like this the screen/area where the user was before that change will be lost.

Why would you want to change the language from the PLC in the first place if each WebIQ user can have its own locale?

SchneJoe
Established Member
Thanks for your answer. As I said before, I have a third party HMI software which is showing a WebIQ screen in a frame. The HMI Software has its own language settings. If I open the screen which includes the WebIQ frame, I would like to have everything in the same language. About the automatic reload I don't mind. I have Auto Login and a screen with tabs. So I already managed that always the page, which was shown before, is also shown after a reload. I need an example how to trigger this UI action when a PLC variable changes. I am not so familiar with script programming.

webiq-sk
Frequent Contributor

This is a short example - you can just create a new LocalScript (don't forget to add it to the HMI!) and replace the module.run() code by this block:

module.run = function (self) {
        const im            = shmi.visuals.session.ItemManager;
        const myItemHandler = im.getItemHandler();

        myItemHandler.setValue = function (value) {
            console.log("The value of the item has been set to " + value);
            if (value == 1) {
                let p = [{
                name: "notify",
                params: ["This dialog was triggered by a UI Action!", "UI Action Dialog"]
            }];
            new shmi.visuals.core.UiAction(p).execute(); // close Dialog
            }
        };

        const subscriptionToken = im.subscribeItem('SInt', myItemHandler);
        /* called when this local-script is disabled */
        self.onDisable = function () {
            self.run = false; /* from original .onDisable function of LocalScript control */
            subscriptionToken.unlisten();
        };
    };
This will show a dialog whenever the Item "SInt" changes to 1.

Just to clarify the previous answer, to call the UI Action associated with language switching, change the name from "notify" to "setlocale" and set params to the appropriate locale string:

bostroemc_0-1651006458978.png

See complete script and sample output attached.

A complete listing of UI Actions is given in the documenation here.

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist