(Year 3 Sem C) Week 12 Final Checking

Today, I am doing the final checking and debugging for the final presentation. Start copy the font to all of the page and make sure the page is connected all together.

For the instruction, I decided to apply GIF image and is doing by using Adobe Photoshop. Besides, I also apply the whole content to the homepage of the website.The font that I choose to use in website is Lato. I have refined the homepage of the website Below is the comparison between before refinement and after:

Before Refinement:

After Refinement:

About and Issues is combining together and form one page.

Below is the whole flow of the website: 

At last, tomorrow will be the final presentation day. Looking forward into it!:)

(Year 3 Sem C) Week 12 Working with Technical

Since the sphere cannot be clicked, I decided to apply dots by overlay behind the sphere.

Besides, I have sent an e-mail to Mervin and ask him some questions. In the email, Mervin has provided me some links to solve my problem. Today, I decided to try to test on the hide and show function.

After I apply the code the data can be shown but not the saved data. I change the page to index.html and see whether the data can be load.The page can load but the particles are overlay.

After i change the code to (message.php). the page can be shown but the data still not in the message box.The data can be received but not in the box and is being overlay.

The problem is solved when the data is connected online.But not in the white message box. 

After that, I decided to redesign the message page. 

After that, I continue working on the show message part. In this part, I have ask questions in Quora and get some reply.

Reference List:

jquery.org, j. (2017). .load() | jQuery API Documentation. [online] Api.jquery.com. Available at: http://api.jquery.com/load/ [Accessed 7 Feb. 2017].

jquery.org, j. (2017). .show() | jQuery API Documentation. [online] Api.jquery.com. Available at: http://api.jquery.com/show/ [Accessed 7 Feb. 2017].

YouTube. (2017). How change font color in PHP (HD). [online] Available at: https://www.youtube.com/watch?v=eT-Awswkkj8 [Accessed 8 Feb. 2017].

Netbeans.org. (2017). Creating a Database Driven Application With PHP. Design PHP application. Using HTML input form. PHP implementation of reading from MySQL database. [online] Available at: https://netbeans.org/kb/docs/php/wish-list-lesson2.html [Accessed 8 Feb. 2017].

output, M. (2017). MySQL PHP change text colour depending on output. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/34103844/mysql-php-change-text-colour-depending-on-output [Accessed 8 Feb. 2017].

Google Fonts. (2017). Google Fonts. [online] Available at: https://fonts.google.com/specimen/Lato?selection.family=Lato [Accessed 8 Feb. 2017].

(Year 3 Sem C) Working with technical

For this day, I decided to combine the three js page to the interaction page. I also separated to two different page which one of it is interaction and one of it is the page come into the interaction page. Before inserting the data, the particles also need to be clickable. The most important part of this assignment is to let people see the message that has written by others. Therefore, I decided to work at the important part first. So, I have applied a white box for the message which to show out the pop-up message.

From this step, I have done some research on how to insert data from MySQL database to a div object.

By this point, I also do some research on how to make the sphere object become clickable in three js.

Here is the code that I applied:

var messagebox = document.getElementById("Messagebox");

      

function onDocumentMouseClick(){

isMouseDown = true;

messagebox.material.transparent = true;

        messagebox.material.opacity = 0.5;

console.log ('Mouse Click');

}

function onDocumentMouseUp(){

isMouseDown = false;

messagebox.material.transparent = false;

        messagebox.material.opacity = 0.5;

console.log ('Mouse True');

}

This code is to apply the opacity to the box. Therefore, I decided to change to apply visible effect on the message box.

function onDocumentMouseClick(){

isMouseDown = true;

messagebox.visible = true;

console.log ('Mouse Click');

}

function onDocumentMouseUp(){

isMouseDown = false;

messagebox.visible = false;

console.log ('Mouse True');

}

But, it seems not function as well.

Reference List:

GitHub. (2017). how to make the object fade in and fade out · Issue #3650 · mrdoob/three.js. [online] Available at: https://github.com/mrdoob/three.js/issues/3650 [Accessed 5 Feb. 2017].

Jsfiddle.net. (2017). Edit fiddle - JSFiddle. [online] Available at: http://jsfiddle.net/jeanlescure/7y9ozyj6/ [Accessed 5 Feb. 2017].

Dev.vast.com. (2017). jQuery Popup Overlay. [online] Available at: http://dev.vast.com/jquery-popup-overlay/ [Accessed 5 Feb. 2017].

tag, R. (2017). Receive data from MySQL in a div tag. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/34141285/receive-data-from-mysql-in-a-div-tag [Accessed 12 Feb. 2017].

The SitePoint Forums. (2017). Inserting mySQL into a div?. [online] Available at: https://www.sitepoint.com/community/t/inserting-mysql-into-a-div/216810 [Accessed 5 Feb. 2017].

The SitePoint Forums. (2017). Using html select to insert data into MySql db?. [online] Available at: https://www.sitepoint.com/community/t/using-html-select-to-insert-data-into-mysql-db/195475 [Accessed 5 Feb. 2017].

(Year 3 Sem C) Working on Technical

Since the particles can move around by applying the code. Therefore, I decided to try to stop by using click function.

I have applied the code as below:

function onDocumentMouseClick(){
isMouseDown = true;
console.log ('Mouse Click');
}


function onDocumentMouseUp(){
isMouseDown = false;
console.log ('Mouse True');
}


After applying the code, the particles can be clicked and moved to the certain position.

Therefore. I decided to make some adjustment for the particle's position.The position of the particles is separated to three row and each row will have 14 particles. Besides, I also decided to make all the particles be rotated.

Reference Link:

Barkofthebyte.azurewebsites.net. (2017). three.js canvas - interactive - cubes. [online] Available at: http://barkofthebyte.azurewebsites.net/demos/projspikesfs.htm [Accessed 12 Feb. 2017].

Barkofthebyte.azurewebsites.net. (2017). Three.js projecting mouse clicks to a 3D scene - how to do it and how it works. [online] Available at: http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works [Accessed 3 Feb. 2017].

CodePen. (2017). Three.JS orbit controls example. [online] Available at: https://codepen.io/anon/pen/EZEOoy [Accessed 3 Feb. 2017].

clicked, t. (2017). three.js: stop automatic rotation while mouse is clicked. [online] Stackoverflow.com. Available at: http://stackoverflow.com/questions/39449582/three-js-stop-automatic-rotation-while-mouse-is-clicked [Accessed 3 Feb. 2017].