Test V1.0.356

CHANGELOG.txt

@@ -1,3 +1,4 @@
+v1.0.356: Added right-click Context Menu to Macro Buttons. Moved Delete/Edit to Macros Context Menu. Added Macro Button Sorting to Context Menu. Added Macro Export/Import functionality
 v1.0.355: Updated installer license agreement / terms and conditions, Added Email Registration, Fixed Surfacing Wizard menu bug
 v1.0.354: Fix for double-negative values in Surfacing Wizard
 v1.0.353: Fixed API integration for cam.openbuilds.com

app/css/buttons.css

@@ -191,4 +191,8 @@
   background: #4a4e51;
 }
 
-/* End CSS mini Switch */
+/* End CSS mini Switch */
+/* Custom size button for Macros */
+.command-button-macro {
+  height: 70px;
+}

app/css/main.css

@@ -208,21 +208,17 @@ select {
   /* background-color: #fff */
 }
 
-.macroedit {
-  position: absolute !important;
-  top: 5px !important;
-  right: 5px !important;
-  font-size: 11px !important;
-}
-
-.macroedit:hover {
-  color: #ff1e11 !important;
-}
-
 .macrotype {
   position: absolute !important;
   top: 2px !important;
-  right: 22px !important;
+  right: 2px !important;
+  font-size: 10px !important;
+}
+
+.macrokbd {
+  position: absolute !important;
+  bottom: 2px !important;
+  right: 2px !important;
   font-size: 10px !important;
 }
 

app/css/themes/dark.css

@@ -8,6 +8,11 @@ body.theme_dark, .theme_dark div.window, .theme_dark .card {
   color: #FFF;
 }
 
+.theme_dark li.divider {
+  border-color: #444;
+  background-color: #444;
+}
+
 .theme_dark div.window {
   border: 1px solid #222;
 }

app/index.html

@@ -1479,7 +1479,7 @@
     </div>
 
     <!-- Simulator Context Menu -->
-    <ul class="d-menu context" id="editorContextMenu" data-role="dropdown" data-toggle-element="#context_toggle">
+    <ul class="d-menu context drop-shadow" id="editorContextMenu" data-role="dropdown" data-toggle-element="#context_toggle">
       <span id="dropdowncontent">
         <li onclick="startFromHere(editor.getSelectionRange().start.row + 1);"><a href="#"><i class='fas fa-fw fa-route icon'></i> Recover job from Line: <span class="linenumber"></span></a></li>
         <li class="divider"></li>
@@ -1488,6 +1488,12 @@
     </ul>
     <!--  -->
 
+    <ul class="d-menu context drop-shadow" id="macroContextMenu" data-role="dropdown" data-toggle-element="#context_toggle">
+      <span id="macroContextMenuItems">
+        <!-- Items here -->
+      </span>
+    </ul>
+
     <div id="hiddendivs" style="display:none;">
 
       <div class="dialog dark" id="downloadUpdate" data-role="dialog" data-overlay-click-close="false" data-to-top="true">

app/js/macros.js

