hi and welcome back to the Hindu soft web studio video training Series in this video we’re gonna cover an overview of the animations in Indu soft web studio so let’s get started what I’ve done to save a little bit of time is I’ve opened up the template screen and saved it as animation only after adding a couple of sliders here from the symbols I’ve chosen slider 4 and I believe slider 7 and I place those on the screen configured this slider to a new integer tag called X valor short for X value this one for Y value and this one to a tag called ro T which was abbreviation for rotate I’ve also put a rectangle on the screen and in a caption field I’ve put the following text which you can see up here and I’ve also gone into the fonts and increase the size from I believe the default was 10 I’ve increased it up to 16 just to make it a little bit more readable we’re going to use these values as we go throughout the animation overview then what I’ve done is opened up the navigation screen close this first open up the navigation screen copied one of these buttons down and then told it to go to the animation screen and then back to the button and change the text which we’ve done on on all these other buttons as we’ve added screens but I wanted to give you a quick overview and as we add more and more screens I’ll do less and less talking about how I’ve done that so save that screen so again now we have the x value which is horizontal the Y value which is vertical and the rotation value back to the PowerPoint for just a quick second just a reminder when we added the screen group with the header the navigation in the main screen we talked about where the reference point of x and y is X comma Y 0 0 is up here in the upper left hand corner and X increases in this direction and Y increases in this direction that’s going to be important as we get creating some screens the first animation that we’re going to cover is up here in the command it’s quite often that that you’ll use a button to apply a command but it doesn’t have to be a button it can be other objects as well if you would like you can read in the help to see which animations can be applied to which objects or probably an easier way is to just drop an object on the screen and then see which options are available in the animations the ones that are grayed out are not available for that particular object and the ones that are full color are allowed for that particular object and you can apply multiple animations on any given object as an example here is a button that I’ve drawn the ones that are available are the command and hyperlink color position resize and if I go in now that I’ve applied that command animation and I take a look at this properties I can see that it is a button with the command animation applied to it if I click on the command line you can see the properties change to the command animation now back to the graphics again I can apply multiple of these let me just go through and select them all you can see how they stay highlighted now these are kind of toggles think of them as almost like checkboxes that you might have where if I want to turn on multiple of those I just select them you can see here it’s the command the hyperlink colors that resize in the position and if I want to turn any of those off I can just click on it again and it will toggle it or deselect it so I’m going to turn these all off except for the command animation now here the way that the command animation works is it works based on the user input device such as a mouse or a touchscreen trackball things of that nature touch pads depending on what input device you have on the particular computer that you’re using and it works for the on down or the press of the bounce button left mouse button or the touch screen while the mouse is down or touch on release or on up and then you have right up by right down right up and then on double-click now some of these features may not be available on some embedded devices so check the documentation for that meaning the right or the double-click but beyond down while and on up should be available on all the devices so as a choice here we not only have what action is going to be taken but we have the type of common that we’re going to do and we have a choice between built-in language vbscript opening a screen closing a screen setting a tag to true resetting a tag defaults or toggling a tag between a true and a false value so we can do all of those we can do those kind of in combination as well for example I could use the built-in scripting language to do several different things when I press the button and then on release maybe set that to open a screen so I could have a

