For absolute beginners
If you are an absolute beginner, that is someone who has not done any programming ever and who has no idea what HTML stands for. You can go through these excellent online tutorials on Codecademy, completing these will give you a quite complete introduction:
- HTML Fundamentals: https://www.codecademy.com/courses/html-one-o-one/0/1
- Programming basics: https://www.codecademy.com/courses/getting-started-v2/0/1
Chapter 1, a simple viewer
Working with jsFiddle
Creating a viewer
To use the NGL viewer in jsFiddle, we first have to add it as an external resource. To do so you need to enter this URL in the External Resources input in the left side bar:
This will load the NGL viewer so we can now include it in our code.
Next we are going to create a <div> for the viewer with id 'viewer'. You can use CSS to set the width and the height of the viewer. for example:
The final result should look somewhat like this.
You have now created a simple viewer! We will continue to explore more options to customize the viewer
Customizing the viewer
There are a large number of configuration options for this viewer. All of which can be found in the API documentation mentioned earlier. For now we will focus on changing the representation of the molecule. Let's say we want to render double bonds as two sticks instead of one. We can configure this by attaching our own representation configuration to the molecule once it is loaded. The code you need to do this is shown below.
A cool demo
I hope you have enjoyed this first chapter. If you have difficulties or questions, please feel free to place a comment or send me an email. Just for fun I have put together a small demonstration of some other settings that this viewer offers: http://jsfiddle.net/hermanbergwerf/o2e0ep4z/8/.