 Hey everybody it's Brian, welcome to the 143rd cute tutorial with C++ and GUI programming. Before we begin it's 69 degrees in March in Michigan which is unheard of warm so all the little bugs and insects are becoming the life and all the things that I'm allergic to are coming back to life too so if I sound congested, whoops I just slapped the microphone, if I sound congested or if I cough or sneeze or clear my throat I apologize my allergies are really just wearing me down today. So the image type displays an image I you know I dare you to be more descriptive all right so but that's essentially what it does it's a pretty simple component it displays an image now there's some pieces to this we need to understand for example inherited by animated image that should give you a clue that you can animate images. Is synchronous and cache what are those well they tie into this thing called source this is the source of the image the actual file you're going to be displaying and notice how it's a URL meaning you can actually give it a web URL and download the file automatically. All this happens in the background you need to write zero code to make that happen. The problem comes in your application will run before that image is actually downloaded so you have to be in what's called a synchronous mode which it does that automatically for a remote file and your application will run while the image is downloaded so sometimes things might get a little out of sync so just bear that in mind. Cache is another nifty little feature if you have multiple images with the same source be it local or remote it will cache that image that way you don't need to download it twice or load it from disk twice or whatever it'll just do it automatically. And progress is the progress of loading the file if it's remote you have some other little features like fill mode alignment, map mirror, things like that which really kind of go outside the scope of what we're going to talk about. Mirror just like flips it, map map is some data it's all out in the documentation which I encourage you to go read and there's you know it's pretty simple as you can see just image with source and you know you can do some basic things like you can you know do fill mode which determines how the image is stretched or tiled and we're going to just play around with this for a little bit here and we're gonna make the Qt Quick we're going to call this Qt Quick 5, next finish we're just going to get rid of all this gobbledygook here. Now if you expand this resources node you see this QML QRC well the QRC is a Qt resource file or resource content as it's called and you expand that you have the slash and the main QML which we're currently editing. So to talk about images you really need to understand resource files you can load them off the disk or you can load them off the resource file or you can load them off a URL. Now what is the resource file? A resource file is just a binary file that you put other files into. I think we've covered this a little bit in the Qt tutorials that I've previously made so just be aware that when you put things in the QRC it's actually going to be compiled into a binary file and that binary file is going to be put inside of your executable so the user will never have access to those images. Now it's like a miniature file system we have the slash which is the root so I'm going to make just a new prefix here whoops if I had the right node add prefix think of a prefix as like a like a directory we'll call this files so I like to kind of you know just move things off here so let's go here and I did a previous tutorial on my Mac so we're just going to grab some little images here why not quick five there we are I'm going to make a new folder call this images and we're just going to paste that in there so on our hard drive we have you know quick five slash images and then the images and in here we have slash files so we're going to add existing we'll go into images and we'll just add these and when we expand that you see how it says images slash and then whatever the name is so what we're doing is we're creating let me clear that breakpoint we're creating a virtual path to these files so if we actually let's just fill this out with let's say 600 height equals 600 because why not and we're gonna say image now as soon as we say image you notice how it has this black box that I believe it's called code preview somebody correct me if I'm wrong but it shows you exactly what it's going to put in the IDE here so I'm just going to hit tab and it gives you the bare minimum of what you need to work with an image so we're going to call this logo and now the source we have to give it a path this is where things get a little touchy with resource files you can't say slash file name you notice how it's trying to actually go off my hard drive here because I'm on a unix excuse me Linux based system so what we need to do is say files slash and notice how it's not even helping me with intelligence here images and let's say cute logo dot png so if you let's actually save and run this yep you can see how it's displaying it so if you follow along with our logic here we have our route and then files and then images and then the image name so that's how we get that path of files the actual prefix and then the path inside that prefix and the path is independent of the file system but it borrows the name from the file system if that's not overly confusing I don't know what is but just understand that I'll get a lot of email saying well I did you know slash images and it just you know it won't load it says cannot open resource so if you get cannot open resource and your application is just blank that's why it's because you've got the virtual path incorrect and I don't believe it actually whoops whoa thank you Ubuntu I don't believe it hurts it when you do that I usually do it just so that I understand the full path so that's how easy it is display an image locally now let's say we want to do that I love copy and paste but we want to display something different like um let's say I'm trying to find a good image here I got some notes so we're gonna give it to this guy I'm gonna call it smile I have no idea why I did that but you can see it downloads it remotely ta-da there's that big smiley face and we're gonna actually we want some feedback on this we want to know exactly what's happening so we're gonna say on progress changed we say console.log I should notice if note that if you hit that you actually have all the features of Qtabug right at your fingertips here under console so we're gonna go console log and we're gonna say smile progress whoops get that little box out of there and we're gonna say progress now you notice how we're not doing this dot or smile dot we're just saying progress that's called the qml scope when we're in here we have access to all of those properties now if you nestle image this is like if we put this image inside of here when we say progress we're talking about our current image not the parent so when we save and run this qml smile progress yeah it didn't like that uh that's why it did like it I just goofed something up because I really need to be on medication how many times have you said that life I really need to be on medication there we go you see how that it says smile progress one the progress actually works on a zero base system it's a percentage it goes 0.0 whoops 2 1.0 1.0 being 100 percent so if you have a larger image which we can actually swap this out here and see if i can unintentionally slow my network connection down here we're just going to grab a larger image yeah you can see how we got this youtube logo tada youtube very large image and you can see the progress is 0.11 and then one because what it's doing is it's going out and he's using the what is the q q network access manager I think in the background and it's going out and it's reading chunks it's not going bit for bit it's saying give me 15 bytes or whatever I don't remember the buffer size it's probably 15k and so it's getting it in chunk it's cashing it onto the local disk you have no worries you don't even care that what's going on you just want the image to display and it gives you this nice progress feedback here now we only see it goes from 11 percent to 100 percent because the image wasn't gigantic is what i'm getting at here now this is why I do not like doing remote images as cool as they are a it takes time to actually download the image b because you're dealing with a remote system errors can and will happen and I set this up specifically to demonstrate this you notice how this is dub dub dub void realms comm slash images smile dot jpg what we're going to do here is we're going to go out to my website under the donate and grab that little smiley face and attempt to download it now you see the files there it displays just fine but when we go to download it save and run notice how it's not there and it says qml image error downloading there's our file file server replied not acceptable and we have a progress of zero what that means is the I believe it's the q network access manager in the background had a problem talking with the server and what specifically is going on here is we need what's called a user agent which i'm not going to show how to fix in this tutorial because it gets a little bit involved but understand that when you're downloading files off of the internet things can and will happen so if you desperately need this file do not do it remotely repeat after me class do not do it remotely alright so that is an example of how to download a file but we are going to avoid doing that because it's bad practice so i'm just gonna jot some notes here and we are going to just comment that out and i'm going to leave that in here so that you guys can you know just reference that in the future tutorial so now we've just got our our logo here and we've got some other options here like we've got the taco cat let's see what taco cat is right some of you're probably already laughing don't don't give it away if you're sitting with somebody who has no idea what i'm doing here so taco cat jpg taco cat spelled backwards is taco cat yes actually it's true hold that image up to a mirror um i wanted to demonstrate two things here um this is called z ordering notice how we've got this logo and then taco cat well taco cat's covering that logo up so if we just say oops i don't want to do that i want to do it down here gosh i swear something bit me like my egg my my egg my leg itches something like really bit me guys i need someone come like exterminate bugs or something all right so x we're gonna say x is 25 y we're gonna actually do some positioning here and you can see because we're doing 25 25 that that logo is underneath that's called z ordering it's think of this like a table you're putting the logo down first because it's first in our script and then you're putting taco cat on top of it so it covers it so you would want to flip that around like that and we'll get into z ordering a little bit more in future tutorials i just wanted you to understand that it exists see ta da we flip it around there it goes and you can actually do positioning and things of that nature like let's actually i didn't want that i was actually going to see if i can find it very quickly here we'll just do the anchor center in and we'll say taco cat so you can actually center those in there ta da so we're going to look at this banana guy and if you've ever seen that peanut butter jelly time the little dancing banana he's actually kind of kind of funny yeah he does that kind of cracks me up sometimes but uh we're going to throw that in there and see what happens here so we're going to change this to banana and let's actually change this banana now when we throw that in there you notice how it's not dancing i want a dancing banana okay that's why i made this tutorial was to show a dancing banana so it's very easy to actually show an animation we're just going to do animated image now ta da it's animated so that is why you would want to do images instead of vector graphics because you can actually just do this on the fly you can load this this image in there so pretty neat and we're going to actually just because i like to play around with things we're going to do the old slider right well i didn't import the controls that's why i'm going to play dota tonight and i'm probably not going to play it well because i'm not feeling good but you know i'm going to play it i've had a long day and we're doing this so there we go there's our slider all right max value 360 min value zero value zero and we're going to do on value changed whoops and somebody did actually send me an email saying dude how do you know what to type well you do actually just hit control space and it tells you everything that's available so you can kind of just scroll through here and if you type you know this we kind of cover this a little bit it'll show you what you want so if we go back up here and we say on and then control space it shows you everything that starts with on and we can kind of you know figure out what we want so we're going to say on value changed and we're going to say console dot log and we're going to just say value just because we want the current rotational value and we also want to what do we call a banana how could we forget that name geez rotation equal value so now we've got our taco cat with a dancing banana and we can actually rotate that dancing banana but that has a pretty dizzying effect you know if you can just do that and you can see how we've got our nice log working here too so those are some some key concepts you should be aware of but as you can see working with images are incredibly easy and just like with the rectangle you can use anchors you can use positionings you can do rotations opacity things like that let's actually just look to see real quick what the animated image has for us you can see it's just got all the things with the image plus a little extra we can actually mirror that if we wanted to you can see whether it's playing or not you can i believe you can start and stop it too let's see if we can start no i thought there was a pause in there but now you can see if it's paused or not so yeah you can start and stop it which we may cover in future tutorials um kind of gets into the if you're reading along in the documentation the state engine you can actually do pretty complex animations with multiple images so like you can make a guy standing or walking or things like that like you wouldn't a video game which is pretty neat stuff if you ask me so let's do opacity let's say 50 and it pretty much looks the same because i'm a dork and i'm not feeling well i didn't research opacity let's try zero points i'm just playing around there we go you can see we have we have our 50% opacity on our banana and we can move them around and how he kind of floats over taco cat here that's kind of like really crazy i'm never using the dancing banana again i apologize for that so that's all for this tutorial i hope you found this educational and entertaining and as always i will throw the source code for this up in the tutorial section under cute way in the back