separate type on down and a different type on up so I can combine those functionalities so let’s take a quick look at some of the basics of how this might be used we’ve we’ve done the open screen on the navigation let’s use just real quickly here the built in language and see how this works now the way that this works is it and we’re going to talk more about this in the scripting the built in scripting video when we get there but until then just a little bit of basics this expression field can have a constant a an expression of mathematical equations logic built in into soft scripting language combined in here and then the result of this will then write into the the tag that’s contained in this field now the tag field is optional so depending on the expression or the function that you have there may not be a resultant tag but it will still do this expression let’s go back to beyond down here and for example this x value let’s put in the x value in here and let me just cursor off of that double click back on this cell and choose the X Val tag and then here I can copy this and I actually new in version 7.1 I can select this cell hold down the control key and drag and drop this over here so that saves me a little bit of time and then here I can put let’s say plus 1 now this will evaluate this expression so whatever the x value is it will take that value add 1 to it and write the result back into itself or back into x value tag so let’s see how that works let me go on this button here and change the text to say X Val and +1 now that’s just text that doesn’t make the button function that’s just labeling what it is doing in fact maybe a little bit easier to understand let’s just get that off of here and we’ll say increment X value can see I don’t have enough space here and my button so there we go now let’s close this save it and run here we go on the animation screen and when I press this button you can see it increased the x value and it also has change the position of the slider as well so every time I click this is just adding one more to it let me exit back out and show you we can add another chunk of functionality here let’s go to the on up and we’ll do the same thing with the Y value now I’m typing these in but I recommend that especially after you get a larger application that you might want to make sure you select I’m using the object finder so I’m going to on up increase the Y value now let’s go back save and now run the application you’re under animation now when I add that you can see that it’s adding 1 to that and 1 to that so when I press it it increases the x value when I release it it increases the Y value so let’s go back into the development environment and take another look at this beyond while happens while the button is pressed let’s go into the built-in scripting language here and let’s do some functionality that some people might want when I press and release the button the x value goes up by one but maybe I want to hold it down and auto increment that up a little bit faster rate so here I put X Val and notice that I’m not paying attention to case sensitivity this tag names are not case-sensitive X Val now what I’m going to do here is say plus 1 and something to note that you don’t see on this level of the configuration but if I click on the configuration button here and get a little bit more advanced configuration here on the on while unlike the on down and on up beyond while actually has a rate in milliseconds that this is going to occur so I’m going to bump this down to a hundred milliseconds that that will occur while we have that button press there’s some other functionality again we’ll talk about that in the next animation video click on OK and now when we run this you can see that I can increment by one so you can see 16 17 and when I hold it down it goes up every hundred milliseconds it goes up by one and then I can auto adjust and I could do the same thing I could have an up-and-down maybe put an up arrow or a down arrow on these particular buttons we’ll talk more about the button objects in a later video too or in a different video I might have already done that so

let’s go back and to the animations and one of the other things that I’d like to point out this is a little bit more of an advanced feature here under the screen names or opening screens you can put a string tag in here now you can directly pick let’s say the name of a screen from the list or you can manually type it in or you could do something like this screen name in curly brackets and if that was a string tag then you could change what this button did I’ll what screen this button opened during runtime maybe you could have a PLC dictate that or whatever process you were on so that button could become multiple screen changes depending on what how you drive it or not multiple but different screens that would go to let’s see so those are some of the things that I wanted to show you on the command we’ll cover a little bit more in another video this is just an overview video let’s move on now to another animation in the hyperlink so if I have a hyperlink and do this on another button here place a button and maybe we wanted this to go to induce Ofcom so I put that text labeling that button and if I now apply go back to the graphics tab apply a hyperlink animation to it then I can put the URL in here HTTP colon slash slash www and ooh soft calm and that will open up the default browser in the particular PC that this is running on and open up that web page and it will open up to an external instance of the browser it will not be embedded in Indy soft in this case that’ll be an external browser now you do have the choice of all these different hyperlink types whether it’s a file an FTP access secure HTTP mail mail to will open up the default mail program on that particular computer and start a new to mail message to whoever is listed in in the address field or the URL field here you do not have to put or select the hyperlink type if you don’t and you fill in a type of URL the system will automatically try to figure out what type of URL you are using for example if you put an email address in here it will treat it as a mail – and if you put a HTTP address or just a WWN here it will try to figure out that that’s just a web web address um some uses of this you can open up websites but more than likely if you have a process or something that’s on a machine you’re not going to go to a company website or at Google or something like that more than likely what you would do it would be to open up an HTML page that might be a help manual you might open up PDF manual some things like that you might even link to training videos or videos that might show somebody how to replace a filter on lines and things like that let’s see the other thing that you can do is you can put a string tag in here as well and that will give you the ability to go to dynamically change what page this links to or what you are all this links to so a couple things nice about that you can disable these maybe depending on security you don’t want somebody to get access to a particular page or something so you can shut this down based on whatever condition you want so that’s the hyperlink let’s let’s talk now about the bar graph animation now we did this in one of the first overview videos but what I’m going to do here is place a rectangle on the screen and configure this to maybe the Y value here and we’ll put the bar graph animation on that and we’ll go ahead and configure this now again this is a rectangle we can change its colors and fonts and things of that nature if we have text on it and puts we already have the bar graph animation on there so here we’re gonna put the Y value tag and it’s already set up for a minimum of zero maximum 100 we could change it if you wanted to it’s gonna grow in the vertical direction and it’s gonna grow up rather than down or from the center will come back and change those in the next video so there’s the basics of how we can configure that and work with this slider here so let’s change this or save that and go ahead and run and now when we have this value you can see that that bar graph changes based on that value let’s go back and make a couple of quick changes here and just see real quickly if we wanted this to be a horizontal bar graph let’s say and go ahead and change the orientation

