Twirlymol, Alternatif Menambah Molekul 3D Interaktif di Laman Web

Selasa, 28 Januari 2020 edit

Ada beberapa alternatif cara untuk menyisipkan model molekul 3D ke dalam halaman website/blog. Pada tulisan ini akan di diberikan tutorial cara menyisipkan molekul 3D interaktif menggunakan Twirlymol dengan menggunakan dojo.js. Cara lain pernah juga di tulis di Cara Mudah Menampilkan Model Molekul 3D Interaktif di Web/Blog ini basisnya Jmol.
Tutorial ini diperoleh setelah menelusuri jejak mulai dari mencari di chemistry.stackexchange.com/, lanjut ke referensi yang direkomendasikan dari stackexchange untuk menyimak blognya cactus.nci.nih.gov dan sampailah pada blog empunya Twirlymol ini.

Di blog terakhir tentu saja tidak detil tutorialnya karena memang diperuntukkan bagi orang yang sudah biasa dengan kode-kode web, mungkin. Setelah mengamati dapatlah ditampilkan di sini juga. Memang Twirlymol ini untuk versi mobile keinteraktifan belum bisa berjalan, namun untuk tampilan versi desktop semua ok.


Model molekul asam sulfat

Model molekul asam benzoat

Model molekul aspirin

Pertama dalam laman harus kita tambahkan kode dojo.js dan trirlymol.js. Ini harus dimuat lebih awal dari molekul 3D. Berikutnya adalah mengambil struktur 3D dari cactur.nci.nih.gov. Strukturnya dapat di menggunakan nama molekul dalam Bahasa Inggris atau menggunakan string SMILES atau InChI
seperti yang direkomendasikan di sini, termasuk bagaimana cara mengatur dimensi layar untuk molekul 3D yang kita mau dapat diatur sendiri (height dan width). Pada visual molekul asam benzoat itu menggunakan string SMILES.

Selanjutnya adalah menambah div dengan id tertentu, tidak harus sama dengan nama molekulnya, tetapi bila hendak menampilkan beberapa molekul dalam satu halaman harus dibuat berbeda div-id-nya.

Bila hendak menerapkan pada web/blog sendiri, salin kode berikut dan tempel pada mode code atau html, bukan di mode compose.

Pada mode preview memang molekul dapat tampil hanya belum dapat di klik untuk melakukan interaksi. Harus diterbitkan lebih dahulu agar molekul 3D interkatif-nya dapat berfungsi.


<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js" type="text/javascript"></script>
<script src="https://noel.redbrick.dcu.ie/blog/molecproc/twirlymol.js"></script>

<script src="https://cactus.nci.nih.gov/chemical/structure/sulfuricacid/twirl?div_id=h2so4"></script>
<div height="300" id="h2so4" width="300">
</div>

<script src="https://cactus.nci.nih.gov/chemical/structure/C1=CC=C(C=C1)C(=O)O/twirl?div_id=asambenzoat"></script>
<div height="300" id="asambenzoat" width="300">
</div>

<script src="https://cactus.nci.nih.gov/chemical/structure/aspirin/twirl?div_id=aspirin"></script>
<div height="300" id="aspirin" width="300">
</div>

Selamat mencoba.
Bagikan di

Tidak ada komentar:

Posting Komentar

 
Copyright © 2015-2024 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info