01 - Introduction to HMI Programming (Button and Lamp Example)

Video: https://youtu.be/PjUK3CSdZKc

#PLC #HMI #Siemens #TIAPortal #Industrial_Automation

🔙 Previous Part | Next Part 🔜

↩️ Go Back

Table of Contents:

A) Intro - WINCC in TIA Portal for HMI Projects

Today we're going to be having a look at Siemens TIA Portal, but we're going to be having a look at the WINCC aspect of Siemens TIA Portal.

This means we're going to be having a look at how to create an HMI and how to set it up inside of Siemens TIA Portal.

Let's get into today's subject!

A.1) HMI and SCADA Systems (examples)

So today we're going to have a look at HMIs but ultimately HMI and SCADA systems.

What is an HMI and what is SCADA?

An HMI is a human machine interface,

-Example - HMI:

and a SCADA system is a supervisory control and data acquisition system,

-Example - SCADA:

both are mainly visual indicators for the operators and the maintenance department to tell us how the system is running and to allow us to actually interface with the PLC

without us getting into the nitty-gritty side of things by getting into the actual PLC Program and logic design...

This allows the operator to simply control the process via a screen and receive all sorts of updates and information from the process from that screen itself

now the hardest thing about HMI programming is the fact that it's graphics.

Which means everybody on the shop floor who's going to be working with that machine is actually going to see your HMI design. Which means if it isn't up to scratch a lot of people are going to notice.

With PLC programming, you can design your ladder logic any which way you want it to because there's not going to be that many people actually interfacing with the program, but with an HMI it's a completely different ball game so we have to spend quite a bit of time and a lot of attention and care making sure that the screens look good and they work well.

B) TUTORIAL - Button and Lamp HMI Example from Scratch

B.0) Tutorial Objective

Today what we're going to be able to look at is how to create a WINCC project inside the TIA Portal, how to set up an HMI alongside of a PLC and network the PLC together.

And then we're just going to create a basic screen just with the button and the lamp and we're just going to control that lamp with the button.

Also, we're going to use the simulator which means we're going to use internal tags when it actually comes to tagging our HMI but we'll come on to that shortly.

Let's get into Siemens TIA Portal, and let's start developing this project.

B.1) Step 1 - Creating a new TIA Project (HMITest)

So I've got Siemens TIA Portal open at the moment,

What I'm going to do is select "Create a New Project," and I'm going to name it "HMITest."
We'll just click on "Create."

First of all, I'm going to upload the PLC hardware into our software here and then add an additional HMI to the actual software.

B.2) Step 2 - Add New PLC Device

So, to upload the hardware, just go to "Configure a Device,

Then click on "Add New Device,"

And from there, you want to select "Controllers" because we're focusing on the PLC aspect to begin with.

Choose "Unspecified CPU,"

And it's version 3 that we're working with.

Click "Add,"

And this will add a blank CPU where we can now detect the hardware from our Ethernet connection.

Next, just select "Detect."

It'll bring up the hardware detection menu. We're then just going to search for our PLC on the Ethernet network and then upload the hardware.

Here we go, select our PLC and then click "Detect."

Once that's uploaded, what we're then going to do is add an HMI to this project.

B.3) Step 3 - Add New HMI Device

To add the HMI, we can now go to "Portal View" and say "Add New Device," HMI,

and then we can select it from this area here. We're just going to select the Simatic Basic Panel, and I'm just going to select the six-inch series, the KTP 600 Basic,

and we'll just select the most recent one.

Click "Add."

Just like our hardware with our PLC, this is now going to add the HMI to our project.

Now, what we'll see on the left-hand side are two folders:

• one folder for the HMI project
• and one folder for our PLC project.

Now, you'll notice here a device wizard has popped up to allow us to create our screen through this little help wizard. I'm just going to cancel this. We're just going to create it from scratch.

Say "OK" to that,

and now our HMI is going to be added.

B.4) Step 4 - Configure Network for the PLC and HMI

