UI: Image/Thing Synchronization

Loading...

From the course by Johns Hopkins University

Capstone: Photo Tourist Web Application

17 ratings

Johns Hopkins University

Capstone: Photo Tourist Web Application

17 ratings

Course 6 of 6 in the Specialization Ruby on Rails Web Development

In this Capstone project for the Photo Tourist you will implement a Ruby on Rails web application that makes use of both a relational and NoSQL database for the backend and expose the data through services to the Internet using Web services and a responsive user interface operating in a browser from a desktop and mobile device. You will have a chance to revisit and apply what you have learned in our previous courses to build and deploy a fully functional web application to the cloud accessible to your co-workers, future employers, friends, and family. In developing the Photo Tourist web application, you will get to work with different data types and data access scenarios (e.g., fielded data display and update, image upload/download, text search, access controlled information) to provide your users the ability to show off their photos and information from trips they have taken and to seek out photos and information from trips taken by others. Using the application you develop, your users will be able to • Create an account • Upload and download photos to the site and make them accessible to others • Provide descriptions of trips and photos that others can read • Organize photos by location and trip, • Find photos based on location • Find photos based on text searches of descriptions • Locate the place where the photo was taken on a map

From the lesson

UI Layout and Subjects Page

In this module you will add generic UI framework and Subject-specific components to implement a Subjects page that will show the user different views of Subjects (Things and Images) matching query criteria as well as the ability to express and depict the currently selected Subject. As part of the UI framework you will implement a set of parent/child components to manage areas of the page and tabs within areas. You will make heavy use of transcludes to implement this visual layering and to encapsulate the details away from the Subject-based components. You will implement dynamic styling to shrink and expand areas as directed by the user. As part of interacting with Subjects you will implement a Subjects page; divide the page up into sides, areas, and tabs; insert a set of Subject/view-specific components (e.g., lists, images, and details); integrate these components with a new Current Subjects service that will enable each of the components to maintain a consistent view of the user's query results and currently selected Subject. At the end of this module you will have implemented a complete UI framework -- ready to implement the visual display of Subjects using maps in the next module.

UI: Images List View (Part 1)11:18

UI: Images List View (Part 2)9:55

UI: Things List View6:09

UI: Image/Thing Synchronization9:03

UI: Current Image View, Part 1: Image Display7:52

UI: Current Image View, Part 2: Image Synchronization6:47

UI: Current Thing Information View11:53

UI: Error Fix and Subject Caching14:21

Meet the Instructors

Jim Stafford
Adjunct Professor, Graduate Computer Science
Computer Science, Whiting School of Engineering

[MUSIC]

In this lecture we will discuss synchronizing our display of the current

Image for the current thing.

As well as the current thing for the current Image.

With some enhanced synchronization with the current subject service.

So now that we are at a point where we're successfully displaying our current

image's component and current things component, as well as coordinating who is

the current image and who is the current things within instances of the component.

Now what we would like to do is get some synchronization

between the image and the thing.

Using our current subject service.

What we want is that, when we click on a new thing,

we want its primary image to be the current image.

And then when we click on an image, we want the thing that that is an image of,

to be selected.

And it it's an orphan image, then we want the current thing to be blank.

Okay?

So like most things, what we have to do conceptually is fairly straight forward,

there just may be some complexities about it.

So let's go into the current subject service.

And we're going to add two additional methods.

SetCurrentThingForCurrentImage, and setCurrentImageForCurrentThing.

And so, the purpose of these two functions is that,

based on what the current image is what should be the current thing.

And then the opposite,

based on what the current thing is, what should be the current image.

So clearly, one is going to be called versus the other,

depending on which index we're changing.

So when we're changing current image, conceptually,

we want to call set the current thing for the current image.

We just changed the current image.

And then, if we're setting the current thing.

You got it.

Conceptually, we want to set the CurrentImage for the CurrentThing.

However, we're not always going to want to do that,

because we'd end up in an endless loop.

If we change the image, we change the thing, we change the thing let's change

the image, so let's add a concept of skipping the thing update.

If the color of this method is wise enough to know

there's such a thing as skipping a thing, they have the option of passing in a true.

But what we don't know about this concept,

we will evaluate not true and we will do the update.

So essentially when we call from the components the way we've been doing

the skip thing will evaluate to a non true value and

we will end up updating the current image.

And the same thing for set current thing.

We want to provide the option to skip updating the image if they supply

skip image.

We want certain callers of this method to be knowledgeable of this interdependency

and be able to turn off update of the other side.

And the methods that are knowledgeable about this interdependency,

