Develop Reference

Open a CEP dialog from a CEP extension in After Effects

I have a CEP extension in After Effects and I want it so that when a user clicks a button, a settings dialog opens up in a new floating dialog box. Seems like it would be such basic functionality but somehow I'm not seeing anywhere in the (admittedly sparse) documentation how to open up a dialog box. I've seen some other people say that you can make a hidden extension which opens the dialog, but I've seen no example of that and it is unclear how that would work to me.

You can look up documentation for ScriptUI. Heres a link to the pdf: https://adobeindd.com/view/publications/a0207571-ff5b-4bbf-a540-07079bd21d75/92ra/publication-web-resources/pdf/scriptui-2-16-j.pdf
You can create a dialog either in a function in the jsx, or give it its own jsx page and //#include it onclick.
I know this is kind of a generic answer, but incase anyone else is having trouble this will give you a good jumping off point.

So in order to provide the functionality you need, you'll have to initialize a dialog box first, then add a button, then force it to open a specific settings dialog. I recommend something like this:
var dialog = new Window("dialog");
dialog.text = "After Effects Dialog Script";
//Contents
var newMsg = dialog.add("group", undefined, {name: "newMsg"});
newMsg.orientation = "column";
var newMsgText = newMsg.add("statictext", [0, 0, 400, 40], "", {name: "newMsgText", multiline: true});
newMsgText.text = "Would you like to open a settings dialog?";
//Button UI
var buttonPanel = dialog.add("group", undefined, {name: "buttonPanel"});
buttonPanel.orientation = "row";
buttonPanel.alignChildren = ["center", "bottom"];
var enter = buttonPanel.add("button", undefined, undefined, {name: "ok"});
enter.text = "Continue";
enter.value = true;
var cancel = buttonPanel.add("button", undefined, undefined, {name: "cancel"});
cancel.text = "Cancel";
cancel.value = false;
//Runs the dialog code
dialog.show();
//Grabs answer to yes or no question
var dialogInput = dialog.show();
if(dialogInput == true){
app.openDlg (prompt, filter, multiSelect); //Essentially
}
else {
alert("The action was canceled.");
}
You will have to find the direct path to the CEP dialog you wish to open. I'm unfamiliar with them and their integrations to After Effects, so I can't help you much beyond getting the script set up. However I have a few comments on resources that may be of assistance here too.
That ScriptUI resource by Peter Kahrel is fantastic. I've been working with it for the last few weeks. I wanted to add on to what Jake L said by dropping in a few more great examples of Extendscript Support because you kinda have to dig for the documentation, but it's definitely there.
https://extendscript.docsforadobe.dev/
I just stumbled upon the Extendscript Library recently, but it details a lot of functions, dives deep into events and event handlers, and even explains how you can set up an environment for extendscript via vscode.
I also like to check out NTProductions on youtube for assistance. I'm working in Indesign, but a lot of the extendscript functions work between the various adobe programs and you can even troubleshoot basic functions in the Adobe ExtendScript Toolkit.
And if you already have an Adobe CC account, don't forget to download the Scripting SDK from adobe APIs and Services. You'll have to sign in to get there, but it's a pretty useful local documentation.
https://developer.adobe.com/console/servicesandapis/id#
EDIT (again): I also found these after posting and will commit to adding more as I find them. Extendscript documentation must become more available! :-)
https://docsforadobe.dev/
http://yearbook.github.io/esdocs/#/

Why does jquery return different values than the values submitted?