And there we go, we've now got two folders: we've got one folder for our PLC here and another folder for HMI over here.

This is all part of the one project, "HMI Test."

Now, if I just go to my "Devices and Networks" and double-click that,

you'll see our PLC, our CPU 1214C, and you'll see our HMI, all a part of this project.

Now, what I want to do is link these two together. I want to connect these two via our Ethernet. So, to create the connection, what we can actually do is simply drag and drop. You'll notice on our PLC and on our HMI, you've got this green square available. This green square is your Ethernet port, your Profinet port.

And all we need to do here is simply select the green square on the PLC, click, and drag that over to the green port on our HMI.

That there is now going to create our Ethernet connection.

Now, to set up the connection on the HMI side, double-click the "Connections" folder over here,

and select "Add New."

We'll call this "PLC",

and we'll use the communication driver S7 1200. The S7 1200 driver is in here, but we also have things like Allen Bradley, Mitsubishi, and other Simatic drivers. We're just going to leave it as the S7 1200 because that's what we're connected to.

And then, what I'm going to do is change my Ethernet addresses to match what my PLC is currently set up as.

My PLC, if we just go to device configuration,

double-click our CPU,

my PLC is 192.168.10.1.

Now, if I go over to my connections,

what I can then do is change the 1200 to 10.1,

and then inside of the HMI side, I can then change this to 10.2.

Note: When you're working with Ethernet, you've got to make sure that this area here, the addresses, both match 192.168.10.X, but the individual address, the one and the two, they are different.

Once that's done, what we can now do is get into actually programming the HMI.

If I go to device configuration,

there is the HMI, and if I just double-click this HMI here,

I can then go to Profinet Ethernet addresses, and there you can see it's been given the address 10.2 from our Profinet connection that we just did earlier.

B.5) Step 5 - Creating and linking HMI Tags

What we can then do from here is we can go further down this list, and we can create what we call HMI tags.

Tags are simply like PLC tags in the PLC program. It allows us to identify certain objects on the HMI, such as buttons, lamps, motors, pumps, etc., on the HMI to certain tags, whether they are internal to the HMI, like embedded addressing to a PLC, or whether they are actually looking at addressing on the PLC itself.

So, if I open up my HMI tags folder, I can then double-click "Show All Tags,"

and currently, what we should see is an empty tag area.

Now, what I'm going to do is I'm simply going to add in two tags:

• "Input 1"
• "Input2"
  

and these data types, these are going to be bits, so I'm just going to select that as a Boolean.

Now, you'll notice that the connection is referencing the internal tag.

If I expanded that, it'll then pop up and say we can also connect to the PLC.

If I selected the PLC here and just checked the box there,

what it's then going to ask me to do is enter the PLC tag that I want this to connect to.

So, if in our PLC program, let's open up our Main OB1,

Let's say I had a program that was simply just a contact to a coil like so,

and here we had M10.0 going to M100.0,

these are now PLC tags. So, if we open up our PLC tag folder, go to "Show All Tags,"

there's our tag one, and there's our tag two, looking at M10.0 and looking at M100.0.

If I just close that down and go back to my HMI tags now,

if I expand the PLC tag folder and then open up PLC tags, go to the default tag table, there are the two tags that are created there.

So, what I could then do is tie "Input 1" to "Tag 1" and "Input 2" to "Tag 2." This would then create a link between our PLC tags and our HMI tags, so whenever the PLC tags turn on inside of the ladder logic, they will then react to our HMI screen.

However, I'm not currently connected to an HMI. Because I'm not currently connected to an HMI, what I'm going to do is I'm going to simply select this connection as an internal tag. Because what I'm going to do on this program here is going to be a basic button to a lamp. Button to a lamp. When the button turns on, the lamp changes color, and that there is going to reference these two tags here, "Input 1" and "Input 2," and we're going to do this via the simulator.

Once I can free up an HMI from our trainer rigs, I can then connect it to an HMI connected to the PLC and link up the PLC address into the HMI addressing in further videos.

So, we've created our two tags. Now we want to create our very first screen.

B.6) Step 6 - Creating a Home Screen

Now, we're not going to create anything to do with the template just yet; I'm going to cover that in another video. All I'm going to do is just create a basic screen, and we're just going to set this up to have two buttons, two lamps.

Open up your screen folder, and then in the screen folder, you'll see "Screen 1."

We can rename this.

So, if I wanted to rename this, I might call this "Home," and now this becomes our Home Screen

Double-click this, and you will then see our screen appear,

and the HMI touch panel appear around it.

Now, if I just go to the Properties,

(insert pic from TIA Portal)

what I can actually do is I can actually change the properties of this screen.
For example, I can change the Background Color,

So, what I'm going to do is I'm not going to choose a dark gray, but I'm going to choose a light gray like that there.

And you'll notice that the grid color actually matches this color here as well,

so it might become difficult for me to actually try to line areas of my screens up. So, what I'm going to do here is change my grid color to black,

and now I can actually see the actual grid here.

B.6.1) Objects Available for the Home Screen

To add objects to the screen, we work from this right-hand menu.

If I go to the toolbox, you can then see areas that I can add to this screen.

And you've got here:

• basic objects,
• elements,
• controls,
• and graphics.

B.6.1.1) Basic Objects

Open up basic objects, you've got things like pictures, text, squares, circles, ovals, and lines.

B.6.1.2) Elements

If we then expand elements, we then got more advanced objects such as IO fields, graphical IO fields, bar charts, etc., dates and time, which we can then add to our HMI.

B.6.1.3) Controls

Expanding the controls here, we can actually add trends. We can actually add user views, adding in passwords and usernames, etc., so not everybody can access every screen. This is great for like maintenance departments.

B.6.1.4) Graphics

And then inside of the graphics, what we can then do is we can actually insert graphics from industrial images.

This could be things like pumps, valves, motors, etc., all inside of these graphical folders over here.

Example: So, if I just expand "Chemical," for example,

go to "Two Five Six Colors," and you can see here different sorts of tanks that are available that we can add to the screen to make it look a bit more appealing when we actually look at these screens.

B.7) Step 7 - Adding Buttons to the Home Page

As I mentioned, today, all I'm going to do is I'm going to add in a button going to a lamp.

So, to do this, open up elements, and in elements, the second area there will be "Button."

And what I want to do is I just want to click on the button and then select anywhere on the screen, and the button is then going to appear.

If I then just go to the bottom here and I go to properties, I'm then going to change the text to this button. Inside of the general tab,

I'm going to change this to "Input 1,"

and then just going to copy this button and then paste it again. And I'm going to drop it in line with this other button here, and I'm going to call this "Input 2."

I'm not too worried about neatness just yet; this is simply just showing you how to add objects to the HMI, how to tag them up, and then how to control it from the HMI.

B.8) Step 8 - Adding Lamps to the Home Page

Once I've added those two buttons there, I'm then gonna add in two lamps. And these two lamps are simply just going to be two circles. So, I'm gonna have a circle here,

and again, I'm just gonna line it up with the "Input 1" button, and then I'm just gonna copy and paste that, line it up with this button vertically, and then line it up with this button horizontally. And that makes sure everything's kept in line.

B.9) Step 9 - Linking Objects to Tags

Then what I'm going to do next is then tag up the buttons and the lamps.

Now, what I'm going to do is because I'm using internal tags, I'm not going to actually use the PLC program. I'm going to tie "Input 1" to "Input 1," and the lamp to "Input 1" as well, and I'm going to control the state of "Input 1" through the button, and we're going to see the actual state change on the lamp. And we're gonna do the same thing with "Input 2."

To set up the tags on the buttons, all we do is we select the button that we want to modify, go to "Events," and then we got the options of what event do we want to choose.

So, we got here: click, press, release, activate, deactivate, and change.

Clicking is simply where we just press the button and then let go. That there is a click.

