GLmol

Hi,

Sorry, there is no user interface for it, but you can do it easily by simple coding
if you are going to embed GLmol in your Web page.

Now I have embedded the pdb structure in my web page using this code:
But this structure is coming outside canvas instead within canvas....Is there any problem in my code?

Please let me know!!

Glmol
<div id="glmol01" style="width: 500px; height: 400px; background-color: black;"><canvas width="500" height="400" style="width: 100%; height: 100%;"></canvas></div> <textarea id="glmol01_src" style="display: none;"></textarea>

<script src="{{=URL('static','js/jquery-1.7.min.js')}}"></script>
<script src="{{=URL('static','js/Three49custom.js')}}"></script>
<script src="{{=URL('static','js/GLmol.js')}}"></script>

<script type="text/javascript">
var glmol01 = new GLmol('glmol01', true);
glmol01.defineRepresentation = function() {
var all = this.getAllAtoms();
var hetatm = this.removeSolvents(this.getHetatms(all));
this.colorByAtom(all, {});
this.colorByChain(all);
var asu = new THREE.Object3D();

this.drawBondsAsStick(asu, hetatm, this.cylinderRadius, this.cylinderRadius);
this.drawBondsAsStick(asu, this.getResiduesById(this.getSidechains(this.getChain(all, ['A'])), [58, 87]), this.cylinderRadius, this.cylinderRadius);
this.drawBondsAsStick(asu, this.getResiduesById(this.getSidechains(this.getChain(all, ['B'])), [63, 92]), this.cylinderRadius, this.cylinderRadius);
this.drawCartoon(asu, all, this.curveWidth, this.thickness);

this.drawSymmetryMates2(this.modelGroup, asu, this.protein.biomtMatrices);
this.modelGroup.add(asu);
};
$.get("http://www.pdb.org/pdb/files/1A85.pdb", function(ret) {
$("#glmol01_src").val(ret);
glmol01.loadMolecule();
});
</script>

thanks

Thank you so much.
Now everything is working fine. I need some additional help if possible please suggest me.
I would like to create button and then by clicking I want to display glmol structure on same page or different page.

here is my code:

<button onclick="glmol(pdb_id)">Display GLmol</button>

<div id="glmol01" style="width: 500px; height: 400px; background-color: black;"></div> <textarea id="glmol01_src" style="display: none;"></textarea>

<script src="{{=URL('static','js/jquery-1.7.min.js')}}"></script>
<script src="{{=URL('static','js/Three49custom.js')}}"></script>
<script src="{{=URL('static','js/GLmol.js')}}"></script>

<script type="text/javascript">
var glmol01 = new GLmol('glmol01', true);
glmol01.defineRepresentation = function() {
var all = this.getAllAtoms();
var hetatm = this.removeSolvents(this.getHetatms(all));
this.colorByAtom(all, {});
this.colorByChain(all);
var asu = new THREE.Object3D();

this.drawBondsAsStick(asu, hetatm, this.cylinderRadius, this.cylinderRadius);
this.drawBondsAsStick(asu, this.getResiduesById(this.getSidechains(this.getChain(all, ['A'])), [58, 87]), this.cylinderRadius, this.cylinderRadius);

};

function glmol(pdbid){
uri = "http://www.pdb.org/pdb/files/" + pdbid + ".pdb";

$.get(uri, function(ret) {
$("#glmol01_src").val(ret);
glmol01.loadMolecule();
});

};

</script>

Sorry for confusion.
I have list of pdb files on my webpage. That is why I want to create button for each pdb file.
When I click this button then pdb should load into GLmol.

thanks

Is there way to color residue by their residue number instead of residue name?
One more thing I would like to know that if I want to hide one chain from two chain. How to do this?

Thanks

I am not able to color amino acid by their residue id...Please help me out with this problem.

here is my code:

variable P contains list of amino acid id eg: [12,15,18] which I want to make red.

var P = [12,15,18];
var glmol01 = new GLmol('glmol01', true);
glmol01.defineRepresentation = function() {
var all = this.getAllAtoms();
var hetatm = this.removeSolvents(this.getHetatms(all));
this.colorByAtom(all, {});
this.colorByStructure(all);

//this.colorByResidue(this.getResiduesById(this.getSidechains(this.getChain(all, ['A'])), P), 0xFF0033);


var asu = new THREE.Object3D();

this.drawBondsAsStick(asu, hetatm, this.cylinderRadius / 2.0, this.cylinderRadius, true, true, 0.3);
//this.drawBondsAsStick(asu, this.getResiduesById(this.getSidechains(this.getChain(all, ['A'])), P), this.cylinderRadius, this.cylinderRadius);

this.drawCartoon(asu, all, this.curveWidth, this.thickness);

this.drawSymmetryMates2(this.modelGroup, asu, this.protein.biomtMatrices);
this.modelGroup.add(asu);

};

thanks

I tried to color by residue id with this code but it is not working..

this.colorByResidue(this.getResiduesById(this.getChain(all, ['A']), P), 0xFF0000);

I have checked
this.getResiduesById(this.getChain(all, ['A']), P)
and it returns correct atom id but somehow problem with coloring.

Thanks..it is working now...
with this code.
this.colorAtoms(this.getResiduesById(this.getChain(all, ['A']), P), 0xFF0000);