Dynamic Link Key-Value Converter

Description
This demonstration shows how the Key-Value Converter in FactoryTalk Optix Studio can be used to change the value of various properties based on the key value.

An example is to change the color of an object based on a Boolean variable or Integer value.

This demonstration uses both a Boolean variable and Integer variable to control color, text string, as well as an image to displayed in the Optix runtime.

Transcript
(00:01) this video I want to take a look at um key value converters that are um can be used in optics and this kind of would be something similar to like a message display on a panel view or um in the seammen’s uh panels there’s a text list or a graphics list um it’s essentially going to be where we will um take uh some sort of you know key value and then basically correspond something else with it Right so if if it’s a you know if the number is zero display this if the number is one display that um but there’s a lot of flexibility into what
(00:44) we can do with this and all I did was I went to the to the uh optics help here and under converters there are actually several types of converters um that we can use um conditional and engineering unit converter expression evaluator the key value converter that we’ll look at here a linear converter and a string converter or formatter So you can look at all these u in the help file learn a little bit more about each one of these Um but under key value converter once again um we’re going to essentially set up a key be it a boolean or a integer or
(01:23) floatingoint number as kind of our key and then basically what are we going to convert it to um there’s a little bit of help here but not not a whole lot So let’s go into uh the optics studio So just to demonstrate this in as easiest way possible I’ve just set up a couple things ahead of time Um I’ve added of course I’ve created a you know a blank project And on my main window um here up in the kind of the banner area I’ve decided to put a a boolean a push button to essentially um toggle a boolean uh variable And I put a uh spin
(02:05) box to basically change a integer value And I just went ahead and created two variables in the model folder uh bool01 and dent in01 and all I did all I’ve done here is that when I push this button I’m going to toggle bool01 and when I click on this spin box I’m going to change the value of dint t or dent in01 I created variables here just to make it a little bit easier to show the linking so I’m going to open up screen one so I’m going to use basically that boolean uh variable or that integer variable to drive that that
(02:56) that key um converter So let’s do let’s do kind of a simple one first Let’s take um perhaps uh an LED um here and let’s say that we want to change the color so that like when we’re in one state it’s one color and we’re in another state we’re in a different color Uh so to do that we have you know all the properties for this object over here Um they all offer dynamic links So we can create dynamic links for all of these properties Uh there is a property for color and by default it shows red with a hex value here If I were to choose add
(03:49) dynamic link I can of course link it to my boolean uh property there Um my boolean tag so that when it’s off it’s one color When it’s on it’s another color Um if I go to advanced what we can do is uh we can click this plus button for add new And here’s our our some of our converters that we can do And I’m going to add key value converter Now actually um uh this would actually could also have been done Let me just uh close this Um come back to advanced Oh actually let me just delete that Uh there is this conditional converter as well So this
(04:38) would be more of a boolean uh example Probably conditional will be you know uh true or false But I’m going to go ahead and use the key value here as well just to show So first thing we’re going to do is we’re going to set up you know what is the what is the variable or you know that we’re going to use to to drive the key And in this case I’m scrolling down I’m going to go to my model folder and I’m going to choose bool01 And then uh the key value converter basically right here we have this configure button Now when I do that it pulls up the key
(05:16) value converter here in the kind of the main uh window Now the key can be set to various data types So right now it is set to unsign integer but I can go ahead and make it a boolean And now it is either going to be false or true And then what I can do next is what what are we going to kind of um you know convert or change based on that boolean value So right now it’s set to string Um but I can change it to color Now to get to that property we have to do a show all here And there’s going to be a lot of properties to kind of scroll through
(06:04) Um but if we get down a little bit we can find that there is a uh a choice for color So now when I’m false what color do I want to be well maybe when I’m false I will be green And then to add a second um key here I just simply have to add this plus button And then in this case it’ll be true And if we’re true let’s be uh let’s be blue Something different than red Okay So that’s all I had to do to set up that key value I’ll go ahead and leave this um little window up Now right now it doesn’t show anything Right So let’s go ahead and
(06:49) start our emulator and that’ll start our um you’ll see this actually play out All right So right now it is showing as green If I go ahead and push my push button up here you can see that it changed the color to blue So this was uh and I have a little LED here just to show when it’s true and false So right now it’s set to true It turned blue False It’s green Right so that’s one way to do that Okay Now um that was of course using a boolean tag We could of course change that color property so that it’s it’s going to be
(07:32) using the um the the the integer value So instead of saying hey you know if it’s true be one color false be another color we say hey if it’s in state z you know one be this state two be this state three be that So to do that we’ll just simply change our our um our link our source dynamic link from the boolean to the double integer uh 01 Now we’ll come back here and edit our our key because our key is of course on boolean right now We’re going to change this to be uh integer 32 because that is what um if I click back here on this dint we
(08:14) can see that it’s also an integer 32 So we just want to make sure we have our our um our formats matching there Um so uh we got we don’t have a zero So when I set up my little spin box I set it up between a number between 1 and three So now we’re going to change this to one We’ll change this to two I’m going to go ahead and add another key here And we will call we will have this as three And in state three maybe we’ll go ahead and make it back to red All right So now we have uh three states driving off of an integer value
(08:54) So let’s go ahead and start the emulator back again All right So uh here we are at one two three All right So we changed our color based on that variable So this same uh the same kind of uh you know concept can be used for anything right so now we could look at let’s add a label to this page And I’m going to go ahead and make this um bigger to where it’s a little more uh easier to see So right now it just says label one So if I click on this again our text once again we can make this a dynam you know dynamic link and
(09:49) we could do the same advanced property here So uh we would want to hit this plus symbol here and we’re going to add a key value converter We’re going to basically tie it to what is our source dynamic link So let’s drive it Go ahead and drive it on the double integer uh v variable here as well Can’t drag it Going to go do it the hard way So we’ll go find it there in the list and say select Now um to edit this key value converter we’re going to hit this configure button once again Now we can close this out So uh right now it’s set
(10:27) to unsigned integer 32 We’ll go ahead and make it at integer 32 just to make sure we’re matching and we’ll say you know one is our our starting point Now in this case the value is already def you know set to string and that is actually what we want So we’re going to display a different string for each condition So for uh for key one maybe we’ll say uh we are in state one Then we say plus to add a new key We’ll make this two And then we can uh change our word up a little bit Now we are in state two and we’ll do one
(11:23) more Uh state three is now active Right so we can put whatever string messages we want in there And if I come back to screen one we just see that you know now it looks like a dynamic link with the with the hash uh tag you know symbols there But if I go ahead and start the emulator we will find that we will get a different string message based on the state we’re in Right so it shows a zero there on the spin box but one is defined as the minimum So that’s why So we’re in state one Now we’re in state two State 3 is now active Right and if we wanted to
(12:09) again we can change all the properties of this label based on this same uh key value converter right if we want to change the color of the text based on the state but we can of course come and you know come to the properties over here for that label and set up that dynamic link in in a similar manner So we can change everything from you know text uh size color you know whatever property we need to change we can do that So that’s doing text um like a text message right so now um there was also a question around the ability to to do
(12:49) that with a graphic Now um I will show that if we come here to our uh kind of user interface and we come to uh contents I think it’s where it’s at Nope [Music] Um let’s see There was one here where you can do an image Yep Under drawings So there is a image here If I bring the image onto the screen right so now we have a basically a blank image Um and the way how the image works is it’s essentially looking for a path for the the image itself Now in optics you know one thing we can do for an image is I can of course take
(13:41) any kind of picture file and just drag it you know onto the screen right and then I get the the image comes in here Now one thing I tried to do just to see if this key value converter works in this manner uh would be that you know we could do the same thing here uh you know if I click on this image we come to the uh path and if I try to create a a an advanced dynamic link on on a key value converter It turns out that there is actually um there is actually if you go under show all you scroll down a bit there is
(14:28) an image uh data type editor but um this did not really work Go up This did not really work So if I put image or even an image you know bit map or GIF or JPEG or PNG it did not change the the image each time But what I found to work is that um uh so let me go ahead and uh come back to our uh screen here I’m going to get rid of this flame because we’re not going to use that We’re going to use this this little image um piece right here So I’m going to set up a a uh a key value converter for the image First I’m going
(15:18) to derive it Make sure we’re picking you know what we’re going to use as our source dynamic link as that double integer value I’m going to go ahead up here back to the key value converter I’m going to change this back to integer 32 And I’m going to change this first one to a one Now what I have found that works is that you know when you were at this screen one on this path it was actually looking for the path on your computer where that image file is So I can actually copy and paste that path in here as well So if I come back to my um
(16:00) pictures and if I come to flame and go to properties I got my location path right here So I’m just going to uh let’s see Copy copy that And it’s called flame uh.png So we’re going So this takes a little bit of work admittedly but uh this is about the only way I’ve found it works slashflame.pn G right so it actually will take that And then if we do the same thing here for two we can go back and copy that path And our other picture that we might want to use is uh this maybe we’ll call it the laptop So it’s laptop_008.jpeg So let me make sure I
(17:07) get the [Music] [Music] U Okay And then I know we could put the third one there Uh but just to show the concept Now if I come back to screen one there’s this image here Um also the image is set to 550 by 50 I can go ahead and change that to say 100 uh by 100 Make it something a little bit bigger Now let’s go ahead and go into the um let’s go into the emulator and see this work So right now it is actually showing the flame If I go to two um and it went to nothing because I probably didn’t type that right but essentially um getting that
(18:03) path in there So if I come back to my uh dynamic link here come back to my key value evaluator Um let’s see what I did wrong Oops Laptop 008 Yep So um I’m just trying to see if I what I did here Oh yep My bad So uh knew I did something kind of goofy there So all right So let’s go back and fix run this again Um yep So now it will show a different image based on the state we’re in So that’s the way that I found to do it I don’t know there might be a better
(19:07) way Now again I didn’t set up three and then apparently when you go to three it goes back to previous state for some reason but um anyway uh be able to change the graphic in that manner Now um you know last piece of this is okay this was good we had to set this up on this particular page Can we reuse that on various pages well yes we can Um if I come back to screens if I create a new screen uh say a screen two and let’s go ahead and just bring screen two to the navigation up here So if I come to screen let’s go to screen one right if I
(19:45) were to copy you know some of this stuff you copy this and I’m going to put this on screen two Right so open up screen two I’m on screen two now Right so maybe we move these things around a little bit right so um if we go ahead and start the emulator then you know uh go to screen two Yep So we’re in state state one state two state two state one Right So it can be copied and pasted and used throughout Now the the problem with that method is that that will um you know if you make a change on this one it doesn’t permeate the change
(20:36) throughout the rest of them So a better way to do that would be if we wanted to create um going to go create a real quick or create a folder to to store our you know uh our widgets you know if we want to call you know whatever the terminology you want to use a widget you know panels um so if I now say let’s create a new container and a panel so we have this panel one and I can call this panel you know my you graphic uh you know widget or whatever And if I were to double click on this you know we get this little box And right now it’s
(21:18) set to 300 by 300 And we can of course um resize that however we want So now instead of um if I were to take if I come back here and uh take this image you if I take this image out of screen one and I’m going to copy it and if I come back here to my graphic widget and I paste it So now I’m going to paste it here So the advantage of doing this is that now if I come back to screen two I’m going to delete this And I’m going to come back to screen one I’m going to delete this And I’m going to essentially add the widget and the graphic widget So
(22:03) now uh and if I come to screen two and rightclick and say new widget graphic widget So the difference between these two now is that u you know if I make an edit back here on the widget itself if I change one of these images or change the link or something like that then it will now permeate to all the chain you know to all the the the child the children um objects that are out there right so that’s the parent object and these are the two children objects so screen one and screen two so this mimics It’s more like like when you
(22:44) set it up in a panel view or in a you know in in the seammen’s panel where you create the one object and you can kind of go and reuse the object multiple times So by basically you know creating a little widget or whatever you want to call it build your build your little key converter on that widget and then reuse that widget um throughout your project All right So I hope that helped Um again showing that you know we can do kind of a key key value converter We can convert anything from color to text and a link
(23:21) you know to an object Um one way to do that

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
• ComboBox to Change PLC Tag
• Custom Made Buttons