sbliven/ngltest.html

## ngltest.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
</head>
<body>

	<script src="https://rawgit.com/arose/ngl/master/js/build/ngl.embedded.min.js"></script>

	<script>

		NGL.mainScriptFilePath = "https://rawgit.com/arose/ngl/master/js/build/ngl.embedded.min.js";

		document.addEventListener( "DOMContentLoaded", function() {
			var stage = new NGL.Stage( "viewport" );
			stage.setParameters({backgroundColor:"white"} );
			stage.loadFile( "rcsb://3pqr", format="pdb").then( function (o) {
			//stage.loadFile( "http://localhost/~blivens/2hda.cif", { defaultRepresentation: true } ).then( function (o) {
			    o.addRepresentation("unitcell",{visible:true});
			    o.addRepresentation("cartoon",{assembly:"UNITCELL", color: 0xFF1111});

			    var pos = new Float32Array( [ 0, 0, 0, 20, 0, 0 ] );
			    var color = new Float32Array( [ 1, 0, 0, 1, 1, 0 ] )
                var sphereBuffer = new NGL.SphereBuffer(
                    pos,  // position (xyz)
                    color,  // color (rgb)
                    new Float32Array( [ 5,5 ] )  // radius
                );
                o.addBufferRepresentation( sphereBuffer );


                var cylinderBuffer = new NGL.CylinderBuffer(
                    new Float32Array( [ 0, 0, 0 ] ),  // from position (xyz)
                    new Float32Array( [ 20, 0, 0 ] ),  // to position (xyz)
                    new Float32Array( [ 1, 0, 0 ] ),  // from color (rgb)
                    new Float32Array( [ 1, 1, 0 ] ),  // to color (rgb)
                    new Float32Array( [ .5 ] )  // radius
                );
                o.addBufferRepresentation( cylinderBuffer );

                var textBuffer = new NGL.TextBuffer(
                    pos,
                    [ 12,8 ],
                    [ 0,0,0, 0,0,0 ],
                    [ "A","B" ],
                    {zOffset: 6}
                );
                o.addBufferRepresentation( textBuffer );
			});
		} );

	</script>

	<div id="viewport" style="width:400px; height:300px;"></div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	</head>
	<body>

	<script src="https://rawgit.com/arose/ngl/master/js/build/ngl.embedded.min.js"></script>

	<script>

	NGL.mainScriptFilePath = "https://rawgit.com/arose/ngl/master/js/build/ngl.embedded.min.js";

	document.addEventListener( "DOMContentLoaded", function() {
	var stage = new NGL.Stage( "viewport" );
	stage.setParameters({backgroundColor:"white"} );
	stage.loadFile( "rcsb://3pqr", format="pdb").then( function (o) {
	//stage.loadFile( "http://localhost/~blivens/2hda.cif", { defaultRepresentation: true } ).then( function (o) {
	o.addRepresentation("unitcell",{visible:true});
	o.addRepresentation("cartoon",{assembly:"UNITCELL", color: 0xFF1111});

	var pos = new Float32Array( [ 0, 0, 0, 20, 0, 0 ] );
	var color = new Float32Array( [ 1, 0, 0, 1, 1, 0 ] )
	var sphereBuffer = new NGL.SphereBuffer(
	pos, // position (xyz)
	color, // color (rgb)
	new Float32Array( [ 5,5 ] ) // radius
	);
	o.addBufferRepresentation( sphereBuffer );


	var cylinderBuffer = new NGL.CylinderBuffer(
	new Float32Array( [ 0, 0, 0 ] ), // from position (xyz)
	new Float32Array( [ 20, 0, 0 ] ), // to position (xyz)
	new Float32Array( [ 1, 0, 0 ] ), // from color (rgb)
	new Float32Array( [ 1, 1, 0 ] ), // to color (rgb)
	new Float32Array( [ .5 ] ) // radius
	);
	o.addBufferRepresentation( cylinderBuffer );

	var textBuffer = new NGL.TextBuffer(
	pos,
	[ 12,8 ],
	[ 0,0,0, 0,0,0 ],
	[ "A","B" ],
	{zOffset: 6}
	);
	o.addBufferRepresentation( textBuffer );
	});
	} );

	</script>

	<div id="viewport" style="width:400px; height:300px;"></div>

	</body>
	</html>