Friday, March 7, 2014

New Suggestions for UI!



On Friday, 3/7/14, the whole class met to discuss their projects. The changes I've made here were the suggestions made by our fellow classmates.

UI's for Marketing Meeting

Here are a few different designs for the home page after getting feedback from Paul and Marketing.

Directory without the walking person icon.


These designs show different ideas for how the floor buttons would look.


This is going to work!

Its been a busy week. We have been working hard on new UI designs and finishing the final javascript for the loops and arrays. We have found that our programming theory is going to work.
The javascript below shows our final arrays. We have each floor divided into an individual array. Each array will contain sections that contain a room number or room key word paired to the x and y values on the vector map. Each floor array is then placed into the buildingArray. This is the main database that will be searched.
We also have the actual vector map placed into the app's test window. The map is in an .svg format or Scaleable Vector Graphic. This allows us to scale the image without distortion or quality loss.
Below is the code used to insert the .svg image. It is an object placed into a <div> tag. This creates a seperate box for the map to reside. 





Tuesday, March 4, 2014

Once You Know Where You Want To Go, You Just Have To Get There.

 Its an exciting time here at camp Where To?

We decided on a new name for those who have been following along on our journey of development.
This week we aim to have our static UI designs approved by the staff of FLCC's marketing department.

This will allow us to plunge into building the app in Dreamweaver and really getting the project off the ground and into a real product.

Below are the final UI designs Katie has completed based off our ideas and our peers inputs.


I (Peter) have am working today on building the arrays in Javascript that will control our search functions and the actual structure of the app.

We are very excited to begin the coding and design and hope our followers are too.


Tuesday, February 25, 2014

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.