Embedded scripting

An embedded example is examined here. All embedded examples from the example page can also be downloaded here.

The example for an embedded html provided below loads a .gro trajectory with cartoon representation as trajectory into the embedded NGL viewer and generates a button below to play/pause the simulation. The parameters set within the component.trajectory representation are overwritten (or set back to default) by the trajectory player. We now explain some parts of the html file in detail.

The JavaScript inclusion is explained elsewhere. It has also to be specified here in order to use the MDsrv.

<script>
document.addEventListener( "DOMContentLoaded", function(){
	stage = new NGL.Stage( "viewport" );
	stage.loadFile( "/mdsrv/file/data/md.gro", { asTrajectory: true } )
	.then(function( o){
		o.addRepresentation( "cartoon", { sele: "protein" } );
		o.addTrajectory();
		o.centerView();
	} );
} );
</script>

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

A new stage 'viewport' is created and inserted into the web page. Files and simulations including their representations and settings can then be loaded into the stage. More features for the structures are explained within the basic scripting section.


document.addEventListener( "DOMContentLoaded", function(){
	var togglePlayer = document.getElementById( "playerButton" );
	var playing = false;
	togglePlayer.addEventListener( "click", function(){
		var trajComp = stage.getComponentsByName("md.gro").list[0].trajList[0];
		var player = new NGL.TrajectoryPlayer(
			trajComp.trajectory, { step: 1, timeout: 200 }
		);
		if( !playing ){
			player.play();
			playing = true;
		}else{
			player.play();
			player.pause();
			playing = false;
		}
	} );
} );

<div style="width:500px;">
	<button id="playerButton">play/pause</button>
</div>

Functional buttons as a play/pause button can also be defined. First a new event has to be created including a TrajectoryPlayer, afterwards, the function has to be defined. This is just a short example, more can be found in the advanced scripting section.

Embedded html example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MDsrv/NGL - embedded</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../mdsrv/webapp/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../mdsrv/webapp/css/main.css" />
    <link rel="subresource" href="../mdsrv/webapp/css/light.css" />
    <link rel="subresource" href="../mdsrv/webapp/css/dark.css" />
</head>
<body>
    <!-- NGL -->
    <script src="../mdsrv/webapp/js/ngl.js"></script>

    <!-- UI -->
    <script src="../mdsrv/webapp/js/lib/signals.min.js"></script>
    <script src="../mdsrv/webapp/js/lib/tether.min.js"></script>
    <script src="../mdsrv/webapp/js/lib/colorpicker.min.js"></script>
    <script src="../mdsrv/webapp/js/ui/ui.js"></script>
    <script src="../mdsrv/webapp/js/ui/ui.extra.js"></script>
    <script src="../mdsrv/webapp/js/ui/ui.ngl.js"></script>
    <script src="../mdsrv/webapp/js/ui/ui.helper.js"></script>
    <script src="../mdsrv/webapp/js/gui.js"></script>

    <script>
        NGL.cssDirectory = "../mdsrv/webapp/css/";
        NGL.documentationUrl = "http://arose.github.io/ngl/api/";
        NGL.MDsrvdocumentationUrl = "http://arose.github.io/mdsrv";

        // Datasources
        NGL.DatasourceRegistry.add(
            "file", new NGL.MdsrvDatasource( window.location.origin + "/mdsrv/" )
        );
        NGL.DatasourceRegistry.listing = NGL.DatasourceRegistry.get( "file" );
        NGL.DatasourceRegistry.trajectory = NGL.DatasourceRegistry.get( "file" );
        document.addEventListener( "DOMContentLoaded", function(){
            stage = new NGL.Stage( "viewport" );
            stage.loadFile( "/mdsrv/file/data/md.gro", { asTrajectory: true } )
            .then(function( o){
                o.addRepresentation( "cartoon", { sele: "protein" } );
                o.addTrajectory();
                o.autoView();
            } );
            var togglePlayer = document.getElementById( "playerButton" );
            var playing = false;
            togglePlayer.addEventListener( "click", function(){
                var trajComp = stage.getComponentsByName("md.gro").list[0].trajList[0];
                var player = new NGL.TrajectoryPlayer(trajComp.trajectory, {step: 1, timeout: 200});
                if( !playing ){
                    player.play();
                    playing = true;
                }else{
                    player.play();
                    player.pause();
                    playing = false;
                }
            } );
        } );
    </script>
    <div id="viewport" style="width:800px; height:800px;"></div>
    <div style="width:500px;">
        <button id="playerButton">play/pause</button>
    </div>
</body>
</html>

Embedded examples

  • Link #1: Example from home of the MDsrv documentation

More

If you have any questions, found some bugs, or want to report enhancement requests use the Issue Tracker, use the contact formular or write a mail to johanna.tiemann@gmail.com or alexander.rose@weirdbyte.de.

Please give us feedback!

top