Home / FactoryTalk Optix / Optix for HMI
Description
This video demonstrates how to create a new “Window” to create different content that can be displayed on the FactoryTalk Optix Web Presentation Engine while keeping the MainWindow for the Native Presentation Engine.
A Presentation Engine determines how the UI of an app is displayed. In FactoryTalk Optix Studio, a Presentation Engine object is required to display the FactoryTalk Optix Application at runtime.
Use the Native Presentation Engine for typical HMI applications that run on targets with an operator panel. There can be only one Native Presentation Engine in a FactoryTalk Optix Studio project.
Use a Web Presentation Engine to make a web user interface available to multiple users who connect from different web browsers. There can be only one Web Presentation Engine in a FactoryTalk Optix Studio project.
Transcript
(00:01) so in a previous video I discussed the differences between the native engine and the web engine and this uh is a quick example that I have kind of running here this is just the emulator running so I have the native presentation engine window here and I have a chrome uh basically a Chrome browser open with the web presentation engine here and they are basically identical to each other um but what if we wanted to have different information uh displayed to the web presentation engine perhaps than what we would to show to the native
(00:41) presentation engine so I know a lot of times we you know get concerned about what do we put on the web um client and perhaps maybe just want to create some summary displays or just some different content that is provided to the web presentation engine instead so when we look at properties for Native presentation engine and the web presentation engine over here in the properties window we do have this starting uh window which is by default the main window and again the main window is basically made by default when
(01:19) you create a project it is the main container uh that uh that will be running and will display all of our screens and P panels um and whatnot that that we that we kind of add into the Optics application but we can create a new um window a second window perhaps so um the main window is uh open here just want to take note that it is 1024 by 720 so to create a new window I can uh right click on UI go to new and go to containers and we’ll choose window now I do want to point out that uh when you go to UI and right click
(02:09) there is actually an option to choose a new main window uh this is not going to work basically it duplicates the main window and uh so instead we need to create a container and then a window now by you know it’s created here is called window one I’m going to rename this to web um window so we’ll have a separate separate window basically that will be used for the web client than the native client and I’m just going to drag it up here underneath the main window just to kind of keep them um uh basically uh associated with each other or kind of
(02:55) next to each other I should say uh just more organized um so if I double click on on the web window when I open it it will kind of default to a 400 by 400 uh with and height again we want to set our um width and height to 1024 by 720 to match so oops let me cook here so uh 1024 by 720 all right so now we have our second window our web window now since I’ve already have some elements here I already have a kind of a header that I created and some some title text as well as a navigation panel created so I could
(03:46) if I wanted to click you know so underneath main window here are those three elements or objects I could actually click on each one uh hold down the control key uh right click say copy and click on web window and then say paste so basically I was able to copy paste those ele those objects under the web window so here’s the web window now this is a separate navigation panel than the one in the main window it looks identical right now because I copied it but if I were to click here on navigation panel underneath the web
(04:34) window I can delete all of these tabs so just leaving only the overview tab um then I can um further customize this so if for instance we want to make our rectangle maybe make it a different color for the web Maybe instead of um blue maybe we want to make it uh maybe a green perhaps right make it stand out um difference from the Native um then if I wanted to I could actually create a separate screen that would only be visible to the web users so I I just right-clicked on screens said new screen maybe I’ll call this
(05:31) the web content and if I double click on that maybe uh you know we’ll just do something here to to quickly make it again stand out and be different uh just throw a background color on it maybe I’ll add some kind of uh quick label onto it uh that basically says you know web summary or something like that uh just to make this bigger so we can actually see this I’ll just make it really big right so we have a special screen here and what I could do is come back to my web window and I can take this web content screen drag it into the
(06:22) navigation bar so course web content is not added to the navigation bar on the main window it’s only added to the web window right so the only thing to do at this point is to go back to my web presentation engine properties and change the start window to the web window right so you can see in the pull down that it gives you all the available window types there’s only two right now the main window and web window and that’s pretty much it so I’m going to go ahead and start the emulator and I did have the Chrome
(07:08) browser still open here um so let me just type in Local Host 8080 so now we can see that we have our native presentation engine running here with the blue bar and all all the menu items um and then here is our web presentation engine which has the green bar and only has the two screens that I’ve added to the U to the navigation uh menu so the over the overview screen which is the same and the special web summary screen which is of course not accessible on the um Native right so pretty pretty simple pretty easy um way to differentiate or
(08:02) have different content provided to um to the web engine versus the native engine
Tutorial List
- Linking pushbuttons to a Logix tag
- Dynamic Link Key-Value Converter
- Create reusable graphics
- Object model alias
- Alias with Logix a UDT
- Dynamic alias index with Logix UDT
- Popup Dialog Box
- Build a faceplate
- Create Variables with Structured Data Types
- Rockwell Automation Device Libraries for Optix
- Optix Presentation Engines
- New Windows for Web Presentation Engine
- Changing Languages for Localization