Second UI Mock Up

UI Mockups

One small step for man, one large step for man kind!

Today was a big day in the progress of building our app! After more programming and discovering the world of Javascript we have made the basic prototype of our location feature on the app. We added a few functions to move small squares the the coordinates of our array.

The image below shows the new CSS and some of the new Javascript we added to the page. The CSS controls the formatting of both the map.png and the markers for position. Those have been given the ID's #marker and #destmarker.

The image below shows the new script function to control the movement of the markers. 

 The first function places the marker for where your starting point is. The second function places the destination marker where you have asked it to go. These functions search the array for the place and coordinates you have asked to find, then the marker is placed on the coordinates of the room. 

The image below shows our test map as seen before. Except we have added a second text field.
This text field is to type the room number where you would like to go. You may also notice the small  orange square in the top left corner. This is our destination marker.

In the image below you can see that we have typed room numbers in the text fields. These rooms have been written inside our array and when searched for will be found and plotted on the map.

After pressing the find button you can see that the destination square has moved and you see a pink square. This is the room you are located near or in. We started in the square with the coordinates for A228 and the destination square went to the room with the bookstore coordinates.

This has been a huge breakthrough in developing our map and we are going to continue this route. Next it is on to some UI and UX design.

Javascript Is fun

Today we learned some valuable information Javascript. We have decided to totally move away from google maps and we are going to make our own map. By using arrays we can create our own search bar for finding our way around.

The image above is the Java we programmed using some imaginary coordinates and room numbers we have made a basic search for rooms.

The image above is a map we are making to test our search and the use of Arrays. Each squares center has coordinates in pixels on the entire .png image. What we are going to do is use those points to move out position and search classrooms. 

Google Maps Is a NO.

Throughout the week we have been working on how we are going to map out FLCC. We have been looking into using Google Maps. We tested embedding a Google map on a basic html Page.

After much frustration and thought Google Maps is out.

Right now we are looking into using an API called indoor Atlas more will be discussed later after we test it.

Now on to the GOOD news.

Peter met with Sarah Butler, the graphic designer for FLCC. They talked about the branding of our app and how it needs to look to be an official FLCC product.

The guidelines are very basic and should be easy to follow. It is a huge help to have this guide early on so we can plan our designs.

This is the color information for the FLCC colors used on the website and for printing.

Day 1 - Meeting

Today Katie, Paul and Peter had a meeting with the marketing and community affairs groups for the app. The Meeting went well and the Administrators are excited for us to begin working.

Katie and I have started looking into the possibility of building our map with Google Maps Map maker or Map Engine. We are still researching this and are trying to find what will work best.