0

I used status indicator web component in my HMI HTMLhost in twincat.

I created HTMLhost and added to script these lines:

       <style>
        @import 'status-indicator';
        </style>

        <div class="indicator">
            <status-indicator positive></status-indicator>
        </div>

        <style>
            .indicator {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>

and it looks like this: Status indicator in HTMLhost

I also created one BOOL value in parameters to change the status from activated to deactivated from PLC like this:

BOOL variable for changing status

Problem is that I don't know how to link <status-indicator positive></status-indicator> to that BOOL parameter so it can be used to change its status from PLC?

I would appreciate your help, thanks in advance.

Nikola Petrovic
  • 1
  • 1

1 Answers1

0

I'm not the best explainer and this is quite complicated, please ask more if you need.

I know of 2 ways to accomplish what you want, only 1 is applicable to this scenario since you are creating a User Control

Both start with; (bind Status-BOOL here in your case instead of my PLC1.Calling_Sys), but if you're working with userControl you should do this attachment to the .userControl and not inside .Content so it's always ready in your UserControl. Also if .userControl you shouldn't directly attach the Status-BOOL (unless you know it's always going to be the same BOOL) but instead create a bindable parameter for the userControl in its JSON file.

Attach a symbol to perform an action (when changed) in Lightning menu of a control object

Then edit Action by pressing the pen, and in Action and Condition editor, you could choose JavaScript and refer to your Control Object (HTMLHost in your case) by it's ID name with code $("#idNameinTwincatHere")

enter image description here

With this you do anything as you could do with any HTML DOM object, in your example the <status-indicator positive></status-indicator> is going to be $("#idName").children[0].children[0] I think, so keep digging the DOM object with console.log to see what you want. It seems like you know some HTML stuff so I'm not going to go deeper here.

BUT SINCE YOU ARE CREATING A USER CONTROL THIS HANDY METHOD WON'T WORK THIS TIME, since your final ID is going to be relative to what ID you apply for the instance of user control you put to the .content file. I just put it out there for other times because the other way I know of is more difficult.

The other way:

Create a new Function enter image description here

Make it JavaScript enter image description here

Edit the JSON file enter image description here

Create a parameter of type Control enter image description here

And now instead in Action and Conditions editor, do not choose JavaScript, but choose your Function, and make a Data Binding of type Controls or choose your Control object from the dropdown. Just make sure that it is the ID inside User Control and not refer the to the instance of user control in .content, and also of course that the Event (your status symbol) is a bindable Symbol or Boolean parameter in the userControl JSON, and then attach that Parameter to the Action Trigger as shown in image 1. enter image description here

Now inside the Function you can manipulate the positive in and out with JavaScript.

Final word: It's much easier to do this kind of stuff (status indicator ellipse) with the tools that you have been provided in the Twincat HMI, just create Ellipse, attach BOOL-Status to Action binding as shown above, and then from Action menu choose Condition, TRUE --> attach Fill color of the Ellipse and choose color for True, same for False, done. You can create box-shadow for the ellipse if you want it to look cooler. You can even attach classes to do some CSS magic such as transitions if you want, but it's another topic. So in my opinion, what you are trying to do is not sensible with HTML Host.

Miikka Kosonen
  • 11
  • 1