Using Images on Buttons in FactoryTalk View Studio Machine Edition

The Automation School – HMI Basics – Article Banner

In today's article I cover how to use images, including those found in the Symbol Factory library, on Buttons in FactoryTalk View Studio Machine Edition.

Step 1) Open a View Studio Machine Edition Project, then a Graphic Display, and then add a Button.

NOTE: In our example below we add a “Maintained” button to the “Low Level Tag Read Write” display found in the sample project “Objects 5 Screen Demo:”

the-automation-minute-s03-e02ab

Step 2) Now double click on your new button to bring up its properties, then change the “Border Style” to “None” and “Back Style” to “Transparent”

the-automation-minute-s03-e02b

Step 3) Next click on the “States” tab, then select a state and click on the Image ellipses (…) to browse for an image:

the-automation-minute-s03-e02c

Step 4) Here you can browse for an existing BMP, JPG, or PNG image using the “Add from File” button:

the-automation-minute-s03-e02d

NOTE: You can support our site and receive an “ad free” copy of this article for just 99¢ HERE, or become a “Premium Supporter” for as little as $3 a month and receive $5 worth of articles and $5 worth of code downloads free each month!

Step 5) However in this example we aren't going to use a file but instead chose an image from the “Symbol Factory” library by first clicking on the “Launch Library” button, and then selecting an image in the library, and then clicking on the “Copy” button:

the-automation-minute-s03-e02e

 Step 6) Next, click on “Paste from Library,” then “OK” to accept the image's name,then click on “OK” to close the Image Browser, and finally click on “Apply” to preview the image on the button:

the-automation-minute-s03-e02g

Step 7) Above you can see the button will need to be resize in order for the entire image to be visible. Alternatively, you can check the “Image Scaled” checkbox shown below to scale the image to fit the button's current size:

the-automation-minute-s03-e02h

 Step 8) Once done with your first state, select the next state that will have an image and then add an image to it by repeating Steps 3 – 7. When you're done adding images to your button's states, click on “OK” to close the button object's properties, and then save your graphic display.

Watch me demonstrate the above procedure live in Episode 2 of The Automation Minute Season 3:

tam-s3-e2-fi

Have a question or comment? Please feel free to leave them with us by clicking on the “leave a reply” link at the very bottom of this page.

Sincerely,

Shawn Tierney
Automation Blogger and Trainer

Need personalized help? For as little as $25 per month you can get direct access to ask me Rockwell PLC, HMI, and SCADA questions! Learn the details at Patreon.com/Automation

The Automation School – HMI Basics – Article Banner

Check Also

Enable and Access ViewPoint on the PanelView Plus 7

So you have a PanelView Plus 7 and downloaded a Runtime Application to it that …

Enable and Use VNC on the PanelView Plus 7

So you have a PanelView Plus 7 and want to Enable and Use VNC to …