This year brought a good fortune for me as I got selected in Google Summer of Code 2015. I have been designated to work on a web application, Online Geometry Viewer on the front-end part. OGV is where users can upload, view and share 3D models and even can like (love) or comment on them.  It can be looked at as a social blogging platform for 3D models. Now, It has been 6 six weeks the coding period has started. Meteor had been chosen a framework for this purpose. I have worked according to my milestones listed below :

  • Landing Page
  • Feedback form
  • Error Messages
  • g to obj Conversion Failed Message
  • Design a 404 Page
  • Zoom Limit
  • Switch to Different View
  • Responsiveness
  • Setting Camera Perspective
  • Loader Indicator ( Pending as there is some problem in it)

The details of each milestone have been discussed below.

Landing Page:
In the first week of the coding period I started up with the landing page. Landing page, sometimes known as a “lead capture page” or a “lander”, is the most necessary page in any kind of online marketing. It conveys the information about what the OGV is. It has been well designed, dictating all the information to the user. It is comprised of the four slides. The most important thing is that all the pages are user friendly and simplicity is at its best accommodating all the necessary information.

The header of the landing page incorporates the links to upload, settings, or to view models and is fully responsive.

The 1st slide concludes what the OGV is and contains the Sign-Up/Login button. When the user logs in, the Sign-Up button changes to View Models button and will take the user to Models Page. Various CSS effects have been used to give awesome looks.

The second slide holds the information about the best features the OGV. The page has been designed beautifully with the interactive icons representing the functions of OGV. Earlier the freely licensed icons were chosen. But now all the icons are designed and are handmade. This designing of icons has been done in Inkscape and GIMP.

The third slides informs the user that Online Geometry Viewer is a freely licensed software. It is simply a text, formatted beautifully.

And the last slide has a feedback form to get the response/feedback of the user. It holds the email-id field, that is email validated, the reason field which is a drop-down  allowing the user to choose the subject on which he wants to give the feedback. The last text area gets the message of the user. All the fields are the required fields. After filling all the fields the user will be allowed to send the message. After sending the message the admin will receive a confirmation message and will be able to view the response. As it is to be made production ready and if faults occurs, this feedback from the user can help us to make OGV perfect. formspree.io package has been used. This is chosen as it doesn’t require any back-end coding for the submission of the form. It is easy to use and lightwight package. It allows maximum limit of 1000 users to send the feedback per month.

Footer have the content similar  to that of BRL-CAD’s website.

Earlier the BRL-CAD website page was compact and had 2px padding from both left and right. When the screen was minimized whole of the matter abruptly shifted to center. Now the different views have been set for mobiles, LCDs. Also the images used have been compressed in such a manner that they do not suffer any loss in quality. Also, the colors used corresponds to the BRL-CAD website colors.

 

landingPage

 

Feedback Form :
The feedback form takes the response from the user. This response may help us to improve our product in many ways. Feedback form is embedded in the landing page only.  

Error Message :
Error messages/Notification make the users realize that what actually is going in the application. At various places no error message or notification was shown to the user. At the following places, there existed some problems. This has been done by using the package sAlert which has different ways of representing the different messages like error message, success messages and error messages.

Problems

  • Whenever the forms were submitted, the notification with no message popped up. If the submit button is pressed again, again there will be notification below the first notification. This even disrupted the alignment of the page, shifting all the things downwards.
  • Notification were also not auto-hidden. User has to cross them to close the notifications.
  • There was a problem in Throwing Error as Error.reason doesn’t gave the reason for throwing the error.
  • At some place there were no calls to methods for throwing errors.

Improvements
To overcome all the mentioned problems sAlert package has been used. sAlert can be configured on the client. t is called sAlert.collection. Every sAlert method returns the ID of the alert it has just created. The defaults are below:

sAlert.config({
effect: '',
position: 'top-right',
timeout: 5000,
html: false,
onRouteClose: true,
stack: true,
offset: 0
});

It is very handy package and does not requiring any hard-coding for adding the auto-hiding, timeout, colors for success, warning or error notifications.

Notifications

 

g to obj conversion failed message :
To view the model one needs to upload the .g file. This file is converted into .obj. It is required to confirm if the file has been correctly converted or not. If it is, success message is shown and if not error message is shown. Earlier all the things were shown in the console, none was viewed by the user and if even the conversion failed it would shift to the next page. This has been too improved by confirming if the the file has been converted or not as below.

error

 

Design a 404 page :
Perhaps having a good Error 404 page is as important as having great content. Sometimes by fault visitors land on error pages, but being able to communicate and direct them back to the home page is as good as a second chance to re-engage a visitor. So, designing that page is also must. This page is designed using CSS effects and animation. The page contains link a with the message to direct the user to the home page.

404Page

Setting Camera Position :
Earlier when the user viewed the model the camera perspective was not set properly. The model seemed to be too large or too small such that it can’t be viewed perfectly and the user had to either zoom in/out a little to view the model correctly. Three.js have been used to set the camera position. The focus of the camera is now limited to such a value that one can properly view the model without having the need to zoom in/out.

Modelsmodel1

 

 

 

 

Zoom Limit :
Previously, OGV zoomed in/out the model from zero to infinity. No limits were set. It zoomed to infinity or zero limit. Now the limits have been set. Three.js use the Orbit controls for zooming, panning etc. Using them the limits have been set. Zoom in is set to 20, Zoom out is set to 10000.

ModelZoomOut

ModelZoonIn

 

 

 

 

Switching to different views :
It is the requirement of every user to see the models from different angles. Switching from the top, bottom, front, rear views have enabled using Three.js. The key input events have been used to do so. Pressing the keys F, T, B, R will show the front, top, bottom, rear views respectively. To make it user  friendly, CSS has been used with the hover effects to convey how to switch to different views.

FrontFaceTopView

 

 

 

 

Responsiveness :
All the pages are fully responsive. In addition, bootstrap has been used to make it responsive.

Loader Indicator (Due to backend problem. Pending…)
This is still in progress. As per the discussions there some glitch in the cfs package. If it is not overcomed some other good alternative will be taken in action.

Future Plans :

  • Loader Indicator: If no solution to cfs package is found, some good alternative will be chosen to implement it.
  • Setting default model image: Till now user have to upload some image for the model. Default image would be set such that if user does not upload any, default would be used.
  • Extending Validation Compatibility: Feedback form validations are compatible with mozilla, chrome,  IE. They will be extended to support other browers such as safari, opera.
  • UI / UX for back-end work.
  • Upload models without user sign in / up.
  • Production ready.
Advertisements