Skip to content

Commit

Permalink
Add HD OSD mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@SteveCEvans
SteveCEvans committed Nov 5, 2022
1 parent 9f77e00 commit b2fe978
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 37 deletions.
4 changes: 4 additions & 0 deletions locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4760,6 +4760,10 @@
"message": "NTSC",
"description": "Option for the video format in the OSD"
},
"osdSetupVideoFormatOptionHd": {
"message": "HD",
"description": "Option for the video format in the OSD"
},
"osdSetupUnitsTitle": {
"message": "Units"
},
Expand Down
9 changes: 9 additions & 0 deletions src/css/tabs/osd.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,15 @@
select.osd-variant {
max-width: 100%;
}
.video-hd {
.preview {
&:active {
background: url(../../images/osd-bg-1-grid-hd.png), url(../../images/osd-bg-1.jpg);
background-size: 100% 100%, cover;
background-repeat: no-repeat;
}
}
}
.video-pal {
.preview {
&:active {
Expand Down
Binary file added src/images/osd-bg-1-grid-hd.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/images/osd-bg-1-grid-ntsc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/images/osd-bg-1-grid-pal.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 54 additions & 37 deletions src/js/tabs/osd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,7 @@ FONT.constants = {
/** NVM ram field size for one font char, last 10 bytes dont matter **/
MAX_NVM_FONT_CHAR_FIELD_SIZE: 64,
CHAR_HEIGHT: 18,
CHAR_WIDTH: 12,
LINE: 30,
CHAR_WIDTH: 12
},
COLORS: {
// black
Expand Down Expand Up @@ -632,10 +631,7 @@ OSD.loadDisplayFields = function() {
text: 'osdTextElementCrosshairs',
desc: 'osdDescElementCrosshairs',
defaultPosition() {
let position = 193;
if (OSD.constants.VIDEO_TYPES[OSD.data.video_system] !== 'NTSC') {
position += FONT.constants.SIZES.LINE;
}
let position = (OSD.constants.VIDEO_COLS[videoType] >> 1) + ((OSD.constants.VIDEO_ROWS[videoType] >> 1) - 2) * OSD.constants.VIDEO_COLS[videoType] - 2;
return position;
},
draw_order: 40,
Expand All @@ -651,10 +647,8 @@ OSD.loadDisplayFields = function() {
text: 'osdTextElementArtificialHorizon',
desc: 'osdDescElementArtificialHorizon',
defaultPosition() {
let position = (OSD.constants.VIDEO_COLS[videoType] >> 1) + ((OSD.constants.VIDEO_ROWS[videoType] >> 1) - 5) * OSD.constants.VIDEO_COLS[videoType] - 1;
let position = 74;
if (OSD.constants.VIDEO_TYPES[OSD.data.video_system] !== 'NTSC') {
position += FONT.constants.SIZES.LINE;
}
return position;
},
draw_order: 10,
Expand Down Expand Up @@ -688,11 +682,7 @@ OSD.loadDisplayFields = function() {
text: 'osdTextElementHorizonSidebars',
desc: 'osdDescElementHorizonSidebars',
defaultPosition() {
let position = 194;
if (OSD.constants.VIDEO_TYPES[OSD.data.video_system] !== 'NTSC') {
position += FONT.constants.SIZES.LINE;
}
return position;
let position = (OSD.constants.VIDEO_COLS[videoType] >> 1) + ((OSD.constants.VIDEO_ROWS[videoType] >> 1) - 2) * OSD.constants.VIDEO_COLS[videoType] - 1;
},
draw_order: 50,
positionable() {
Expand Down Expand Up @@ -1379,14 +1369,22 @@ OSD.constants = {
'AUTO',
'PAL',
'NTSC',
'HD',
],
VIDEO_LINES: {
VIDEO_COLS: {
PAL: 30,
NTSC: 30,
HD: 53,
},
VIDEO_ROWS: {
PAL: 16,
NTSC: 13,
HD: 20,
},
VIDEO_BUFFER_CHARS: {
PAL: 480,
NTSC: 390,
HD: 1590,
},
UNIT_TYPES: [
'IMPERIAL',
Expand Down Expand Up @@ -1970,13 +1968,23 @@ OSD.updateDisplaySize = function() {
}
// compute the size
OSD.data.displaySize = {
x: FONT.constants.SIZES.LINE,
y: OSD.constants.VIDEO_LINES[videoType],
x: OSD.constants.VIDEO_COLS[videoType],
y: OSD.constants.VIDEO_ROWS[videoType],
total: null,
};
// Adjust css background grid
const previewLayoutElement = $(".tab-osd .display-layout");
videoType === 'PAL' ? previewLayoutElement.addClass('video-pal').removeClass('video-ntsc') : previewLayoutElement.addClass('video-ntsc').removeClass('video-pal');
switch (videoType) {
case 'PAL':
previewLayoutElement.addClass('video-pal').removeClass('video-ntsc').removeClass('video-hd')
break;
case 'NTSC':
previewLayoutElement.removeClass('video-pal').addClass('video-ntsc').removeClass('video-hd')
break;
case 'HD':
previewLayoutElement.removeClass('video-pal').removeClass('video-ntsc').addClass('video-hd')
break;
}
};

OSD.drawByOrder = function(selectedPosition, field, charCode, x, y) {
Expand Down Expand Up @@ -2017,9 +2025,15 @@ OSD.msp = {
const defaultPosition = typeof (c.defaultPosition) === 'function' ? c.defaultPosition() : c.defaultPosition;

displayItem.positionable = positionable;

OSD.updateDisplaySize();

if (semver.gte(FC.CONFIG.apiVersion, "1.21.0")) {
// size * y + x
displayItem.position = positionable ? FONT.constants.SIZES.LINE * ((bits >> 5) & 0x001F) + (bits & 0x001F) : defaultPosition;
const xpos = ((bits >> 5) & 0x0020) | (bits & 0x001F);
const ypos = (bits >> 5) & 0x001F;

displayItem.position = positionable ? OSD.data.displaySize.x * ypos + xpos : defaultPosition;

displayItem.isVisible = [];
for (let osd_profile = 0; osd_profile < OSD.getNumberOfProfiles(); osd_profile++) {
Expand Down Expand Up @@ -2056,8 +2070,10 @@ OSD.msp = {
packed_visible |= isVisible[osd_profile] ? OSD.constants.VISIBLE << osd_profile : 0;
}
const variantSelected = (variant << 14);
const xpos = position % OSD.data.displaySize.x;
const ypos = (position - xpos) / OSD.data.displaySize.x;

return packed_visible | variantSelected | (((position / FONT.constants.SIZES.LINE) & 0x001F) << 5) | (position % FONT.constants.SIZES.LINE);
return packed_visible | variantSelected | ((ypos & 0x001F) << 5) | ((xpos & 0x0020) << 5) | (xpos & 0x001F);
} else {
const realPosition = position === -1 ? 0 : position;
return isVisible[0] ? realPosition : -1;
Expand Down Expand Up @@ -2483,57 +2499,59 @@ OSD.GUI.preview = {
const displayItem = OSD.data.displayItems[fieldId];
let position = $(this).removeAttr('style').data('position');
const cursor = position;
const cursorX = cursor % FONT.constants.SIZES.LINE;
const cursorX = cursor % OSD.data.displaySize.x;

console.log(`cursorX=${cursorX}`);

if (displayItem.preview.constructor === Array) {
console.log(`Initial Drop Position: ${position}`);
const x = parseInt(ev.dataTransfer.getData('x'));
const y = parseInt(ev.dataTransfer.getData('y'));
console.log(`XY Co-ords: ${x}-${y}`);
position -= x;
position -= (y * FONT.constants.SIZES.LINE);
position -= (y * OSD.data.displaySize.x);
console.log(`Calculated Position: ${position}`);
}

if (!displayItem.ignoreSize) {
if (displayItem.preview.constructor !== Array) {
// Standard preview, string type
const overflowsLine = FONT.constants.SIZES.LINE - ((position % FONT.constants.SIZES.LINE) + displayItem.preview.length);
const overflowsLine = OSD.data.displaySize.x - ((position % OSD.data.displaySize.x) + displayItem.preview.length);
if (overflowsLine < 0) {
position += overflowsLine;
}
} else {
// Advanced preview, array type
const arrayElements = displayItem.preview;
const limits = OSD.searchLimitsElement(arrayElements);
const selectedPositionX = position % FONT.constants.SIZES.LINE;
let selectedPositionY = Math.trunc(position / FONT.constants.SIZES.LINE);
const selectedPositionX = position % OSD.data.displaySize.x;
let selectedPositionY = Math.trunc(position / OSD.data.displaySize.x);
if (arrayElements[0].constructor === String) {
if (position < 0 ) {
return;
}
if (selectedPositionX > cursorX) { // TRUE -> Detected wrap around
position += FONT.constants.SIZES.LINE - selectedPositionX;
position += OSD.data.displaySize.x - selectedPositionX;
selectedPositionY++;
} else if (selectedPositionX + limits.maxX > FONT.constants.SIZES.LINE) { // TRUE -> right border of the element went beyond left edge of screen.
position -= selectedPositionX + limits.maxX - FONT.constants.SIZES.LINE;
} else if (selectedPositionX + limits.maxX > OSD.data.displaySize.x) { // TRUE -> right border of the element went beyond left edge of screen.
position -= selectedPositionX + limits.maxX - OSD.data.displaySize.x;
}
if (selectedPositionY < 0 ) {
position += Math.abs(selectedPositionY) * FONT.constants.SIZES.LINE;
position += Math.abs(selectedPositionY) * OSD.data.displaySize.x;
} else if ((selectedPositionY + limits.maxY ) > OSD.data.displaySize.y) {
position -= (selectedPositionY + limits.maxY - OSD.data.displaySize.y) * FONT.constants.SIZES.LINE;
position -= (selectedPositionY + limits.maxY - OSD.data.displaySize.y) * OSD.data.displaySize.x;
}

} else {
if ((limits.minX < 0) && ((selectedPositionX + limits.minX) < 0)) {
position += Math.abs(selectedPositionX + limits.minX);
} else if ((limits.maxX > 0) && ((selectedPositionX + limits.maxX) >= FONT.constants.SIZES.LINE)) {
position -= (selectedPositionX + limits.maxX + 1) - FONT.constants.SIZES.LINE;
} else if ((limits.maxX > 0) && ((selectedPositionX + limits.maxX) >= OSD.data.displaySize.x)) {
position -= (selectedPositionX + limits.maxX + 1) - OSD.data.displaySize.x;
}
if ((limits.minY < 0) && ((selectedPositionY + limits.minY) < 0)) {
position += Math.abs(selectedPositionY + limits.minY) * FONT.constants.SIZES.LINE;
position += Math.abs(selectedPositionY + limits.minY) * OSD.data.displaySize.x;
} else if ((limits.maxY > 0) && ((selectedPositionY + limits.maxY) >= OSD.data.displaySize.y)) {
position -= (selectedPositionY + limits.maxY - OSD.data.displaySize.y + 1) * FONT.constants.SIZES.LINE;
position -= (selectedPositionY + limits.maxY - OSD.data.displaySize.y + 1) * OSD.data.displaySize.x;
}
}
}
Expand Down Expand Up @@ -3077,7 +3095,6 @@ osd.initialize = function(callback) {
// Insert in alphabetical order, with unknown fields at the end
$field.name = field.name;
insertOrdered($displayFields, $field);

}

GUI.switchery();
Expand Down Expand Up @@ -3144,7 +3161,7 @@ osd.initialize = function(callback) {
ctx.drawImage(img, j * 12, i * 18);
}
}
selectedPosition = selectedPosition - element.length + FONT.constants.SIZES.LINE;
selectedPosition = selectedPosition - element.length + OSD.data.displaySize.x;
} else {
const limits = OSD.searchLimitsElement(arrayElements);
let offsetX = 0;
Expand All @@ -3157,7 +3174,7 @@ osd.initialize = function(callback) {
}
// Add the character to the preview
const charCode = element.sym;
OSD.drawByOrder(selectedPosition + element.x + element.y * FONT.constants.SIZES.LINE, field, charCode, element.x, element.y);
OSD.drawByOrder(selectedPosition + element.x + element.y * OSD.data.displaySize.x, field, charCode, element.x, element.y);
// Image used when "dragging" the element
if (field.positionable) {
const img = new Image();
Expand Down

0 comments on commit b2fe978

Please sign in to comment.