Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Copy/Paste of elements in OSD layout #2028

Merged
merged 2 commits into from
Apr 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions _locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -4841,6 +4841,15 @@
"save": {
"message": "Save"
},
"copy": {
"message": "Copy"
},
"paste": {
"message": "Paste"
},
"clear": {
"message": "Clear"
},
"active": {
"message": "Active"
},
Expand Down Expand Up @@ -5634,6 +5643,15 @@
"osdSettingsSaved": {
"message": "OSD settings saved"
},
"osdLayoutInsertedIntoClipboard": {
"message": "Layout has been saved to clipboard"
},
"osdLayoutPasteFromClipboard": {
"message": "Layout has been restored from clipboard"
},
"osdClearLayout": {
"message": "Layout has been cleared"
},
"failedToOpenSerialPort": {
"message": "<span style=\"color: red\">Failed</span> to open serial port"
},
Expand Down
30 changes: 30 additions & 0 deletions src/css/tabs/osd.css
Original file line number Diff line number Diff line change
Expand Up @@ -733,4 +733,34 @@ button {

.osdCustomElement_main_table select, .osdCustomElement_main_table input{
width: 100% !important;
}

.settings .btn a{
margin-top: 0;
margin-bottom: 0;
border-radius: 3px;
color: #fff;
font-family: 'open_sansbold', Arial, serif;
font-size: 12px;
text-shadow: 0 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: all ease 0.2s;
padding: 0 9px;
line-height: 22px;
}

.settings .btn_blue a{
background-color: #37a8db;
border: 1px solid #3394b5;
}

.settings .btn_danger a{
background-color: #e2a2a2;
border: 1px solid #e58383;
}


.settings .btn a:hover {
background-color: #3394b5;
transition: all ease 0.2s;
}
9 changes: 9 additions & 0 deletions tabs/osd.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@ <h1 class="tab_title" data-i18n="tabOSD"></h1>
<div class="settings spacer_right">
<select class="osd_layouts">
</select>
<span class="btn btn_blue">
<a class="active osd_copy" href="#" data-i18n="copy"></a>
</span>
<span class="btn btn_blue">
<a class="active osd_paste" href="#" data-i18n="paste"></a>
</span>
<span class="btn btn_danger">
<a class="active osd_clear" href="#" data-i18n="clear"></a>
</span>
<input class="osd_search" placeholder="Search...">
</div>
<div class="spacer_right">
Expand Down
59 changes: 59 additions & 0 deletions tabs/osd.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,8 @@ var video_type = null;
var isGuidesChecked = false;
var FONT = FONT || {};

var layout_clipboard = {layout: [], filled: false};

var FONT = FONT || {};
FONT.initData = function () {
if (FONT.data) {
Expand Down Expand Up @@ -3106,6 +3108,9 @@ OSD.GUI.updateAll = function() {
return;
}
var layouts = $('.osd_layouts');
var copy = $('.osd_copy');
var paste = $('.osd_paste').hide();
var clear = $('.osd_clear');
if (OSD.data.layout_count > 1) {
layouts.empty();
for (var ii = 0; ii < OSD.data.layout_count; ii++) {
Expand All @@ -3121,9 +3126,63 @@ OSD.GUI.updateAll = function() {
OSD.GUI.updateDjiView($('#djiUnsupportedElements').find('input').is(':checked'));
OSD.GUI.updatePreviews();
});

copy.on('click', function() {
if(OSD.data.selected_layout >= 0 && OSD.data.selected_layout < OSD.data.layout_count){
layout_clipboard = {layout: JSON.parse(JSON.stringify(OSD.data.layouts[OSD.data.selected_layout])), filled: true};
paste.show();
GUI.log(chrome.i18n.getMessage('osdLayoutInsertedIntoClipboard'));
}
});

paste.on('click', function() {
if(layout_clipboard.filled == true){

var oldLayout = JSON.parse(JSON.stringify(OSD.data.layouts[OSD.data.selected_layout]))
OSD.data.layouts[OSD.data.selected_layout] = JSON.parse(JSON.stringify(layout_clipboard.layout));
layouts.trigger('change');
OSD.data.layouts[OSD.data.selected_layout].forEach(function(item, index){
if(!(item.isVisible === false && oldLayout[index].isVisible === false) && (oldLayout[index].x !== item.x || oldLayout[index].y !== item.y || oldLayout[index].position !== item.position || oldLayout[index].isVisible !== item.isVisible)){
OSD.saveItem({id: index});
}
});
GUI.log(chrome.i18n.getMessage('osdLayoutPasteFromClipboard'));
}
});

clear.on('click', function() {
var oldLayout = JSON.parse(JSON.stringify(OSD.data.layouts[OSD.data.selected_layout]));

var clearedLayout = [];
oldLayout.forEach(function(item, index){
var itemCopy = JSON.parse(JSON.stringify(item));
itemCopy.isVisible = false;
clearedLayout[index] = itemCopy;
})

OSD.data.layouts[OSD.data.selected_layout] = clearedLayout;
layouts.trigger('change');
OSD.data.layouts[OSD.data.selected_layout].forEach(function(item, index){
if(oldLayout[index].isVisible === true){
OSD.saveItem({id: index});
}
});
GUI.log(chrome.i18n.getMessage('osdClearLayout'));
});


} else {
layouts.hide();
layouts.off('change');

copy.hide();
copy.off('change');

paste.hide();
paste.off('change');

clear.hide();
clear.off('change');
}

$('.osd_search').on('input', function() {
Expand Down