Merge pull request #2028 from error414/layout_copy

Copy/Paste of elements in OSD layout

Author: DzikuVx

_locales/en/messages.json

@@ -4841,6 +4841,15 @@
     "save": {
         "message": "Save"
     },
+    "copy": {
+        "message": "Copy"
+    },
+    "paste": {
+        "message": "Paste"
+    },
+    "clear": {
+        "message": "Clear"
+    },
     "active": {
         "message": "Active"
     },
@@ -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"
     },

src/css/tabs/osd.css

@@ -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;
 }

tabs/osd.html

@@ -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">

tabs/osd.js

@@ -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) {
@@ -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++) {
@@ -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() {