Siemens Open Library Customization with HMI Styling

Siemens Open Library Customization with HMI Styling

Siemens TIA Portal Libraries have helped me develop PLC and HMI code faster and manage it better. Recently, I have been working with the HMI Styling section of the Portal Library, and I have found it very helpful.

This blog shows some practical examples of using HMI Styling in projects. Specifically, it focuses on how styling can work with the Siemens Open Library. Siemens has released all the documentation you need to get started.

Part 1: The Basics

When you create a Comfort Panel in TIA Portal, it has a default style selected in its Runtime Settings.

Runtime Settings menu

You can change Runtime Settings to several default styles that Siemens includes for free.

I think WinCC Dark is great, but I suggest trying some of the others so that you are familiar with all your options in the future.

Style selection default options

Usually, you want all HMIs to have the same style, so keep the “Default style of the project” checked, and instead modify the Portal Project’s default style.

Keep "default style of the project" checked and modify the portal project's default style

I bet you changed the default style to WinCC Light and started pulling items onto your first HMI screen, but you’re surprised that they look like the WinCC Dark style. That’s because you need to update the Toolbox style to use the device style! Updating the Toolbox style makes it easy to mix and match Dark, Light, Classic, and custom HMI Styles.

Selecting device style

When bringing in objects with “Use device style,” you will notice the object is now linked to the style by default. However, when bringing in any objects with Dark, Light, or Classic, it will not be by default.

Style/design settings is checked and many properties are set to the style.

Checking "Style/Design settings" sets many of the properties in the style library preventing modification to Appearance, Fill Pattern, Design, and Text Format.

Part 2: Basic Style

Let’s say you want to have only green buttons on our HMI. A great way of doing that will be to create a new HMI style.

Adding a new device style

Clicking on the Button, you can modify its Text and Background to match the way you want the green buttons to look.

Changing the text and background of a button

Creating styles for buttons

Now let's say you want to use the Open Library Faceplates, but you want them to conform to your styles. Notice that the VFD control does not have a Style check box. So, we're going to need to modify the faceplate.

Conforming styles

By checking the “Style/Design settings” and typing in the “Style item appearance," you can modify any part of the Faceplate to allow it to use our style. The "Style item appearance" is case-sensitive, so make sure to type it correctly.

Modify the Faceplate.

Set the default style of the project to our new GreenStyle.

Setting the default style of new button to GreenStyle.

The Faceplate now looks like this!

How the Faceplate looks.

Note that the text for several buttons doesn't fit. With another few Library edits, you can adjust the size, and while you're are at it, jazz up the styling too.

Part 3: Advanced Style

First, create a new button style that has smaller text. Speed up the process and duplicate the Button that currently exists by clicking on the "+".

Replicate current Button.

Rename it “Button Small Text” and decrease the font size.

Rename the button and decrease the font size.

While you're making library changes, create a gradient style button.

I will demonstrate the use of Style sheets while doing this. I have not found Style sheets necessary when creating custom styles for projects yet. There are a lot of types of style sheets, and in this example, I am only creating a button style sheet.

Creating a gradient menu

The plan is to use this Style sheet with a green button, so modify the style here for green colors.

​​​​​​Modify the style for green colors.

Going back to the GreenStyle editor, create another duplicate of the Button and rename it “Button Gradient.”

Duplicate another green button and name it Button Gradient

You may notice the Style sheets on the right side of TIA Portal. If you select the Button category, there are now four styles to choose from instead of three in all other categories. To apply our new gradient style to the “Button Gradient,” click and drag.

Click and drag new button style. Four choices are showing now.

Let's put the new style buttons to work. You'll need to change the styles in the Faceplate. Make the Auto Mode and Manual Mode buttons the “Button Small Text” style and the Start and Stop buttons the “Button Gradient” style. Remember, the style item appearance is case sensitive, so make sure you name them appropriately. See the end-result below.

The end result of the new button style.

Another method you can use is adding the Style to the Faceplate’s interface. I've dragged the Style item appearance of both the Auto Mode button and the Manual Mode button to the Properties_Faceplate, which allows you to choose the style you want when you use this Faceplate. I also removed the gradient from the Start and Stop buttons because I didn’t like how it looked.

Adding the style in the Faceplate interface.

Now when you open the Interface to the Faceplate, “Button” is selected.

Button is currently selected in the interface to the Faceplate.

When you change the style to “Button Small Text”, you'll see the difference.

Button Small Text style is selected.

I hope you found this helpful for your TIA Portal HMI programming and that it makes the Siemens Open Library more fun to use!

Learn more about DMC's partnership with Siemens.

Contact us for help getting your project off the ground today.


Data trace automation
# Data trace automation
Nice information, Thanks a lot sharing with us.

Post a comment

Name (required)

Email (required)

Enter the code shown above:

Related Blog Posts