Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-17 05:15:21 +03:00
Code Issues Wiki Activity

OSTD Tab redesign

Browse source 
cleanup

optimization

typo fix

adding dummy contents for callsign and vtx settings

indentation fix

typo fix
This commit is contained in:
skaman82 2016-07-31 23:35:50 +02:00 • committed by mikeller
parent e97f6685d4
commit c7616c6a8a
6 changed files with 186 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

1
js/gui.js
View file

@ -307,6 +307,7 @@ GUI_control.prototype.content_ready = function (callback) {
});
});
if (callback) callback();
}

1
js/libraries/jbox/jBox.css
View file

@ -19,7 +19,6 @@
.jBox-container {
background: #fff;
border:1px solid #ffbb00;
max-width:180px;
font-size:11px;
line-height:13px;
color:#525352;

4
main.css
View file

@ -1812,6 +1812,10 @@ input {
overflow-y: auto;
}
.jBox-Tooltip {
max-width: 180px;
}
}
@media only screen and (max-height: 750px) , only screen and (max-device-height: 750px) {

100
tabs/osd.css
View file

@ -16,6 +16,7 @@
/* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/
}
.darkgrey {
background-color: #575757;
@ -259,17 +260,17 @@
}
.tab-osd .display-layout label {
margin: .25em .1em;
display: inline-block;
margin: .25em .1em;
display: inline-block;
}
.tab-osd .display-layout input {
margin: .1em 1em;
margin: .1em 1em;
}
.tab-osd .display-layout input.position{
width: 5em;
border-bottom: 1px solid #ccc
width: 5em;
border-bottom: 1px solid #ccc
}
.tab-osd .hide {
@ -281,34 +282,30 @@
}
.tab-osd .col {
display: inline-block;
display: inline-block;
}
.tab-osd .left {
float: left;
float: left;
}
.tab-osd .right {
float: right;
}
.tab-osd .preview {
background: url(/images/osd-bg-1.png);
background-size: cover;
float: right;
margin-top: -7px;
}
.tab-osd .preview .char {
display: inline-block;
padding: 0;
margin: 0;
display: inline-block;
padding: 0;
margin: 0;
}
.tab-osd .preview .char[draggable="true"] {
cursor: move;
cursor: move;
}
.tab-osd .preview .row {
height: 18px;
height: 18px;
}
.tab-osd .content_wrapper {
@ -316,11 +313,11 @@
}
.tab-osd .content_toolbar {
text-align: right;
text-align: right;
}
.tab-osd .content_toolbar button {
margin-right: 1em;
margin-right: 1em;
}
button {
@ -337,8 +334,63 @@ button {
top: 1em;
}
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
.tab-osd .content_wrapper {
height: calc(100% - 30px);
}
.tab-osd .display-field {
padding-bottom: 4px;
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
View file

@ -2,42 +2,104 @@
<div class="content_wrapper">
<h1 class="tab_title">
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>
<div class="cf_doc_version_bt">
<a id="button-documentation" href="" target="_blank"></a>
</div>
<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">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 class="supported hide">
<div class="display-layout">
<div class="col left">
<div class="video-types">
</div>
<div class="display-fields">
</div>
</div>
<div class="col right">
<div class="preview">
<div class="cf_column third_left elements">
<div class="spacer_right">
<div class="gui_box grey">
<div
class="gui_box_titlebar"
style="margin-bottom: 0px;">
<div class="spacer_box_title">OSD
Elements
</div>
</div>
<div class="spacer_box">
<div class="display-fields"></div>
</div>
</div>
</div>
</div>
<div class="font-preview"></div>
<div class="info"><a name="progressbar"></a>
<progress class="progress" value="0" min="0" max="100"></progress>
<span class="progressLabel"></span>
<div class="cf_column twothird">
<div class="gui_box grey preview" style="float: left;">
<div class="gui_box_titlebar image">
<div class="spacer_box_title">OSD Preview <span>(drag to change position)</span></div>
</div>
<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 class="content_toolbar supported hide">
<button class="save active">Save Layout</button>
<button class="flash_font active">Upload Font</button>
</div>
</div>
</div>

19
tabs/osd.js
View file

@ -255,7 +255,8 @@ OSD.constants = {
{
name: 'VTX_CHANNEL',
default_position: 1,
positionable: true
positionable: true,
preview: 'CH:1'
},
{
name: 'VOLTAGE_WARNING',
@ -379,6 +380,17 @@ TABS.osd.initialize = function (callback) {
// translate to user-selected language
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
function updateOsdView() {
// 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;
MSP.promise(MSP_codes.MSP_EEPROM_WRITE);
GUI.log('OSD settings saved');
var oldText = $(this).text();
$(this).html("Saved");
setTimeout(function () {
@ -582,7 +595,7 @@ TABS.osd.initialize = function (callback) {
});
// font upload
$('button.flash_font').click(function () {
$('a.flash_font').click(function () {
if (!GUI.connect_lock) { // button disabled while flashing is in progress
$('.progressLabel').text('Uploading...');
FONT.upload($('.progress').val(0)).then(function() {