mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-25 09:15:49 +03:00
feat : Added preset positioning for elements in OSD
This commit is contained in:
Syahmi Zul
parent
dafacbd8e4
commit
7df6587912
2 changed files with 562 additions and 1 deletions
|
|
@ -488,4 +488,177 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// CSS for the context menu and visual grid
|
||||
.osd-menu-trigger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.osd-menu-trigger:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.osd-context-menu {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 0;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #555;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
min-width: 180px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.osd-context-menu.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.osd-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #444;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.osd-menu-item:hover {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
.osd-menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.osd-menu-arrow {
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.osd-position-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-left: 8px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #555;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
padding: 16px;
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: none;
|
||||
min-width: 200px;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.osd-position-grid.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.grid-title {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #555;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 8px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.grid-cell:hover {
|
||||
background: rgba(59, 130, 246, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.grid-cell.active {
|
||||
background: rgba(59, 130, 246, 0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grid-cell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.position-tooltip {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid-cell:hover .position-tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,192 @@ const FONT = {};
|
|||
const SYM = {};
|
||||
const OSD = {};
|
||||
|
||||
const positionConfigs = {
|
||||
TL: {
|
||||
label: "Top Left",
|
||||
coords: (w) => ({
|
||||
x: 1,
|
||||
y: 1,
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [0, 0],
|
||||
},
|
||||
TC: {
|
||||
label: "Top Center",
|
||||
coords: (w) => ({
|
||||
x: Math.floor((OSD.data.displaySize.x - w) / 2),
|
||||
y: 1,
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [1, 0],
|
||||
},
|
||||
TR: {
|
||||
label: "Top Right",
|
||||
coords: (w) => ({
|
||||
x: Math.max(1, OSD.data.displaySize.x - w - 1),
|
||||
y: 1,
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [2, 0],
|
||||
},
|
||||
// Top‑middle row
|
||||
TML: {
|
||||
label: "Top Middle Left",
|
||||
coords: (w) => ({
|
||||
x: 1,
|
||||
y: Math.floor(OSD.data.displaySize.y / 3),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [0, 1],
|
||||
},
|
||||
TMC: {
|
||||
label: "Top Mid Center",
|
||||
coords: (w) => ({
|
||||
x: Math.floor((OSD.data.displaySize.x - w) / 2),
|
||||
y: Math.floor(OSD.data.displaySize.y / 3),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [1, 1],
|
||||
},
|
||||
TMR: {
|
||||
label: "Top Middle Right",
|
||||
coords: (w) => ({
|
||||
x: Math.max(1, OSD.data.displaySize.x - w - 1),
|
||||
y: Math.floor(OSD.data.displaySize.y / 3),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [2, 1],
|
||||
},
|
||||
// Exact middle row
|
||||
LMC: {
|
||||
label: "Left Middle",
|
||||
coords: (w) => ({
|
||||
x: Math.floor(OSD.data.displaySize.x / 3),
|
||||
y: Math.floor(OSD.data.displaySize.y / 2),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [0, 2],
|
||||
},
|
||||
CTR: {
|
||||
label: "Center",
|
||||
coords: (w) => ({
|
||||
x: Math.floor((OSD.data.displaySize.x - w) / 2),
|
||||
y: Math.floor(OSD.data.displaySize.y / 2),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [1, 2],
|
||||
},
|
||||
RMC: {
|
||||
label: "Right Middle",
|
||||
coords: (w) => ({
|
||||
x: Math.max(1, Math.floor((OSD.data.displaySize.x * 2) / 3) - Math.floor(w / 2)),
|
||||
y: Math.floor(OSD.data.displaySize.y / 2),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
gridPos: [2, 2],
|
||||
},
|
||||
// Bottom‑middle row
|
||||
BML: {
|
||||
label: "Bottom Middle Left",
|
||||
coords: (w) => ({
|
||||
x: 1,
|
||||
y: Math.floor((OSD.data.displaySize.y * 2) / 3),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: -1,
|
||||
},
|
||||
gridPos: [0, 3],
|
||||
},
|
||||
BMC: {
|
||||
label: "Bottom Mid Center",
|
||||
coords: (w) => ({
|
||||
x: Math.floor((OSD.data.displaySize.x - w) / 2),
|
||||
y: Math.floor((OSD.data.displaySize.y * 2) / 3),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: -1,
|
||||
},
|
||||
gridPos: [1, 3],
|
||||
},
|
||||
BMR: {
|
||||
label: "Bottom Middle Right",
|
||||
coords: (w) => ({
|
||||
x: Math.max(1, OSD.data.displaySize.x - w - 1),
|
||||
y: Math.floor((OSD.data.displaySize.y * 2) / 3),
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: -1,
|
||||
},
|
||||
gridPos: [2, 3],
|
||||
},
|
||||
BL: {
|
||||
label: "Bottom Left",
|
||||
coords: (w) => ({
|
||||
x: 1,
|
||||
y: OSD.data.displaySize.y - 2,
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: -1,
|
||||
},
|
||||
gridPos: [0, 4],
|
||||
},
|
||||
BC: {
|
||||
label: "Bottom Center",
|
||||
coords: (w) => ({
|
||||
x: Math.floor((OSD.data.displaySize.x - w) / 2),
|
||||
y: OSD.data.displaySize.y - 2,
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: -1,
|
||||
},
|
||||
gridPos: [1, 4],
|
||||
},
|
||||
BR: {
|
||||
label: "Bottom Right",
|
||||
coords: (w) => ({
|
||||
x: Math.max(1, OSD.data.displaySize.x - w - 1),
|
||||
y: OSD.data.displaySize.y - 2,
|
||||
}),
|
||||
grow: {
|
||||
x: 0,
|
||||
y: -1,
|
||||
},
|
||||
gridPos: [2, 4],
|
||||
},
|
||||
};
|
||||
|
||||
SYM.loadSymbols = function () {
|
||||
SYM.BLANK = 0x20;
|
||||
SYM.VOLT = 0x06;
|
||||
|
|
@ -3174,6 +3360,9 @@ osd.initialize = function (callback) {
|
|||
// display fields on/off and position
|
||||
const $displayFields = $("#element-fields").empty();
|
||||
let enabledCount = 0;
|
||||
|
||||
OSD.data.displaySize.total = OSD.data.displaySize.x * OSD.data.displaySize.y;
|
||||
|
||||
for (const field of OSD.data.displayItems) {
|
||||
// versioning related, if the field doesn't exist at the current flight controller version, just skip it
|
||||
if (!field.name) {
|
||||
|
|
@ -3281,6 +3470,205 @@ osd.initialize = function (callback) {
|
|||
$field.append($labelAndVariant);
|
||||
// Insert in alphabetical order, with unknown fields at the end
|
||||
$field.name = field.name;
|
||||
|
||||
// OSD positioning buttons with element size compensation and centering logic
|
||||
// Enhanced OSD positioning with visual grid context menu
|
||||
|
||||
// Create the context menu trigger button
|
||||
const $menuTrigger = $(`
|
||||
<div class="osd-menu-trigger grey" title="Position Options">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<circle cx="12" cy="5" r="2"/>
|
||||
<circle cx="12" cy="12" r="2"/>
|
||||
<circle cx="12" cy="19" r="2"/>
|
||||
</svg>
|
||||
</div>`);
|
||||
// Create the context menu
|
||||
const $contextMenu = $(`
|
||||
<div class="osd-context-menu">
|
||||
<div class="osd-menu-item align-to-item">
|
||||
<span>Align to Position</span>
|
||||
<span class="osd-menu-arrow">▶</span>
|
||||
</div>
|
||||
</div>`);
|
||||
// Create the position grid submenu
|
||||
const createPositionGrid = () => {
|
||||
const $grid = $(`
|
||||
<div class="osd-position-grid">
|
||||
<div class="grid-title">Choose Position</div>
|
||||
<div class="position-grid"></div>
|
||||
</div>`);
|
||||
const $gridContainer = $grid.find(".position-grid");
|
||||
// Create 15 cells for 3x5 grid
|
||||
for (let row = 0; row < 5; row++) {
|
||||
for (let col = 0; col < 3; col++) {
|
||||
const $cell = $('<div class="grid-cell"></div>');
|
||||
$cell.css("grid-row", row + 1);
|
||||
$cell.css("grid-column", col + 1);
|
||||
// Find matching position config
|
||||
const matchingConfig = Object.entries(positionConfigs).find(
|
||||
([key, config]) =>
|
||||
config.gridPos && config.gridPos[0] === col && config.gridPos[1] === row,
|
||||
);
|
||||
if (matchingConfig) {
|
||||
const [configKey, config] = matchingConfig;
|
||||
$cell
|
||||
.addClass("position-available")
|
||||
.data("position-key", configKey)
|
||||
.data("field", field)
|
||||
.append(`<div class="position-tooltip">${config.label}</div>`);
|
||||
// Add click handler for position selection
|
||||
$cell.click(function (e) {
|
||||
e.stopPropagation();
|
||||
const positionKey = $(this).data("position-key");
|
||||
const fieldToUpdate = $(this).data("field");
|
||||
applyPosition(fieldToUpdate, positionKey);
|
||||
hideAllMenus();
|
||||
});
|
||||
}
|
||||
$gridContainer.append($cell);
|
||||
}
|
||||
}
|
||||
return $grid;
|
||||
};
|
||||
// Position application function
|
||||
const applyPosition = (fieldChanged, positionKey) => {
|
||||
const config = positionConfigs[positionKey];
|
||||
if (!config) return;
|
||||
// Get element width estimation (same logic as before)
|
||||
let elementWidth = 1;
|
||||
if (fieldChanged.preview && fieldChanged.preview.length) {
|
||||
elementWidth = fieldChanged.preview.length;
|
||||
} else if (fieldChanged.preview_length) {
|
||||
elementWidth = fieldChanged.preview_length;
|
||||
} else if (fieldChanged.length) {
|
||||
elementWidth = fieldChanged.length;
|
||||
} else if (fieldChanged.max_length) {
|
||||
elementWidth = fieldChanged.max_length;
|
||||
} else if (fieldChanged.name) {
|
||||
const fieldEstimates = {
|
||||
ALTITUDE: 6,
|
||||
THROTTLE_POS: 4,
|
||||
BATTERY_VOLTAGE: 5,
|
||||
RSSI_VALUE: 4,
|
||||
TIMER: 8,
|
||||
FLYMODE: 4,
|
||||
CRAFT_NAME: 12,
|
||||
PILOT_NAME: 12,
|
||||
HOME_DIST: 8,
|
||||
GPS_SPEED: 6,
|
||||
GPS_SATS: 3,
|
||||
CURRENT_DRAW: 6,
|
||||
MAH_DRAWN: 6,
|
||||
WH_DRAWN: 6,
|
||||
BATTERY_AVERAGE_CELL_VOLTAGE: 5,
|
||||
GPS_LON: 12,
|
||||
GPS_LAT: 12,
|
||||
DEBUG: 8,
|
||||
PID_ROLL: 8,
|
||||
PID_PITCH: 8,
|
||||
PID_YAW: 8,
|
||||
POWER: 4,
|
||||
PIDRATE_PROFILE: 3,
|
||||
PID_PROFILE: 3,
|
||||
RC_CHANNELS: 4,
|
||||
CAMERA_FRAME: 10,
|
||||
};
|
||||
elementWidth = fieldEstimates[fieldChanged.name] || 6;
|
||||
}
|
||||
const target = config.coords(elementWidth);
|
||||
let finalPosition = null;
|
||||
// Ensure target position is within bounds
|
||||
if (target.x < 1) target.x = 1;
|
||||
if (target.x + elementWidth > OSD.data.displaySize.x - 1) {
|
||||
target.x = Math.max(1, OSD.data.displaySize.x - elementWidth - 1);
|
||||
}
|
||||
// Find available position with growth logic
|
||||
for (
|
||||
let offset = 0;
|
||||
offset < Math.max(OSD.data.displaySize.x, OSD.data.displaySize.y);
|
||||
offset++
|
||||
) {
|
||||
const testX = target.x + config.grow.x * offset;
|
||||
const testY = target.y + config.grow.y * offset;
|
||||
if (
|
||||
testX < 1 ||
|
||||
testX + elementWidth > OSD.data.displaySize.x - 1 ||
|
||||
testY < 1 ||
|
||||
testY > OSD.data.displaySize.y - 2
|
||||
)
|
||||
break;
|
||||
let canPlace = true;
|
||||
for (let i = 0; i < elementWidth && canPlace; i++) {
|
||||
const checkPos = testY * OSD.data.displaySize.x + testX + i;
|
||||
const cell = OSD.data.preview[checkPos];
|
||||
if (cell && cell[0] && cell[0].index !== fieldChanged.index) {
|
||||
canPlace = false;
|
||||
}
|
||||
}
|
||||
if (canPlace) {
|
||||
finalPosition = testY * OSD.data.displaySize.x + testX;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (finalPosition !== null) {
|
||||
fieldChanged.position = finalPosition;
|
||||
MSP.promise(MSPCodes.MSP_SET_OSD_CONFIG, OSD.msp.encodeLayout(fieldChanged))
|
||||
.then(() => updateOsdView())
|
||||
.catch((err) => console.error("OSD update failed:", err));
|
||||
} else {
|
||||
// Show a nicer notification instead of alert
|
||||
alert("Unable to place element - not enough space available", "warning");
|
||||
}
|
||||
};
|
||||
// Hide all menus function
|
||||
const hideAllMenus = () => {
|
||||
$(".osd-context-menu").removeClass("show");
|
||||
$(".osd-position-grid").removeClass("show");
|
||||
};
|
||||
// Event handlers
|
||||
let menuTimeout;
|
||||
$menuTrigger.on("click", function (e) {
|
||||
e.stopPropagation();
|
||||
const $menu = $(this).siblings(".osd-context-menu");
|
||||
const isVisible = $menu.hasClass("show");
|
||||
hideAllMenus();
|
||||
if (!isVisible) {
|
||||
$menu.addClass("show");
|
||||
}
|
||||
});
|
||||
// Handle submenu hover
|
||||
$contextMenu
|
||||
.on("mouseenter", ".align-to-item", function () {
|
||||
clearTimeout(menuTimeout);
|
||||
const $grid = $(this).closest(".osd-context-menu").siblings(".osd-position-grid");
|
||||
$grid.addClass("show");
|
||||
})
|
||||
.on("mouseleave", ".align-to-item", function () {
|
||||
menuTimeout = setTimeout(() => {
|
||||
const $grid = $(this).closest(".osd-context-menu").siblings(".osd-position-grid");
|
||||
if (!$grid.is(":hover")) {
|
||||
$grid.removeClass("show");
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
// Keep grid open when hovering over it
|
||||
const $positionGrid = createPositionGrid();
|
||||
$positionGrid
|
||||
.on("mouseenter", function () {
|
||||
clearTimeout(menuTimeout);
|
||||
})
|
||||
.on("mouseleave", function () {
|
||||
$(this).removeClass("show");
|
||||
});
|
||||
// Global click handler to close menus
|
||||
$(document).on("click", hideAllMenus);
|
||||
// Make field container relative positioned to contain the absolute positioned menu
|
||||
$field.css("position", "relative");
|
||||
// Append all elements
|
||||
$field.append($menuTrigger);
|
||||
$field.append($contextMenu);
|
||||
$field.append($positionGrid);
|
||||
insertOrdered($displayFields, $field);
|
||||
}
|
||||
|
||||
|
|
@ -3302,7 +3690,7 @@ osd.initialize = function (callback) {
|
|||
GUI.switchery();
|
||||
// buffer the preview
|
||||
OSD.data.preview = [];
|
||||
OSD.data.displaySize.total = OSD.data.displaySize.x * OSD.data.displaySize.y;
|
||||
|
||||
for (const field of OSD.data.displayItems) {
|
||||
// reset fields that somehow end up off the screen
|
||||
if (field.position > OSD.data.displaySize.total) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue