Thank you for joining me for this video on the images plugin. Servoy University, I'm Bob Cusick. Now, the images plugin allows you to take data that you have inside of a media field and to change it. You can flip it, rotate it, you can resize it, you can get information about it. It's a great little plugin that works both equally well in the smart client as well as the web client. To demonstrate this, I've created a very simple sample solution with a couple of labels that will display the media that's in the database and has a couple of fields for information that we're going to get using the plugin and then there's some buttons there on the right hand side. So let's see how this looks in the smart client. Alright, so here I have a smart client solution and it's a cute little picture of a koala. So let's press some of our buttons and see how it works. First let's flip it horizontally and we'll flip it vertically and then we'll flip it back. And for the other ones, I want to actually show you how this works in the browser. So let's go ahead and launch up a web client as well. Alright, so here's the same solution in the browser and it works exactly the same way. So let's flip it horizontally and flip it vertically. Alright, now let's go ahead and rotate it 45 degrees and we can make it a little thumbnail image of it and we can get the stats on the image, so the width, height and file type. So let's pop back over into Sway to develop and take a look at the code behind this. It's pretty straightforward so I think we'll catch on really easily. Alright, so coming back over here to our document, J.S., the code is pretty straightforward because in the images plugin, there's only one main function which is get image. Once you have that image, what we'll get returned is this J.S. image. So the J.S. images where all the magic happens. Let's have a look at the code starting up in line 10. This variable DB image goes and grabs the media, it's inside the database column. And then the next line makes a variable called image that uses the plugin to get this image object. So if we have the J.S. image object, then we simply call image flip. Now if we roll over image flip, we can see that the image will be flipped vertically or horizontally simply by passing a zero or one as the parameter. Now what gets returned to you is a new J.S. image. So you could choose to store the flipped image in another media field or some other way. But in this case, I'm storing it back into the original, so I'm overriding the original image and that I'm calling saved data. So here, the code for flipping vertically is exactly the same as the code for flipping it horizontally except I pass in a zero into the image.flip function. And again, I save it back over itself and save data. The code for rotation, very similar. It's almost exactly the same as the other two except now I use the function image rotate and the 45 is the number of degrees that you want it to be rotated. You can also pass in negative degrees to rotate it counterclockwise and you can pass in positive degrees to rotate it clockwise. The thumbnail is also very, very easy and very similar. The only difference between the rest of the code is we call the image dot resize and you pass it in a width and a height. Now what's cool is that the plugin will automatically go ahead and keep the aspect ratio for you. So think of these sort of the maximum width and the maximum height of the image. And again, it's saved back over itself and then database manager saved data. It's important that you call database manager saved data and the reason I'm calling it after every one of these commands is because I wanted to work in the web client. If you don't call database manager saved data in the web client, then you won't see the image actually change until the user changes records or does some other action to force a save. And finally, the code at the bottom here gets the stats using the plugin itself. So you got image get height, image get width and image get content type. Now if you watch the video on the file plugin, you'll know that you can get a lot more information about something if the user chooses it from the hard drive. What we're doing is we're assuming that we don't know where these actual images came from that they just appeared inside of our database. And we can still go ahead and interrogate that picture or that graphic and get at least basic information about it. And then the other cool thing about this is the get metadata description and the object itself and the properties. When you have JPEG images that you took with a camera, what will happen is there'll be a whole host of information stored along with the JPEG and these functions will allow you to pull that information out. And there's a great piece of sample code if you come over here to get metadata properties and you right click and you say move sample, what you'll get is some sample code that looks like this. Now every camera manufacturer has their own set of properties that they will expose and their own set of properties that they'll add in some add a lot in some add a little bit in. Now what this for loop is going to do is going to go get all of the metadata properties that are stored with the JPEG and we'll simply do an application output, which means it'll show up in our console here. So let me go ahead and restore this. So all of the information is going to appear in the console. So let's go ahead and go back to our smart client here. And if I come down to this image, this is a GIF image as we can see here from the file type. Everything still works but it doesn't get any of the information as you can see back here in the sort of what developer this console is still blank. Now this is a picture that I took in Australia. This is the Indian Ocean. So everything will still work like normally. Now when I press get stats, we'll not only get the file height width and the file type, but we got all of this metadata information and there's a ton of metadata information. Some of it is specific to the manufacturer as you can see can and maker note. So there's lots of things that are stored for the Canon stuff. This is so that they can use their own content management systems and pull stuff out, but you can use it as well. And then if you scroll down, there are these things called XSIFs. And XF is a standard that if there's going to be metadata, the manufacturer puts in these XF properties and objects. Now again, they can vary by manufacturer, but here's the aperture value, the color space, whether it's compressed, the date time that it was digitized, the original, the zoom rate, the again, the height and width, the auto mode, the exposure, and it just goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on. In fact, it even has its own thumbnail data here. So you could go and extract the thumbnail from the actual JPEG itself. Now the reason that we didn't do that in our solution is because what we wanted to do is we wanted the thumbnail to work for non-JPG types as well. So it'll do gifts, it'll do anything that you put in there. It will try to make a thumbnail by using resize. As you can see, it's a very handy and very powerful plugin that you can use in both your web client and smart client solutions. Thanks for watching.