Web-application (webapp)

In order to deploy the MDsrv, an html file has to be generated. We generated a working sample mdsrv.html file and will explain parts of it here. The complete file is also presented below.

JavaScript inclusion

<!-- NGL -->
    <script src="../mdsrv/webapp/js/ngl.js"></script>
<!-- UI -->
    <script src="../mdsrv/webapp/js/lib/signals.min.js"></script>
    ...

The NGL and MDsrv scripts have to be made available by including them within the <script></script> tag. The source of the files depends on the deployment directory, which corresponds to the folder, where the mdsrv.wsgi is located, normally in /var/www/mdsrv.

MDsrv/ngl definitions

// 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" );

DatasourceRegistry defines the source of the data files (structures and trajectories), which is defined within the app.cfg. The source of the configuration file is defined within the /var/www/mdsrv/mdsrv.wsgi. The naming (here 'file') is used furthermore within the .js/.ngl scripts and the URL for loading files (e.g http://localhost:8000/index.html?load=file://MDsrv/script.ngl). 


var load = NGL.getQuery( "load" );
if( load ) stage.loadFile( load, { defaultRepresentation: true } );
var struc = NGL.getQuery( "struc" );
var traj = NGL.getQuery( "traj" );
if( struc ){
	var params = { defaultRepresentation: true };
	stage.loadFile( struc, params ).then( function( o ){
		if( traj ) o.addTrajectory( traj );
	} );
}

Additionally, other flags as loading, structure and trajectory with a similar usage as for 'file' can be defined and renamed (e.g http://localhost:8000/webapp/?struc=file://cwd/md.gro&traj=file://cwd/md.gro). Please do not change the naming struc and traj, as this is needed for the MDsrv command line usage.

Default example html file

<!DOCTYPE html>
<html lang="en">
<head>
    <title>NGL/MDsrv</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();
            NGL.StageWidget( stage );

            var load = NGL.getQuery( "load" );
            if( load ) stage.loadFile( load, { defaultRepresentation: true } );

            var struc = NGL.getQuery( "struc" );
            var traj = NGL.getQuery( "traj" );
            if( struc ){
                var params = { defaultRepresentation: true };
                stage.loadFile( struc, params ).then( function( o ){
                    if( traj ) o.addTrajectory( traj );
                } );
            }
        } );
    </script>
</body>
</html>

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