Merge pull request #97 from Carifio24/more-docs

Updates to documentation page

docs/assets/css/main.css

@@ -3210,6 +3210,44 @@
     }
 }
 
+.highlight-image-container {
+  width: 100%;
+  height: 300px;
+}
+
+.highlight-image {
+  width: 100%;
+  margin: auto;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#plotly-text-logo {
+  aspect-ratio: 1100 / 417;
+}
+
+#chart-studio-logo {
+  aspect-ratio: 74 / 41;
+}
+
+#histogram-viewer-image {
+  aspect-ratio: 5 / 3;
+  max-height: 300px;
+}
+
+#airplanes-container {
+  overflow: hidden;
+  width: fit-content;
+  margin: auto;
+}
+
+#airplanes {
+  height: 400px;
+  width: 605px;
+}
+
+
 /*
 .img-link img {
   transition: height 0.25s;

docs/index.html

@@ -45,8 +45,11 @@ <h1 id="logo">glue-plotly</h1>
       <h2>Overview</h2>
       <p>glue-plotly is a plugin for the <a href="https://glueviz.org">glue</a> visualization software which connections glue to <a href="https://plotly.com/">Plotly</a>. This consists of three main pieces of functionality:
       <div class="row 200%">
-        <section class="4u (12u narrower)">
+        <section class="4u 12u(narrower)">
           <div class="box highlight">
+            <div class="highlight-image-container">
+              <img id="plotly-text-logo" class="highlight-image" height=150 src="assets/img/plotly_text.svg">
+            </div>
             <h3>Standalone HTML Exporters</h3>
             <p>Export glue viewers directly to interactive Plotly HTML pages. Exported HTML is completely standalone and can be used with any static file hosting service, to allow easily sharing interactive figures with your audience.</p>
 
@@ -55,13 +58,19 @@ <h3>Standalone HTML Exporters</h3>
 
         <section class="4u 12u(narrower)">
           <div class="box highlight">
+            <div class="highlight-image-container">
+              <img id="chart-studio-logo" class="highlight-image" height=150 src="assets/img/chart_studio.svg">
+            </div>
             <h3>Chart Studio Exporter</h3>
             <p>Export a Qt glue session to Plotly's <a href="https://chart-studio.plotly.com">Chart Studio</a></p>
           </div>
         </section>
 
         <section class="4u 12u(narrower)">
           <div class="box highlight">
+            <div class="highlight-image-container">
+              <img id="histogram-viewer-image" class="highlight-image" src="assets/img/HistogramViewer.png">
+            </div>
             <h3>Viewers</h3>
             <p>Two experimental Plotly-powered viewers which can be used with glue-jupyter: a scatter viewer and a histogram viewer. See the examples below for guidance on how to use these in your project.</p>
           </div>
@@ -83,23 +92,46 @@ <h2>Quickstart</h2>
     <section id="html-exporters" class="nav-item container">
       <h2>HTML Exporters</h2>
       <p>The HTML exporters are exposed as viewer tools in both the Qt and Jupyter versions of glue.</p>
-      <p>For Qt glue, the exporters are located in the "save" tool menu:</p>
-      <img src="assets/img/QtToolbarExport.gif">
-      <p>The Jupyter glue viewers don't yet support subtools, so the Plotly exporters are top-level tools in the toolbar:</p>
-      <img src="assets/img/BqplotToolbarHighlighted.png">
+
+      <div class="row 200%">
+        <section class="6u 12u(narrower)">
+          <p>For Qt glue, the exporters are located in the "save" tool menu:</p>
+          <img src="assets/img/QtToolbarExport.gif">
+        </section>
+        <section class="6u 12u(narrower)">
+          <p>The Jupyter glue viewers don't yet support subtools, so the Plotly exporters are top-level tools in the toolbar:</p>
+          <img src="assets/img/BqplotToolbarHighlighted.png">
+        </section>
+      </div>
+
+      <h3>Supported viewers</h3>
       <p>HTML export is supported for a variety of glue viewers:</p>
       <ul>
         <li>All built-in viewers in Qt glue: scatter, histogram, profile, image, dendrogram, and table</li>
         <li>The 3D scatter and volume viewers from <a href="https://docs.glueviz.org/en/stable/gui_guide/3d_viewers.html">glue-vispy-viewers</a></li>
         <li>Several of the glue-jupyter bqplot viewers: scatter, image, profile, and histogram</li>
       </ul>
+
+      <h3>Example</h3>
+      <p>The figure below is an example of an interactive Plotly graph that was exported directly from glue!</p>
+      <div id="airplanes-container">
+        <iframe id="airplanes" src="airplanes.html" scrolling="no"></iframe>
+      </div>
     </section>
 
     <section id="chart-studio" class="nav-item container">
       <h2>Chart Studio Exporter</h2>
       <p>The Chart Studio exporter allows exporting a Qt glue session to Chart Studio, provided that all of the viewers in the session are supported. Currently, we support the following Qt viewers: scatter, histogram, profile, and dendrogram.</p>
-      <p>To access the exporter in Qt glue, navigate to File &gt; Advanced Exporters &gt; Plotly</p>
-      <img src="assets/img/QtChartStudioExport.gif">
+      <div class="row 200%">
+        <section class="6u 12u(narrower)">
+          <p>To access the exporter in Qt glue, navigate to File &gt; Advanced Exporters &gt; Plotly:</p>
+          <img src="assets/img/QtChartStudioExport.gif">
+        </section>
+        <section class="6u 12u(narrower)">
+          <p>Watch a video demonstrating the Chart Studio exporter in action:</p>
+          <iframe width="560" height="315" src="https://www.youtube.com/embed/-jqB7whGuvs?si=Zm1sssNSKqEN36X9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        </section>
+      </div>
     </section>
 
     <section id="viewers" class="nav-item container">