Week9 display orb functions

In this week，we start working on the display aspect. The original idea is display orbs on the home page by using different color based on the emotion, also when user point to the orb, then will display preview image on the orb.

For display orbs function, there are two steps. Firstly, we have to use PHP to get the data from database, the function includes connect database and get the data by using SQL.

 

database connection & SQL

Secondly, we use JavaScript to display these orbs on the homepage, and we want place orbs into shelves randomly. So we designed a process method for this function. We create a random number generator, then store each orb into an array (taken_orbs[ ]) with a unique random number ID. Because we initially display every orb within each shelve, then we want to display the same number of orbs with database, so we create another array include all orbs ID（orbs_to_hide[ ]）, match random number ID and orbs ID, hide the orb which not include in the first array (taken_orbs[ ]). In order to hide the orbs, we using jQuery to manipulate orb CSS opacity to 0.          

store orb data into array & assign unique random number to each orb

Create orbs_to_hide array & compare two arrays

hide the orbs

The next step is display orbs with different emotion by using different color, so we get each orb emotion (stored in database when create a new orb), then we use JavaScript function to compare the emotion, If the stored emotion is same with the function emotion, then use jQuery to change the CSS color.  

compare emotions

In order to display preview image when user point to the orb, we use jQuery to detect user action and then add image URL to the orb.   

 

display image when "hover"

Moreover, we discussed about the search function and login function, the result is that we don’t need these functions, because we can create a “my orb” page to display several recent created orbs, and make the latest created orb to be a special orb, then user can know which one is his orb.

  

we also want to make the latest created orb display in different way, so we use another PHP to access database and use SQL language to get the maximum orb id (which is the latest orb ID), then use JavaScript and jQuery to display that orb in special way. 

display latest orb in different way