Taking Screenshots With a View

00:00 In this lesson, you want to create a new view that takes a screenshot when you visit a view. After that, you’ll make your life even more convenient by adding a link that automatically triggers a screenshot when you click it. Go to your app.py file and create a new function.

00:18 This will be the function of your new image-making view. So a fitting name would be make_image().

00:26 For now, return a string with an <h2> headline

00:31 and the content, “I’m just a placeholder,” because this string will go away in a moment. For now, you’re just adding this HTML code in order to check if the view works.

00:42 Until now, it’s just a function in the app.py file. In order to make it a view, you need to add the decorator. So above the function definition, add @app.route() and then in parentheses "/make_image".

00:58 Save your app.py file. Visit the browser and go to your make image route. So that’s your host URL /make-image.

01:07 When you see that “I’m just a placeholder” headline, you know that the view works. Of course, that’s just the beginning. The idea of this view is to actually make a screenshot.

01:17 Before you go back into your code, copy the host URL because you’ll need this in a string in a moment, and then go into your make_image() function and create a new variable named target_url.

01:29 The value of target_url is the full URL of your code view. So since code view is the root level, it’s just the server with the port 5000 and the slash in the end.

01:41 Next, you want to pass in the target_url into the take_screenshot() function. The take_screenshot() function is already present in the utils.py file, but you need to import it into app.py.

01:53 So underneath your Flask imports, you add the import statement from utils import take_ screenshot, and then inside the make_image() function underneath the target_url variable definition, you call the take_screenshot() function and pass in target_url.

02:12 When you save app.py and reload the browser, then you should see a screenshot appearing on the left side in the sidebar. That’s the take_screenshot() function in action.

02:24 Let’s have a look at a screenshot file for a moment to verify that the right image was taken and there, very small, you see print("Hello"). Okay, perfect. That works.

02:33 But the function of make_image() is not ideal yet. There are basically two optimizations that you want to make. One is that you don’t want to hard code the target_url and the other is instead of showing a placeholder, you want to redirect to the code view.

02:48 To make this happen, you need to add three imports from Flask: redirect, request, and url_for.

03:03 You use request and url_for to create the target_url. So instead of hard coding the target_url variable as a string, you get a .host_url attribute from the request object, which basically is your server with the port number and then the url_for() your code view. Here that’s basically just a slash, but now you are way more flexible because if you ever update your code route, then the target_url variable will still hold the correct route. To check if the make_image() view still works, reload the make image route and see if another screenshot is taken.

03:44 Next, instead of showing the placeholder, you actually want to redirect to your code view: redirect( url_for("code")).

03:55 Once you save the file and you reload your make image route, then you see that a screenshot is taken and you’re going back to your code view. So every time you are reloading the make image route or you are visiting it, you are creating a screenshot.

04:16 Currently, you need to visit make-image by hand by entering the URL in your browser, but you can actually just add a link on your homepage and when you click the link, then the screenshot is taken.

04:27 So let’s do that. Hop over to base.html and underneath your <div> element, create a link that’s <a> with the href attribute equals and then quotes.

04:40 And there you can pass in another variable. So that means you’re using two curly braces and in this case, you are calling the url_for() function just like you did in your view.

04:53 And there you pass in the make_image name of the make image view.

05:01 Don’t forget to close the <a> element and then add a nice link title. For example, “Create Image.” Once you save the base.html file and you are visiting your homepage, then you can see that there is a link named “Create Image.” And when you click the link,

05:22 then you can see on the left side that a new screenshot is taken. So instead of reloading a browser or visiting a URL in your browser bar, you can hit the link and a screenshot is created in the background.

05:35 I think that’s a great improvement, but I don’t know about you. I am a little bit tired of looking at this unstyled page, so I think it’s time to add some CSS to make the styling a little bit nicer.