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

Photoshop UXP Plugin API
1

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.

Screenshot 2021-11-19 at 11.13.14
Screenshot 2021-11-19 at 11.13.14484×522 8.12 KB

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!

2

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

3

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
         },
4

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);
2 Likes
5

Amazing, thank you! This helped me! parseInt() was the winner here!
I had the same problem, trying to retrieve a users value via an input, and using it within the batchPlay.

I did the parseInt() right within the JSON object but it works, not sure if that’s correct syntax but hey! It’s working!

// Get User input values
const xValue = document.querySelector("#xScale").value;
const yValue = document.querySelector("#yScale").value;

Then use it in the batchPlay object:

{
  "_obj": "displace",
  "horizontalScale": parseInt(xValue),
  "verticalScale": parseInt(yValue),
  "displacementMap": {
      "_enum": "displacementMap",
      "_value": "stretchToFit"
}
6

Looks like good / guide is the new green / grain :grin:
If you want the code to be a bit more semantically correct, you could replace "good" with "guide" everywhere :slight_smile:

Just a normal JS object there, so any function call inside is fine. Btw, you can also use the Number() constructor to cast the string value, otherwise you might loose some precision depending on what your users are able to input:

parseInt("1.2") // -> 1
Number("1.2") // -> 1.2
2 Likes
7

“good” catch :slight_smile: I have no idea from where it came from :slight_smile:

8

The char code for both is "Gd " and I assume batchPlay under the hood just takes the first match when converting to string codes.

1 Like