<!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>
</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">
<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>
<input type="text" class="form-control cameraPath" id="cameraPathNEW">
</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-secondary" id="visionDiscard">
<span data-feather="x"></span>
Discard Changes
</button>
</div>
<div class="col-auto">
<button type="button" class="btn btn-success" id="addCamera">
<span data-feather="plus"></span>
Add 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>