Nick's JSmol Tutorials

Μάθημα 1.3
Επιλογή ατόμων
Δημιουργία εκπαιδευτικού σεναρίου για τους δεσμούς υδρογόνου στο νερό

Στόχος

Σε αυτό το μάθημα θα μάθουμε να επιλέγουμε ομάδες ατόμων με σκοπό να καθορίζουμε τις ιδιότητες των επιλεγμένων ατόμων.

Θα εμφανίζουμε και θα αποκρύπτουμε επιλεγμένα άτομα δημιουργώντας animations που αναδεικνύουν χημικές εννοιες.

Συγκεκριμένα θα αναπτύξουμε ένα σενάριο για τους δεσμούς υδρογόνου ανάμεσα στα μόρια του νερού.

Το τελικό αποτέλεσμα φαίνεται στο παρακάτω πλαίσιο:

Ανανέωση

Βήμα 1.
Δημιουργία αρχικής ιστοσελίδας με 14 μόρια νερού

Δημιουργήστε μια ιστοσελίδα με ένα αντικείμενο JSmol και ονομάστε την jsmol-3.html

Ο κώδικας της ιστοσελίδας φαίνεται παρακάτω:

jsmol-3.html



          <!DOCTYPE html>
          <html lang="en" >

            <head>
              <meta charset="utf-8">
              <title></title>

              <script type="text/javascript" src="JSmol.min.js"> </script>

              <script>
              var jmolApplet0;
              var use = "HTML5"
              var s = document.location.search;
              Jmol.debugCode = (s.indexOf("debugcode") >= 0);
              jmol_isReady = function(applet) {
              }
              var JSmol_Applet = {
                width:"100%",
                height:"100%",
                debug: false,
                color: "#FFFFFF",
                use: "HTML5",
                j2sPath: "j2s",
                readyFunction: jmol_isReady,
                script: "",
                disableJ2SLoadMonitor: true,
                disableInitialConsole: true,
                allowJavaScript: true
              }
              </script>

            </head>

            <body>

              <div style="width:450px; height:400px; border:1px solid #333;" >
                <script>
                  jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);

                </script>
              </div>

            </body>

          </html>

Κατεβάστε το αρχείο water14.pdb και αποθηκεύστε το στον φάκελο molecules

Φορτώστε το αρχείο water14.pdb στο JSmol εισάγωντας τον παρακάτω κώδικα:

jsmol-3.html



  <script>
    jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
    Jmol.script(jmolApplet0, "set antialiasDisplay on; load molecules/water14.pdb");
  </script>

Παρατηρείστε το αποτέλεσμα στο παρακάτω πλαίσιο. Το αρχείο water14.pdb περιέχει 14 μόρια νερού.

Ανανέωση

Βήμα 2.
Επιλογή ατόμων ενός μορίου και απόκρυψη των υπόλοιπων ατόμων

Σε αυτό το βήμα θα αποκρύψουμε τα 13 μόρια του νερού και θα εμφανίσουμε ένα μόνο μόριο νερού κεντραρισμένο στο JSmol.

Για να το πετύχουμε θα πρέπει να επιλέξουμε τα άτομα που θα εμφανίσουμε ή θα αποκρύψουμε.

Η επιλογή των ατόμων γίνεται με την εντολή select atom-expression

Η παράμετρος atom-expression καθορίζει τα άτομα που επιλέγονται. Υπάρχουν πολλοί τρόποι που μπορεί να οριστεί η παράμετρος atom-expression οι οποίοι περιγράφονται λεπτομερώς στο εχγειρίδιο scipting του JSmol (atomexpressions)

Η τιμή ALL επιλέγει όλα τα άτομα, ενώ η τιμή ΝΟΝΕ αποεπιλέγει όλα τα άτομα.

Η επιλογή ατόμων με βάση το ατομικό στοιχείο γίνεται με την τιμη _Χ, όπου Χ είναι το σύμβολο του ατόμου.

Προκειμένου να βλέπουμε τα άτομα που είναι επιλεγμένα χρησιμοποιούμε την εντολή selectionHalos ON η οποία προσθέτει ένα κίτρινο περίβλημα στα επιλεγμένα άτομα.

Πειραματίσου με τις εντολές select atom-expression και selectionHalos με την κονσόλα του JSmol ή με τα παρακάτω πλαίσια κώδικα πατώντας το εικονίδιο run.

Σε αυτό το tutorial θα επιλέξουμε τα άτομα με βάση τον σειριακό τους αριθμό.

Για να δούμε τον σειριακό αριθμό των ατόμων πρέπει να χρησιμοποιούμε την εντολή labes %i

Η επιλογή με βάση τον σειριακό αριθμό n γίνεται με την atom-expression atomno = n

Για να επιλέξουμε πολλά ατομα χρησιμοποιούμε την έκφραση atomno = n1, n2, n3...

