استعمال JSmol.js في صفحة ويب

استعمال JSmol.js في صفحة ويب
JSmol.js , rastop, rasmol, راستوب, دراسة الجزيئات
السلام عليكم ورحمة الله وبركاته، مرحبا متابعي مدونتي الكرام
بالنسبة لتدوينة اليوم، هي تدوينة قديمة نوعا ما، كتبتها قبل عدة أشهر، كنت أريد اضافة بعد الاضافات لها لتكون أكثر عملية، لكن لابأس أن أنشرها الآن أما الاضافات ستكون في تدوينة منفصلة.
في هذه التدوينة ستتعلم كيف تضيف لصفحتك “موقعك” معاينة لجزيئات بشكل ثلاثي الأبعاد، باستعمال ملفات PDB بنفس طريقة عرضها في برنامج الراستوب.

أولا عليك القيام ببناء صفحة ويب باستعمال لغة html css للتنسيق .
كل صفحة ويب يكون هيكلها كالتالي:
<html>
<head></head>
<body></body>
</html>
في الوسم head يمكن اضافة التنسيقات باستخدام، في مكان aaa تستبدلها بالتنسيقات. اذا اردت اضافة عناصر اخرى في الصفحة قم بتخصيص تنسيقها من هنا، لكن اذا لم يكن هناك عناصر اخرى فاتركها.
<style type="text/css">aaaa</style>
ثم أسفلها مباشرة تستدعي ملف JSmol.min.js بالكود التالي:
<script type="text/javascript" src="JSmol.min.js"></script>
هذا الملف يمكنك تحميله من هذا الرابط:
بعدها مباشرة تقوم بتحديد الأوامر الأساسية التي تحتاجها، تقريبا كل ما نحتاجه هو هذه الخصائص، يعني تضيفها مباشرة أسفل السطر السابق. (مثل ما في الصورة).
ثم هنا ننتهي من الوسم head
ننتقل للجزء الذي سيظهر على الصفحة، يعني نضيفه داخل الوسم body أي بعد <body> مباشرة.
نكتب
<form>
ثم بعده نقوم باستدعاء ملف pdb للجزيئة التي نريد اظهارها.
نستدعيها داخل وسم جافاسكريبت كالتالي
<script type="text/javascript">
jmolApplet0 = Jmol.getApplet("jmolApplet0", Info)
Jmol.script(jmolApplet0,"load pdb/acnucl_1id3.pdb; wireframe 0.1; spacefill off; set ambient 20; set specpower 80; set hermitelevel 2; set zshade on; set zslab 48; set zdepth -90; set zshadepower 2; zoom 95;)
</script>
جزء الاستدعاء هو فقط load pdb/acnucl_1id3.pdb أما البقية يمكن الاستغناء عنها لأنها تحدد فقط الخصائص الأولية التي تظهر عليها الجزيئة. حيث load هو أمر الاستدعاء، أما pdb/acnucl_1id3.pdb هو مسار الجزيئة، يتغير حسب المجلد الذي وضعت فيه الجزيئة.
ثم بعد ذلك نضيف العناصر التي نريد اضافتها التي تسمح بدراسة الجزيئة، نقوم أولا بفتح وسم الجافاسكريبت (يعني نحن نقوم بالكتابة بلغة الجافاسكريبت). كالتالي:
<script type="text/javascript">
عندما نفتحه نضيف ما كود css الذي نريده، مثلا نجعل عرض الأزرار بـ 140 بيكسل.
سيكون الكود كالتالي:
Jmol.setButtonCss(null,"style='width:140px'")
ثم بعد ذلك نضيف العناصر التي نريدها، مثلا اذا اردنا اضافة زر نكتب الكود التالي:
jmolButton("1","2")
حيث 1 نضع في مكانها الأمر الذي يتم تنفيذه عند الضغط على الزر.
أما 2 فالكتابة التي ستظهر على الزر في الصفحة. أمثلة:
jmolButton("select all","الكل")
jmolButton("select (*i or *j)", "ADN")
jmolButton("color [75,150,250]", "بالأزرق")
واذا أردنا العودة إلى السطر نكتب الكود التالي:
jmolBr()
علما أن كود العودة إلى السطر في لغة html هو <br />
وإذا أردنا أن نضيف نص html داخله، نكتب الكود التالي
jmolHtml(")
بين علامتي الاقتباس نكتب كود html الذي نريده.
وبعد أن ننتهي من اضافة العناصر، نغلق وسم الجافاسكريبت ثم نغلق وسم الفورم باضافة السطرين التاليين
</script>
</form>


مثال على ذلك في هذه الصفحة:

المواد العضوية

الأحماض النووية

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

شعار وردبرس.كوم

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   /  تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   /  تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   /  تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   /  تغيير )

Connecting to %s

%d مدونون معجبون بهذه: