852957a7de
- Contains the host code with a protocol implementation, data analyser and web-based visualiser
102 lines
4.1 KiB
HTML
102 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MiniProfiler</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/d3-flame-graph/4.1.3/d3-flamegraph.css">
|
|
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-flame-graph/4.1.3/d3-flamegraph.min.js"></script>
|
|
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header>
|
|
<h1>MiniProfiler</h1>
|
|
<p class="subtitle">Real-time Embedded Profiling Visualization</p>
|
|
</header>
|
|
|
|
<!-- Control Panel -->
|
|
<div class="control-panel">
|
|
<div class="connection-controls">
|
|
<input type="text" id="serial-port" placeholder="/dev/ttyUSB0 or COM3" value="/dev/ttyUSB0">
|
|
<input type="number" id="baudrate" placeholder="Baudrate" value="115200">
|
|
<input type="text" id="elf-path" placeholder="Path to .elf file (optional)">
|
|
<button id="connect-btn" onclick="toggleConnection()">Connect</button>
|
|
</div>
|
|
|
|
<div class="profiling-controls">
|
|
<button id="start-btn" onclick="startProfiling()" disabled>Start Profiling</button>
|
|
<button id="stop-btn" onclick="stopProfiling()" disabled>Stop Profiling</button>
|
|
<button id="clear-btn" onclick="clearData()" disabled>Clear Data</button>
|
|
<button id="reset-btn" onclick="resetBuffers()" disabled>Reset Buffers</button>
|
|
</div>
|
|
|
|
<div class="status-display">
|
|
<span class="status-indicator" id="connection-status">●</span>
|
|
<span id="status-text">Disconnected</span>
|
|
<span id="record-count">Records: 0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata Display -->
|
|
<div id="metadata-panel" class="metadata-panel" style="display: none;">
|
|
<h3>Device Information</h3>
|
|
<div id="metadata-content"></div>
|
|
</div>
|
|
|
|
<!-- Summary Panel -->
|
|
<div id="summary-panel" class="summary-panel">
|
|
<h3>Summary</h3>
|
|
<div id="summary-content">
|
|
<p>No profiling data available</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab-button active" onclick="showTab('flamegraph')">Flame Graph</button>
|
|
<button class="tab-button" onclick="showTab('timeline')">Timeline</button>
|
|
<button class="tab-button" onclick="showTab('statistics')">Statistics</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div id="flamegraph-tab" class="tab-content active">
|
|
<div id="flamegraph"></div>
|
|
</div>
|
|
|
|
<div id="timeline-tab" class="tab-content">
|
|
<div id="timeline"></div>
|
|
</div>
|
|
|
|
<div id="statistics-tab" class="tab-content">
|
|
<div class="table-container">
|
|
<table id="statistics-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Function</th>
|
|
<th>Address</th>
|
|
<th>Calls</th>
|
|
<th>Total Time (μs)</th>
|
|
<th>Avg Time (μs)</th>
|
|
<th>Min Time (μs)</th>
|
|
<th>Max Time (μs)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="statistics-body">
|
|
<tr>
|
|
<td colspan="7">No data available</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
</html>
|