is this setCurrentThingForCurrentImage and setCurrentImageForCurrentThing.

All right let me walk you through with us if I'm going to set the current thing for

the current image the first thing I need is the current image and if my

current image doesn't have a thing then our current thing index should be null.

Otherwise if thing ID is not null then we get work to do well maybe.

Let's go find out what current thing is because if we are already pointing at

the current thing then we have nothing to do.

However if we're not pointing at a current thing, or the current things ID is not

the ID of what the image is referencing we obviously do have work to do.

We have to find that current thing.

Well before we find it, let's null out the index.

So no one thinks that the previous current thing is still the current thing.

Let's null that out as soon as possible and

let's use just a simple loop to loop through the list of things to peek at each

one of the things to see if it's the thing we're looking for.

And if it is the thing we're looking for, then let's call setCurrentThing,

the same method that our components are calling, providing an index.

Except we pass in this extra true, which says, to skip updating the current index

for the image, because that's the reason this method was called to begin with.

Then of course when we have completed that,

there's nothing more to do so let's get out.

So if we hit refresh, let me display my things and

display my images and there's one small problem, let's make sure we address that.

That by default these are mis matching,

if I click on Boded Harbor place, water taxi is associated with that.

If I click on blue blubber jellies, then it's the national aquarium.

If I click on the front entrance of The Hyatt then it's the Hyatt.

Then if I click on these orphan images like Bromo Tower nothing is displayed.

Or the World Trade Center, nothing should be displayed,

although it was when we first started.

So National Aquarium, and then this aquarium image is an orphan image, okay.

So it's working in one direction but it's not working yet

in the other direction because we haven't implemented that second method.

Okay, although these two methods have similar goals,

an image doesn't always have a thing.

But a thing always has an image.

So they're going to look a little different.

So if I just finished updating the index for a thing, so there should be a current

image, and there should be a current thing that could be all we're looking for.

And there would be nothing to do.

So if there was a current thing, but

it's thing_id wasn't what the image id was looking at, and it wasn't priority zero.

It wasn't the primary image.

Then we have work to do.

Otherwise, we're done.

So like before, if we have work to do, what we need to do is look through

our images collection, and let's inspect each image.

And see if that image is a image for that particular thing, and

has a priority 0 associated with that thing.

If that is true, then we have found our image, and we can call SetCurrentImage,

providing the index and tell it to skip updating the thing.

Because this method was called because the thing was just modified.

Otherwise, we'd be in an endless loop.

And then once we've done that, we're done.

Let's get out.

All right, so let's hit refresh.

We still have that problem where our current thing and our current image aren't

in synch at the very beginning we'll fix that in a moment, but as we click down you

notice that as we click on things it's going to make its priority image current.

We're not yet scrolling the list that's a possible enhancement, but

we are making it the current image, just going to rent a tour

coming back the other way be in a rail road museum okay,

Holiday Inn be in a rail road orphan image nothing get selected over here, okay.

Okay in order to get our image ID in our thing ID and

sink on our initial pool we really need access to this promise.

That comes back for both.

We need to wait for

them both to complete before we do any kind of synchronization between the two.

So we need to refactor this a little bit.

Let's go ahead and remember the result.

And then go ahead and wait on the promise within the method.

And return the promise.

Same things for things.

And they're both going to return their promise.

Now we need access to the $q service to be able to wait on both of the promises.

Let me inject that after rootScope.

And let's go ahead and remember the two promises coming back.

Then we can use the $q service to wait for both promises to complete,

passing in an array.

And then when you do complete successfully then we can set the current image for

the current thing.

Then one of the things I noticed is that when we're setting the current image for

the current thing, we don't always have an image, we don't always have a thing.

We're taking care of the fact that we may not have a thing, but

we weren't taking care of the fact that we may not have an image.

And so I want to come in to this block if I don't have an image or

the image I have is not the right priority.

So if I hit refresh, click on my images, you notice they match up the Baltimore

water taxi and the boat at harbor place are the current thing and image.

Awesome.

You'll also notice that in addition to our components passing.

A synchronization between the two components are passing.

Ready to move on to our other views.

In summary we enhance the current subject service to calculate a new current image

or a change of thing as well as a new current thing for

a change of image and that helped us synchronize

the Current Things component with the Current Images component.

So now, our components on the subjects page

are conveying a consistent perspective to the user.

What's next?

Image View.

Let's dust off our image viewer component and integrate that into our subjects page.

That'll give us a nice, big picture of all the images of things nearby,

especially in that map area.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play