3D Interactive Visualization
====================

An interactive 3D visualization of the coronal magnetic field combining
multiple elements: the coronal hole map at the inner boundary,
the :math:`B_r = 0` current sheet, and traced field lines.

Use the mouse to rotate, scroll to zoom, and shift + left-click to pan.
Press **c** to toggle the neutral sheet, **l** to toggle lat/lon lines, **f** to toggle field lines.

.. admonition:: Run
   :class: note

   **bgtest_superlowres** — CR2121,
   MAST3, Steady-State

----


.. raw:: html

   <style>
     /* ---- layout ---- */
     .p3d-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
     .p3d-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

     /* ---- slider ---- */
     .p3d-slider-wrap { flex: 1 1 300px; display: flex; flex-direction: column; gap: 3px; }
     #p3d-slider { width: 100%; cursor: pointer; }
     #p3d-time-label {
       font-size: 0.82em; font-family: monospace; color: var(--md-default-fg-color);
       white-space: nowrap;
     }

     /* ---- generic button base ---- */
     .p3d-btn {
       padding: 6px 14px; cursor: pointer; border: 1px solid #bbb;
       background: #f5f5f5; border-radius: 4px; font-size: 0.9em;
       color: #333;
       transition: background 0.1s, color 0.1s;
     }
     .p3d-btn:hover { background: #e8e8e8; }

     /* ---- spacecraft view buttons (separate row, toggleable) ---- */
     .p3d-sc-btn { border-color: #7aabdb; }
     .p3d-sc-btn.active {
       background: #1a6fad; color: #fff; border-color: #1a6fad; font-weight: 600;
     }

     /* ---- playback button — teal (animate) / red (stop) ---- */
     .p3d-play-btn {
       padding: 6px 16px; cursor: pointer; border: 1px solid #5aab8e;
       background: #eaf7f2; border-radius: 4px; font-size: 0.9em; color: #1a6b4a;
       font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s;
     }
     .p3d-play-btn:hover { background: #cceedd; }
     .p3d-play-btn.stopping {
       border-color: #c0392b; background: #fdecea; color: #a93226;
     }
     .p3d-play-btn.stopping:hover { background: #f5c6c2; }

     /* ---- divider between zoom and playback ---- */
     .p3d-divider {
       width: 1px; height: 28px; background: #ccc; margin: 0 4px;
     }

     /* ---- scene container ---- */
     .p3d-scene-wrap {
       width: 100%; height: 75vh; min-height: 500px;
       border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden;
     }
     .p3d-scene-wrap iframe { border: none; display: block; width: 100%; height: 100%; }
   </style>

   <div class="p3d-controls">

     <!-- Row 1: time slider -->
     <div class="p3d-row">
       <div class="p3d-slider-wrap">
         <input type="range" id="p3d-slider" min="0" max="71" value="0"
                oninput="p3dSetStep(+this.value)">
         <span id="p3d-time-label"></span>
       </div>
     </div>

     <!-- Row 2: spacecraft view buttons -->
     <div class="p3d-row">
       <span style="font-size:0.85em;color:var(--md-default-fg-color);margin-right:2px;">View from:</span>
       <button class="p3d-btn p3d-sc-btn" id="p3d-sc-0"
               onclick="p3dSelectSc('Earth', this)">Earth</button>
       <button class="p3d-btn p3d-sc-btn" id="p3d-sc-1"
               onclick="p3dSelectSc('STEREO-A', this)">STEREO-A</button>
     </div>

     <!-- Row 3: zoom controls | playback controls -->
     <div class="p3d-row">
       <button class="p3d-btn" onclick="p3dMsg('zoom_in')">Zoom In</button>
       <button class="p3d-btn" onclick="p3dMsg('zoom_out')">Zoom Out</button>
       <div class="p3d-divider"></div>
       <button class="p3d-play-btn" id="p3d-anim-btn" onclick="p3dToggleAnim()">&#9654; Animate</button>
     </div>

   </div>

   <!-- VTK scene iframe -->
   <div class="p3d-scene-wrap">
     <iframe id="vtk-scene"
             src="_static/plot3d_scene.html"
             allowfullscreen></iframe>
   </div>

   <script>
   (function () {
     /* Timeline injected from Python — 72 entries, one per ~5° CR longitude. */
     var TIMELINE = [{"time": "2012-03-04T14:46:20", "cr_lon": 360.0, "views": {"Earth": {"position": [211.5515, 0.0, -26.9107], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-67.7662, 194.1889, 8.3618], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-05T00:00:12", "cr_lon": 354.93, "views": {"Earth": {"position": [210.7444, -18.6874, -26.9173], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-50.3976, 199.3911, 8.5381], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-05T09:14:03", "cr_lon": 349.86, "views": {"Earth": {"position": [208.2898, -37.2325, -26.9228], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-32.6397, 203.0429, 8.7139], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-05T18:27:55", "cr_lon": 344.79, "views": {"Earth": {"position": [204.2065, -55.4904, -26.927], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-14.6303, 205.1164, 8.8894], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-06T03:41:47", "cr_lon": 339.72, "views": {"Earth": {"position": [198.5261, -73.3185, -26.9301], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [3.4906, 205.5958, 9.0644], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-06T12:55:38", "cr_lon": 334.65, "views": {"Earth": {"position": [191.2926, -90.5771, -26.9319], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [21.582, 204.4774, 9.2389], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-06T22:09:30", "cr_lon": 329.58, "views": {"Earth": {"position": [182.562, -107.1313, -26.9326], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [39.5033, 201.7702, 9.413], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-07T07:23:21", "cr_lon": 324.51, "views": {"Earth": {"position": [172.4023, -122.8516, -26.9321], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [57.1154, 197.4955, 9.5866], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-07T16:37:13", "cr_lon": 319.44, "views": {"Earth": {"position": [160.8924, -137.6149, -26.9303], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [74.2814, 191.6867, 9.7598], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-08T01:51:05", "cr_lon": 314.37, "views": {"Earth": {"position": [148.1221, -151.3055, -26.9274], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [90.868, 184.3892, 9.9324], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-08T11:04:56", "cr_lon": 309.3, "views": {"Earth": {"position": [134.1908, -163.8162, -26.9233], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [106.7463, 175.66, 10.1046], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-08T20:18:48", "cr_lon": 304.23, "views": {"Earth": {"position": [119.2071, -175.0489, -26.918], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [121.793, 165.5671, 10.2762], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-09T05:32:39", "cr_lon": 299.15, "views": {"Earth": {"position": [103.2879, -184.9154, -26.9115], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [135.8915, 154.1891, 10.4474], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-09T14:46:31", "cr_lon": 294.08, "views": {"Earth": {"position": [86.5573, -193.3383, -26.9038], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [148.9323, 141.6146, 10.618], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-10T00:00:23", "cr_lon": 289.01, "views": {"Earth": {"position": [69.1459, -200.2512, -26.8949], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [160.8142, 127.9415, 10.7881], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-10T09:14:14", "cr_lon": 283.94, "views": {"Earth": {"position": [51.1897, -205.5998, -26.8848], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [171.445, 113.2763, 10.9576], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-10T18:28:06", "cr_lon": 278.87, "views": {"Earth": {"position": [32.8289, -209.3419, -26.8736], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [180.7425, 97.733, 11.1266], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-11T03:41:57", "cr_lon": 273.8, "views": {"Earth": {"position": [14.2069, -211.4477, -26.8611], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [188.6345, 81.4326, 11.2951], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-11T12:55:49", "cr_lon": 268.73, "views": {"Earth": {"position": [-4.5308, -211.9003, -26.8475], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [195.0599, 64.5018, 11.4629], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-11T22:09:41", "cr_lon": 263.66, "views": {"Earth": {"position": [-23.2376, -210.6957, -26.8326], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [199.9692, 47.0722, 11.6302], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-12T07:23:32", "cr_lon": 258.59, "views": {"Earth": {"position": [-41.7673, -207.8429, -26.8166], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [203.3243, 29.2794, 11.797], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-12T16:37:24", "cr_lon": 253.52, "views": {"Earth": {"position": [-59.9749, -203.3637, -26.7994], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [205.0994, 11.2615, 11.9631], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-13T01:51:15", "cr_lon": 248.45, "views": {"Earth": {"position": [-77.7181, -197.2927, -26.781], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [205.2811, -6.8413, 12.1286], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-13T11:05:07", "cr_lon": 243.38, "views": {"Earth": {"position": [-94.8578, -189.6768, -26.7614], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [203.8682, -24.8884, 12.2936], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-13T20:18:59", "cr_lon": 238.31, "views": {"Earth": {"position": [-111.2599, -180.5753, -26.7406], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [200.8719, -42.7396, 12.4579], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-14T05:32:50", "cr_lon": 233.24, "views": {"Earth": {"position": [-126.7959, -170.0588, -26.7186], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [196.3157, -60.2564, 12.6216], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-14T14:46:42", "cr_lon": 228.17, "views": {"Earth": {"position": [-141.344, -158.2092, -26.6954], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [190.2352, -77.3027, 12.7847], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-15T00:00:33", "cr_lon": 223.1, "views": {"Earth": {"position": [-154.7902, -145.1188, -26.6711], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [182.6781, -93.7461, 12.9471], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-15T09:14:25", "cr_lon": 218.03, "views": {"Earth": {"position": [-167.0289, -130.8895, -26.6455], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [173.7031, -109.459, 13.1089], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-15T18:28:17", "cr_lon": 212.96, "views": {"Earth": {"position": [-177.964, -115.6324, -26.6188], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [163.3803, -124.3196, 13.27], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-16T03:42:08", "cr_lon": 207.89, "views": {"Earth": {"position": [-187.5097, -99.4664, -26.5909], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [151.7901, -138.2125, 13.4304], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-16T12:56:00", "cr_lon": 202.82, "views": {"Earth": {"position": [-195.5908, -82.5178, -26.5618], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [139.0226, -151.0299, 13.5902], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-16T22:09:51", "cr_lon": 197.75, "views": {"Earth": {"position": [-202.1437, -64.9188, -26.5314], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [125.1773, -162.6726, 13.7493], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-17T07:23:43", "cr_lon": 192.68, "views": {"Earth": {"position": [-207.1165, -46.8071, -26.5], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [110.3618, -173.0503, 13.9078], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-17T16:37:35", "cr_lon": 187.61, "views": {"Earth": {"position": [-210.47, -28.3241, -26.4673], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [94.6913, -182.0825, 14.0655], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-18T01:51:26", "cr_lon": 182.54, "views": {"Earth": {"position": [-212.1774, -9.6142, -26.4334], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [78.2878, -189.6995, 14.2225], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-18T11:05:18", "cr_lon": 177.46, "views": {"Earth": {"position": [-212.2247, 9.1761, -26.3984], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [61.2787, -195.8422, 14.3788], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-18T20:19:09", "cr_lon": 172.39, "views": {"Earth": {"position": [-210.6111, 27.8998, -26.3622], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [43.7962, -200.4632, 14.5344], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-19T05:33:01", "cr_lon": 167.32, "views": {"Earth": {"position": [-207.3487, 46.4105, -26.3248], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [25.9761, -203.527, 14.6893], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-19T14:46:53", "cr_lon": 162.25, "views": {"Earth": {"position": [-202.4625, 64.5633, -26.2862], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [7.9569, -205.0098, 14.8434], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-20T00:00:44", "cr_lon": 157.18, "views": {"Earth": {"position": [-195.9901, 82.2158, -26.2465], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-10.1215, -204.9006, 14.9968], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-20T09:14:36", "cr_lon": 152.11, "views": {"Earth": {"position": [-187.9818, 99.23, -26.2055], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-28.1187, -203.2004, 15.1495], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-20T18:28:27", "cr_lon": 147.04, "views": {"Earth": {"position": [-178.4997, 115.4722, -26.1634], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-45.8949, -199.9226, 15.3013], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-21T03:42:19", "cr_lon": 141.97, "views": {"Earth": {"position": [-167.6175, 130.8153, -26.1202], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-63.3122, -195.0931, 15.4525], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-21T12:56:11", "cr_lon": 136.9, "views": {"Earth": {"position": [-155.4199, 145.1387, -26.0757], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-80.2354, -188.7495, 15.6028], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-21T22:10:02", "cr_lon": 131.83, "views": {"Earth": {"position": [-142.0019, 158.3301, -26.0301], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-96.5333, -180.9414, 15.7524], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-22T07:23:54", "cr_lon": 126.76, "views": {"Earth": {"position": [-127.4683, 170.2858, -25.9834], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-112.0793, -171.7297, 15.9011], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-22T16:37:45", "cr_lon": 121.69, "views": {"Earth": {"position": [-111.9323, 180.9118, -25.9355], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-126.7529, -161.186, 16.0491], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-23T01:51:37", "cr_lon": 116.62, "views": {"Earth": {"position": [-95.5153, 190.1244, -25.8864], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-140.4403, -149.3924, 16.1963], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-23T11:05:29", "cr_lon": 111.55, "views": {"Earth": {"position": [-78.3455, 197.8511, -25.8362], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-153.0355, -136.4408, 16.3427], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-23T20:19:20", "cr_lon": 106.48, "views": {"Earth": {"position": [-60.557, 204.0308, -25.7848], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-164.4408, -122.4319, 16.4882], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-24T05:33:12", "cr_lon": 101.41, "views": {"Earth": {"position": [-42.289, 208.6146, -25.7323], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-174.5679, -107.4745, 16.633], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-24T14:47:03", "cr_lon": 96.34, "views": {"Earth": {"position": [-23.6842, 211.5661, -25.6786], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-183.3385, -91.685, 16.7768], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-25T00:00:55", "cr_lon": 91.27, "views": {"Earth": {"position": [-4.8883, 212.8616, -25.6238], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-190.6846, -75.1861, 16.9199], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-25T09:14:47", "cr_lon": 86.2, "views": {"Earth": {"position": [13.9516, 212.4904, -25.5678], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-196.5495, -58.1059, 17.0621], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-25T18:28:38", "cr_lon": 81.13, "views": {"Earth": {"position": [32.688, 210.4548, -25.5108], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-200.8878, -40.5771, 17.2035], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-26T03:42:30", "cr_lon": 76.06, "views": {"Earth": {"position": [51.1742, 206.7701, -25.4525], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-203.6663, -22.7358, 17.344], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-26T12:56:21", "cr_lon": 70.99, "views": {"Earth": {"position": [69.2652, 201.4646, -25.3932], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-204.8635, -4.7206, 17.4836], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-26T22:10:13", "cr_lon": 65.92, "views": {"Earth": {"position": [86.8192, 194.5793, -25.3327], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-204.4705, 13.3286, 17.6223], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-27T07:24:05", "cr_lon": 60.85, "views": {"Earth": {"position": [103.6986, 186.1675, -25.2712], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-202.4905, 31.2719, 17.7602], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-27T16:37:56", "cr_lon": 55.77, "views": {"Earth": {"position": [119.7708, 176.2947, -25.2085], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-198.9392, 48.9699, 17.8972], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-28T01:51:48", "cr_lon": 50.7, "views": {"Earth": {"position": [134.9098, 165.0376, -25.1447], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-193.8443, 66.2853, 18.0333], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-28T11:05:39", "cr_lon": 45.63, "views": {"Earth": {"position": [148.9965, 152.4839, -25.0797], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-187.2458, 83.0839, 18.1684], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-28T20:19:31", "cr_lon": 40.56, "views": {"Earth": {"position": [161.9201, 138.7314, -25.0137], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-179.195, 99.2353, 18.3027], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-29T05:33:23", "cr_lon": 35.49, "views": {"Earth": {"position": [173.5792, 123.8876, -24.9466], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-169.7547, 114.6144, 18.4361], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-29T14:47:14", "cr_lon": 30.42, "views": {"Earth": {"position": [183.8817, 108.0682, -24.8784], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-158.9982, 129.1018, 18.5685], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-30T00:01:06", "cr_lon": 25.35, "views": {"Earth": {"position": [192.7465, 91.3969, -24.8091], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-147.0094, 142.5854, 18.7], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-30T09:14:57", "cr_lon": 20.28, "views": {"Earth": {"position": [200.1037, 74.004, -24.7387], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-133.8815, 154.9606, 18.8306], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-30T18:28:49", "cr_lon": 15.21, "views": {"Earth": {"position": [205.8949, 56.0255, -24.6672], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-119.7164, 166.1316, 18.9602], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-31T03:42:41", "cr_lon": 10.14, "views": {"Earth": {"position": [210.0742, 37.6021, -24.5947], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-104.6242, 176.012, 19.0889], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-31T12:56:32", "cr_lon": 5.07, "views": {"Earth": {"position": [212.6084, 18.8781, -24.521], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-88.7223, 184.5252, 19.2166], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}, {"time": "2012-03-31T22:10:24", "cr_lon": 0.0, "views": {"Earth": {"position": [213.4768, 0.0, -24.4463], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}, "STEREO-A": {"position": [-72.134, 191.6054, 19.3434], "focalPoint": [0.0, 0.0, 0.0], "viewUp": [0.0, 0.0, 1.0], "viewAngle": 30.0}}}];

     var currentStep = 0;
     var currentSc   = null;
     var animTimer   = null;
     var ANIM_FPS    = 10;   /* frames per second during animation */

     /* ---- helpers ---- */
     function iframe() { return document.getElementById('vtk-scene'); }

     function p3dMsg(data) {
       iframe().contentWindow.postMessage(data, '*');
     }

     function sendCamera(step, scName) {
       if (!scName || !TIMELINE[step]) return;
       var view = TIMELINE[step].views[scName];
       if (!view) return;
       iframe().contentWindow.postMessage({
         action:     'set_camera_direct',
         position:   view.position,
         focalPoint: view.focalPoint,
         viewUp:     view.viewUp,
         viewAngle:  view.viewAngle
       }, '*');
     }

     function updateLabel(step) {
       var e = TIMELINE[step];
       document.getElementById('p3d-time-label').textContent =
         e.time + ' UTC  |  CR Lon: ' + e.cr_lon + '\u00b0';
     }

     /* ---- public handlers (called from inline onclick) ---- */
     window.p3dSetStep = function (step) {
       currentStep = step;
       document.getElementById('p3d-slider').value = step;
       updateLabel(step);
       sendCamera(step, currentSc);
     };

     window.p3dSelectSc = function (name, btn) {
       currentSc = name;
       document.querySelectorAll('.p3d-sc-btn').forEach(function (b) {
         b.classList.remove('active');
       });
       btn.classList.add('active');
       sendCamera(currentStep, name);
     };

     window.p3dToggleAnim = function () {
       var btn = document.getElementById('p3d-anim-btn');
       if (animTimer) {
         /* currently playing — stop */
         clearInterval(animTimer);
         animTimer = null;
         btn.classList.remove('stopping');
         btn.innerHTML = '&#9654; Animate';
       } else {
         /* currently stopped — start */
         btn.classList.add('stopping');
         btn.innerHTML = '&#9646;&#9646; Stop';
         animTimer = setInterval(function () {
           currentStep = (currentStep + 1) % TIMELINE.length;
           p3dSetStep(currentStep);
         }, Math.round(1000 / ANIM_FPS));
       }
     };

     window.p3dMsg = p3dMsg;

     /* Initialise label on load */
     if (TIMELINE.length) updateLabel(0);

     /* Auto-select Earth once the VTK iframe is ready. */
     iframe().addEventListener('load', function () {
       var btns = document.querySelectorAll('.p3d-sc-btn');
       for (var i = 0; i < btns.length; i++) {
         if (btns[i].textContent.trim() === 'Earth') {
           p3dSelectSc('Earth', btns[i]);
           break;
         }
       }
     });
   }());
   </script>