Text Alignment made easy and convenient. (#1804)

* text alignment made easy

* added description and removed id

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

examples/lib/defaultHtmlStepUi.js

@@ -121,7 +121,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
               paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
               '</div>';
           }
-          else { // Non color-picker input types
+          else if(inputDesc.type === 'button'){
+            html = '<div><button name="' + paramName + '" type="' + inputDesc.type + '" >\
+            <i class="fa fa-crosshairs"></i></button>\
+            <span>click to select coordinates</span>\
+            </div>';
+          }
+          else { // Non color-picker input types and other than a button
+
             html =
               '<input class="form-control target" type="' +
               inputDesc.type +
@@ -402,6 +409,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     var img = $(step.imgElement);
 
+    let customXCoord = '20'; //default x coordinate
+    let customYCoord = '20'; //default y coordinate
+
+    const customButton = $('button[name="Custom-Coordinates"]');
+      img.click(function(e) {
+          customXCoord = e.offsetX;
+          customYCoord = e.offsetY;
+          customButton.click(function() {
+            $('input[name="x"]').val(customXCoord);
+            $('input[name="y"]').val(customYCoord);
+          })
+      });
+
     img.mousemove(function(e) {
       var canvas = document.createElement('canvas');
       canvas.width = img.width();

examples/lib/mapHtmltypes.js

@@ -22,6 +22,9 @@ function mapHtmlTypes(inputInfo){
     htmlType = inputInfo.min != undefined ? 'range' : 'text';
     if (htmlType === 'range') inputInfo.step = inputInfo.step || 0.1; // default range step size for float
     break;
+  case 'coordinate-input':
+    htmlType = 'button';
+    break;
   default:
     htmlType = 'text';
     break;

src/modules/TextOverlay/info.json

@@ -8,6 +8,10 @@
             "desc": "Enter the text to overlay.",
             "default": "Lorem ipsum"
         },
+        "Custom-Coordinates": {
+            "type": "coordinate-input",
+            "desc": "Click to fill Coordinates"
+        },
         "x": {
             "type": "integer",
             "desc": "Starting text horizontal position.",