Skip to main content
wckdtall
wckdtall
Inspiring
January 23, 2019
Answered

Button and Checkbox scope with Topcoat

  • January 23, 2019
  • 7 replies
  • 3385 views

I'm new to topcoat and the markup used, and am trying to test the scope of a button and checkbox relationship I have in my extension. Since it's split into a few files, and I have to reload photoshop every time I want to test a script change, I'm having difficulty finding out exactly where it's occurring. Calling a function through hostscript.jsx that throws "alert(guideCheck.checked)" from a function will tell me the state of my checkbox, but without all the jQuery. Trying to utilize topcoat, I had the below script that I'm trying to figure out. My problem being, since there are multiple files that interact differently, I'm not sure if I'm simply having a scope issue, or if I can even call upon the checkbox variable used reliably. I tried to boil down my script to simply alert me, but I can't get photoshop to respond to tell me what "$(this)" is with files opened or closed. Any guidance would be much appreciated.

This is from index.html that renders the form:

<body class="hostElt">  
    <div id="content">  
<input id="guideTest" name="guideTest" type="checkbox"> Ignore Guides  
            <button id="automagic" class="topcoat-button--large hostFontSize" style="width:100%">Automatic</button> 

This is from main.js:

    function init() {  
        themeManager.init();  
        $("#automagic").click(function () {  
            csInterface.evalScript('determineSwatchBounds()');  
        });    
    } 

This is from hostscript.jsx where I'm trying to get the state of the checkbox from:

function determineSwatchBounds(){  
alert($(this).attr('guideTest').checked);  
} 

 

Visual rendered extension below:

This topic has been closed for replies.
Correct answer Jamesey2001

Your function in the jsx file takes a parameter, so change it to this:

  1. function determineSwatchBounds(yupItsChecked){ 
  2.      alert(yupItsChecked.toString());  
  3. } 

(NOTE: your variable "yupItsChecked" in the .js file is not available in the jsx side,

the two are mutually exclusive and run in different threads.)

Hope this answers your question.

7 replies

N
new30024246rydy
Participant
May 23, 2023

the City that’s what you think of when you see the words “hyderabadescortgirls” on site.

R
rithika30024181ib6i
Participant
May 23, 2023

I am From Chennaiescortgirls Seeing is believing! We have updated and revitalize website with some of the newest features which will make you stutter.

J
jack23987770i2zn
Participant
May 23, 2023

Hi am lena i forgot that javascript was case sensitive, changing the 'style_cont' to 'Style_cont', took care of my problem.

S
Sonia5EDF
Participant
September 29, 2020

his is really great and useful information. I'm glad you shared this useful information.
HyderabadStar 

A
Anonymous
September 18, 2020

I truly like and value your work. I truly like your style. You rock and please keep up the successful work

Visit -> NatashaRoy

J
Jamesey2001
Inspiring
March 1, 2019

The problem you are having is that you are trying to resolve your UI element "guideTest" in the extendscript ( jsx ) part of your addon.

The jsx is only concerned with the scripting of Photoshop so you will need to resolve the UI in the .js file and pass the values as a parameter to the jsx functions.

Consider this amendment.

  1. function init() {   
  2.         themeManager.init();   
  3.         $("#automagic").click(function () {   
  4.             var checked = $('#guideTest').is(":checked");
  6.             csInterface.evalScript('determineSwatchBounds(' + checked + ')');   
  7.         });     
  8.     }   

  1. function determineSwatchBounds(checked){   
  2. alert(checked.toString());   
  3. } 
wckdtall
wckdtallAuthor
Inspiring
May 23, 2019

Sorry for going radio silent for so long, I was on other projects. I've implemented your amendments, but I don't think I understand the relationship properly, and IDs vs variables vs how these are being called correctly. Yes as Erin mentioned this is now deprecated, but it will help finalize my extension. I've changed some names of variables so they are more easily identifiable vs HTML states and features, but here are my 3 files currently, that I'm getting no response in PS for.

main.js:

/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
/*global $, window, location, CSInterface, SystemPath, themeManager*/
(function () {
    'use strict';
    var csInterface = new CSInterface();
   
   
function init() { 
        themeManager.init(); 
        $("#automagic").click(function () { 
            var yupItsChecked = $('#guideTest').is(":checked");
            csInterface.evalScript('determineSwatchBounds(' + yupItsChecked + ')'); 
        });   
    } 
       
    init();
}());

hostscript.jsx:

function determineSwatchBounds(){
     alert(yupItsChecked.toString()); 
}

index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
        
<link rel="stylesheet" href="css/topcoat-desktop-dark.min.css"/>
<link  id="hostStyle" rel="stylesheet" href="css/styles.css"/>
    </head>
<body class="hostElt">
    <div id="content">
        <input id="guideTest" name="guideTest" type="checkbox"> Ignore Guides
            <button id="automagic" class="topcoat-button--large hostFontSize" style="width:100%">Automatic</button>
    
    <script src="js/libs/CSInterface.js"></script>
    <script src="js/libs/jquery-2.0.2.min.js"></script>
    <script src="js/themeManager.js"></script>
    <script src="js/main.js"></script>        
</body>
</html>


Where am I going wrong?

J
Jamesey2001Correct answer
Inspiring
May 23, 2019

Your function in the jsx file takes a parameter, so change it to this:

  1. function determineSwatchBounds(yupItsChecked){ 
  2.      alert(yupItsChecked.toString());  
  3. } 

(NOTE: your variable "yupItsChecked" in the .js file is not available in the jsx side,

the two are mutually exclusive and run in different threads.)

Hope this answers your question.

erinferinferinf
Adobe Employee
erinferinferinf
Adobe Employee
February 28, 2019

Hi there wickedtall person!

Sorry about how late this reply is... did you ever figure it out?

I have a couple of resources that might help you out if you're still facing this issue.

First of all, it's my understanding that topcoat is depreciated. You might want to try out spectrum-css, which was very recently open sourced. Here are the docs. Also check out this article on Spectrum by DBarranca​

As for quitting and restarting Photoshop to test the changes, that is, indeed, a slow and frustrating process. I wound up creating the following image in order to remember how it worked for this article:

1*GPadnSD9WmLK6V3mK5OePg.png

Turns out this is true for Photoshop, but in After Effects and Premiere Pro you only need to close and open your panel.

Right now you're using CEP to build a Photoshop panel, but soon we how to bring UXP to Photoshop, which will, eventually, make the panel/extension development process much faster, with far fewer app restarts and easier-to-use UI elements.

I know none of this directly answers your question but I hope it's somewhat helpful.

Let me know!

- Erin

wckdtall
wckdtallAuthor
Inspiring
March 1, 2019

Thanks! I’ll check it out! This is definitely helpful. Good to know that topcoat is depreciated and and there’s a replacement. With Extendscript toolkit hitting an outdated milestone, continuously illegible photoshop human readable markup, outdated documentation cross CC programs and only 3rd party script UI documentation existing it’s always helpful to hear any solutions to a problem. There are so many intricacies to this software that can’t be invoked in actions or in scripts that I‘m always appreciative of the hidden features! Hopefully I will figure out my very specific extension need! Thank You!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices