4d2e328b12
- Available cameras can be added with a specific path - Individual cameras show connection status - Individual cameras show a list of alternate paths
451 lines
21 KiB
HTML
451 lines
21 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link rel="stylesheet" href="coreui.min.css">
|
|
<link rel="stylesheet" href="frcvision.css">
|
|
<link rel="icon" type="image/png" sizes="128x128" href="wpilib.png">
|
|
|
|
<title>WPILib FRCVision Raspberry PI Configuration</title>
|
|
</head>
|
|
<body class="app header-fixed sidebar-md-show sidebar-fixed">
|
|
<header class="app-header navbar">
|
|
<a class="navbar-brand" href="#">
|
|
<img src="wpilib.png" class="img-fluid ml-2 mr-2 brand-icon" alt="WPILib">
|
|
FRCVision-rPi
|
|
</a>
|
|
<form class="form-inline">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-secondary active" id="systemReadOnly" aria-pressed="true" data-loading-text="<i class='spin' data-feather='loader'></i> Read-Only">Read-Only</button>
|
|
<button type="button" class="btn btn-secondary" id="systemWritable" aria-pressed="false" data-loading-text="<i class='spin' data-feather='loader'></i> Writable">Writable</button>
|
|
</div>
|
|
</form>
|
|
<span class="navbar-text mr-2">
|
|
<span class="badge badge-secondary" id="connectionBadge">Disconnected</span>
|
|
</span>
|
|
</header>
|
|
|
|
<div class="app-body">
|
|
<!-- Sidebar -->
|
|
<div class="sidebar">
|
|
<nav class="sidebar-nav">
|
|
<ul class="nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="system-status-tab" data-toggle="tab" href="#system-status">
|
|
<i class="nav-icon" data-feather="info"></i>
|
|
System Status
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="vision-status-tab" data-toggle="tab" href="#vision-status">
|
|
<i class="nav-icon" data-feather="camera"></i>
|
|
Vision Status
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="network-settings-tab" data-toggle="tab" href="#network-settings">
|
|
<i class="nav-icon" data-feather="settings"></i>
|
|
Network Settings
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="vision-settings-tab" data-toggle="tab" href="#vision-settings">
|
|
<i class="nav-icon" data-feather="sliders"></i>
|
|
Vision Settings
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="application-tab" data-toggle="tab" href="#application">
|
|
<i class="nav-icon" data-feather="cpu"></i>
|
|
Application
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Main Pane -->
|
|
<main class="main">
|
|
<span id="status-content"></span>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<!-- System Status -->
|
|
<div class="tab-pane show active" id="system-status" role="tabpanel" aria-labelledby="system-status-tab">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" style="width: 50%;"></th>
|
|
<th scope="col" style="width: 25%;">1 sec</th>
|
|
<th scope="col" style="width: 25%;">5 sec</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Memory (MB Free)</th>
|
|
<td id="systemMemoryFree1s"></td>
|
|
<td id="systemMemoryFree5s"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Memory (MB Avail)</th>
|
|
<td id="systemMemoryAvail1s"></td>
|
|
<td id="systemMemoryAvail5s"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">CPU (% User)</th>
|
|
<td id="systemCpuUser1s"></td>
|
|
<td id="systemCpuUser5s"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">CPU (% System)</th>
|
|
<td id="systemCpuSystem1s"></td>
|
|
<td id="systemCpuSystem5s"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">CPU (% Idle)</th>
|
|
<td id="systemCpuIdle1s"></td>
|
|
<td id="systemCpuIdle5s"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Network (Kbps)</th>
|
|
<td id="systemNetwork1s"></td>
|
|
<td id="systemNetwork5s"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<button type="button" class="btn btn-warning" id="systemRestart">
|
|
<i data-feather="rotate-cw"></i>
|
|
Restart System
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Vision Status -->
|
|
<div class="tab-pane" id="vision-status" role="tabpanel" aria-labelledby="vision-status-tab">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto mr-auto">
|
|
<h6>Background Service (Automatic Restart)</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<span class="badge badge-dark align-top" id="visionServiceStatus">Unknown Status</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button" class="btn btn-sm btn-primary" id="visionUp">
|
|
<span data-feather="play-circle"></span>
|
|
Up
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="visionDown">
|
|
<span data-feather="stop-circle"></span>
|
|
Down
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-warning" id="visionTerm">
|
|
<span data-feather="slash"></span>
|
|
Terminate
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-danger" id="visionKill">
|
|
<span data-feather="x"></span>
|
|
Kill
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto mr-auto">
|
|
<h6>Console Output</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label for="visionLogEnabled">
|
|
Enable
|
|
</label>
|
|
<label class="switch switch-sm switch-pill switch-primary align-bottom">
|
|
<input type="checkbox" class="switch-input" id="visionLogEnabled">
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<pre class="log" id="visionConsole"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Settings -->
|
|
<div class="tab-pane" id="network-settings" role="tabpanel" aria-labelledby="network-settings-tab">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="networkApproach">Configure IPv4 Address</label>
|
|
<select class="form-control" id="networkApproach">
|
|
<option value="dhcp">DHCP</option>
|
|
<option value="static">Static</option>
|
|
<option value="dhcp-fallback">DHCP with Static Fallback</option>
|
|
</select>
|
|
</div>
|
|
<div class="collapse" id="networkIpDetails">
|
|
<div class="form-group">
|
|
<label for="networkAddress">IPv4 Address</label>
|
|
<input type=text" class="form-control" id="networkAddress">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="networkMask">Subnet Mask</label>
|
|
<input type=text" class="form-control" id="networkMask">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="networkGateway">Gateway</label>
|
|
<input type=text" class="form-control" id="networkGateway">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="networkDNS">DNS Server</label>
|
|
<input type=text" class="form-control" id="networkDNS">
|
|
</div>
|
|
</div>
|
|
<button id="networkSave" type="button" class="btn btn-primary" data-loading-text="<i class='spin' data-feather='loader'></i> Saving" disabled>
|
|
<span data-feather="save"></span>
|
|
Save
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Vision Settings -->
|
|
<div class="tab-pane" id="vision-settings" role="tabpanel" aria-labelledby="vision-settings-tab">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6>Network Tables</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="visionClient">
|
|
Client
|
|
</label>
|
|
<label class="switch switch-sm switch-pill switch-primary align-bottom">
|
|
<input type="checkbox" class="switch-input" id="visionClient" checked>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="collapse show" id="visionClientDetails">
|
|
<div class="form-group">
|
|
<label for="visionTeam">Team Number</label>
|
|
<input type=text" class="form-control" id="visionTeam">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="accordion" id="cameras">
|
|
<div class="card" style="display:none" id="cameraNEW">
|
|
<div class="card-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto mr-auto">
|
|
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#cameraBodyNEW">
|
|
<h6 class="cameraTitle">Camera NEW</h6>
|
|
</button>
|
|
<span class="badge badge-secondary align-text-top cameraConnectionBadge">Disconnected</span>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="btn btn-sm btn-success cameraStream" href="" target="_blank" role="button">
|
|
<span data-feather="play"></span>
|
|
Open Stream
|
|
</a>
|
|
<button type="button" class="btn btn-sm btn-danger cameraRemove">
|
|
<span data-feather="x"></span>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="cameraBodyNEW" data-parent="#cameras">
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="form-row">
|
|
<div class="form-group col col-4">
|
|
<label for="cameraNameNEW">Name</label>
|
|
<input type="text" class="form-control cameraName" id="cameraNameNEW">
|
|
</div>
|
|
<div class="form-group col">
|
|
<label for="cameraPathNEW">Path</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control cameraPath" id="cameraPathNEW">
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn dropdown-toggle cameraAlternatePaths" id="cameraAlternatePathsNEW" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled="true">
|
|
Alternate Path
|
|
</button>
|
|
<div class="dropdown-menu cameraAlternatePathsList" aria-labelledby="cameraAlternatePathsNEW">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input cameraSettingsFile" accept=".json,text/json,application/json" id="cameraSettingsFileNEW">
|
|
<label class="custom-file-label" for="cameraSettingsFileNEW">Load Source Config From JSON File</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<button class="btn btn-sm cameraCopyConfig" type="button">
|
|
<span data-feather="copy"></span>
|
|
Copy Source Config From Camera
|
|
</button>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-auto">
|
|
<label for="cameraPixelFormatNEW">Pixel Format</label>
|
|
<select class="form-control cameraPixelFormat" id="cameraPixelFormatNEW">
|
|
<option value="mjpeg">MJPEG</option>
|
|
<option value="yuyv">YUYV</option>
|
|
<option value="rgb565">RGB565</option>
|
|
<option value="bgr">BGR</option>
|
|
<option value="gray">Gray</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-auto">
|
|
<label for="cameraWidthNEW">Width</label>
|
|
<input type="number" class="form-control cameraWidth" id="cameraWidthNEW" size="5">
|
|
</div>
|
|
<div class="form-group col-auto">
|
|
<label for="cameraHeightNEW">Height</label>
|
|
<input type="number" class="form-control cameraHeight" id="cameraHeightNEW" size="5">
|
|
</div>
|
|
<div class="form-group col-auto">
|
|
<label for="cameraFpsNEW">FPS</label>
|
|
<input type="number" class="form-control cameraFps" id="cameraFpsNEW" size="4">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-auto">
|
|
<label for="cameraBrightnessNEW">Brightness</label>
|
|
<input type="text" class="form-control cameraBrightness" id="cameraBrightnessNEW" size="4">
|
|
</div>
|
|
<div class="form-group col-auto">
|
|
<label for="cameraWhiteBalanceNEW">White Balance</label>
|
|
<input type="text" class="form-control cameraWhiteBalance" id="cameraWhiteBalanceNEW" size="4">
|
|
</div>
|
|
<div class="form-group col-auto">
|
|
<label for="cameraExposureNEW">Exposure</label>
|
|
<input type="text" class="form-control cameraExposure" id="cameraExposureNEW" size="4">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cameraPropertiesNEW">Custom Properties JSON</label>
|
|
<textarea class="form-control cameraProperties" id="cameraPropertiesNEW" rows="3"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-auto mr-auto">
|
|
<button type="button" class="btn btn-primary" id="visionSave">
|
|
<span data-feather="save"></span>
|
|
Save
|
|
</button>
|
|
<button type="button" class="btn btn-warning" id="visionDiscard">
|
|
<span data-feather="x"></span>
|
|
Discard Changes
|
|
</button>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="dropdown">
|
|
<button type="button" class="btn btn-info dropdown-toggle" id="addConnectedCamera" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled="true">
|
|
<span data-feather="plus"></span>
|
|
Add Connected Camera
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="addConnectedCamera" id="addConnectedCameraList">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="button" class="btn btn-success" id="addCamera">
|
|
<span data-feather="plus"></span>
|
|
Add Other Camera
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Application -->
|
|
<div class="tab-pane" id="application" role="tabpanel" aria-labelledby="application-tab">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6>Vision Application Configuration</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="applicationType">Application</label>
|
|
<select class="form-control" id="applicationType">
|
|
<option value="builtin">Built-in multi-camera streaming</option>
|
|
<option value="custom">Custom</option>
|
|
<option value="example-java">Java example (must be built to work)</option>
|
|
<option value="example-cpp">C++ example (must be built to work)</option>
|
|
<option value="example-python">Python example</option>
|
|
<option value="upload-java">Uploaded Java jar</option>
|
|
<option value="upload-cpp">Uploaded C++ executable</option>
|
|
<option value="upload-python">Uploaded Python file</option>
|
|
</select>
|
|
</div>
|
|
<div class="collapse" id="applicationUpload">
|
|
<div class="form-group">
|
|
<label for="applicationFile">Upload executable file</label>
|
|
<input type="file" class="form-control-file" id="applicationFile">
|
|
</div>
|
|
</div>
|
|
<button id="applicationSave" type="button" class="btn btn-primary" data-loading-text="<i class='spin' data-feather='loader'></i> Saving" disabled>
|
|
<span data-feather="save"></span>
|
|
Save
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6>Example Programs</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<a class="btn btn-sm btn-success" href="java-multiCameraServer.zip" target="_blank" role="button">
|
|
<span data-feather="download"></span>
|
|
Download Java Example
|
|
</a>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="btn btn-sm btn-success" href="cpp-multiCameraServer.zip" target="_blank" role="button">
|
|
<span data-feather="download"></span>
|
|
Download C++ Example
|
|
</a>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="btn btn-sm btn-success" href="python-multiCameraServer.zip" target="_blank" role="button">
|
|
<span data-feather="download"></span>
|
|
Download Python Example
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="jquery-3.3.1.slim.min.js"></script>
|
|
<script type="text/javascript" src="popper.min.js"></script>
|
|
<script type="text/javascript" src="bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="coreui.min.js"></script>
|
|
<script type="text/javascript" src="feather.min.js"></script>
|
|
<script>
|
|
feather.replace()
|
|
</script>
|
|
<script type="text/javascript" src="frcvision.js"></script>
|
|
</body>
|
|
</html>
|