of this more like this and now when we run this it goes in the horizontal direction so we have another thing that we can do to this we can apply a color animation simultaneously to the bar graph and let’s say that it’s based off of that same y value and that the color will be green until let’s choose let’s go in here into the custom colors and choose a little bit more Green’s so it starts off at green and then maybe when it gets to 33% – changes to yellow we could do filled there sorry we could do yellow and then when it gets to 66% maybe it changes to red if you need more colors than these four we can click on these more colors and this will give us 16 color combinations including blink which is back here we can be playing fast or blink slow as well so we’re gonna have green then yellow then red at zero 33 and 66 and now when we save this and run it one of the animations you can see here that I’m already beyond that limit so we got green until we get to 33 turn yellow and then we turn red now there’s some different ways that we can stack these graphs and get different colors to stay in place maybe you want the green to show here they all other show here and then red not up until here so we’ll cover that when we get to some more advanced animation topics in the next video let’s see also just while we’re in the color animation I do want to bring up and we’ll cover this in more detail there’s by limit which gives you these limits and then by color which you put a color expression number in here and there’s a function called RGB color that where we can set the red the green and the blue for whatever we want and we have a really big choice of range of what we can do we’ll do that in another video as well but I want to just give you a touch of what that can do the next thing that we can do is position animation and the position animation take a closed polygon let’s say and I’ll just draw some shape here finish that off by right-clicking go back to properties and fill this in let’s pick a little bit different color here let’s pick maybe a darker blue let’s see that on the screen a little bit here okay so now let’s apply the position animation to this by selecting this we now have not only the ability to change this position horizontally based on a tag but we can do this vertically and we can either do both of those or one of those independent from the other one and I’ll show you that in just a moment here we can also have this is kind of independent from position this is the show on condition or visibility and even though you can do these simultaneously this is it’s almost like a different animation unto itself but it just happens to be contained here under the position animation so show on condition is the visibility whenever the expression in this field evaluates to true that object will show it evaluates defaults it will hide that object so while we’re talking about visibility let’s let’s take a look here at the horizontal and horizontal slider up there is the x value and when that goes from 0 to 100 it will go this number of pixels from 0 to let’s just do this 200 pixels so when this is at 100 at its maximum value this will have moved to 200 pixels to the right on the screen and let’s click on this and try this see what happens yet go to the animation screen and see that object on there and we can see that that’s moving roughly 200 pixels or it is moving 200 pixels so from from its starting point here when I move the slider 100% then this has moved 200 pixels on the screen we’ve been just that accordingly right now we are not tied to the Y value let’s go back and do that before I do that let me adjust the slider down here and come back into the animation screen and on the object will apply the vertical which is the Y value when this goes from 0 to 100 we’ll keep this at 100 here and so now this when I slide this slider then this will move a hundred pixels go here and run the screen again now when I slide this you can see that I slide the slider up but the object moves downward now why is that let’s go back to our PowerPoint slide Y increase

