sbliven · May 30, 2016 16:03
diff --git a/ngltest.html b/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>