Update:
Please see the answer noted below as, ultimately, the problem had nothing to do with jsquery.
=============
Issue:
I submit an object to jquery to convert into a serialized string that will become part of a "POST" request to a server, and the data returned from the serialization request is different than the data sent on many occasions.
An example:
The JavaScript code that implements the server POST request:
function send_data(gpg_data) {
var query_string;
query_string = '?' + $.param(gpg_data, traditional = true);
console.log('gpg_data =', gpg_data)
console.log('query_string =', query_string);
$.post(server_address + query_string);
return;
}
This is the structure sent to the jquery param() function.
(copied from the browser console in developer mode.)
gpg_data =
{controller_status: 'Connected', motion_state: 'Stopped', angle_dir: 'Stopped', time_stamp: 21442, x_axis: 0, …}
angle_dir: "Stopped"
controller_status: "Connected"
force: 0
head_enable: 0
head_x_axis: 0
head_y_axis: 0
motion_state: "Stopped"
time_stamp: 21490
trigger_1: 0
trigger_2: 0
x_axis: 0
y_axis: "0.00"
. . . and the returned "query string" was:
query_string = ?controller_status=Connected&motion_state=Stopped&angle_dir=Stopped&time_stamp=21282&x_axis=0&y_axis=0.00&head_x_axis=0&head_y_axis=0&force=0&trigger_1=1&trigger_2=1&head_enable=0
The data received by the server is:
ImmutableMultiDict([('controller_status', 'Connected'), ('motion_state', 'Stopped'), ('angle_dir', 'Stopped'), ('time_stamp', '21282'), ('x_axis', '0'), ('y_axis', '0.00'), ('head_x_axis', '0'), ('head_y_axis', '0'), ('force', '0'), ('trigger_1', '1'), ('trigger_2', '1'), ('head_enable', '0')])
For example, note that "trigger_1" returns 1 when the data sent to it is a zero.
I have tried setting the query to "traditional = true" to revert to an earlier style of query handling as some articles suggested - which did not work.  I tried this with jquery 3.2 and 3.6.
I am not sure exactly how jquery manages to munge the data so I have no idea where to look.
I have looked at my script and at the unpacked jquery code, and I can make no sense out of why or how it does what it does.
Any help understanding this would be appreciated.
P.S.
web searches on "troubleshooting jquery" returned very complex replies that had more to do with editing e-commerce web pages with fancy buttons and logins than with simply serializing data.
P.P.S.
I am tempted to just chuck the jquery and write my own serialization routine. (grrrr!)
===================
Update:
As requested, a link to the browser-side context.
To run: unpack the zip file in a folder somewhere and attach an analog joystick/gamepad to any USB port, then launch index.html in a local browser.  Note that a purely digital gamepad - with buttons only or with a joystick that acts like four buttons - won't work.
You will want to try moving joystick axes 1 and 2, (programmatically axes 0 and 1) and use the first (0th) trigger button.
You will get a zillion CORS errors and it will complain bitterly that it cannot reach the server, but the server side context requires a GoPiGo-3 robot running GoPiGo O/S 3.0.1, so I did not include it.
Note: This does not work in Firefox as Firefox absolutely requires a "secure context" to use the Gamepad API.  It does work in the current version of Chrome, (Version 97.0.4692.99 (Official Build) (64-bit)), but throws warnings about requiring a secure context.
Please also note that I have made every attempt I know how to try to troubleshoot the offending JavaScript, but trying to debug code that depends on real-time event handling in a browser is something I have not figured out how to do - despite continuous searching and efforts.  Any advice on how to do this would be appreciated!
======================
Update:
Researching debugging JavaScript in Chrome disclosed an interesting tidbit:
Including the line // #ts-check as the first line in the JavaScript code turns on additional "linting" (?) or other checks that, (mostly) were a question of adding "var" to the beginning of variable declarations.
However. . . .
There was one comment it made:
gopigo3_joystick.x_axis = Number.parseFloat((jsdata.axes[0]).toFixed(2));
gopigo3_joystick.y_axis = Number.parseFloat(jsdata.axes[1]).toFixed(2);
I could not assign gopigo3_joystick.y_axis to a string object, (or something like that), and I was scratching my head - that was one of the pesky problems I was trying to solve!
If you look closely at that second line, you will notice I forgot a pair of parenthesis, and that second line should look like this:
gopigo3_joystick.y_axis = Number.parseFloat((jsdata.axes[1]).toFixed(2));
Problem solved - at least with respect to that problem.

