JAL-1645 rejig bioJSON, export and whats new
[jalview.git] / help / html / io / export.html
index 7a3efa7..c3270c7 100755 (executable)
 <title>Exporting alignments as artwork</title>
 </head>
 <body>
-<p><strong>Exporting alignments as graphics and lineart<a name="export"></a></strong></p>
-<p>The alignment view can be printed using
-<strong>File&#8594;Print</strong>, or exported in a number of ways via the
-<strong>File&#8594;Export</strong> menu:
-<ul>
-<li>HTML<br><em>for viewing in a web browser</em>
-</li>
-<li>PNG - a Portable Networks Graphics image<br><em>For low quality
-diagrams and powerpoint presentations</em>
-</li>
-<li>EPS - an Encapsulated Postscript Document<br><em>For high quality
-diagrams and publications.</em>
-<li>SVG - a Scalable Vector Graphics document<br><em>For high quality
-diagrams in publications and on the web.</em>
-</li>
-<li>BioJS - A JavaScript based multiple sequence alignment visualiser. <br><em>For viewing in a web browser. Get more info about BioJS at <a href="http://msa.biojs.net/">http://msa.biojs.net/</a></em>
-</li>
-
-</ul>
-
-<p>From Jalview 2.9, the HTML exporting system was re-implemented to use SVG rendering. Also, optional embedding of <a href="../features/bioJsonFormat.html">BioJSON</a> data to the generated HTML file was introduced. 
-This is achieved using a hidden input or div element which MUST be named "seqData" as seen in the examples below:  
-<pre><code>    &lt;div name="seqData" id="seqData" style="display: none;"&gt;#valid BioJSON data#&lt;/div&gt;
-         OR
-       &lt;input type="hidden" id="seqData" name="seqData" value='#valid BioJSON data#'/&gt;</pre></code>
-HTML file embedded with BioJSON can be imported back to Jalview at a later date. During the import operation, Jalview uses an API called JSoup to traverse through the HTML file and extract the embedded BioJSON data from the target div or input element named <b>'seqData'</b>. The extracted data is then parsed as a BioJSON format. 
-
+  <p>
+    <strong>Exporting alignments as graphics and lineart<a
+      name="export"></a></strong>
+  </p>
+  <p>
+    The alignment view can be printed using <strong>File&#8594;Print</strong>,
+    or exported in a number of ways via the <strong>File&#8594;Export</strong>
+    menu:
+  
+  <ul>
+    <li>HTML<br>
+    <em>for viewing in a web browser</em>
+    </li>
+    <li>PNG - a Portable Networks Graphics image<br>
+    <em>For low quality diagrams and powerpoint presentations</em>
+    </li>
+    <li>EPS - an Encapsulated Postscript Document<br>
+    <em>For high quality diagrams and publications.</em>
+    <li>SVG - a Scalable Vector Graphics document<br>
+    <em>For high quality diagrams in publications and on the web.</em>
+    </li>
+    <li>BioJS MSA - A JavaScript based multiple sequence alignment
+      viewer. <br> <em>For interactive alignment data
+        visualisation in a web browser.<br />Get more info about the
+        BioJS MSA viewer at a
+        href="http://msa.biojs.net/">http://msa.biojs.net/</a>
+    </em>
+    </li>
 
+  </ul>
+  <a name="htmlexport" />
+  <p>
+    <strong>Exporting alignments as Web Pages</strong>
   
+  <p>
+    In Jalview 2.9, new HTML exporting options were introduced. The
+    standard HTML export option displays alignments as SVG documents
+    embedded as scollable panes. Exported pages can optionally also
+    include <a href="../features/bioJsonFormat.html">BioJSON</a> data,
+    which allows Jalview to extract the original data used to create the
+    page. Jalview can also generate HTML pages which embed BioJSON data
+    and the BioJS MSA viewer, a pure javascript alignment viewer that
+    provides a range of interactive analysis capabiltiies.
+  </p>
+  <p>
+
+  <p>
+    <em>Import of BioJSON data from HTML pages</em>
+  </p>
+  <p>When importing embedded data in an HTML document, Jalview
+    searches for a hidden input or div element named "seqData":
+  <pre>
+    <code>&lt;div name="seqData" id="seqData" style="display: none;"&gt;#valid BioJSON data#&lt;/div&gt;</code>
+  </pre>
+  <strong>OR</strong>
+  <pre>
+    <code>&lt;input type="hidden" id="seqData" name="seqData" value='#valid BioJSON data#'/&gt;</code>
+  </pre>
+  Jalview can also import JSON data directly if it conforms to the BioJSON specification.
+</p>
 <p><em>Tips for working with EPS Files</em></p>
 <li>The EPS file generated by Jalview contains vector graphics which are directly 
   editable in graphics applications such as Adobe Illustrator.</li>