adding more examples to HTML page

KarrLab · Jun 19, 2019 · 8d6d329 · 8d6d329
1 parent 194fb89
commit 8d6d329
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git a/bpforms/web/css/app.css b/bpforms/web/css/app.css
@@ -34,6 +34,14 @@ h3, .h3 {
     text-align: center;
     font-weight: bold;
 }
+h4, .h4 {
+    font-size: 1.0rem;
+    margin-top: 0rem;
+    margin-bottom: 0.2em;
+    text-align: center;
+    font-weight: bold;
+}
+
 
 .blue h2{ background: #3bafda;}
 .blue h3{ color: #3bafda; border-bottom: 2px solid #3bafda;}

diff --git a/bpforms/web/index.html b/bpforms/web/index.html
@@ -106,11 +106,29 @@ <h3>Overview</h3>
         </div>
         <div class="large-7 cell example">
           <h3>Examples</h3>
-          <ul>
-          <li><tt>[id: "dI" | name: "deoxyinosine"]ACGC</tt>: represents deoxyinosine at the first position</li>
-          <li><tt>AC[id: "dI" | name: "deoxyinosine"]GC</tt>: represents deoxyinosine at the third position</li>
-          <li><tt>AC{2mG}C[id: "dI" | name: "deoxyinosine"]</tt>: represents guanosine methylation at the third position and deoxyinosine at the last position</li>
-          </ul>
+          <div class="grid-x grid-padding-x">
+            <div class="large-4 cell">
+              <h4>DNA</h4>
+              <p style="text-align: center;"><tt>{dI}ACGC</tt></p>
+              <img src="img/example/form-DNA.svg"
+                style="margin-bottom: 0.5rem;"/>
+              <p>Deoxyinosine at the first position</p>
+            </div>
+            <div class="large-4 cell">
+              <h4>RNA</h4>
+              <p style="text-align: center;"><tt>AC{9A}GC</tt></p>
+              <img src="img/example/form-RNA.svg"
+                style="margin-bottom: 0.5rem;"/>
+              <p>Deoxyinosine at the third position</p>
+            </div>
+            <div class="large-4 cell">
+              <h4>Protein</h4>
+              <p style="text-align: center;"><tt>ACU[id: "U"]C</tt></p>
+              <img src="img/example/form-Protein.svg" 
+                style="margin-bottom: 0.5rem;"/>
+              <p>Selenocysteine at the third position</p>
+            </div>
+          </div>          
         </div>
 
         <div class="large-5 cell notation">

diff --git a/docs/build_examples.py b/docs/build_examples.py
@@ -25,6 +25,13 @@ def build(dirname=default_dirname):
         os.makedirs(dirname)
 
     # save images
+    draw_polymer(bpforms.DnaForm, '{dI}ACGC', dirname, 'form-DNA',
+                 show_atom_nums=False, width=203)
+    draw_polymer(bpforms.RnaForm, 'AC{9A}GC', dirname, 'form-RNA',
+                 show_atom_nums=False, width=203)
+    draw_polymer(bpforms.ProteinForm, 'ACUC', dirname, 'form-Protein',
+                 show_atom_nums=False, width=203)
+
     draw_monomer(bpforms.DnaForm, '''
         [id: "dI" 
             | name: "hypoxanthine"
@@ -80,7 +87,8 @@ def build(dirname=default_dirname):
         ]''', dirname, 'crosslink-protein-sulfide-bond', show_atom_nums=False)
 
 
-def draw_monomer(Form, monomer, dirname, filename, show_atom_nums=False, format='svg'):
+def draw_monomer(Form, monomer, dirname, filename, show_atom_nums=False,
+                 width=250, format='svg'):
     """ Generate and save an image of a monomer for an example
 
     Args:
@@ -89,6 +97,7 @@ def draw_monomer(Form, monomer, dirname, filename, show_atom_nums=False, format=
         dirname (:obj:`str`): directory to save image
         filename (:obj:`str`): filename to save image
         show_atom_nums (:obj:`bool`, optional): if :obj:`True`, show the numbers of the atoms
+        width (:obj:`int`, optional): width of image
         format (:obj:`str`, optional): format for image
     """
     monomer = monomer.replace('\n', '').strip()
@@ -99,11 +108,12 @@ def draw_monomer(Form, monomer, dirname, filename, show_atom_nums=False, format=
     else:
         mode = 'wb'
     with open(os.path.join(dirname, filename + '.' + format), mode) as file:
-        img = form.seq[0].get_image(width=250, height=150, image_format=format, show_atom_nums=show_atom_nums)
+        img = form.seq[0].get_image(width=width, height=150, image_format=format, show_atom_nums=show_atom_nums)
         file.write(img)
 
 
-def draw_polymer(Form, polymer, dirname, filename, show_atom_nums=False, format='svg'):
+def draw_polymer(Form, polymer, dirname, filename, show_atom_nums=False,
+                 width=250, format='svg'):
     """ Generate and save an image of a polymer for an example
 
     Args:
@@ -112,6 +122,7 @@ def draw_polymer(Form, polymer, dirname, filename, show_atom_nums=False, format=
         dirname (:obj:`str`): directory to save image
         filename (:obj:`str`): filename to save image
         show_atom_nums (:obj:`bool`, optional): if :obj:`True`, show the numbers of the atoms
+        width (:obj:`int`, optional): width of image
         format (:obj:`str`, optional): format for image
     """
     polymer = polymer.replace('\n', '').strip()
@@ -122,5 +133,5 @@ def draw_polymer(Form, polymer, dirname, filename, show_atom_nums=False, format=
     else:
         mode = 'wb'
     with open(os.path.join(dirname, filename + '.' + format), mode) as file:
-        img = form.get_image(width=250, height=150, image_format=format, show_atom_nums=show_atom_nums)
+        img = form.get_image(width=width, height=150, image_format=format, show_atom_nums=show_atom_nums)
         file.write(img)