I figured it out and it had nothing to do with jquery.
Apparently two things are true:
The state of the gpg_data object's structure is "computed", (snapshot taken), the first time the JavaScript engine sees the structure and that is the state that is saved, (even though the value may change later on). In other words, that value is likely totally bogus.
Note: This may only be true for Chrome. Previous experiments with Firefox showed that these structures were updated each time they were encountered and the values seen in the console were valid. Since Firefox now absolutely requires a secure context to use the gamepad API, I could not use Firefox for debugging.
I was trying to be "too clever". Given the following code snippet:
function is_something_happening(old_time, gopigo3_joystick) {
if (gopigo3_joystick.trigger_1 == 1 || gopigo3_joystick.head_enable == 1) {
if (old_time != Number.parseFloat((gopigo3_joystick.time_stamp).toFixed(0))) {
send_data(gopigo3_joystick)
old_time = gopigo3_joystick.time_stamp
}
}
return;
}
The idea behind this particular construction was to determine if "something interesting" is happening, where "something interesting" is defined as:
A keypress, (handled separately)
A joystick movement if either the primary trigger or the pinky trigger is pressed.
Movement without any trigger pressed is ignored so that if the user accidentally bumps against the joystick, the robot doesn't go running around.
Therefore the joystick data only gets updated if the trigger is pressed. In other words, trigger "release" events - the trigger is now = 0 - are not recorded.
The combination of these two events - Chrome taking a "snapshot" of object variables once and once only, (or not keeping them current) - and the trigger value persisting, lead me to believe that jquery was the problem since the values appeared to be different on each side of the jquery call.

ExtJs4 Generating an Excel file from javascript in IE gets me:"the data area passed to a system call is too small"

I've implemented this UX for ExtJs 4 (it generates an Excel file from an ExtJs 4 grid or store)
http://druckit.wordpress.com/2013/10/26/generate-an-excel-file-from-an-ext-js-4-grid/#comment-982
and it works perfectly in Chrome, however I keep getting this error " the data area passed to a system call is too small" in any version of IE
Here is the fragment of code that seems to be the problem, the full code is in the link above.
var el = Ext.DomHelper.append(gridEl, {
tag: "a",
download: title + "-" + Ext.Date.format(new Date(), 'Y-m-d Hi') + '.xls',
//download: 'descarga.xls',
href: location
});
el.click(); //this line seems to be causing the error
Ext.fly(el).destroy();
}
I know there is downlodify and other options (like server side generating) but they are not an option at this point for me.
Is there any chance I can make this UX work in IE?
Can anyone point me in the right direction ?
Thank you.

Using the listed method will not work well with IE because IE has a limit of 2083 characters. If you debug the code in this fiddle https://fiddle.sencha.com/#fiddle/17j you'll notice that the location variable is well over 5000 characters and also fails in IE. I'm assuming the issue is the same if you debug your code as well.

Google calendar feed not showing events

I have a public google calendar. The feed tests okay, but I can't get the events to show up in fullcalendar. My feed IS the XML feed for sharing. I've read similar posts but they didn't help.
http://drcraigjohnson.net/fullcalendar-1.5.3/demos/theme.html
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: 'https://www.google.com/calendar/feeds/jl2um2s9odbrtj7lt3bn9817vg%40group.calendar.google.com/public/basic',
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
},
});
});

I was not able to test this with jsfiddle - I guess I don't have access to your Google Calendar. Anyway, a couple of things you might correct here:
Remove the HTML comment from the JavaScript section! The one which starts with <!-- in the script tag
You have an extra comma after the eventClick callback - remove that. That should have thrown a syntax error for you though. Your JS wont run with syntax errors.
Try checking your API calls with browser tools (Chrome Dev tools or Firebug) to debug further.

Oops! Make sure google calendar "Share only my free/busy information" is unchecked. Tested by using a known working feed, i.e. google holiday xml which worked. Then i knew it something re: my feed. Thanks again. Problem solved!!!

how to use bespin commands on embedded bespin?

I set my embedded bespin as below, which works good:
_editorComponent = new bespin.editor.Component('editor', {
language : my_language,
loadfromdiv : true,
set : {
fontsize : 10,
tabsize : 4,
highlightline : 'on'
}
});
and html part for this:
<div id='editor'>some code...</div>
By following embedded bespin's code, i was able to find out getContent and setContent, however i couldnt find anything on Bespin documentation for further implementations of Bespin.
Is there anyone who knows how to add search and replace functionality to it? for example from above instance:
_editorComponent.searchText("some_string");
_editorComponent.replaceText("some_string","another_string");
_editorComponent.focusText("some_string");
Do we have such commands on bespin, which i can use on my application?
Edit: Response to same question on google groups:
There was some support for
search once upon a time in Bespin, but
it's not back to the rebooted Bespin
yet. But it's definitely one of the
features on my to-be-implemented list
;)
So this can only be done with workarounds for now, any workaround is more than welcome.

Edit: response to same question on google groups:
There was some support for search once upon a time in Bespin, but it's
not back to the rebooted Bespin yet. But it's definitely one of the
features on my to-be-implemented list ;)