Can't get value from sp-textfield as variable in function that will create guide

Hi,

I’m trying to create a function that will use values of textfields as parameters to add guide.
I can’t make it work.

this is how it looks like in html:

<sp-body>
       <div style="align-content: center">
          <sp-textfield placeholder="top" id="guidetop" type="number" style="width: 32%; margin-bottom: 4px"> </sp-textfield>
       </div>
          <sp-textfield placeholder="left" id="guideleft" type="number" style="width: 32%"> </sp-textfield>
          <sp-action-button style="height: 32px" id="btncross" class="buttthird">CROSS</sp-action-button>  
          <sp-textfield placeholder="right" id="guideright" type="number" style="width: 32%"> </sp-textfield>
       <div style="align-content: center; margin-bottom: 10px;">
          <sp-textfield placeholder="bottom" id="guidebottom" type="number" style="width: 32%"> </sp-textfield>
       </div>
          <sp-action-button id="btnaddguides" class="buttfull">ADD GUIDES</sp-action-button>  
          <sp-action-button id="btnclearguides" class="buttfull">CLEAR GUIDES</sp-action-button>  
          	<sp-radio-group id="guideselect">
			
			<sp-radio value="percent" checked>%</sp-radio>
			<sp-radio value="px">PX</sp-radio>
		
		</sp-radio-group>
                    </sp-body>

and this is the function:

async function addguides() {

 let topguide = document.querySelector('#guidetop').value;
 let bottomguide = document.querySelector("#guidebottom").value;
 let leftguide = document.querySelector("#guideleft").value;
 let rightguide = document.querySelector("#guideright").value;

 const batchPlay = require("photoshop").action.batchPlay;

 const result = await batchPlay(
    app.showAlert(leftguide)
 [
     {
      _obj: "make",
      new: {
         _obj: "good",
         position: {
            _unit: "percentUnit",
            _value: leftguide
         },
         orientation: {
            _enum: "orientation",
            _value: "vertical"
         },
         kind: {
            _enum: "kind",
            _value: "document"
         },
         _target: [
            {
               _ref: "document",
               _id: 532
            },
            {
               _ref: "good",
               _index: 4
            }
         ]
      },
      _target: [
         {
            _ref: "good"
         }
      ],
      guideTarget: {
         _enum: "guideTarget",
         _value: "guideTargetCanvas"
      },
      guideUserValue: {
         _unit: "percentUnit",
         _value: leftguide
      },
      _options: {
         dialogOptions: "dontDisplay"
      }
   }
 ],{
    synchronousExecution: false,
    modalBehavior: "fail"
 });
 
 
 }

document.getElementById("btnaddguides").addEventListener("click", addguides);

When I use _value: 30 it works perfectly but somehow if I use variable ( _value: leftguide ) it doesn’t work.

I’ve tried everything. I would really appreciate your help.

Thank you!

Hi Adam

When you set it manually you are using a number.
But .value returns a string from the input.
You’ll need to parseInt or parseFloat it before using.

I hope this helps.

Henrique \\ TMMW

Text Replacer for Premiere Pro | Clips Exporter | Thumbs Up | Selector for Premiere Pro

Hi Henrique,

Thank you very much. I’ve tried this:

 let leftguide = document.querySelector("#guideleft").value;
 let leftnumber = parseInt(leftguide);