@@ -28,31 +28,32 @@ function populateMacroButtons(firstRun) {
     }
     if (codetype == "gcode") {
       var button = `
-      <button class="macrobtn m-1 command-button drop-shadow outline ` + buttonsarray[i].class + `" title="` + buttonsarray[i].tooltip + `" onclick="sendGcode('` + buttonsarray[i].gcode.replace(/(\r\n|\n|\r)/gm, "\\n") + `');">
+      <button id="macroBtn` + i + `" class="macrobtn m-1 command-button command-button-macro drop-shadow outline ` + buttonsarray[i].class + `" title="` + buttonsarray[i].tooltip + `" oncontextmenu="macroContextMenu(` + i + `)" onclick="sendGcode('` + buttonsarray[i].gcode.replace(/(\r\n|\n|\r)/gm, "\\n") + `');">
         <span class="` + buttonsarray[i].icon + ` icon"></span>
         <span class="caption mt-2">
           ` + buttonsarray[i].title + `
-          <small><i class="far fa-fw fa-keyboard"></i>: [` + keyboardAssignment + `]</small>
+
         </span>
-        <span title="Edit Macro" onclick="edit(` + i + `, event);" id="edit` + i + `" class="fas fa-cogs macroedit"></span>
         <span title="Code Type: ` + codetype + `" class="macrotype">` + codetype + `</span>
+        <span class="macrokbd"><i class="far fa-fw fa-keyboard"></i>: [` + keyboardAssignment + `]</span>
       </button>
       `
     } else if (codetype == "javascript") {
       // Future JS Macros here
       var button = `
-      <button class="macrobtn m-1 command-button drop-shadow outline ` + buttonsarray[i].class + `" title="` + buttonsarray[i].tooltip + `" onclick="runJsMacro('` + i + `');">
+      <button id="macroBtn` + i + `" class="macrobtn m-1 command-button command-button-macro drop-shadow outline ` + buttonsarray[i].class + `" title="` + buttonsarray[i].tooltip + `" oncontextmenu="macroContextMenu(` + i + `)" onclick="runJsMacro('` + i + `');">
         <span class="` + buttonsarray[i].icon + ` icon"></span>
         <span class="caption mt-2">
           ` + buttonsarray[i].title + `
-          <small><i class="far fa-fw fa-keyboard"></i>: [` + keyboardAssignment + `]</small>
         </span>
-        <span title="Edit Macro" onclick="edit(` + i + `, event);" id="edit` + i + `" class="fas fa-cogs macroedit"></span>
         <span title="Code Type: ` + codetype + `" class="macrotype">` + codetypeDisplay + `</span>
+        <span class="macrokbd"><i class="far fa-fw fa-keyboard"></i>: [` + keyboardAssignment + `]</span>
       </button>
       `
     }
     $("#macros").append(button);
