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