1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-19 14:25:14 +03:00
betaflight-configurator/main.html
Dominic Clifton d269d60391 Improve user experience by adding tabs for the welcome and firmware
flasher.

The welcome (aka 'landing') and firmware flasher were already modelled
as tabs but were never displayed as tabs.

The UI didn't make sense when the whether the welcome message or
firmware flasher was displayed since there was no active tab or other
indication.
2015-01-25 17:37:47 +01:00

172 lines
9.9 KiB
HTML
Executable file

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="cTn" />
<link type="text/css" rel="stylesheet" href="./main.css" media="all" />
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.min.css">
<link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.pips.min.css">
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/setup.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/ports.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/pid_tuning.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/receiver.css" media="all" />
<!-- <link type="text/css" rel="stylesheet" href="./tabs/modes.css" media="all" /> -->
<link type="text/css" rel="stylesheet" href="./tabs/servos.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/gps.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/motors.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/led_strip.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/sensors.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/logging.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/adjustments.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/auxiliary.css" media="all" />
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/libraries/d3.min.js"></script>
<script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
<script type="text/javascript" src="./js/libraries/three/three.min.js"></script>
<script type="text/javascript" src="./js/libraries/three/Projector.js"></script>
<script type="text/javascript" src="./js/libraries/three/CanvasRenderer.js"></script>
<script type="text/javascript" src="./js/port_handler.js"></script>
<script type="text/javascript" src="./js/port_usage.js"></script>
<script type="text/javascript" src="./js/serial.js"></script>
<script type="text/javascript" src="./js/usb.js"></script>
<script type="text/javascript" src="./js/gui.js"></script>
<script type="text/javascript" src="./js/model.js"></script>
<script type="text/javascript" src="./js/request_balancer.js"></script>
<script type="text/javascript" src="./js/serial_backend.js"></script>
<script type="text/javascript" src="./js/data_storage.js"></script>
<script type="text/javascript" src="./js/msp.js"></script>
<script type="text/javascript" src="./js/backup_restore.js"></script>
<script type="text/javascript" src="./js/protocols/stm32.js"></script>
<script type="text/javascript" src="./js/protocols/stm32usbdfu.js"></script>
<script type="text/javascript" src="./js/localization.js"></script>
<script type="text/javascript" src="./js/boards.js"></script>
<script type="text/javascript" src="./main.js"></script>
<script type="text/javascript" src="./tabs/landing.js"></script>
<script type="text/javascript" src="./tabs/setup.js"></script>
<script type="text/javascript" src="./tabs/ports.js"></script>
<script type="text/javascript" src="./tabs/configuration.js"></script>
<script type="text/javascript" src="./tabs/pid_tuning.js"></script>
<script type="text/javascript" src="./tabs/receiver.js"></script>
<!-- <script type="text/javascript" src="./tabs/modes.js"></script> -->
<script type="text/javascript" src="./tabs/auxiliary.js"></script>
<script type="text/javascript" src="./tabs/adjustments.js"></script>
<script type="text/javascript" src="./tabs/servos.js"></script>
<script type="text/javascript" src="./tabs/gps.js"></script>
<script type="text/javascript" src="./tabs/motors.js"></script>
<script type="text/javascript" src="./tabs/led_strip.js"></script>
<script type="text/javascript" src="./tabs/sensors.js"></script>
<script type="text/javascript" src="./tabs/cli.js"></script>
<script type="text/javascript" src="./tabs/logging.js"></script>
<script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
</head>
<body>
<div id="main-wrapper">
<div id="port-picker">
<ul>
<li class="port">
<select id="port" title="Port">
<!-- port list gets generated here -->
</select>
</li>
<li>
<select id="baud" title="Baud Rate">
<option value="115200" selected="selected">115200</option>
<option value="57600">57600</option>
<option value="38400">38400</option>
<option value="28800">28800</option>
<option value="19200">19200</option>
<option value="14400">14400</option>
<option value="9600">9600</option>
<option value="4800">4800</option>
<option value="2400">2400</option>
<option value="1200">1200</option>
</select>
</li>
<li>
<a class="connect" href="#" i18n="connect"></a>
<label>
<input class="auto_connect" type="checkbox" />
<span class="auto_connect" i18n="autoConnect"></span>
</label>
</li>
</ul>
</div>
<a id="options" href="#" i18n_title="options_title"></a>
<div id="sensor-status">
<ul>
<li class="gyro" title="Gyroscope">Gyro</li>
<li class="accel" title="Accelerometer">Accel</li>
<li class="mag" title="Magnetometer">Mag</li>
<li class="baro" title="Barometer">Baro</li>
<li class="gps" title="GPS">GPS</li>
<li class="sonar" title="Sonar / Range finder">Sonar</li>
</ul>
</div>
<div class="clear-both"></div>
<div id="log">
<div id="watermark">CleanFlight</div>
<div class="wrapper">
</div>
</div>
<div id="tabs">
<ul class="mode-disconnected">
<li class="tab_landing"><a href="#" i18n="tabLanding"></a></li>
<li class="tab_firmware_flasher "><a href="#" i18n="tabFirmwareFlasher"></a></li>
</ul>
<ul class="mode-connected">
<li class="tab_setup"><a href="#" i18n="tabSetup"></a></li>
<li class="tab_ports"><a href="#" i18n="tabPorts"></a></li>
<li class="tab_configuration"><a href="#" i18n="tabConfiguration"></a></li>
<li class="tab_pid_tuning"><a href="#" i18n="tabPidTuning"></a></li>
<li class="tab_receiver"><a href="#" i18n="tabReceiver"></a></li>
<!-- <li class="tab_modes"><a href="#" i18n="tabModeSelection"></a></li> -->
<li class="tab_auxiliary"><a href="#" i18n="tabAuxiliary"></a></li>
<li class="tab_adjustments"><a href="#" i18n="tabAdjustments"></a></li>
<li class="tab_servos"><a href="#" i18n="tabServos"></a></li>
<li class="tab_gps"><a href="#" i18n="tabGPS"></a></li>
<li class="tab_motors"><a href="#" i18n="tabMotorTesting"></a></li>
<li class="tab_led_strip"><a href="#" i18n="tabLedStrip"></a></li>
<li class="tab_sensors"><a href="#" i18n="tabRawSensorData"></a></li>
<li class="tab_logging"><a href="#" i18n="tabLogging"></a></li>
<li class="tab_cli"><a href="#" i18n="tabCLI"></a></li>
</ul>
<div class="clear-both"></div>
</div>
<div id="content">
</div>
</div>
<div id="status-bar">
<div>
<span i18n="statusbar_port_utilization"></span> <span class="port_usage_down">D: 0%</span> <span class="port_usage_up">U: 0%</span>
</div>
<div>
<span i18n="statusbar_packet_error"></span> <span class="packet-error">0</span>
</div>
<div>
<span i18n="statusbar_i2c_error"></span> <span class="i2c-error">0</span>
</div>
<div>
<span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
</div>
<div class="version">
<!-- configuration version generated here -->
</div>
</div>
<div id="cache">
<div class="data-loading">
<p>Waiting for data ...</p>
</div>
</div>
</body>
</html>