is in this direction so as I increase with the slider and move the slider up that’s increasing the value of y value Y valve tag and it moves in this direction so we’ve got a couple of different ways that we can change that let’s go back into our development environment here and when this increases we want this to move in an upward direction to match so we can say that that should move negative 100 pixels so that will go in an upward direction and now when we run when I slide the slider it matches the direction of which the slider is going so you have some options there how to match that or change that as well let’s let’s go back into the position animation and now add a show on condition in fact let me do this a little bit differently I’m gonna just to make this really clear that this is entirely a different animation I’m just gonna put a different object here on the screen I’ll color it maybe red and I’ll apply the position animation to it and we’ll say show on condition maybe when x val is greater than 50 so when x value goes greater than 50 and we can put security in here we could put a security level in here we put different conditions maybe certain processes or certain things so ensure high which or hide buttons things of that nature so when X value is greater than 50 then that will show up so let’s see if that works yes run animation right now X value is at 100 so it’s shown and we move it down till we get into below 50 or actually at 50 because that says greater than so if I move that up to 51 just ever so slightly here you can see that that becomes visible move it down less than 50 and it’s gone clicking there’s nothing there at all to even reference now let’s take another look at the next animation which is put another object here in the screen let’s put another closed polygon and I’m going to finish this off and go back and fill it and now this resize animation is the next one that we’re going to do here and when we resize the reference points that it’s referenced referencing are listed here so if I’m changing the width it’s based on the left hand side and the height is based on the top so let’s take a look here at the height which would be the Y value with which would be X Val and when those change in range in this case from 0 to 100 and we could change those those values if you had something coming in different VLC and just simulating it with these sliders here then the percentage of how the size of that shows will be here to here now what I what I’m gonna do is because I don’t want this to go to 0 percent if this goes to 0 percent this will show nothing on this screen so I’m gonna put each one of these to 10 percent so at the very low range I’ll still have 10% in size there so let’s go do this so yes and run come back and you can see here that I can get that object very small or I can move both of these up independent of each other you can see how I can do that it’s height is now at a hundred percent but its width is only at ten percent and there’s a hundred percent and a hundred percent and notice as I change the Y value that it’s staying Twitter staying fixed at the top position that’s the reference point and the reference point was left on the x-axis and go back in here and you can see that this was top and left is where those were referenced but one of the things that I didn’t cover just a moment ago here on the position animation is even though we were moving these sliders and changing the horizontal the vertical position one option that you have is to make this a slider or an input device and if we check that as a checkbox now when we run not only does it respond to that tag in its position are those tags and the positions but we can grab hold of it with our input device or mouse let’s say so we can move that polygon and we can also grab hold of it and change the value using that and that’s how we’ve made these little slider handles when we maybe slider symbols another example that we could do

