(bright music)
- [Instructor] Many times we'll add devices to our projects
for which the standard pop-up does not display
all the data we want to see.
In these situations,
we need to create our own custom pop-ups.
I'm going to build my new graphic based on the standard,
but the procedure is the same
if you're creating a new pop-up from scratch.
Selecting the meter component we configured last time,
the link here navigates to a page
the same way our navigation buttons
did on the floor plan pages.
However, the bar symbol indicates this page
is located in another project,
namely PLS_Include.
To use this as our base,
let's copy this page into our folder.
I'll use the Open dialogue
to navigate up to the User folder,
then down into PLS_Include.
This project has a TGML folder of its own,
so I'll follow that down to grab my !Generic PopUp page
and copy it into a Popups folder of my own.
Remember that if every page in a folder
is hidden with an exclamation point,
the folder is also hidden in the menu.
Let's renamed this page to !Power PopUp.tgml
and open it.
The substitutions on this page are a little complex,
so let's step back and drop a single new value on this page
just to see how it works.
I'll drop a Text object for my total real power,
then resize it,
and change the alignment.
Now, just as with the simple real time values,
I'll create a binding for the content,
and paste in the value from the device I intend to use.
However, this isn't exactly what I want.
I need the text to be bound to the equipment
that I filled out in the component
that I click on.
To do this, I'll replace the Equipment part of the name
with %Name%.
Technically, I could use any text here,
but let's stick with Name for consistency.
Before I leave, I still need to change the format
to Presentation to view the data correctly.
You can probably guess how this works.
At runtime, when I click on a component on my main page,
the script in the Pop-Up snippet
takes the equipment name from the component,
which we configured, and substitutes it for the string
with the percent signs before binding the component.
At that point, it looks like any other binding.
Let me go back to the one-line diagram
to demonstrate how this works.
I'll add the Pop-Up snippet,
but I'll change the link to point to my new diagram.
The component is already bound to my meter,
so let's check this in runtime.
As you can see, the new value is bound on the new meter.
In most cases, this is enough information
to create your own pop-up pages.
You can take some time to add labels,
formatting, and animations
as though you were working on a normal diagram.
That said, let's quickly see how these default values work
and why I didn't tell you to just change their bindings.
Each value block component
has a text for the label,
text for the value,
and a binding that provides the runtime value.
As you would expect,
the binding engine replaces the component name
with the equipment name,
then replaces the bind with the value.
However, rather than binding directly to the text content
the way we've done,
this script perform some validation first.
If the binding fails, the script hides the component away,
which we've seen in the WebHMI.
If it succeeds, it fills out the content
of this specific text object with the value.
I don't wanna steer you away from this method,
I just wanted to show you that there's more to modifying
these than just changing a bind name.
And this probably isn't necessary for most of your pop-ups.
That should get you started building pop-up pages,
which allow you to make detailed information available
without cluttering up your main diagrams.
Next, we'll see how to control our project
from the diagrams.
Until then, thank you.