but unfortunately when I’m using leftnumber as value in BatchPlay, it doesn’t work.

    _obj: "make",
      new: {
         _obj: "good",
         position: {
            _unit: "percentUnit",
            _value: leftnumber
         },

Hi again Henrique,

It finally works, thank you!

This is the full code:


async function addguides() {
const app = require("photoshop").app;
let doc = app.activeDocument;

let guideswitch = document.querySelector("#guideselect").value;

let width = doc.width
let height = doc.height

 let topguide = document.querySelector('#guidetop').value;
 let topnumber = parseInt(topguide);

 let bottomguide = document.querySelector("#guidebottom").value;
 if (guideswitch == "percentUnit"){
   bottomnumber = (100 - parseInt(bottomguide));
 }
 else{
   bottomnumber = (height - parseInt(bottomguide));
   }
 let leftguide = document.querySelector("#guideleft").value;
 let leftnumber = parseInt(leftguide);

 let rightguide = document.querySelector("#guideright").value;
 if (guideswitch == "percentUnit"){
   rightnumber = (100 - parseInt(rightguide));
 }
 else{
   rightnumber = (width - parseInt(rightguide));

 }


const batchPlay = require("photoshop").action.batchPlay;

const result = await batchPlay(
[
   {
      _obj: "make",
      new: {
         _obj: "good",
         position: {
            _unit: guideswitch,
            _value: topnumber
         },
         orientation: {
            _enum: "orientation",
            _value: "horizontal"
         },
         kind: {
            _enum: "kind",
            _value: "document"
         },
         _target: [
            {
               _ref: "document",
               _id: 532
            },
            {
               _ref: "good",
               _index: 3
            }
         ]
      },
      _target: [
         {
            _ref: "good"
         }
      ],
      guideTarget: {
         _enum: "guideTarget",
         _value: "guideTargetCanvas"
      },
      guideUserValue: {
         _unit: guideswitch,
         _value: topnumber
      },
      _options: {
         dialogOptions: "dontDisplay"
      }
   },
   {
      _obj: "make",
      new: {
         _obj: "good",
         position: {
            _unit: guideswitch,
            _value: bottomnumber
         },
         orientation: {
            _enum: "orientation",
            _value: "horizontal"
         },
         kind: {
            _enum: "kind",
            _value: "document"
         },
         _target: [
            {
               _ref: "document",
               _id: 532
            },
            {
               _ref: "good",
               _index: 3
            }
         ]
      },
      _target: [
         {
            _ref: "good"
         }
      ],
      guideTarget: {
         _enum: "guideTarget",
         _value: "guideTargetCanvas"
      },
      guideUserValue: {
         _unit: guideswitch,
         _value: bottomnumber
      },
      _options: {
         dialogOptions: "dontDisplay"
      }
   },
   {
      _obj: "make",
      new: {
         _obj: "good",
         position: {
            _unit: guideswitch,
            _value: leftnumber
         },
         orientation: {
            _enum: "orientation",
            _value: "vertical"
         },
         kind: {
            _enum: "kind",
            _value: "document"
         },
         _target: [
            {
               _ref: "document",
               _id: 532
            },
            {
               _ref: "good",
               _index: 4
            }
         ]
      },
      _target: [
         {
            _ref: "good"
         }
      ],
      guideTarget: {
         _enum: "guideTarget",
         _value: "guideTargetCanvas"
      },
      guideUserValue: {
         _unit: guideswitch,
         _value: leftnumber
      },
      _options: {
         dialogOptions: "dontDisplay"
      }
   },
   {
      _obj: "make",
      new: {
         _obj: "good",
         position: {
            _unit: guideswitch,
            _value: rightnumber
         },
         orientation: {
            _enum: "orientation",
            _value: "vertical"
         },
         kind: {
            _enum: "kind",
            _value: "document"
         },
         _target: [
            {
               _ref: "document",
               _id: 532
            },
            {
               _ref: "good",
               _index: 4
            }
         ]
      },
      _target: [
         {
            _ref: "good"
         }
      ],
      guideTarget: {
         _enum: "guideTarget",
         _value: "guideTargetCanvas"
      },
      guideUserValue: {
         _unit: guideswitch,
         _value: rightnumber
      },
      _options: {
         dialogOptions: "dontDisplay"
      }
   }
],{
   synchronousExecution: false,
   modalBehavior: "wait"
});

}

document.getElementById("btnaddguides").addEventListener("click", addguides);


1 Like