| <!doctype html> |
| <!-- |
| Copyright 2022 The ChromiumOS Authors |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <html> |
| <head> |
| <style type="text/css"> |
| |
| |
| .plot-list { |
| border: 3px solid red; |
| display: flex; |
| flex-direction: column; |
| resize: vertical; |
| min-height: 300px; |
| } |
| |
| .plot-row { |
| border: 1px solid black; |
| border-bottom: 3px solid black; |
| min-height: 50px; |
| height: 300px; |
| overflow-x: hidden; |
| overflow-y: auto; |
| display: inline-flex; |
| resize: vertical; |
| width: 100%; |
| font-size: 14px; |
| margin: 0px; |
| padding: 0px; |
| } |
| |
| .control-menu { |
| background-color: #ddd; |
| display: inline-flex; |
| flex-direction: column; |
| overflow-x: hidden; |
| overflow-y: auto; |
| } |
| |
| .control-menu-hidden { |
| display: none; |
| } |
| |
| .control-collapse { |
| width: max(1%, 10px); |
| background-color: #aaa; |
| display: inline-flex; |
| } |
| |
| .menu-row { |
| background-color: #bbb; |
| display: inline-flex; |
| padding: 3px; |
| margin: 1px; |
| } |
| |
| .data-selector-table { |
| display: inline-flex; |
| } |
| |
| .plot-area { |
| background-color: #eee; |
| border: none; |
| display: inline-flex; |
| flex-basis : 0; |
| flex-direction: column; |
| flex-grow : 1; |
| flex-shrink : 1; |
| margin: 0px; |
| padding: 0px; |
| } |
| |
| .bottom { |
| min-height: 250px; |
| } |
| </style> |
| |
| </head> |
| |
| <body> |
| |
| <template id="template-selector-entry"> |
| <div class="data-selector-entry"></div> |
| </template> |
| |
| |
| <template id="template-selector-column"> |
| <div class="data-selector-column"> |
| <div class="data-selector-header"></div> |
| </div> |
| </template> |
| |
| <template id="template-plot-row"> |
| <div class='plot-row'> |
| <div title='Show and hide the control menu' class='control-collapse'></div> |
| <div class='control-menu'> |
| <div class='menu-row'> |
| <button title='Copy this plot row', type='button' class='copy-button'> |
| Copy Plot</button> |
| </div> |
| <div title='Select which datasets to plot' class='data-selector-table'></div> |
| </div> |
| <div class='plot-area'></div> |
| </div> |
| </template> |
| |
| |
| <div class="root"> |
| <div class="top-menu"> |
| <input type="button" value="Load JSON" |
| onclick="parallax.controlLoadJson();"> |
| <input type="button" value="Save JSON" |
| onclick="parallax.controlSaveJson();"> |
| <input type="button" value="Save HTML" |
| onclick="parallax.controlSaveHtmlData();"> |
| <input type="button" value="Screenshot" |
| onclick="parallax.controlTakeScreenshot(true);" |
| oncontextmenu="parallax.controlTakeScreenshot(false); return false;"> |
| <input type="text" id="server-ip" value="http://localhost:9000"> |
| <input type="button" value="Toggle Stream" |
| onclick="parallax.controlStream();"> |
| </div> |
| <hr class="solid"></hr> |
| <div class="results-list"></div> |
| <hr class="solid"></hr> |
| <div class="plot-list"></div> |
| <div class="bottom"></div> |
| </div> |
| |
| <script src="https://www.gstatic.com/charts/loader.js"></script> |
| <script src="https://www.gstatic.com/external_hosted/html2canvas/html2canvas.min.js"></script> |
| |
| <% if(htmlWebpackPlugin.options.templateParameters.includes("test")){ %> |
| <!-- Browser based unit tests. --> |
| <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css"></link> |
| <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> |
| <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> |
| <script src="../node_modules/jasmine-core/lib/jasmine-core/boot0.js"></script> |
| <script src="../node_modules/jasmine-core/lib/jasmine-core/boot1.js"></script> |
| <% } %> |
| |
| <script type="text/javascript"> |
| /* Compiled code insertion point. */ |
| <%= compilation.assets["main.js"].source() %> |
| |
| /* {BEGIN_PARALLAX_DATA_INJECTION} */ |
| /* {END_PARALLAX_DATA_INJECTION} */ |
| if (typeof PARALLAX_DATA !== 'undefined') { |
| parallax.parseMessages(PARALLAX_DATA); |
| } |
| </script> |
| |
| <% if(htmlWebpackPlugin.options.templateParameters.includes("embedded")){ %> |
| <!-- External file provides embedded data. --> |
| <script src="../frontend/embedded.js"></script> |
| <% } %> |
| |
| </body> |
| </html> |
