"

From 2013.igem.org

Graphical user interface and Django-registration

This week we started trying to get the basics necessary for a decent user experience up and running. The pages for the Pfam input and the selection of NRP monomers were created. For this we used [http://jqueryui.com/ jQuery UI] and we very especially fond of its tabs. After playing around with some html and css, we soonly decided to integrate [http://getbootstrap.com/2.3.2/ bootstrap 2]for styling our interface. As our Django models and forms would deal a lot with many-to-many relationships and as the default multichoice html box is extremely user-unfriendly, we searched for JS libraries capable of improving this experience. We initially decided to use [http://harvesthq.github.io/chosen/ chosen.js], but then we quickly switched to [http://ivaynberg.github.io/select2/ select2], which provides many more functionalities.

Also in order to enable the smooth handling of user registration, login etc., the django-registration was roughly integrated to the rest of the software.

Use of OpenBable for structure display

OpenBable was included in the tool in order to display the currently designed NRP. The peptide bonds are formed automatically based on the SDF representations saved for each substrate in the database. One of the challenges faced was the correct conformation and the aesthetic display of the peptide chain.