Μπορούμε επίσης να χρησιμοποιήσουμε τα σύμβολα του μεγαλύτερου και του μικρότερου, π.χ. atomno > n1, atomno < n2

Για να κάνουμε σύνθετες επιλογές χρησιμοποιούμε το AND σε πολλαπλές επιλογές, π.χ. atomno < n1 AND atomno > n2

Πειραματίσου με τις εκφράσεις atomno με την κονσόλα του JSmol ή με τα παρακάτω πλαίσια κώδικα πατώντας το εικονίδιο run.

Στο παρακάτω πλαίσιο για να εμφανιστούν οι σειριακοί αριθμοί εκτελέστηκε ο κώδικας:

select all; set labelOffset 0 0; color labels black; labels %i;

Η εμφάνιση και η απόκρυψη των επιλεγμένων ατόμων γίνεται με την εντολή display selected η οποία εμφανίζει τα επιλεγμενα άτομα και τους δεσμούς τους, ενώ αποκρύπτει τα μή επιλεγμένα άτομα.

Επίσης η εντολή hide selected αποκρύπτει τα επιλεγμένα άτομα.

Στις παραπάνω εντολές η παράμετρος selected είναι μια atom-expression και μπορεί να πάρει εκφράσεις όπως και στην εντολή select. Μπορεί επίσης να πάρει την τιμή not selected, π.χ. hide not selected

Για την ανάπτυξη του κώδικα θα χρησιμοποιήσουμε εξωτερικά αρχεία .spt

Δημιουργήστε ένα νέο αρχείο κειμένου μέσα στον φάκελο scripts και μετονομάστε το σε init.spt

Καλέστε το αρχείο init.spt μέσα από την εντολή Jmol.script()

jsmol-3.html



      <script>
          jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);
          Jmol.script(jmolApplet0, "script scripts/init.spt");
      </script>

Μέσα στο αρχείο init.spt (αντι)γράψτε τον παρακάτω κώδικα:

init.spt



      set antialiasDisplay on;

      load molecules/water14.pdb;

      select all;

      set echo top center;

      font echo 24 sansserif  bold;

      color echo black;

      set labelOffset 0 0;

      font labels 18;

      color labels black;

Επιλέξτε το πρώτο μόριο νερού που αποτελείται από τα άτομα 1, 2 και 3 και στη συνέχεια απεικονίστε μόνο αυτά τα άτομα. Για να το πετύχετε εισάγετε τον παρακάτω κώδικα στο αρχείο init.spt
init.spt
```
      set antialiasDisplay on;

      load molecules/water14.pdb;

      select all;

      set echo top center;

      font echo 24 sansserif  bold;

      color echo black;

      set labelOffset 0 0;

      font labels 18;

      color labels black;

      select atomno<4;

      display selected;
                  
```
Ανανέωση

Τώρα εμφανίζεται μόνο ένα μόριο νερού το οποίο δεν είναι κεντραρισμένο, δηλαδή δεν περιστρέφεται γύρω από το κέντρο του, ούτε η κάμερα εστιάζει σε αυτό.

Για να κεντράρουμε, τόσο την εστίαση της κάμερας, όσο και το κέντρο περιστροφής στα επιλεγμένα άτομα χρησιμοποιούμε την εντολή center selected

Κεντράρετε το επιλεγμένο μόριο εισάγωντας την εντολή center selected

init.spt



        set antialiasDisplay on;

        load molecules/water14.pdb;

        select all;

        set echo top center;

        font echo 24 sansserif  bold;

        color echo black;

        set labelOffset 0 0;

        font labels 18;

        color labels black;

        select atomno<4;

        display selected;

        center selected;

Ανανέωση

- Ζουμάρετε το μόριο ώστε να έρθει μπροστά και περιστρέψτε το ώστε το επίπεδο του μορίου να ταυτίζεται με το επίπεδο της οθόνης.
- Ανοίξτε την κονσόλα (δεξί κλικ > Console), γράψτε στο κάτω μέρος την εντολή show moveto
- Αντιγράψτε το moveto και επικολήστε τον κώδικα διαγράφωντας την εντολή center selected
- Ορίστε την πρώτη τιμή του moveto σε 0.0
init.spt
```
      set antialiasDisplay on;

      load molecules/water14.pdb;

      select all;

      set echo top center;

      font echo 24 sansserif  bold;

      color echo black;

      set labelOffset 0 0;

      font labels 18;

      color labels black;

      select atomno<4;

      display selected;

      center selected;

      moveto 0.0 { 500 458 -735 106.8} 615.28 0.0 0.0 {-3.641 0 -0.39166666666666666} 11.062191220245634 {0 0 0} 0 0 0 3.0 0.0 0.0;
                  
```
Η εντολή moveto περιέχει τις πληροφορίες για το κέντρο περιστροφής και τον προσανατολισμό-εστίαση της κάμερας. Για το λόγο αυτό διαγράψαμε την εντολή center selected

Στο εξής θα χρησιμοποιούμε την εντολή center selected μόνο στην κονσόλα για να παίρνουμε τα κατάλληλα moveto

Ανανέωση

Βήμα 3.
Εισαγωγή κουμπιών επιλογής Radio Buttons

Σε αυτό το βήμα θα εισάγουμε κουμπιά επιλογής radio buttons τα οποία θα καθορίζουν τον αριθμό των μορίων νερού που θα εμφανίζονται.

Θα χρησιμοποιήσουμε εξωτερικά αρχεία για τον κώδικα που θα εκτελείται με κάθε επιλογή.

Εισάγετε τον παρακάτω κώδικα για την δημιουργία κουμπιών επιλογής:

jsmol-3.html



      <script>
         jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);

         Jmol.script(jmolApplet0, "script scripts/init.spt");

         Jmol.jmolRadioGroup(jmolApplet0, [
             ["script scripts/monomer.spt", "Μονομερές", true],
             ["script scripts/dimer.spt", "Διμερές"],
             ["script scripts/pentamer.spt", "Πενταμερές"],
             ["script scripts/14mer.spt", "Δεκατετραμερές"]
           ]);
      </script>

Μέσα στον φάκελο scripts δημιουργήστε τέσσερα αρχεία κειμένου και μετονομάστε τα σε monomer.spt, dimer.spt, pentamer.spt και 14mer.spt

Βήμα 4.
Εμφάνιση μονομερούς και διμερούς cluster νερού και δεσμών υδρογόνου

Ανοίξτε το αρχείο monomer.spt και (αντι)γράψτε τον παρακάτω κώδικα:
monomer.spt
```
    select atomno<4;

    display selected;


    moveto 1.0 { 500 458 -735 106.8} 615.28 0.0 0.0 {-3.641 0 -0.39166666666666666} 11.062191220245634 {0 0 0} 0 0 0 3.0 0.0 0.0;
            
```
Τώρα το πρώτο radio button "Μονομερές" είναι λειτουργικό. Περιστρέψτε το μόριο του νερού και πατήστε το radio button "Μονομερές" για να δείτε το αποτέλεσμα.

Ανανέωση

Για να εμφανίσουμε το δεύτερο μόριο νερού πρέπει να επιλέξουμε τα αντίστοιχα άτομα με βάση τον σειριακό τους αριθμό.
- Ανοίξτε την κονσόλα του JSmol (δεξί κλικ > Console)
- Εμφανίστε όλα τα άτομα με τους σειριακούς τους αριθμούς γράφοντας στην κονσόλα τις εντολές:
  select all; display selected; labels %i
- Παρατηρείστε ότι τα άτομα του μορίου του νερού που βρίσκεται κοντά στο πρώτο μόριο νερού έχουν σειριακούς αριθμούς 4, 5 και 6.
- Από την κονσόλα επιλέξτε τα άτομα που έχουν σειριακό αριθμό μικρότερο του 7 και ενεργοποιήστε τα selectionHalos για να βλέπετε καλύτερα την επιλογή σας:
  select atomno < 7; selectionHalos ON;
- Κεντράρετε τα επιλεγμένα άτομα με την εντολή center selected;
- Αποκρύψτε τα υπόλοιπα άτομα με την εντολή display selected;
- Φέρτε τα δύο εμφανιζόμενα μόρια νερού στον επιθυμητό προσανατολισμό και αντιγράψτε το moveto με την εντολή show moveto
Ανανέωση
Ανοίξτε το αρχείο dimer.spt και (αντι)γράψτε τον παρακάτω κώδικα:
dimer.spt
```
    select atomno<7;

    display selected;

    calculate Hbonds;

    moveto 1.0 { -5 -991 131 169.31} 351.79 0.0 0.0 {-4.956666666666667 0.13166666666666665 -0.8719999999999999} 9.992184024060782 {0 0 0} 0 0 0 3.0 0.0 0.0;
            
```
Ο υπολογισμός και η εμφάνιση των δεσμών υδρογόνου γίνεται με την εντολή calculate Hbonds;

Τώρα το κουμπί επιλογής "Διμερές" είναι λειτουργικό. Δείτε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση

Βήμα 5.
Εμφάνιση πενταμερούς και δεκατετραμερούς cluster νερού

Επανέλαβε την διαδικασία του βήματος 4.2 για να αναγνωρίσεις, να εμφανίσεις και να κεντράρεις τα άτομα του πενταμερούς. Αυτά είναι τα άτομα με σειριακό αριθμό 1 έως 15.

Ανοίξτε το αρχείο pentamer.spt και (αντι)γράψτε τον παρακάτω κώδικα:

pentamer.spt



    select atomno<16;

    display selected;

    calculate Hbonds;

    moveto 1.0 { -169 982 -85 175.06} 174.9 0.0 0.0 {-6.431 0.05406666666666669 -1.2593333333333332} 8.850758438717452 {0 0 0} 0 0 0 3.0 0.0 0.0;

Τέλος για το δεκατετραμερές ανοίξτε το αρχείο 14mer.spt και (αντι)γράψτε τον παρακάτω κώδικα:
14mer.spt
```
    select all;

    display selected;

    calculate Hbonds;

    moveto 1.0 { -161 979 -128 166.83} 100.0 0.0 0.0 {-9.205071428571431 0.0006666666666666567 -1.692571428571429} 7.4612004837683195 {0 0 0} 0 0 0 3.0 0.0 0.0;
          
```
Τώρα όλα τα κουμπιά επιλογής είναι λειτουργικά. Δείτε το αποτέλεσμα στο παρακάτω πλαίσιο.

Ανανέωση

Βήμα 6.
Εισαγωγή στοιχείων διαδρασης για την περιστροφή, τα ατομικά σύμβολα και την μοριακή απεικόνιση

Μπορούμε τώρα εύκολα να εισάγουμε τα στοιχεία διάδρασης που αναπτύξαμε στο Μάθημα 1.2.

Εισάγετε τα στοιχεία διάδρασης του Μαθήματος 2 (αντι)γράφωντας τον παρακάτω κώδικα:

jsmol-3.html



    <script>
       jmolApplet0 = Jmol.getApplet("jmolApplet0", JSmol_Applet);

       Jmol.script(jmolApplet0, "script scripts/init.spt");

        Jmol.jmolCheckbox(jmolApplet0, "select all; labels %e; ", " labels off; ", "Σύμβολα Ατόμων", false);

       Jmol.jmolCheckbox(jmolApplet0, "rotate spin 90", "rotate off", "Περιστροφή;",  false);

       Jmol.jmolMenu(jmolApplet0, [
           ["select all; spacefill 22.5%; wireframe 0.15;","Σφαιρών και Ράβδων"],
           ["select all; spacefill 100%; wireframe OFF;","Χωροπληρωτικό"],
           ["select all; spacefill OFF; wireframe 0.15;","Ράβδων"],
           ["select all; spacefill OFF; wireframe 0.03;","Συρμάτων"]
         ]);
       Jmol.jmolBr();

       Jmol.jmolRadioGroup(jmolApplet0, [
           ["script scripts/monomer.spt", "Μονομερές", true],
           ["script scripts/dimer.spt", "Διμερές"],
           ["script scripts/pentamer.spt", "Πενταμερές"],
           ["script scripts/14mer.spt", "Δεκατετραμερές"]
         ]);
     </script>

Ανανέωση

Λήψεις
Downloads

Αρχείο γεωμετρίας με 14 μόρια νερού: water14.pdb
Φάκελος ιστοχώρου με κενή ιστοσελίδα JSmol: Jsmol-starter-site.zip

Μάθημα 1.3 Επιλογή ατόμων Δημιουργία εκπαιδευτικού σεναρίου για τους δεσμούς υδρογόνου στο νερό

Στόχος

Βήμα 1. Δημιουργία αρχικής ιστοσελίδας με 14 μόρια νερού

Βήμα 2. Επιλογή ατόμων ενός μορίου και απόκρυψη των υπόλοιπων ατόμων

Βήμα 3. Εισαγωγή κουμπιών επιλογής Radio Buttons

Βήμα 4. Εμφάνιση μονομερούς και διμερούς cluster νερού και δεσμών υδρογόνου

Βήμα 5. Εμφάνιση πενταμερούς και δεκατετραμερούς cluster νερού

Βήμα 6. Εισαγωγή στοιχείων διαδρασης για την περιστροφή, τα ατομικά σύμβολα και την μοριακή απεικόνιση

Λήψεις Downloads

Μάθημα 1.3
Επιλογή ατόμων
Δημιουργία εκπαιδευτικού σεναρίου για τους δεσμούς υδρογόνου στο νερό

Βήμα 1.
Δημιουργία αρχικής ιστοσελίδας με 14 μόρια νερού

Βήμα 2.
Επιλογή ατόμων ενός μορίου και απόκρυψη των υπόλοιπων ατόμων

Βήμα 3.
Εισαγωγή κουμπιών επιλογής Radio Buttons

Βήμα 4.
Εμφάνιση μονομερούς και διμερούς cluster νερού και δεσμών υδρογόνου

Βήμα 5.
Εμφάνιση πενταμερούς και δεκατετραμερούς cluster νερού

Βήμα 6.
Εισαγωγή στοιχείων διαδρασης για την περιστροφή, τα ατομικά σύμβολα και την μοριακή απεικόνιση

Λήψεις
Downloads