Different WebIQ Questions - Widgets, buttons, layout, OPC-UA and scripts

[emrahemre]

Hi together,

One of our customer is testing now WebIQ to decide if it's convenient for their applications. He has the questions below;

1. How is it possible to specify the color of the image in a Widget Button. (e.g. green enabled, black disabled)

2. How to change the image in a button dynamically with a PLC variable?

3. How to change the displayed color when a button or input widget is locked?

4. Layout: How is it possible to design different layouts?

5. Dialogbox:

5.1 How is it possible to make the Header invisible?

5.2 Can scripts be used to open the dialog and then make different settings depending on a variable?

E.g. by type=0, then Text with Value1 and Errofeld(Label) visible

by type 1, then Text with Value2 and and Errofeld(Label) visible

6. OPC-UA: How to open an own messagebox dialog when changing the value of an OPC-UA variable "Error"? Or start an action o a value change, or describe local variables?

7. Are there detailed documents explaining what we can do with commands in "scripts" and "CSSs"?

Kind Regards,

Emrah Emre

[webiq-sk]

Regarding your questions:

1. How is it possible to specify the color of the image in a Widget Button. (e.g. green enabled, black disabled)
On websites in general (browser-wise the HMI is nothing more than any other website) you usually swap the complete image and don't try to colorize it. Simply create to images for use in the icons.
You can then use CSS Modifiers to change them dynamically. See demo attached.

2. How to change the image in a button dynamically with a PLC variable?
    See attached demo - it's all done with CSS and CSS Modifiers

3. How to change the displayed color when a button or input widget is locked?
    See attached demo - it's all done with CSS and CSS Modifiers

4. Layout: How is it possible to design different layouts?
Your question is not very clear to me. You can simply create the layouts in WebIQ Designer using containers.
See these demos which you can download straight from inside WebIQ Designer:
https://demo.smart-hmi.com/demo-responsive/
https://demo.smart-hmi.com/layout-demo/

5. Dialogbox

5.1 How is it possible to make the Header invisible?
     See attached demo - it's all done with CSS and CSS Modifiers

5.2 Can scripts be used to open the dialog and then make different settings depending on a variable?
For sure, see the attached demo. You simply use a LocalScript. All of the methods available are documented here:
https://www.smart-hmi.com/user/download/deliver/docs/documentation-webiq-visuals-reference-2.15-ee64...
We also have an extensive Scripting demo that shows a lot of script usage: https://demo.smart-hmi.com/scripting-demo/

6. How to open an own messagebox dialog when changing the value of an OPC-UA variable "Error"?
    For sure, see attached demo, the documentation and the Scripting demo

7. Are there detailed documents explaining what we can do with commands in "scripts" and "CSSs"?
    For sure, it's all available in the Visuals reference linked above.

Regarding CSS Modifiers please read the manual on this for more information:https://www.smart-hmi.com/user/download/deliver/docs/documentation-manual-webiq-designer-2.15-ee64/i...

[webiq-sk · Accepted solution]

I just noticed you were probably talking about the dialog header and how to hide it. My answer is the same here: it can all be done with CSS.

I have attached another demo that includes hiding the dialog box header.

[emrahemre]

Thank you very much for your prompt support.

[HmiGuide]

2. How to change the image in a button dynamically with a PLC variable?

I used the variant with 2 different icons at the beginning, until the requirement came that the colors (background, font color, active/inactive element) are adjustable at runtime. This made this option obsolete, because it does not ensure that the colors of the images match the selected colors.

My solution:

• Icons with transparent background
• Black pen color
• Using the CSS property invert. Which enables adusting the pen color is continuously between black and white.

This allows the icon color to be set so that it contrasts well with the background and is easily recognizable.