+
+
     if (buttonsarray[i].jsrunonstartup) {
       if (firstRun) {
         var icon = ""
@@ -66,22 +67,45 @@ function populateMacroButtons(firstRun) {
   }
   // append add button
   var button = `
-  <button class="m-1 command-button drop-shadow outline rounded" onclick="edit(` + (buttonsarray.length + 1) + `, event)">
+
+  <button class="m-1 command-button command-button-macro drop-shadow outline rounded" onclick="edit(` + (buttonsarray.length + 1) + `, event)">
       <span class="fas fa-plus icon"></span>
       <span class="caption mt-2">
-          Add
+        Create <small>New Macro</small>
-          <small>Macro</small>
       </span>
   </button>
 
+
+  <button class="m-1 command-button command-button-macro drop-shadow outline rounded btn-file">
+    <input class="btn-file" id="macroBackupFile" type="file" accept=".json" />
+    <span class="fas fa-upload icon"></span>
+    <span class="caption mt-2">
+      Import <small>JSON Macro</small>
+    </span>
+  </button>
+
+  <hr>
+
+  <small><i class="fas fa-info-circle"></i>  Right click your Macro buttons to edit/sort/delete/export</small>
+
+
   `
   $("#macros").append(button);
+
+  var macroBackupFileOpen = document.getElementById('macroBackupFile');
+  if (macroBackupFileOpen) {
+    macroBackupFileOpen.addEventListener('change', readmacroBackupFileOpen, false);
+  }
+
   localStorage.setItem('macroButtons', JSON.stringify(buttonsarray));
 }
 
 function edit(i, evt) {
-  evt.preventDefault();
+  if (evt) {
-  evt.stopPropagation();
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
   // console.log("Editing " + i)
 
   if (buttonsarray[i]) {
@@ -205,14 +229,6 @@ function edit(i, evt) {
           //
         }
       },
-      {
-        caption: "Delete Macro",
-        cls: "js-dialog-close alert",
-        onclick: function() {
-          buttonsarray.splice(i, 1);
-          populateMacroButtons();
-        }
-      },
       {
         caption: "Apply",
         cls: "js-dialog-close success",
@@ -398,4 +414,114 @@ function executeJS(js) {
     "use strict";
     ` + js + `
   `)();
+}
+
+
+function macroContextMenu(e) {
+  console.log(e)
+  setMacroContextMenuPosition(e);
+  //e.preventDefault();
+  //$('.linenumber').html((editor.getSelectionRange().start.row + 1));
+  // alert('success! - rightclicked line ' + (editor.getSelectionRange().start.row + 1));
+}
+
+function setMacroContextMenuPosition(e) {
+  var offset = $("#macroBtn" + e).offset();
+
+  var menuItems = `<li onclick="edit(` + e + `)"><a href="#"><i class="fas fa-edit icon"></i> Edit Macro</span></a></li>
+  <li class="divider"></li>`;
+
+  if (e == 0) {
+    //
+  } else {
+    menuItems += `
+      <li onclick="sortMacros(` + e + `, -1)"><a href="#"><i class='fas fa-fw fa-arrow-left icon'></i> Sort: Move Left</a></li>`;
+  }
+
+  if (e < buttonsarray.length - 1) {
+    menuItems += `<li onclick="sortMacros(` + e + `, 1)"><a href="#"><i class='fas fa-fw fa-arrow-right icon'></i>  Sort: Move Right</a></li>`
+  }
+
+  menuItems += `
+  <li class="divider"></li>
+  <li onclick="backupMacro(` + e + `);"><a href="#"><i class="fas fa-save icon"></i> Export Macro</span></a></li>
+  <li class="divider"></li>
+  <li onclick="confirmMacroDelete(` + e + `);" class="fg-red"><a href="#"><i class="fas fa-trash icon"></i> Delete Macro</span></a></li>
+  `
+
+  $("#macroContextMenuItems").html(menuItems)
+
+  $("#macroContextMenu").css({
+    display: 'block',
+    left: offset.left + 20,
+    top: offset.top + 20
+  });
+}
+
+function sortMacros(index, delta) {
+  // var index = array.indexOf(element);
+  var newIndex = index + delta;
+  if (newIndex < 0 || newIndex == buttonsarray.length) return; //Already at the top or bottom.
+  var indexes = [index, newIndex].sort(); //Sort the indixes
+  buttonsarray.splice(indexes[0], 2, buttonsarray[indexes[1]], buttonsarray[indexes[0]]); //Replace from lowest index, two elements, reverting the order
+  populateMacroButtons();
+};
+
+function confirmMacroDelete(i) {
+
+  Metro.dialog.create({
+    title: "<i class='fas fa-trash'></i> Delete Macro",
+    content: `Are you sure you want to delete the Macro: ` + buttonsarray[i].title,
+    toTop: false,
+    //width: '60%',
+    clsDialog: 'dark',
+    actions: [{
+        caption: "Cancel",
+        cls: "js-dialog-close",
+        onclick: function() {
+          //
+        }
+      },
+      {
+        caption: "Delete",
+        cls: "js-dialog-close alert",
+        onclick: function() {
+          buttonsarray.splice(i, 1);
+          populateMacroButtons();
+        }
+      }
+    ]
+  });
+}
+
+function backupMacro(index) {
+  var blob = new Blob([JSON.stringify(buttonsarray[index])], {
+    type: "plain/text"
+  });
+  invokeSaveAsDialog(blob, 'control-macro-backup-' + buttonsarray[index].title + '.json');
+
+}
+
+function readmacroBackupFileOpen(evt) {
+  var files = evt.target.files || evt.dataTransfer.files;
+  loadmacroBackupFileOpen(files[0]);
+  document.getElementById('macroBackupFile').value = '';
+}
+
+function loadmacroBackupFileOpen(f) {
+  if (f) { // Filereader
+    var r = new FileReader();
+    // if (f.name.match(/.gcode$/i)) {
+    r.readAsText(f);
+    r.onload = function(event) {
+      //var grblsettingsfile = this.result
+      console.log(this.result)
+      var newMacro = JSON.parse(this.result);
+      if (newMacro.title != undefined && newMacro.codetype != undefined) {
+        buttonsarray.push(newMacro)
+        populateMacroButtons();
+      }
+
+    }
+  }
 }

app/js/main.js

@@ -4,6 +4,11 @@ var editor;
 var isJogWidget = false;
 var lastJobStartTime = false;
 
+// Disable global Right-click menu, so we can implement UI right click menus
+document.addEventListener("contextmenu", function(e) {
+  e.preventDefault();
+}, false);
+
 function setWindowTitle(status) {
 
   var string = "OpenBuilds CONTROL"

package.json

@@ -126,7 +126,8 @@
       "esptool.exe",
       "esptool-mac",
       "esptool.py",
-      "*.bin"
+      "*.bin",
+      "node_modules"
     ],
     "win": {
       "target": [