From ffee3d3935a3da851a81088942e394db3a682e17 Mon Sep 17 00:00:00 2001
From: Jeff Hendrix <Jeff.Hendrix@wdc.com>
Date: Sat, 1 Oct 2022 00:40:50 -0600
Subject: [PATCH 1/3] Added support for DJI wtfos MSP-OSD full screen 59x22 OSD

---
 js/msp/MSPHelper.js  | 10 ++++-----
 src/css/tabs/osd.css | 25 ++++++++++++++++++++-
 tabs/osd.js          | 53 +++++++++++++++++++++++++++++++++++---------
 tabs/ports.js        |  4 ++--
 4 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/js/msp/MSPHelper.js b/js/msp/MSPHelper.js
index 01b5789d0..ec9b976d8 100644
--- a/js/msp/MSPHelper.js
+++ b/js/msp/MSPHelper.js
@@ -477,9 +477,9 @@ var mspHelper = (function (gui) {
                             data.getInt8(i + 13)
                         ));
                     }
-                }   
+                }
                 break;
-            
+
             case MSPCodes.MSP2_INAV_LOGIC_CONDITIONS_SINGLE:
                 LOGIC_CONDITIONS.put(new LogicCondition(
                     data.getInt8(0),
@@ -788,7 +788,7 @@ var mspHelper = (function (gui) {
                     }
                     CONFIG.target = targetName;
                 }
-                
+
                 break;
 
             case MSPCodes.MSP_SET_CHANNEL_FORWARDING:
@@ -2282,8 +2282,8 @@ var mspHelper = (function (gui) {
         }
     };
 
-    self.loadLogicConditions = function (callback) {   
-        if (semver.gte(CONFIG.flightControllerVersion, "5.0.0")) {        
+    self.loadLogicConditions = function (callback) {
+        if (semver.gte(CONFIG.flightControllerVersion, "5.0.0")) {
             LOGIC_CONDITIONS.flush();
             let idx = 0;
             MSP.send_message(MSPCodes.MSP2_INAV_LOGIC_CONDITIONS_SINGLE, [idx], false, nextLogicCondition);
diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css
index 89db9aeff..4375a2ba6 100644
--- a/src/css/tabs/osd.css
+++ b/src/css/tabs/osd.css
@@ -453,6 +453,29 @@ button {
 	width: calc(50% - 317px) !important;
 }
 
+.tab-osd .preview_dji_hd {
+    width: 720px !important;
+    left: calc(50% - 377px) !important;
+}
+
+.tab-osd .dji_hd_43_left {
+	border-left: 1px solid red;
+	position: absolute;
+	left: 72px;
+	height: calc(100% - 27px);
+}
+
+.tab-osd .dji_hd_43_right {
+	border-right: 1px solid red;
+	position: absolute;
+	right: 72px;
+	height: calc(100% - 27px);
+}
+
+.tab-osd .preview_dji_hd_side {
+	width: calc(50% - 377px) !important;
+}
+
 .tab-osd .preview {
     /* please don't copy the generic background image from another project
      * and replace the one that @nathantsoi took :)
@@ -538,7 +561,7 @@ button {
 }
 
 .tab-osd .settings select,
-.tab-osd .settings input, 
+.tab-osd .settings input,
 .tab-osd .osd_settings .switchery,
 .tab-osd .unit_wrapper {
     vertical-align: top;
diff --git a/tabs/osd.js b/tabs/osd.js
index 44bd89d38..099ff15fb 100644
--- a/tabs/osd.js
+++ b/tabs/osd.js
@@ -532,22 +532,26 @@ OSD.constants = {
         'AUTO',
         'PAL',
         'NTSC',
-        'HD'
+        'HDZERO',
+        'DJIWTF'
     ],
     VIDEO_LINES: {
         PAL: 16,
         NTSC: 13,
-        HD: 18
+        HDZERO: 18,
+        DJIWTF: 22
     },
     VIDEO_COLS: {
         PAL: 30,
         NTSC: 30,
-        HD: 50
+        HDZERO: 50,
+        DJIWTF: 60
     },
     VIDEO_BUFFER_CHARS: {
         PAL: 480,
         NTSC: 390,
-        HD: 900
+        HDZERO: 900,
+        DJIWTF: 1320
     },
     UNIT_TYPES: [
         {name: 'osdUnitImperial', value: 0},
@@ -2063,12 +2067,19 @@ OSD.updateDisplaySize = function () {
         }
     }
 
+    // set the preview size if dji wtf
+    $('.third_left').toggleClass('preview_dji_hd_side', video_type == 'DJIWTF')
+    $('.preview').toggleClass('preview_dji_hd cut43_left', video_type == 'DJIWTF')
+    $('.third_right').toggleClass('preview_dji_hd_side', video_type == 'DJIWTF')
+    $('.left_43_margin').toggleClass('dji_hd_43_left', video_type == 'DJIWTF')
+    $('.right_43_margin').toggleClass('dji_hd_43_right', video_type == 'DJIWTF')
+
     // set the preview size based on the video type
-    $('.third_left').toggleClass('preview_hd_side', (video_type == 'HD'))
-    $('.preview').toggleClass('preview_hd cut43_left', (video_type == 'HD'))
-    $('.third_right').toggleClass('preview_hd_side', (video_type == 'HD'))
-    $('.left_43_margin').toggleClass('hd_43_left', (video_type == 'HD'))
-    $('.right_43_margin').toggleClass('hd_43_right', (video_type == 'HD'))
+    $('.third_left').toggleClass('preview_hd_side', (video_type == 'HDZERO'))
+    $('.preview').toggleClass('preview_hd cut43_left', (video_type == 'HDZERO'))
+    $('.third_right').toggleClass('preview_hd_side', (video_type == 'HDZERO'))
+    $('.left_43_margin').toggleClass('hd_43_left', (video_type == 'HDZERO'))
+    $('.right_43_margin').toggleClass('hd_43_right', (video_type == 'HDZERO'))
 };
 
 OSD.saveAlarms = function(callback) {
@@ -2354,7 +2365,7 @@ OSD.GUI.checkAndProcessSymbolPosition = function(pos, charCode) {
 OSD.GUI.updateVideoMode = function() {
     // video mode
     var $videoTypes = $('.video-types').empty();
-    for (var i = 0; i < OSD.constants.VIDEO_TYPES.length; i++) {
+    for (var i = 0; i < OSD.constants.VIDEO_TYPES.length - 2; i++) {
 
         $videoTypes.append(
             $('<label/>')
@@ -2365,6 +2376,28 @@ OSD.GUI.updateVideoMode = function() {
         );
     }
 
+    // Add HD modes if MSP Displayport is selected
+    var isHdOsd = false;
+
+    $.each(SERIAL_CONFIG.ports, function(index, port){
+        if(port.functions.includes('MSP_DISPLAYPORT')) {
+            isHdOsd = true;
+        }
+    });
+
+    if (isHdOsd) {
+        for (var i = OSD.constants.VIDEO_TYPES.length - 2; i < OSD.constants.VIDEO_TYPES.length; i++) {
+
+            $videoTypes.append(
+                $('<label/>')
+                .append($('<input name="video_system" type="radio"/>' + OSD.constants.VIDEO_TYPES[i] + '</label>')
+                    .prop('checked', i === OSD.data.preferences.video_system)
+                    .data('type', i)
+                )
+            );
+        }
+    }
+
     $videoTypes.find(':radio').click(function () {
         OSD.data.preferences.video_system = $(this).data('type');
         OSD.updateDisplaySize();
diff --git a/tabs/ports.js b/tabs/ports.js
index f6320ed99..b17966f4d 100644
--- a/tabs/ports.js
+++ b/tabs/ports.js
@@ -67,7 +67,7 @@ TABS.ports.initialize = function (callback) {
         name: 'VTX_FFPV',
         groups: ['peripherals'],
         maxPorts: 1 }
-    ); 
+    );
 
     functionRules.push({
         name: 'OPFLOW',
@@ -335,7 +335,7 @@ TABS.ports.initialize = function (callback) {
         });
 
         MSP.send_message(MSPCodes.MSP2_SET_CF_SERIAL_CONFIG, mspHelper.crunch(MSPCodes.MSP2_SET_CF_SERIAL_CONFIG), false, save_to_eeprom);
-        
+
         function save_to_eeprom() {
             MSP.send_message(MSPCodes.MSP_EEPROM_WRITE, false, false, on_saved_handler);
         }

From 3d2d80b5bcc8337623d9d90dfb32a51f2ad71f9a Mon Sep 17 00:00:00 2001
From: Jeff Hendrix <Jeff.Hendrix@wdc.com>
Date: Mon, 3 Oct 2022 01:14:20 -0600
Subject: [PATCH 2/3] Changes to use the MSP Displayport setting. Integrated
 changes from geoffsim PR #1589

---
 _locales/en/messages.json |  6 +++
 src/css/tabs/osd.css      | 60 +++++++++++++++++++++-----
 tabs/osd.html             | 28 ++++++++----
 tabs/osd.js               | 90 ++++++++++++++++++++++++++-------------
 4 files changed, 135 insertions(+), 49 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index e3d2e7f57..011f0a8d5 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -3597,6 +3597,12 @@
     "osdSettingCRSF_LQ_FORMAT_HELP": {
         "message": "TYPE1 shows LQ% as used by TBS hardware. TYPE2 shows RF Profile Modes (2=150Hz, 1=50Hz, 0=4Hz update rates) and LQ % [0..100%]. Tracer shows RFMode 1 (1=250Hz) and LQ % [0..100%]."
     },
+    "osd_video_show_guides": {
+        "message": "Show preview guides"
+    },
+    "osd_video_HELP": {
+        "message": "For HD keep within the red lines for 4:3, HDZero keep within the blue box for a higher refresh rate, AUTO/PAL the green line is NTSC limit ."
+    },
     "osd_dji_HD_FPV": {
         "message" : "DJI HD FPV"
     },
diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css
index 4375a2ba6..58eab9d1d 100644
--- a/src/css/tabs/osd.css
+++ b/src/css/tabs/osd.css
@@ -430,26 +430,26 @@ button {
     left: calc(50% - 197px);
 }
 
-.tab-osd .preview_hd {
+.tab-osd .preview_hdzero {
     width: 600px !important;
     left: calc(50% - 317px) !important;
 }
 
-.tab-osd .hd_43_left {
-	border-left: 1px solid red;
+.tab-osd .hdzero_43_left {
+	border-left: 2px solid red;
 	position: absolute;
 	left: 60px;
 	height: calc(100% - 27px);
 }
 
-.tab-osd .hd_43_right {
-	border-right: 1px solid red;
+.tab-osd .hdzero_43_right {
+	border-right: 2px solid red;
 	position: absolute;
 	right: 60px;
 	height: calc(100% - 27px);
 }
 
-.tab-osd .preview_hd_side {
+.tab-osd .preview_hdzero_side {
 	width: calc(50% - 317px) !important;
 }
 
@@ -459,16 +459,16 @@ button {
 }
 
 .tab-osd .dji_hd_43_left {
-	border-left: 1px solid red;
+	border-left: 2px solid red;
 	position: absolute;
-	left: 72px;
+	left: 84px;
 	height: calc(100% - 27px);
 }
 
 .tab-osd .dji_hd_43_right {
-	border-right: 1px solid red;
+	border-right: 2px solid red;
 	position: absolute;
-	right: 72px;
+	right: 84px;
 	height: calc(100% - 27px);
 }
 
@@ -476,6 +476,46 @@ button {
 	width: calc(50% - 377px) !important;
 }
 
+.tab-osd .hd_3016_top {
+    border-top: 2px solid blue;
+    position: absolute;
+    top: 46px;
+    left: 120px;
+    width: 360px;
+}
+
+.tab-osd .hd_3016_bottom {
+    border-bottom: 2px solid blue;
+    position: absolute;
+    bottom: 18px;
+    left: 120px;
+    width: 360px;
+}
+
+.tab-osd .hd_3016_left {
+    border-left: 2px solid blue;
+    position: absolute;
+    top: 46px;
+    left: 120px;
+    height: 288px;
+}
+
+.tab-osd .hd_3016_right {
+    border-right: 2px solid blue;
+    position: absolute;
+    top: 46px;
+    right: 120px;
+    height: 288px;
+}
+
+.tab-osd .ntsc_bottom {
+    border-bottom: 2px solid green;
+    position: absolute;
+    bottom: 54px;
+    left: 0px;
+    width: 100%;
+}
+
 .tab-osd .preview {
     /* please don't copy the generic background image from another project
      * and replace the one that @nathantsoi took :)
diff --git a/tabs/osd.html b/tabs/osd.html
index 389ded66b..a11ab3da3 100644
--- a/tabs/osd.html
+++ b/tabs/osd.html
@@ -31,10 +31,14 @@ <h1 class="tab_title" data-i18n="tabOSD"></h1>
                 </div>
                 <div class="display-layout">
                     <div class="col right">
-	                    <div class="left_43_margin"></div>
-    	                <div class="right_43_margin"></div>
-                        <div class="preview">
-                        </div>
+                        <div class="hd_43_margin_left"></div>
+                        <div class="hd_43_margin_right"></div>
+                        <div class="hd_3016_box_top"></div>
+                        <div class="hd_3016_box_bottom"></div>
+                        <div class="hd_3016_box_left"></div>
+                        <div class="hd_3016_box_right"></div>
+                        <div class="pal_ntsc_box_bottom"></div>
+                        <div class="preview"></div>
                     </div>
                 </div>
             </div>
@@ -46,6 +50,12 @@ <h1 class="tab_title" data-i18n="tabOSD"></h1>
                     <div class="spacer_box">
                         <div class="video-types"></div>
                     </div>
+                    <div class="spacer_box settings">
+                        <div for="osd_video_show_guides" class="helpicon cf_tip" data-i18n_title="osd_video_HELP"></div>
+                        <label id="videoGuides">
+                           <span data-i18n="osd_video_show_guides"></span>
+                        </label>
+                    </div>
                 </div>
                 <div class="gui_box grey settings-container">
                     <div class="gui_box_titlebar">
@@ -82,12 +92,12 @@ <h1 class="tab_title" data-i18n="tabOSD"></h1>
                             <div for="plusCodeShort" class="helpicon cf_tip" data-i18n_title="osdSettingPLUS_CODE_SHORT_HELP"></div>
                             <label>
                                 <select id="plusCodeShort" class="update_preview" data-setting="osd_plus_code_short" data-live="true"></select>
-                                <span data-i18n="osd_plus_code_short"></span> 
+                                <span data-i18n="osd_plus_code_short"></span>
                             </label>
                             <div for="rpmPrecision" class="helpicon cf_tip" data-i18n_title="osd_esc_rpm_precision_help"></div>
                             <label>
                                 <select id="rpmPrecision" class="update_preview" data-setting="osd_esc_rpm_precision" data-live="true"></select>
-                                <span data-i18n="osd_esc_rpm_precision"></span> 
+                                <span data-i18n="osd_esc_rpm_precision"></span>
                             </label>
                             <label>
                                 <select class="update_preview" data-setting="osd_crosshairs_style" data-live="true"></select>
@@ -210,7 +220,7 @@ <h1 class="tab_title" data-i18n="tabOSD"></h1>
                         </label>
                     </div>
                 </div>
-                <div class="gui_box grey dji-hd-container"> 
+                <div class="gui_box grey dji-hd-container" id="dji_settings">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="osd_dji_HD_FPV"></div>
                     </div>
@@ -231,7 +241,7 @@ <h1 class="tab_title" data-i18n="tabOSD"></h1>
                             <span data-i18n="osd_dji_GPS_source"></span>
                         </label>
                         <label>
-                            <select data-setting="dji_message_speed_source" data-live="true"></select> 
+                            <select data-setting="dji_message_speed_source" data-live="true"></select>
                             <span data-i18n="osd_dji_speed_source"></span>
                         </label>
                         <label class="djiCraftNameElements">
@@ -281,7 +291,7 @@ <h1 class="tab_title" data-i18n="tabOSD"></h1>
                             <span data-i18n="osdSwitchInd3"></span>
                         </label>
                     </div>
-                </div> 
+                </div>
             </div>
             <div id="fontmanagercontent" style="display:none; width:712px;">
                 <div class="font-picker" style="margin-bottom: 10px;">
diff --git a/tabs/osd.js b/tabs/osd.js
index 099ff15fb..2e068068a 100644
--- a/tabs/osd.js
+++ b/tabs/osd.js
@@ -469,7 +469,8 @@ OSD.initData = function () {
         items: [],
         groups: {},
         preview: [],
-        isDjiHdFpv: false
+        isDjiHdFpv: false,
+        isMspDisplay: false
     };
 };
 
@@ -1990,6 +1991,9 @@ OSD.reload = function(callback) {
             if(port.functions.includes('DJI_FPV')) {
                 OSD.data.isDjiHdFpv = true;
             }
+            if(port.functions.includes('MSP_DISPLAYPORT')) {
+                OSD.data.isMspDisplay = true;
+            }
         });
     });
 
@@ -2045,7 +2049,6 @@ OSD.updateDisplaySize = function () {
 
     // set the new video type and cols per line
     FONT.constants.SIZES.LINE = OSD.constants.VIDEO_COLS[video_type];
-    OSD.constants.VIDEO_TYPES[OSD.data.video_system] = video_type;
 
     // set the new display size
     OSD.data.display_size = {
@@ -2071,15 +2074,12 @@ OSD.updateDisplaySize = function () {
     $('.third_left').toggleClass('preview_dji_hd_side', video_type == 'DJIWTF')
     $('.preview').toggleClass('preview_dji_hd cut43_left', video_type == 'DJIWTF')
     $('.third_right').toggleClass('preview_dji_hd_side', video_type == 'DJIWTF')
-    $('.left_43_margin').toggleClass('dji_hd_43_left', video_type == 'DJIWTF')
-    $('.right_43_margin').toggleClass('dji_hd_43_right', video_type == 'DJIWTF')
 
     // set the preview size based on the video type
-    $('.third_left').toggleClass('preview_hd_side', (video_type == 'HDZERO'))
-    $('.preview').toggleClass('preview_hd cut43_left', (video_type == 'HDZERO'))
-    $('.third_right').toggleClass('preview_hd_side', (video_type == 'HDZERO'))
-    $('.left_43_margin').toggleClass('hd_43_left', (video_type == 'HDZERO'))
-    $('.right_43_margin').toggleClass('hd_43_right', (video_type == 'HDZERO'))
+    $('.third_left').toggleClass('preview_hdzero_side', (video_type == 'HDZERO'))
+    $('.preview').toggleClass('preview_hdzero cut43_left', (video_type == 'HDZERO'))
+    $('.third_right').toggleClass('preview_hdzero_side', (video_type == 'HDZERO'))
+    OSD.GUI.updateGuidesView($('#videoGuides').find('input').is(':checked'));
 };
 
 OSD.saveAlarms = function(callback) {
@@ -2365,29 +2365,28 @@ OSD.GUI.checkAndProcessSymbolPosition = function(pos, charCode) {
 OSD.GUI.updateVideoMode = function() {
     // video mode
     var $videoTypes = $('.video-types').empty();
-    for (var i = 0; i < OSD.constants.VIDEO_TYPES.length - 2; i++) {
-
-        $videoTypes.append(
-            $('<label/>')
-            .append($('<input name="video_system" type="radio"/>' + OSD.constants.VIDEO_TYPES[i] + '</label>')
-                .prop('checked', i === OSD.data.preferences.video_system)
-                .data('type', i)
-            )
-        );
-    }
 
-    // Add HD modes if MSP Displayport is selected
-    var isHdOsd = false;
+    if (!OSD.data.isDjiHdFpv) {
+        $('#dji_settings').hide();
+    }
 
-    $.each(SERIAL_CONFIG.ports, function(index, port){
-        if(port.functions.includes('MSP_DISPLAYPORT')) {
-            isHdOsd = true;
+    if (OSD.data.isMspDisplay) {
+        if (OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] != 'HDZERO') {
+            OSD.data.preferences.video_system = OSD.constants.VIDEO_TYPES.indexOf('HDZERO');
+            OSD.updateDisplaySize();
+            OSD.GUI.saveConfig();
         }
-    });
-
-    if (isHdOsd) {
-        for (var i = OSD.constants.VIDEO_TYPES.length - 2; i < OSD.constants.VIDEO_TYPES.length; i++) {
+    } else {
+        if (OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'HDZERO' || OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'DJIWTF') {
+            OSD.data.preferences.video_system = OSD.constants.VIDEO_TYPES.indexOf('AUTO')
+            OSD.updateDisplaySize();
+            OSD.GUI.saveConfig();
+        }
+    }
 
+    for (var i = 0; i < OSD.constants.VIDEO_TYPES.length; i++) {
+        if ((OSD.constants.VIDEO_TYPES[i] != 'HDZERO' && OSD.constants.VIDEO_TYPES[i] != 'DJIWTF') || OSD.data.isMspDisplay)
+        {
             $videoTypes.append(
                 $('<label/>')
                 .append($('<input name="video_system" type="radio"/>' + OSD.constants.VIDEO_TYPES[i] + '</label>')
@@ -2535,6 +2534,7 @@ OSD.GUI.updateFields = function() {
                             // Ensure the element is inside the viewport, at least partially.
                             // In that case move it to the very first row/col, otherwise there's
                             // no way to reposition items that are outside the viewport.
+                            OSD.msp.helpers.calculate.coords(itemData);
                             if (itemData.x > OSD.data.display_size.x || itemData.y > OSD.data.display_size.y) {
                                 itemData.x = itemData.y = itemData.position = 0;
                             }
@@ -2569,10 +2569,21 @@ OSD.GUI.updateFields = function() {
         }
     }
 
+    if ($('#videoGuidesToggle').length == false) {
+        $('#videoGuides').prepend(
+            $('<input id="videoGuidesToggle" type="checkbox" class="toggle" />')
+            .attr('checked', false)
+            .on('change', function () {
+                OSD.GUI.updateGuidesView(this.checked);
+                OSD.GUI.updatePreviews();
+            })
+        );
+    }
+
     if ($('#djiUnsupportedElementsToggle').length == false) {
         $('#djiUnsupportedElements').prepend(
             $('<input id="djiUnsupportedElementsToggle" type="checkbox" class="toggle" />')
-            .attr('checked', OSD.data.isDjiHdFpv)
+            .attr('checked', OSD.data.isDjiHdFpv && !OSD.data.isMspDisplay)
             .on('change', function () {
                 OSD.GUI.updateDjiView(this.checked);
                 OSD.GUI.updatePreviews();
@@ -2627,6 +2638,23 @@ OSD.GUI.updateDjiMessageElements = function(on) {
     OSD.GUI.removeBottomLines();
 };
 
+OSD.GUI.updateGuidesView = function(on) {
+    isHdZero = OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'HDZERO';
+    $('.hd_43_margin_left').toggleClass('hdzero_43_left', (isHdZero && on))
+    $('.hd_43_margin_right').toggleClass('hdzero_43_right', (isHdZero && on))
+    $('.hd_3016_box_top').toggleClass('hd_3016_top', (isHdZero && on))
+    $('.hd_3016_box_bottom').toggleClass('hd_3016_bottom', (isHdZero && on))
+    $('.hd_3016_box_left').toggleClass('hd_3016_left', (isHdZero && on))
+    $('.hd_3016_box_right').toggleClass('hd_3016_right', (isHdZero && on))
+
+    isDJIWTF = OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'DJIWTF';
+    $('.hd_43_margin_left').toggleClass('dji_hd_43_left', (isDJIWTF && on))
+    $('.hd_43_margin_right').toggleClass('dji_hd_43_right', (isDJIWTF && on))
+
+    isPAL = OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'PAL' || OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'AUTO';
+    $('.pal_ntsc_box_bottom').toggleClass('ntsc_bottom', (isPAL && on))
+};
+
 OSD.GUI.updateDjiView = function(on) {
     if (on) {
         $(OSD.DjiElements.emptyGroups).each(function(index, groupName) {
@@ -2878,6 +2906,7 @@ OSD.GUI.updateAll = function() {
         layouts.on('change', function() {
             OSD.updateSelectedLayout(parseInt(layouts.val()));
             OSD.GUI.updateFields();
+            OSD.GUI.updateGuidesView($('#videoGuides').find('input').is(':checked'));
             OSD.GUI.updateDjiView($('#djiUnsupportedElements').find('input').is(':checked'));
             OSD.GUI.updatePreviews();
         });
@@ -2893,7 +2922,8 @@ OSD.GUI.updateAll = function() {
     OSD.GUI.updateUnits();
     OSD.GUI.updateFields();
     OSD.GUI.updatePreviews();
-    OSD.GUI.updateDjiView(OSD.data.isDjiHdFpv);
+    OSD.GUI.updateGuidesView(false);
+    OSD.GUI.updateDjiView(OSD.data.isDjiHdFpv && !OSD.data.isMspDisplay);
 };
 
 OSD.GUI.update = function() {

From 6bbcce1010665a3740035ed89b36f4b481f72bbc Mon Sep 17 00:00:00 2001
From: Jeff Hendrix <Jeff.Hendrix@wdc.com>
Date: Wed, 5 Oct 2022 00:03:17 -0600
Subject: [PATCH 3/3] Updated video systems available based on MSP displayport
 being selected

---
 _locales/en/messages.json |  2 +-
 tabs/osd.js               | 42 ++++++++++++++++++++++++++++-----------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 011f0a8d5..3194ef676 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -3601,7 +3601,7 @@
         "message": "Show preview guides"
     },
     "osd_video_HELP": {
-        "message": "For HD keep within the red lines for 4:3, HDZero keep within the blue box for a higher refresh rate, AUTO/PAL the green line is NTSC limit ."
+        "message": "For HD: red lines show 4:3 screen, HDZero: keep within the blue box for a higher refresh rate, AUTO/PAL: green line is NTSC limit."
     },
     "osd_dji_HD_FPV": {
         "message" : "DJI HD FPV"
diff --git a/tabs/osd.js b/tabs/osd.js
index 2e068068a..97f12a797 100644
--- a/tabs/osd.js
+++ b/tabs/osd.js
@@ -2362,6 +2362,9 @@ OSD.GUI.checkAndProcessSymbolPosition = function(pos, charCode) {
     }
 };
 
+const mspVideoSystem = [1,3,4];     // indexes of PAL, HDZERO, & DJIWTF
+const analogVideoSystem = [0,1,2];  // indexes of AUTO, PAL, & NTSC
+
 OSD.GUI.updateVideoMode = function() {
     // video mode
     var $videoTypes = $('.video-types').empty();
@@ -2371,29 +2374,44 @@ OSD.GUI.updateVideoMode = function() {
     }
 
     if (OSD.data.isMspDisplay) {
-        if (OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] != 'HDZERO') {
+        if (mspVideoSystem.includes(OSD.data.preferences.video_system) == false) {
             OSD.data.preferences.video_system = OSD.constants.VIDEO_TYPES.indexOf('HDZERO');
             OSD.updateDisplaySize();
             OSD.GUI.saveConfig();
         }
     } else {
-        if (OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'HDZERO' || OSD.constants.VIDEO_TYPES[OSD.data.preferences.video_system] == 'DJIWTF') {
+        if (analogVideoSystem.includes(OSD.data.preferences.video_system) == false) {
             OSD.data.preferences.video_system = OSD.constants.VIDEO_TYPES.indexOf('AUTO')
             OSD.updateDisplaySize();
             OSD.GUI.saveConfig();
         }
     }
 
-    for (var i = 0; i < OSD.constants.VIDEO_TYPES.length; i++) {
-        if ((OSD.constants.VIDEO_TYPES[i] != 'HDZERO' && OSD.constants.VIDEO_TYPES[i] != 'DJIWTF') || OSD.data.isMspDisplay)
-        {
-            $videoTypes.append(
-                $('<label/>')
-                .append($('<input name="video_system" type="radio"/>' + OSD.constants.VIDEO_TYPES[i] + '</label>')
-                    .prop('checked', i === OSD.data.preferences.video_system)
-                    .data('type', i)
-                )
-            );
+    if (OSD.data.isMspDisplay) {
+        for (var i = 0; i < OSD.constants.VIDEO_TYPES.length; i++) {
+            if (mspVideoSystem.includes(i))
+            {
+                $videoTypes.append(
+                    $('<label/>')
+                    .append($('<input name="video_system" type="radio"/>' + OSD.constants.VIDEO_TYPES[i] + '</label>')
+                        .prop('checked', i === OSD.data.preferences.video_system)
+                        .data('type', i)
+                    )
+                );
+            }
+        }
+    } else {
+        for (var i = 0; i < OSD.constants.VIDEO_TYPES.length; i++) {
+            if (analogVideoSystem.includes(i))
+            {
+                $videoTypes.append(
+                    $('<label/>')
+                    .append($('<input name="video_system" type="radio"/>' + OSD.constants.VIDEO_TYPES[i] + '</label>')
+                        .prop('checked', i === OSD.data.preferences.video_system)
+                        .data('type', i)
+                    )
+                );
+            }
         }
     }