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:
Your function in the jsx file takes a parameter, so change it to this:
(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.
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:
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
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!
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.
is(":checked")
;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?
Copy link to clipboard
Copied
Your function in the jsx file takes a parameter, so change it to this:
(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.
Copy link to clipboard
Copied
Rookie mistake! Thank you!
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
Copy link to clipboard
Copied
his is really great and useful information. I'm glad you shared this useful information.
HyderabadStar
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.
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.
Copy link to clipboard
Copied
the City that’s what you think of when you see the words “hyderabadescortgirls” on site.