instead of a polygon we might put a rectangle or even use a small button and draw a button here and kind of like the handle here on the slider we can remove the text remove a little line on there tell it that this is I’m sorry go up here to the position animation we’ll tie this to the Y value and we’ll go negative 100 pixels because we have to move that in an upward direction till it’ll be a slider and now when we run this you can see that it acts as a slider just like this little handle over here that’s how we make those sliders we’ll talk more about that in some assemble videos things like that later the next animation over the view that I want to cover is rotation now rotation will rotate only certain types of objects but I want to draw that let’s delete that object here what I wanted to do is draw a closed polygon and I wanted to draw kind of roughly a five sided figure that’s maybe like a home plate and baseball so we’ll come here and doesn’t have to be perfect you’ll get the idea so I’ll drop a point here here and again roughly here and close that off by right-clicking and again it doesn’t have to be exact in fact for this example I wanted to be a little bit not really a perfect object here so I’m gonna fill this again just so we can see it now when we rotate an object the rotation animation click on the rotation animation it has a reference point here and this top-left refers to imagine this is a bounding box around here that’s the leftmost edge and the topmost edge wherever that intersection is that’s the top left or the left top that this is going to be referencing so when I rotate this object based on that point it’s going to really be rotating around this point in space here so I’m going to tie this to the rotation tag that is used on this slider here and the tag expression and again it doesn’t have to be just an individual tag full expression in here with sine and cosine and get some positions that give you some interesting results depending on what your functionality needs to be so here I’m gonna put our ot as the tag and it will go the our ot tag when this slider will go from 0 minimal value to 100% and we’re going to rotate this from 0 to 360 degrees and again that’s going to rotate about this little position out here at space save this and run and at this point we can run this and you can see it’s rotating around this point all over here that reference point you can see that it even overlaps over the top of other objects now let’s come back here and do a simple exercise and change the reference point maybe we want this to reference the center point so we would choose center here and now run and now it rotates amongst itself now it’s not a center of gravity per se but it’s the bounding box around that the center points of that bounding box around it so wherever that center point is is where that rotates okay so in another video we’re gonna cover how to choose a custom point that’s not on the object basically what you do is you give it a reference point and then you give it an offset based on a number of pixels and we’ll cover that a little bit more how to set that up and see some tricks on how to do that in another video so there’s rotation overview now the next thing is text datalink so the text datalink here let’s start off with a piece of text and if I just type the word temperature the text datalink animation is not available the text datalink animation only becomes available when you have pound signs in the text now I could put another piece of text down here and put pound signs in it and once I have pound signs in that piece of text then the text datalink animation becomes available so again I have a piece of text with that caption and then then I can alternatively here go back to the graphics tab I can apply the text datalink animation from here or we provide a nice convenient way to do that just by clicking on here as well let’s give you an example of that because there’s there’s more to this let’s say that I’ve typed in the word temperature but I want to display the temperature after the label temperature what I can do is I can open that up and

if you remember here I don’t have the ability to add the text datalink animation up here but what I can do is this nice little convenient button here when I click on this it not only applies the text datalink animation to it but it adds : a space and for pound signs to it and now we can just type in the tag name in here let’s use the rotation ro T and now that has the rotation tag tied to it and it has four pound signs well we can alter this let’s say I need more pound signs in there for more characters or even less character since I’m only going 0 to 100% here and really need three characters in there I can do all kinds of formatting to this there’s other scripting that I can do to change the formatting and decimal points and things of that nature but if I go back into here we can see that this temperature is not tied to this tag here I can see that value updates based on that tag name so one other thing here on the text datalink is the input enabled once I have input enabled then I can let’s say for example limit the values that I want this to go to we’ll go from 0 to 100 and now I can actually click on that depending on my input device let’s go back here and run select that with either touch or mouse and you can see that value is currently 53 I can type in another value hit enter it’ll go directly to that one other option that I wanted to point out we’ll cover this in a couple of different places later on here on animation if I wanted to maybe I had a PC that didn’t have a mouse it was only touchscreen well how would I enter that or select that and/or there was maybe no keyboard we have the option for a pop-up keypad and how you enable that is your under project under viewer you have to first enable the default keypad and is it going to be an alphanumeric enhanced alphanumeric or just a numeric keypad and the size that that would be whether or not it shows the values the min and Max fields and now when we click on that object whoops I wanted to show you here that now we can say virtual keypad it uses the default that I just configured under the project configuration or you can change which type of keypad that that opens up for this since we chose the numeric keypad and that’s a numeric value that’s over to watch during runtime and now I can click on this click here and now if I have just a touchscreen I could click on this and would bring up the keypad I could touch which we okay enter and cancel its changes to 55 okay sorry okay cancel and backspace you can see my min and Max values in there I can hit okay that changes that right to that value so that’s everything that I wanted to show you for just the animations overview we’ll get into a little bit more details in another video hope you found this interesting and informative and if you have any other questions feel free to get us get a hold of us at info at indy soft calm thanks and have a great day