Press is simply where we press the button; that is when it engages in operation.

And then release is when we release the button; that is when it engages another operation.

We're going to use "Press" and "Release."

Button1 (Input1) - Using Press Event with a SetBit Function

So, I'm going to select "Press" and I'm going to select "Add Function."Drop this down,

and I want to change a bit state because we're working with bits. Expand "Edit Bits,"

and then here, you'll see "Set Bit."

Note: an icon will show next to the event option once a function is added.

What this will do is when I press the button, it's going to set the bit, turn the bit on. When I press the button.

And then what I'm going to do is in the release, is when I release the button, it's then going to reset the bit, turning the bit off.

So here, where it says "Set Bit," it's then asking us to identify a tag.

Just expand this field here and then select "Input 1."

Button1 (Input1) - Using Release Event with a ResetBit Function

Now, go to "Release," "Add Function," drop this down, "Edit Bits," and then "Reset Bit,"

And select the "Input 1" once again,

There we go. And then we're gonna do the same with "Input 2," obviously with the "Input 2" tag.

Doing the Same Procedure to configure Button2 (Input2) - Press and Release a Bit

So, I'll then just "Edit Bit," "Set Bit,"

And select "Input 2,"

And then if I just go to the release, I'm then going to reset the bit,

And select "Input 2."

That's it. So, that's my buttons tagged up.

Cool!

Lamp1 (Input1) - Color Animation

Next, what I want to do is then change the state or change the color of this lamp, this circle here:

Again, to do this, make sure the circle is selected, go to Properties, and then inside the Properties, what we then want to do is go to "Animations,"

and then what we then want to do is then select "Display," "Add New Animation."

It's then going to ask you what you want to do.

• Do you want to change the appearance?,
• or do you want to make it visible or invisible?

I want to change the appearance, so I'm just going to select "Appearance," then say OK.

And then it's going to say, "Address it to a tag,"

and I'm going to address this to "Input 1."

And it's then going to say,
"OK, what do you want to do with this?"
"What's the range going to be set to?"

Because it's a bit, it's got two states; it's either zero or one.

So, when this "Input 1" is zero, I want the background color to be red,

and then I want the background color to be green when the input is a logic one.

And I'm going to do exactly the same for the second circle.
Add a new animation, "Appearance," locate it at that, set it up to "Input 2," and again, set the range, zero and one, red and green.

And that's it!!!!

B.10) Step 10 - Running the HMI Simulation

I'm just gonna group all these together, line these up a little bit more,

to the more centralized, like so,

and then we're just going to save our project.

And now all we're going to do is run the simulator to actually see these change their states. To do this, just select "Start Simulation."

What it will then do is it then begins starting the simulation for this HMI, and it's going to say here the simulation starts with the screen "Home." That's fine; we've only got one screen anyways. Say "OK" to that,

and here is my HMI available. This is what it would look like if we actually had the HMI visible to us.

What's going to happen is currently, "Input 1" and "Input 2," internal to the actual HMI,

they are both logic zero because these buttons are released, so they are reset back to zero.

So, these lamps are currently red.

When I press "Input 1," it sets the bit to a logic one, and now my lamp also changes to green because now it is a logic one.

If I let go, it's now red.

If I press "Input 2," that now becomes green.

Again, I let go of that, and now that becomes red.

And that there is just a brief introduction on how to create an HMI inside a TIA Portal, how to set up a couple of tags internally to the HMI, and then how to add a couple of objects to the HMI screen, tag them up, and then use them inside of the simulator.

DONE!

C) Next Episode (Tutorial Topics)

So, next week, what we're going to be looking to do is:

• how to create a template inside of an HMI, using that on multiple screens,
• certain screen structures as well, where we place buttons, where we place date and time, how to add a logo into the PLC,
• and then how to add navigation.

I look forward to seeing you again next week. I'll see you later.

🔙 Previous Part | Next Part 🔜

↩️ Go Back

Z) 🗃️ Glossary