JSmol - UBCC3/UI GitHub Wiki
Jmol JSmol : an open-source Java viewer for chemical structures in 3D with features for chemicals, crystals, materials and biomolecules.
To install JSmol, can follow instructions from the documentations JSmol scripting documentations
- Load JSmol into Component
Calling the function in ngAfterViewInit insures everything from the component is rendered before trying to generate the code for JSmol.
ngAfterViewInit(): void {
this.appletElement = this.appletContainer.nativeElement;
this.loadJSMolWithPromise()
.then((appletHtml) => {
this.appletElement.innerHTML = appletHtml;
if (this.file) {
setTimeout(() => {
this.loadFile();
this.setRightClickMenuAccess();
}, 100);
}
})
.catch((err) => console.error('error loading jsmol: ', err));
}
loadJSMolWithPromise(): Promise<string> {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = '../../../../assets/jsmol/JSmol.min.js';
script.onload = () => {
// reference to jmol applet object
this.appletObject = Jmol.getApplet('jsmolApplet', info);
// get html for jmol applet
const appletHtml = Jmol.getAppletHtml(this.appletObject);
resolve(appletHtml);
};
script.onerror = (error) => {
console.log('error', error);
reject(error);
};
// add script to html
this.renderer.appendChild(document.body, script);
});
}- To load a file into JSmol:
loadFile() {
if (this.file) {
if (this.source == SourceEnum.CALCULATED) {
const fileContentsAppended = `load data "model" ${this.file} end "model"`;
Jmol.script(this.appletObject, fileContentsAppended);
} else {
const reader = new FileReader();
reader.onload = (event) => {
const fileContents = event.target?.result as string;
const fileContentsAppended = `load data "model" ${fileContents} end "model"`;
Jmol.script(this.appletObject, fileContentsAppended);
};
reader.readAsText(this.file);
}
}
}