@@ -831,6 +836,9 @@
+
+
+
diff --git a/app/js/macros.js b/app/js/macros.js
new file mode 100644
index 0000000..eb5eb18
--- /dev/null
+++ b/app/js/macros.js
@@ -0,0 +1,149 @@
+var buttonsarray = []
+
+function populateMacroButtons() {
+
+ $("#macros").empty();
+ for (i = 0; i < buttonsarray.length; i++) {
+ var button = `
+ `
+ $("#macros").append(button);
+ }
+ // append add button
+ var button = `
+ `
+ $("#macros").append(button);
+ localStorage.setItem('macroButtons', JSON.stringify(buttonsarray));
+}
+
+function edit(i, evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ console.log("Editing " + i)
+
+ if (buttonsarray[i]) {
+ var icon = buttonsarray[i].icon;
+ var title = buttonsarray[i].title;
+ var gcode = buttonsarray[i].gcode;
+ var cls = buttonsarray[i].class;
+ } else {
+ var icon = "far fa-question-circle";
+ var title = "";
+ var gcode = "";
+ var cls = "";
+ }
+
+ var macroTemplate = ``
+
+ Metro.dialog.create({
+ title: "Edit Macro",
+ content: macroTemplate,
+ actions: [{
+ caption: "Cancel",
+ cls: "js-dialog-close",
+ onclick: function() {
+ //
+ }
+ },
+ {
+ caption: "Delete Macro",
+ cls: "js-dialog-close alert",
+ onclick: function() {
+ buttonsarray.splice(i, 1);
+ populateMacroButtons();
+ }
+ },
+ {
+ caption: "Apply",
+ cls: "js-dialog-close success",
+ onclick: function() {
+ var seq = $('#macroseq').val();
+ if (buttonsarray[seq]) {
+ buttonsarray[seq].icon = $('#macroicon').val();
+ buttonsarray[seq].title = $('#macrotitle').val();
+ buttonsarray[seq].gcode = $('#macrogcode').val();
+ buttonsarray[seq].class = $('#macrocls').val();
+ populateMacroButtons();
+ } else {
+ buttonsarray.push({
+ title: $('#macrotitle').val(),
+ icon: $('#macroicon').val(),
+ gcode: $('#macrogcode').val(),
+ class: $('#macrocls').val()
+ })
+ populateMacroButtons();
+ }
+ }
+ }
+ ]
+ });
+
+ var options = {
+ placement: 'bottom',
+ collision: 'none',
+ animation: true,
+ hideOnSelect: true,
+ };
+
+ // fa iconpicker https://github.com/farbelous/fontawesome-iconpicker
+ $('#macroicon').iconpicker(options);
+ $("#macrocls").val(cls).trigger("change");
+
+}
+
+function run(i, evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ console.log("Run " + i)
+}
+
+
+// run it to begin
+if (localStorage.getItem('macroButtons')) {
+ buttonsarray = JSON.parse(localStorage.getItem('macroButtons'));
+}
+
+populateMacroButtons()
\ No newline at end of file
diff --git a/app/lib/iconpicker/README.md b/app/lib/iconpicker/README.md
new file mode 100644
index 0000000..a0b03f0
--- /dev/null
+++ b/app/lib/iconpicker/README.md
@@ -0,0 +1,132 @@
+fontawesome-iconpicker
+========================
+
+
+
+[](https://www.npmjs.com/package/fontawesome-iconpicker)
+[](https://github.com/itsjavi/itsjavi.github.io/blob/master/BACKERS.md#sponsors--backers)
+[](https://github.com/itsjavi/itsjavi.github.io/blob/master/BACKERS.md#sponsors)
+
+
+Font Awesome Icon Picker is a fully customizable plugin for Twitter Bootstrap,
+with a powerful base API, based on [bootstrap-popover-picker](https://farbelous.github.io/bootstrap-popover-picker/)
+
+You can use Font Awesome 5 or another font icon set of your choice (icon list is totally customizable).
+
+[View demos](https://farbelous.github.io/fontawesome-iconpicker/)
+
+## Instantiation
+
+You can call the plugin in several ways:
+
+```javascript
+// Create instance if not exists (returns a jQuery object)
+$('.my').iconpicker();
+$('.my').iconpicker({ /*options*/ }); // you can also specify options via data-* attributes
+
+// For the first matched element, access to a plugin property value
+$('.my').data('iconpicker').iconpickerProperty;
+
+// For the first matched element, call a plugin instance method with the given args
+$('.my').data('iconpicker').iconpickerMethod('methodArg1', 'methodArg2' /* , other args */);
+
+// Call and apply a plugin method to EACH matched element.
+$.iconpicker.batch('.my', 'iconpickerMethod', 'methodArg1', 'methodArg2' /* , other args */); ->
+```
+
+## Triggered Events
+
+All of them exposes the plugin instance through event.iconpickerInstance
+
+In order of call:
+
+* iconpickerCreate
+* iconpickerCreated
+* iconpickerShow
+* iconpickerShown
+* iconpickerSelect (also exposes event.iconpickerItem and event.iconpickerValue)
+* iconpickerUpdate
+* iconpickerInvalid (also exposes event.iconpickerValue)
+* iconpickerSetValue (also exposes event.iconpickerValue)
+* iconpickerSetSourceValue (also exposes event.iconpickerValue)
+* iconpickerUpdated
+* iconpickerSelected (also exposes event.iconpickerItem and event.iconpickerValue)
+* iconpickerHide
+* iconpickerHidden
+* iconpickerDestroy
+* iconpickerDestroyed
+
+```javascript
+// Bind iconpicker events to the element
+$('.my').on('iconpickerSelected', function(event){
+ /* event.iconpickerValue */
+});
+```
+
+## Popover placement extensions
+
+This plugin comes with more placement options than the original Bootstrap Popover.
+Here are all the possibilities in detail:
+
+ 1 2 3 4 5
+ G 6
+ F 7
+ E 8
+ D C B A 9
+
+ 0. inline (no placement, display as inline-block)
+ 1. topLeftCorner
+ 2. topLeft
+ 3. top (center)
+ 4. topRight
+ 5. topRightCorner
+ 6. rightTop
+ 7. right (center)
+ 8. rightBottom
+ 9. bottomRightCorner
+ A. bottomRight
+ B. bottom (center)
+ C. bottomLeft
+ D. bottomLeftCorner
+ E. leftBottom
+ F. left (center)
+ G. leftTop
+
+
+## Available options
+
+```javascript
+var options = {
+ title: false, // Popover title (optional) only if specified in the template
+ selected: false, // use this value as the current item and ignore the original
+ defaultValue: false, // use this value as the current item if input or element value is empty
+ placement: 'bottom', // (has some issues with auto and CSS). auto, top, bottom, left, right
+ collision: 'none', // If true, the popover will be repositioned to another position when collapses with the window borders
+ animation: true, // fade in/out on show/hide ?
+ //hide iconpicker automatically when a value is picked. it is ignored if mustAccept is not false and the accept button is visible
+ hideOnSelect: false,
+ showFooter: false,
+ searchInFooter: false, // If true, the search will be added to the footer instead of the title
+ mustAccept: false, // only applicable when there's an iconpicker-btn-accept button in the popover footer
+ selectedCustomClass: 'bg-primary', // Appends this class when to the selected item
+ icons: [], // list of icon objects [{title:String, searchTerms:String}]. By default, all Font Awesome icons are included.
+ fullClassFormatter: function(val) {
+ return 'fa ' + val;
+ },
+ input: 'input,.iconpicker-input', // children input selector
+ inputSearch: false, // use the input as a search box too?
+ container: false, // Appends the popover to a specific element. If not set, the selected element or element parent is used
+ component: '.input-group-addon,.iconpicker-component', // children component jQuery selector or object, relative to the container element
+ // Plugin templates:
+ templates: {
+ popover: '