Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Rounding out the UI
Lecture: Compare yourself to others
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
The last UI element, the last part of our site that we have to build, is this compare page. And the idea is that now that we have
0:09
your gender, your height, and things like that and we've been collecting your weight and heart rate we'd like to compare you to folks
0:17
of that gender and that height. Now, that's pretty imperfect, y'know there's a lot of factors in there but that's the data that we have
0:24
it's those two things, so we'll compare you to that and you can just disregard it. That's the idea that I have, right. So we need to fill out this page
0:32
and we also need to put some more data in the server that this is what the average person who is female and this height weighs
0:39
and what their heart rate is and things like that. So, I'm going to fill out this UI, really quick
0:44
and then we'll talk about how we get the data in there. And here you have it: Look at that. Here's our UI, let me scroll up just a little bit for you.
0:50
So I've fleshed this out, let's just run it so you can see it, full size here. Now the fonts probably look kind of huge
0:57
and they're a little bit huge, but and that's also just partly because my screen's small for recording. Alright, so here's what we have so far
1:04
obviously we're not loading any data into it and we can do that a little bit in just a second. So the idea is that we're going to compare ourselves
1:11
against the average male or female who is however many inches or feet tall and then we're going to put some information over here.
1:20
Now, you might notice there's some weird symbols in our label values, like value :.1f. What the heck is up with that?
1:27
An original sign in value, this is a little trick technique I guess is a better word that I'm using here. These are Python string formats
1:38
and so this lets me design in the designer the look and feel and the text that goes in there exactly but still use string format to fill in the values.
1:48
So I can say string format on this value is 172.0051 So I can say string format on this value is 172.0051 or whatever and it will actually
1:58
format that value into this location and use Python's formatting characters disable. We're going to put one decimal place here, and then
2:08
you know, no decimal places on this one, for example. So that's what's up with these funky bits. Let's put as much data in here as we can.
2:15
So this we can not do, this is the average person we can't do anything, but the original we can put in here.
2:21
In the sign, in the value, we'll see about those in a second; so let's me just copy this away. Get with me and remember where to put it.
2:33
So let's go back to the code and let's import some stuff. Pretty much all of this stuff we don't need. We just need our cool little library there
2:46
so it'll say user equals data access, the user, like so. And then we'll say self dot label we got a ton of these we got to figure out which one
2:58
your weight equals, now, how're we going to get this? We're going to need to get my measurements your measurements, we'll just call them measurements.
3:13
We don't have a great function to get our last measurement now we probably should write that but remember when you log in you're already
3:20
cashing all of these and the first one is the latest so we'll go like that, and let's say measurement equals nothing, but if...
3:34
Actually let's do it like this. Do a singular measurement equals none and if there are measurements we're going to set that
3:43
to the first one, okay, 'cause remember the way we sort them the newest one is first so we'll just show you
3:49
your last measurement there; go ahead and show this. If we don't have any data there's a way to deal with this
3:57
but let's go ahead and do this here let's say text equals... and dot format, and then what do we want to put? Well, let's go back here real quick
4:10
and we have value, here, original in value so I think we want for this one to be plus or minus so value needs something
4:20
we're just going to put original in there for now; original equals measurement of weight. Let's check our data table and make sure
4:31
that's what it's called; measurements, weight in pounds. Let's copy that, we want to get that right. And what was the other one?
4:42
We have our heart rate, resting heart rate so we're going to need to do the other one self dot label, and your rate dot text
4:53
is going to be something like that, of label. There we go, let's just run that, see how that works. Going to compare... ah, perfect!
5:07
We have not a number because that didn't get set and we have 181, that looks right for some reason our weight value didn't get in there
5:16
let's see; original, and I guess we could set the others sign and value, let's format these a little bit. Put nothing, it could be plus or minus
5:30
I'll put plus I guess, and we'll do it like that. Here, same thing, and this didn't work because I didn't spell it right.
5:42
Here we go, perfect, so our weight and our rate is fine we need these values to determine what that is
5:49
and then we don't want to share this if we have some value. So let's fix that's real quick, and let's do that. So we have our card with data
5:59
and our card with no data, I'll say visible equals measurement is not none... Is none, yes, and our card with data like this.
6:17
Alright, run it one more time make sure this is showing and hiding correctly. Perfect, alright, so it looks like this is working
6:26
the last thing to do is just get the average and then compute the delta of whatever our value is compared to our person's average.