Editing User:Inderpreet/OGV Proposal

From BRL-CAD

Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 9: Line 9:
  
 
===Background Information===
 
===Background Information===
I study in 4th year B.Tech (Computer Science and Engineering) at Guru Nanak Dev Engineering College, Ludhiana (India). I was introduced to this community about a year ago and have tried to help with whatever I could. I can write in C++, PHP, Python, Javascript.
+
I study in 4th year B.Tech (Computer Science and Engineering) at Guru Nanak Dev Engineering College, Ludhiana (India). I was introduced to this community about a year ago and have tried to help with whatever I could. I can speak in C++, PHP, Python, Javascript.
  
 
==Project Information==
 
==Project Information==
 
===Project Vision===
 
When we built our initial HTML web pages in 90s we din't have an <img> tag. Just a few years back Video was a foreign element added via third party plugins. Today images,videos and audio all have become first class citizens of the web. HTML 5 has introduced many new members to the family. Canvas, WebGL and SVG being few of them. These technologies allow us to manipulate and access 2d and 3d graphics right in the browser. Today we have incredible power in our hands when it comes to handling graphics on web. Even with technologies like WebGL, 3D graphics have not yet become a part of our daily web experience. I believe in OGV as one of those platforms that will make sharing 3D models on the web as normal as sharing videos on youtube or images on flickr.
 
  
 
===Brief Summary===
 
===Brief Summary===
Online Geometry Viewer started as a GSoC 2013 project by Harmanpreet Singh. It's an online 3D geometry viewer that works on WebGL using three.js. It uses vanilla PHP on server side whereas jQuery and Bootstrap on the front-end. To give it a robust foundation, the community discussed about changing it's backend to something more powerful. I took an active part in that discussion and the community ended up with choosing node.js as a replacement for the current PHP based backend. After looking at various frameworks I decided to go for [https://www.meteor.com/ meteor]. Reason for this choice is that meteor has a comparatively larger community which means more support, bugs are removed quickly and more code to learn from. So first step would be porting the current app to node js after that we can improve on previous features and add new features. I have prepared a list of improvements and features that I will add to OGV this summer.  
+
Online Geometry Viewer started as a GSoC 2013 project by Harmanpreet Singh. It's an online 3D geometry viewer that works on WebGL using three.js. For the server side purposes currently it uses vanilla PHP and jQuery, Bootstrap on the front-end. To give it a robust foundation, the community discussed about changing it's backend to something more powerful. I was part of that discussion and I gave my views. We all agreed on node.js to be a replacement for the current PHP based backend. We also agreed to use a Full Stack node.js framework such as derby or meteor. After looking at various frameworks I have decided to go for [https://www.meteor.com/ meteor]. Reason for this choice is that meteor has a comparatively larger community which means more support, bugs removed quickly and more code to learn from. Then there's a list of things that need to be improved in current OGV and a list of features that need to be added.
  
 
'''Things that I will Improve on: -'''
 
'''Things that I will Improve on: -'''
Line 30: Line 27:
 
* Sharing & Embedding Feature
 
* Sharing & Embedding Feature
 
* Image alternatives for 3D Models (Requested by Mediawiki)
 
* Image alternatives for 3D Models (Requested by Mediawiki)
* More Geometry conversions.
+
* More Geometry Conversions.
  
 
==Detailed Project Description==
 
==Detailed Project Description==
Line 39: Line 36:
  
 
===Porting OGV to node.js===
 
===Porting OGV to node.js===
We have made a choice to move to node.js. Then there's a choice to be made among various kinds of frameworks, and then various frameworks in each kind. We decided to go with Full Stack frameworks like derby or meteor. I decided to choose meteor over others because it has a larger community i.e used and tested by more people as compared to others like derbyjs.
+
Online Geometry Viewer is currently written in plain PHP, and in discussions we all have agreed that we need to change that into something robust. Various suggestions were made and the Idea about using node.js survived. Then there was a choice to be made among various kinds of frameworks, and then various frameworks in each kind. We decided to go with Full Stack frameworks like derby or meteor. I decided to choose meteor over others because it has a larger community i.e used and tested by more people as compared to others like derbyjs.
  
So My first task would be to replace each module of OGV to meteor. I have written about the details for each module in the sections below. Third party libraries in meteor can be added by writing packages for them. So one of the important tasks will be to either write a package or use existing package of three.js
+
So My first task would be to replace each module of OGV to meteor. I have written about the alternates for each module in the sections below.
  
 
===Improvements in OGV===
 
===Improvements in OGV===
Line 65: Line 62:
 
* [http://docs.meteor.com/#accounts_api Accounts API] for handling accounts.
 
* [http://docs.meteor.com/#accounts_api Accounts API] for handling accounts.
 
* [http://en.wikipedia.org/wiki/Secure_Remote_Password_protocol Secure Remote Password Control] Support.  
 
* [http://en.wikipedia.org/wiki/Secure_Remote_Password_protocol Secure Remote Password Control] Support.  
* [http://docs.meteor.com/#meteor_loginwithexternalservice oAuth] for '''logging in with various services such as facebook, twitter etc'''.
+
* [http://docs.meteor.com/#meteor_loginwithexternalservice oAuth] for logging in with various services such as facebook, twitter etc.
 
* The Accounts UI provided by meteor for user interface
 
* The Accounts UI provided by meteor for user interface
 
And this all comes as one package with meteor.
 
And this all comes as one package with meteor.
Line 73: Line 70:
  
 
====User Experience and User Interface====
 
====User Experience and User Interface====
I am passionate about creating good interfaces. More than eye-candiness I care for the experience that user gets. To make things easy for the user. Then the second part of User Interface design is about prompting users to take actions. To make sign up buttons that no one can ignore but click. I will use bootstrap as underlying framework which I will edit to customize it specifically for OGV.  
+
I am passionate about creating good interfaces. More than eye-candiness I care for the experience that user gets. To make things easy for the user. Then the second part of User Interface design is about prompting users to take actions. To make sign up buttons that no one can ignore but click. I will use bootstrap as underlying framework which I will edit to customize it specifically for OGV. I will be soon uploading pictures of mockups under this heading so stay tuned.  
*I tend to make a very clean and minimal Interface, where the whole focus is on the content. I have chosen flat icons, and a '''mobile-first''' interface.
 
[[File:Ogv_viewer.png]]
 
*The front page will provide users an option to Sign In/ Sign Up and also showcase the ability of OGV. The text abive Form is an embedded model from OGV. We can use any 3D model here. It showcase what OGV can do, not just by writing but doing it. It gives user a chance to play with a model, even before he signs up. I believe that will lead to more people signing up.
 
[[File:OGV_Sign_in.png]]
 
* When we hover on the above model, it will highlight the various options that user can perform without even logging in. Comments cannot be added but read without signing in.
 
[[File:Ogv_sign_in_hovered.png]]
 
* Sign up page is same as that of sign in page.
 
[[File:Ogv_sign_up_hovered.png]]
 
* This is how upload page may look, using dropzonejs a drag and drop interface for uploading files can be created.
 
[[File:Ogv_uploader.png]]
 
* I will use [http://lab.hakim.se/ladda/ Hakim.se's] in-button progress bar for uploading. The button itself turns into a progress bar showing percentage of file uploaded.
 
[[File:Ogv_uploading_btn.png]]
 
* File manager shows all the files that the user has uploaded at one place. Clicking on these files take the user to full screen viewer.
 
[[File:Ogv_file_manager.png]]
 
  
These are just the early rough mockups and not the exact design so it's not pixel perfect. I try to make pixel perfect designs using grids and various design prinicples. I have also not made a mock-up for each and every page as that would require more thought to be put into and more feedback from community. I have a good knowledge about
+
// more awesome content coming ...
* Color Theory
 
* Typography
 
* Emotions in Design
 
* Transitional Design
 
* Responsive Design
 
 
 
OGV's design will follow all these principles + look great.
 
  
 
===New Features to be added===
 
===New Features to be added===
Line 138: Line 114:
  
 
* '''WEEK 2 (26th May)'''
 
* '''WEEK 2 (26th May)'''
Port File Uploading to Nodejs (meteor)  
+
Port File Uploading to Nodejs (meteor) both
  
 
* '''WEEK 3 (2nd June)'''
 
* '''WEEK 3 (2nd June)'''
Line 179: Line 155:
  
 
==My Preparation==
 
==My Preparation==
* I have been collecting user requirements for long. I also approached mediawiki community to ask their views.
 
* I have read and understood the code of current OGV. I have also pointed out some bugs and limitations. (In this proposal itself)
 
* I have submitted few small patches to the repository and will submit more to show that I have read and understood the code.
 
* I have explored the framework of my choice, figured out what modules of meteor I'll need and use. (shared them above)
 
* I also try to communicate as much as possible in the community on mailing lists and IRC.
 
  
 
==Why BRL-CAD?==
 
==Why BRL-CAD?==
I have been in this community for a year. I have always been encouraged here to share Ideas without hesitation and other community members have helped me even If I ask or do something stupid. I love the openness one gets in this community and I have lots of friends here.
+
 
 +
==Why this project?==
  
 
==Why Me?==
 
==Why Me?==
* I am open to Ideas, I don't stick with tools but tasks.
 
* I have read and understood the OGV code and given patches and bringing more of them.
 
* I have tried communicating as much as I can in mailing lists and IRC.
 
* I have and will try to help others as much as I could.
 
* I have planned to work on OGV even after GSoC.
 
  
 
==References==
 
==References==
*[http://nodeframework.com/ nodejs frameworks]
 
*[http://docs.meteor.com/ meteor.com]
 
*[https://www.meteor.com/blog/2013/11/21/meteor-devshop-9-tech-talks-production-ready-meteor-apps-understanding-the-event-loop-async-and-fibers Production Ready Meteor Apps]
 

Please note that all contributions to BRL-CAD may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see BRL-CAD:Copyrights for details). Do not submit copyrighted work without permission!

To edit this page, please answer the question that appears below (more info):

Cancel Editing help (opens in new window)