• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Button and Checkbox scope with Topcoat

Enthusiast ,
Jan 23, 2019 Jan 23, 2019

Copy link to clipboard

Copied

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:

Views

2.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Contributor , May 23, 2019 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());  

(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.

Votes

Translate

Translate
Adobe Employee ,
Feb 28, 2019 Feb 28, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 28, 2019 Feb 28, 2019

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 01, 2019 Mar 01, 2019

Copy link to clipboard

Copied

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");
  5.             csInterface.evalScript('determineSwatchBounds(' + checked + ')');   
  6.         });     
  7.     }   

  1. function determineSwatchBounds(checked){   
  2. alert(checked.toString());   

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 23, 2019 May 23, 2019

Copy link to clipboard

Copied

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

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

(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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

Rookie mistake! Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 18, 2020 Sep 18, 2020

Copy link to clipboard

Copied

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

Visit -> NatashaRoy

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 29, 2020 Sep 29, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 23, 2023 May 23, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 23, 2023 May 23, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 23, 2023 May 23, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines