As you know so far, we had this function which returns either temperature data or sky conditions as
a list.
So in our main, that's p file.
We're going to call that function and get either temperature or sky condition data.
So basically in our main file, we have these title text input slides, select books and sub header
widgets.
And then down here we get the temperature or sky data, and then here we create a temperature plot.
Now we should create a temperature plot only if we get temperature data.
But if we have sky data, we're going to show some clouds and sun and rain icons instead of showing
a plot.
Remember that I showed you how the app looks like in the very first video of this app when I introduce
you to the app.
So with Sky, we are going to render some images and with temperature we're going to render a plot that
means in here.
We should have two behaviors.
Either one should happen or the other.
So as the image is what we need to use basically.
And then inside this image method, we will provide a list of image paths.
I'll give you the images anyway.
What I'm trying to say here is that we have two different scenarios, and for that we need an F conditional
here, which should check if option is temperature.
So if the user selects temperature in the select box, then we will generate a figure, a plot object,
basically, and plot that figure in the web app.
So if option is equal to temperature.
And if option is equal to Sky, then we're going to.
Their veins are images on the Web app.
So that means we should have the if conditional blocks in here, as I just did, instead of having them
in here.
Because let's suppose that we have them in here.
In that case, this will be either a list of temperature or list of sky conditions.
And in that case, still we would have to write another conditional block here to check if the data
are sky conditions or temperature conditions.
Right.
And do something depending on that.
So why not just remove these conditions from here and actually we get this filtered data.
And we do that filtering in main that p.
So in this temperature conditional block.
So filter data same for the sky conditions.
Get that go here down here filtered data is equal to that.
And then in here we remove that, remove that as well and just return the filter data.
So we have filtered the data here by extracting all the number of days that we need, forecast days,
but will not be doing any filtering based on the option that the user chooses.
So remove that kind argument, remove that as well.
And now we need to call this function from here.
Get data with place and days, but not with the option and.
We can store this in a filter data variable and that has to reflect this here.
So make sure that this variable is the same as this.
So we get the data filtered by the number of days and then we filter them further in here.
By temperature or in here as well by sky conditions.
Right.
And then we plot the figure above.
The figure needs the dates as well.
So we need to plot the date horizontally in the x axis and the temperature is vertically in the Y axis.
So this will be like temperatures and temperatures is this list.
So we already extracted the temperatures.
Right.
And we need the dates.
So dates will also be a list comprehension in here.
So we will get a list.
Of dates and plotted along the x axis.
So what can we place here in this date?
Well, that would be something like Dict.
You remember there was a detect key in our data so for dict in filters dot to.
That should give us the dates.
So let's run this app now with Stream Lead and see where we have gone so far.
So Stream, let's run Main.
We're going to get an error.
So that's year.
I was referring to a key error list.
That is because we're not providing the place here immediately.
So when the script runs for the first time, place is empty.
Therefore we don't get data for that empty place because they don't exist for empty places.
And therefore, if you place here a city and press enter, that error should go away and you should
get the actual data.
So these are the temperature data for to run for the next few days.
Right.
So how do we fix that least error so that it doesn't show when the user loads the app for the first
time?
Well, you can do that quite easily, actually.
So we only want to get the data.
We only want to call that function in other words, if place.
So which means if place exists as a string.
So when the user doesn't provide a place, place will be an empty string.
Right.
So we are in this situation when the user loads the app for the first time, place is an empty string
and we say for if please print.
Yes.
Nothing will be printed out because this is not evaluated.
True when the string is an empty string.
But if place is something.
But then you say, if they spring this, then you get.
Yes.
So that's what we're doing here.
If plays is provided, then we're going to be.
Getting the data and we're going to produce that figure and plot it.
And the same goes for the sky conditions.
So now let's also complete the sky conditions, because currently if we go to sky, nothing happens.
Here it says that image is missing work or position arguments image in here.
So here we can provide a list of images and that will generate multiple images so you can provide either
one image with image.
I mean the path to an image file.
So either one image path or multiple image paths as list.
So we need some image files to represent those sky conditions on our web app.
And for that I've prepared some PNG images, so please download these from the lecture resources and
so then place them in a folder such as inside this images folder and then paste that images folder in
your project directory.
Here I'll add them to get.
So now images contains these four PNG files and images should be in the same directory with main pie.
So in the root directory of your project.
Right.
So we should work on this if conditional block here.
So basically these are sky conditions, right?
We did that in the previous video.
Let's see
how these this list looks like.
So I'm running the app currently, so I'll reload the stream little app, provide the city name press
on Sky.
And now we get this error because of this line.
We haven't finished this line yet.
But before Python finds the error here, it prints out the sky conditions in here.
So that's a list of strings.
So we have clear, clear clouds, clouds clear, clear, clear, clear, etc..
And basically we have those four conditions, as you see in the images, clear clouds, rain and snow.
So we need to count for all of them.
And basically we need to create as many images as we have conditions here.
So, for example, this query was for one day, but if I change this to two days, then we're going
to get a longer list.
Right now, it's a longer list of sky conditions for the next two days.
So the number of images should be the same as the number of conditions.
So one image per condition.
So we should figure out a way to go from this list.
So from this list to something like this, images.
Clear that P and G images clear that P and G again, images, cloud, dot P and G.
So for each condition, we should have one image path.
So that corresponds to that, that corresponds to that.
And all these image paths should exist in your project directory.
So you see images slash clear that PNG is here in my project.
Same goes for images, cloud, dot P and G.
So how can we translate that to that?
Well, that could be different ways to do that.
But a good, solid way is to have a dictionary.
Where we have the paths, all the images associated to with the conditions so the conditions can be
clear and that should be associated with images slash clear and g.
Then we have clouds.
Clouds with s at the end that should be associated with images clouds that png.
Then another one is Reign with capital or that is associated with.
Images, rain, that's dengue.
And then we have lastly snow.
That is images slash snow that P&G.
So that's a dictionary that you should also have in your code somewhere in here.
So execute that in the console perhaps to see if you have the syntax correct.
And it's fine in my case.
So once you have these images and you have this list, then you need to construct another list where
you have only the image paths corresponding to those lists.
So this is also known as translating the data.
There are different ways to do this translation, but one way is to use a list comprehension.
So basically you would say give me from images.
Give me the condition for condition and strings.
Let me explain what this does.
So for each condition in this list named streams here, this is named Sky Conditions.
So for each of those things, we're going to extract the value from this images dictionary.
So basically, this will be like a loop in the first iteration clear, we'll go to this place.
And so that's will extract this path.
So this path will be stored in this list as the first item.
Then in the second loop again, we have clear, so we will have a second image.
It's clear that PNG item, so two items in the list then clouds and so on and so forth.
So if I execute this now, that will produce this list of image paths.
Images clear that PNG image is clear, that PNG image is cloud, dot, PNG and so on.
So let's have this same.
Code in here as well.
Let's call this image paths.
Is equal to images.
So that variable, which is a dictionary from that dictionary we extract condition, which is just the
variable that we create here on the fly in this list comprehension.
So for condition in sorry for condition in sky conditions.
Right.
So this will be that list.
So for condition is sky conditions.
And then we plot the image paths in here.
Let's see what we've got in the front end.
Tirana.
That's the temperature.
What about sky?
Yeah.
It's working.
So we have two clears, one cloud, two clouds, another clear.
So that reflects.
That's clear.
Clear clouds, Clouds clear.
But we have an issue with the size of the images that you can fix by providing a width of, let's say,
115 reloads.
Skye Yep.
Now it's working fine.
Let's change the slider to something else.
And.
Yeah, the sky conditions are updated based on the slider here.
If we go to temperature, this is working based on that slider and see how that's about it.
It was a very long and complex.
App of both complexity.
As I mentioned before, it is very good.
While you are in the learning process, so thanks a lot for following this app.
I hope you liked it and I hope you learned a lot with data structures, especially we did a lot of data
structure manipulations here with dictionaries and lists and etc..
Thanks a lot.
I'll see you later.