From c7616c6a8a6581cf176eebcf7f7772b5749cf486 Mon Sep 17 00:00:00 2001 From: skaman82 Date: Sun, 31 Jul 2016 23:35:50 +0200 Subject: [PATCH] OSTD Tab redesign cleanup optimization typo fix adding dummy contents for callsign and vtx settings indentation fix typo fix --- js/gui.js | 1 + js/libraries/jbox/jBox.css | 1 - main.css | 4 ++ tabs/osd.css | 100 ++++++++++++++++++++++++-------- tabs/osd.html | 116 ++++++++++++++++++++++++++++--------- tabs/osd.js | 19 +++++- 6 files changed, 186 insertions(+), 55 deletions(-) diff --git a/js/gui.js b/js/gui.js index e5e3f113..bd28f75d 100644 --- a/js/gui.js +++ b/js/gui.js @@ -307,6 +307,7 @@ GUI_control.prototype.content_ready = function (callback) { }); }); + if (callback) callback(); } diff --git a/js/libraries/jbox/jBox.css b/js/libraries/jbox/jBox.css index d3f57c22..5168a627 100755 --- a/js/libraries/jbox/jBox.css +++ b/js/libraries/jbox/jBox.css @@ -19,7 +19,6 @@ .jBox-container { background: #fff; border:1px solid #ffbb00; - max-width:180px; font-size:11px; line-height:13px; color:#525352; diff --git a/main.css b/main.css index c929989f..980730af 100644 --- a/main.css +++ b/main.css @@ -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) { diff --git a/tabs/osd.css b/tabs/osd.css index bd447059..727e19ef 100644 --- a/tabs/osd.css +++ b/tabs/osd.css @@ -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); +} } diff --git a/tabs/osd.html b/tabs/osd.html index 885d3d4c..ff5c7d69 100755 --- a/tabs/osd.html +++ b/tabs/osd.html @@ -2,42 +2,104 @@

OSD -
- - - - -

- +
+ +

Your flight controller isn't responding to OSD commands. This probably means that it does not have an integrated BetaFlight OSD.

Note that some flight controllers have an onboard MinimOSD that can be flashed and configured with scarab-osd, however the MinimOSD cannot be configured through this interface.

-
-
-
-
-
-
-
-
-
+
+
+
+
+
OSD + Elements +
+
+
+
+
- -
- -
- - +
+
+
+
OSD Preview (drag to change position)
+
+
+
+
+
+
+
+
+
+
+
+
Video + Format +
+
+
+
+
+
+ + +
+
+ +
+
+ Save Layout +
+
+ Font Manager +
-
- - -
-
+
\ No newline at end of file diff --git a/tabs/osd.js b/tabs/osd.js index 41124153..47d31882 100755 --- a/tabs/osd.js +++ b/tabs/osd.js @@ -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() {