multifiles.html

<div id="viewport" style="width:100%; height:100%;"></div>
<script src="https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.31/dist/ngl.js"></script>
<script>
// Handle window resizing
window.addEventListener( "resize", function( event ){
    stage.handleResize();
}, false );

// Create NGL Stage object
var stage = new NGL.Stage( "viewport" );
var surfaceRepr

stage.loadFile("rcsb://1ycr").then(function (e){
    struct1 = e
    e.addRepresentation("cartoon", {name: "struct1", visible: struct1Checkbox.checked}),
    stage.autoView(1000)})
stage.loadFile("rcsb://1t4e").then(function (e){
    struct2 = e
    e.addRepresentation("cartoon", {name: "struct2", visible: struct1Checkbox.checked}),
    stage.autoView(1000)})

function createElement (name, properties, style) {
  var el = document.createElement(name)
  Object.assign(el, properties)
  Object.assign(el.style, style)
  return el
}

function addElement (el) {
  Object.assign(el.style, {
    position: "absolute",
    zIndex: 10
  })
  stage.viewer.container.appendChild(el)
}

var struct1Checkbox = createElement("input",
    {type: "checkbox", checked: true, onchange: function (e) {
        if (console.log) console.log(e.target.checked);
        stage.getRepresentationsByName("struct1").setVisibility(e.target.checked)
        surfaceRepr = struct1.addRepresentation('surface', {sele: 'none'});
    }}, { top: "60px", left: "12px" })
addElement(struct1Checkbox)
addElement(createElement("span",
                         {innerText: "Structure 1"},
                         {top: "60px", left: "32px", color: "white"}))

var struct2Checkbox = createElement("input",
    {type: "checkbox", checked: true, onchange: function (e) {
        if (console.log) console.log(e.target.checked);
        stage.getRepresentationsByName("struct2").setVisibility(e.target.checked)
        surfaceRepr = struct2.addRepresentation('surface', {sele: 'none'});
    }}, { top: "80px", left: "12px" })
addElement(struct2Checkbox)
addElement(createElement("span",
                         {innerText: "Structure 2"},
                         {top: "80px", left: "32px", color: "white"}))

var surfaceCheckbox = createElement("input",
    {type: "checkbox", checked: false, onchange: function (e) {
        if (console.log) console.log(e.target.checked);
        if (e.target.checked){
            surfaceRepr.setSelection('all')
        }
        else {
            surfaceRepr.setSelection('none')
        }
    }}, { top: "120px", left: "12px" })
addElement(surfaceCheckbox)
addElement(createElement("span",
                         {innerText: "Surface"},
                         {top: "120px", left: "32px", color: "white"}))

</script>