[Javascript] Ketcher 사용방법 (getSmiles(), generateImage())

Ketcher 란? 'Web-based molecule sketcher ' 웹 기반으로 분자구조를 그리거나 구조 관련 정보를 추출할 수 있는 에디터.
 
JSP에서 사용하는 Ketcher의 output은 'Promise' 객체로 이루어져있음.
 
<사용예시>

async function test(){
    var frame = document.getElementById("ifKetcher");
    var ketcher = frm.contentWindow.ketcher;

    // Get SMILES Code
    var smiles = await ketcher.getSmiles();
    console.log(smiles);
    
    // Get Molecule Image
    var blob = await ketcher.generateImage(smi, opt);
    var svgURL = URL.createObjectURL(blob);
    
    $("Img_id").attr("src", svgURL);   // <img id="Img_id"> 태그의 src 속성에 추가
}

 
Promise 객체 값 가져오기위해선, async...await 사용해야함.
 
async...await  키워드를 사용하면 Promise가 처리될 때 까지 기다리고, Promise 객체 안의 result 값을 반환해줌.

 

** generateImage 키워드 사용할 때, SMILES는 kekuleSmiles=True 상태여야함.