mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-17 05:15:21 +03:00
OSTD Tab redesign
cleanup optimization typo fix adding dummy contents for callsign and vtx settings indentation fix typo fix
This commit is contained in:
skaman82
mikeller
parent
e97f6685d4
commit
c7616c6a8a
6 changed files with 186 additions and 55 deletions
|
|
@ -307,6 +307,7 @@ GUI_control.prototype.content_ready = function (callback) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
if (callback) callback();
|
if (callback) callback();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,6 @@
|
||||||
.jBox-container {
|
.jBox-container {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border:1px solid #ffbb00;
|
border:1px solid #ffbb00;
|
||||||
max-width:180px;
|
|
||||||
font-size:11px;
|
font-size:11px;
|
||||||
line-height:13px;
|
line-height:13px;
|
||||||
color:#525352;
|
color:#525352;
|
||||||
|
|
|
||||||
4
main.css
4
main.css
|
|
@ -1812,6 +1812,10 @@ input {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.jBox-Tooltip {
|
||||||
|
max-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-height: 750px) , only screen and (max-device-height: 750px) {
|
@media only screen and (max-height: 750px) , only screen and (max-device-height: 750px) {
|
||||||
|
|
|
||||||
100
tabs/osd.css
100
tabs/osd.css
|
|
@ -16,6 +16,7 @@
|
||||||
|
|
||||||
/* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/
|
/* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.darkgrey {
|
.darkgrey {
|
||||||
background-color: #575757;
|
background-color: #575757;
|
||||||
|
|
@ -259,17 +260,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .display-layout label {
|
.tab-osd .display-layout label {
|
||||||
margin: .25em .1em;
|
margin: .25em .1em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .display-layout input {
|
.tab-osd .display-layout input {
|
||||||
margin: .1em 1em;
|
margin: .1em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .display-layout input.position{
|
.tab-osd .display-layout input.position{
|
||||||
width: 5em;
|
width: 5em;
|
||||||
border-bottom: 1px solid #ccc
|
border-bottom: 1px solid #ccc
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .hide {
|
.tab-osd .hide {
|
||||||
|
|
@ -281,34 +282,30 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .col {
|
.tab-osd .col {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .left {
|
.tab-osd .left {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .right {
|
.tab-osd .right {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
margin-top: -7px;
|
||||||
|
|
||||||
.tab-osd .preview {
|
|
||||||
background: url(/images/osd-bg-1.png);
|
|
||||||
background-size: cover;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .preview .char {
|
.tab-osd .preview .char {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .preview .char[draggable="true"] {
|
.tab-osd .preview .char[draggable="true"] {
|
||||||
cursor: move;
|
cursor: move;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .preview .row {
|
.tab-osd .preview .row {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .content_wrapper {
|
.tab-osd .content_wrapper {
|
||||||
|
|
@ -316,11 +313,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .content_toolbar {
|
.tab-osd .content_toolbar {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-osd .content_toolbar button {
|
.tab-osd .content_toolbar button {
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -337,8 +334,63 @@ button {
|
||||||
top: 1em;
|
top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
|
.tab-osd .display-field {
|
||||||
.tab-osd .content_wrapper {
|
padding-bottom: 4px;
|
||||||
height: calc(100% - 30px);
|
padding-top: 4px;
|
||||||
}
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-osd .display-field input {
|
||||||
|
float: right;
|
||||||
|
width: 50px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding:2px;
|
||||||
|
margin-top: -2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-osd .display-fields {
|
||||||
|
float: left;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer_box_title span {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-types input {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-types label {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tab-osd .display-field:last-child {
|
||||||
|
border-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-osd .preview {
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-osd .preview {
|
||||||
|
background: url(/images/osd-bg-1.png);
|
||||||
|
background-size: cover;
|
||||||
|
border-bottom-left-radius: 3px;
|
||||||
|
border-bottom-right-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
|
||||||
|
.tab-osd .content_wrapper {
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
116
tabs/osd.html
116
tabs/osd.html
|
|
@ -2,42 +2,104 @@
|
||||||
<div class="content_wrapper">
|
<div class="content_wrapper">
|
||||||
<h1 class="tab_title">
|
<h1 class="tab_title">
|
||||||
OSD
|
OSD
|
||||||
<div class="fontbuttons supported hide">
|
|
||||||
<button data-font-file="default">Default</button>
|
|
||||||
<button data-font-file="bold">Bold</button>
|
|
||||||
<button data-font-file="large">Large</button>
|
|
||||||
<button class="load_font_file">Open Font File</button>
|
|
||||||
</div>
|
|
||||||
</h1>
|
</h1>
|
||||||
|
<div class="cf_doc_version_bt">
|
||||||
|
<a id="button-documentation" href="" target="_blank"></a>
|
||||||
|
</div>
|
||||||
<div class="unsupported hide">
|
<div class="unsupported hide">
|
||||||
<p class="note">Your flight controller isn't responding to OSD commands. This probably means that it does not have an integrated BetaFlight OSD.</p>
|
<p class="note">Your flight controller isn't responding to OSD commands. This probably means that it does not have an integrated BetaFlight OSD.</p>
|
||||||
<p class="note">Note that some flight controllers have an onboard <a href="https://www.youtube.com/watch?v=ikKH_6SQ-Tk" target="_blank">MinimOSD</a> that can be flashed and configured with <a href="https://github.com/ShikOfTheRa/scarab-osd/releases/latest" target="_blank">scarab-osd</a>, however the MinimOSD cannot be configured through this interface.</p>
|
<p class="note">Note that some flight controllers have an onboard <a href="https://www.youtube.com/watch?v=ikKH_6SQ-Tk" target="_blank">MinimOSD</a> that can be flashed and configured with <a href="https://github.com/ShikOfTheRa/scarab-osd/releases/latest" target="_blank">scarab-osd</a>, however the MinimOSD cannot be configured through this interface.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="supported hide">
|
<div class="supported hide">
|
||||||
<div class="display-layout">
|
<div class="cf_column third_left elements">
|
||||||
<div class="col left">
|
<div class="spacer_right">
|
||||||
<div class="video-types">
|
<div class="gui_box grey">
|
||||||
</div>
|
<div
|
||||||
<div class="display-fields">
|
class="gui_box_titlebar"
|
||||||
</div>
|
style="margin-bottom: 0px;">
|
||||||
</div>
|
<div class="spacer_box_title">OSD
|
||||||
<div class="col right">
|
Elements
|
||||||
<div class="preview">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacer_box">
|
||||||
|
<div class="display-fields"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="cf_column twothird">
|
||||||
<div class="font-preview"></div>
|
<div class="gui_box grey preview" style="float: left;">
|
||||||
|
<div class="gui_box_titlebar image">
|
||||||
<div class="info"><a name="progressbar"></a>
|
<div class="spacer_box_title">OSD Preview <span>(drag to change position)</span></div>
|
||||||
<progress class="progress" value="0" min="0" max="100"></progress>
|
</div>
|
||||||
<span class="progressLabel"></span>
|
<div class="display-layout">
|
||||||
|
<div class="col right">
|
||||||
|
<div class="preview">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf_column third_right" style="width: calc(100% - 377px);">
|
||||||
|
<div class="gui_box grey">
|
||||||
|
<div class="gui_box_titlebar">
|
||||||
|
<div class="spacer_box_title">Video
|
||||||
|
Format
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacer_box">
|
||||||
|
<div class="video-types"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gui_box grey" style="display:none;">
|
||||||
|
<div class="gui_box_titlebar">
|
||||||
|
<div class="spacer_box_title">VTX
|
||||||
|
Settings
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacer_box">
|
||||||
|
<div class="vtx-settings"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gui_box grey" style="display:none;">
|
||||||
|
<div class="gui_box_titlebar">
|
||||||
|
<div class="spacer_box_title">Callsign
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacer_box">
|
||||||
|
<div class="callsign"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="fontmanagercontent" style="display:none; width:600px;">
|
||||||
|
<div class="font-picker" style="margin-bottom: 10px;">
|
||||||
|
<h1 class="tab_title">Font presets:</h1>
|
||||||
|
<div class="content_wrapper font-preview"></div>
|
||||||
|
<div class="fontbuttons">
|
||||||
|
<button data-font-file="default">Default</button>
|
||||||
|
<button data-font-file="bold">Bold</button>
|
||||||
|
<button data-font-file="large">Large</button>
|
||||||
|
<button class="load_font_file">Open Font File</button>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<a name="progressbar"></a>
|
||||||
|
<progress class="progress" value="0" min="0" max="100"></progress>
|
||||||
|
<div class="progressLabel" style="margin-top: -21px; width: 95%; text-align: center; color: white; position: absolute;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="default_btn green" style="width:100%; float:left; margin-bottom: 0px;
|
||||||
|
">
|
||||||
|
<a class="flash_font active">Upload Font</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_toolbar supported hide" style="left:0;">
|
||||||
|
<div class="btn">
|
||||||
|
<a class="active save" href="#" >Save Layout</a>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<a class="fonts" id="fontmanager" href="#" >Font Manager</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_toolbar supported hide">
|
</div>
|
||||||
<button class="save active">Save Layout</button>
|
|
||||||
<button class="flash_font active">Upload Font</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
19
tabs/osd.js
19
tabs/osd.js
|
|
@ -255,7 +255,8 @@ OSD.constants = {
|
||||||
{
|
{
|
||||||
name: 'VTX_CHANNEL',
|
name: 'VTX_CHANNEL',
|
||||||
default_position: 1,
|
default_position: 1,
|
||||||
positionable: true
|
positionable: true,
|
||||||
|
preview: 'CH:1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'VOLTAGE_WARNING',
|
name: 'VOLTAGE_WARNING',
|
||||||
|
|
@ -379,6 +380,17 @@ TABS.osd.initialize = function (callback) {
|
||||||
// translate to user-selected language
|
// translate to user-selected language
|
||||||
localize();
|
localize();
|
||||||
|
|
||||||
|
// Open modal window
|
||||||
|
new jBox('Modal', {
|
||||||
|
width: 600,
|
||||||
|
height: 240,
|
||||||
|
closeButton: 'title',
|
||||||
|
animation: false,
|
||||||
|
attach: $('#fontmanager'),
|
||||||
|
title: 'OSD Font Manager',
|
||||||
|
content: $('#fontmanagercontent')
|
||||||
|
});
|
||||||
|
|
||||||
// 2 way binding... sorta
|
// 2 way binding... sorta
|
||||||
function updateOsdView() {
|
function updateOsdView() {
|
||||||
// ask for the OSD config data
|
// ask for the OSD config data
|
||||||
|
|
@ -542,9 +554,10 @@ TABS.osd.initialize = function (callback) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$('button.save').click(function() {
|
$('a.save').click(function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
MSP.promise(MSP_codes.MSP_EEPROM_WRITE);
|
MSP.promise(MSP_codes.MSP_EEPROM_WRITE);
|
||||||
|
GUI.log('OSD settings saved');
|
||||||
var oldText = $(this).text();
|
var oldText = $(this).text();
|
||||||
$(this).html("Saved");
|
$(this).html("Saved");
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
|
|
@ -582,7 +595,7 @@ TABS.osd.initialize = function (callback) {
|
||||||
});
|
});
|
||||||
|
|
||||||
// font upload
|
// font upload
|
||||||
$('button.flash_font').click(function () {
|
$('a.flash_font').click(function () {
|
||||||
if (!GUI.connect_lock) { // button disabled while flashing is in progress
|
if (!GUI.connect_lock) { // button disabled while flashing is in progress
|
||||||
$('.progressLabel').text('Uploading...');
|
$('.progressLabel').text('Uploading...');
|
||||||
FONT.upload($('.progress').val(0)).then(function() {
|
FONT.upload($('.progress').val(0)).then(function() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue