Copy and paste multiple times from illustrator to photoshop - javascript

So this is the small issue I am having. I am trying to send an object from illustrator to photoshop, but I want to copy and past 2 versions one that is stroked and one that is stroked. The main problem I have is the paste in photoshop comes after I have done the 2 different versions. the P is the path item that is the outline. so it will paste two versions that have no stroke because it runs the first past after the second copy has already run.
function CreateLabel(Label)
{
var P = Label.pageItems[0]
app.copy()
// get Print Area Width and Height and convert to inces at 300 DPI
var LW = "\"" + String(Math.floor((Label.width/72)*300)) + "px\""
var LH = "\"" + String(Math.floor((Label.height/72)*300)) + "px\""
// create the new document
var Cmd = "app.documents.add(" + LW + "," + LH + ", 300,\"Label\", NewDocumentMode.RGB,DocumentFill.TRANSPARENT);";
TellPhoto(Cmd)
app.copy()
TellPhoto('app.activeDocument.paste();')
P.stroked = false
app.copy()
TellPhoto('app.activeDocument.layers.getByName(\"Layer 1\").remove();' )
//bt.body = 'BridgeTalk.bringToFront("illustrator");';
//bt.send(5)
};
// paste the saved bit
function TellPhoto(Message)
{
var bt = new BridgeTalk();
bt.target = "photoshop";
bt.body = Message
bt.onError = function(e)
{
alert(e.body);
};
bt.send(1);
}
so I need something that will almost pause until photoshop has pasted the current clipboard in.

I come across similar glitches from time to time with app.copy() and app.paste() commands. Quite often an additional pause ($.sleep(200)) before app.paste() helps. My guess is the app (Illustrator) just can't keep up to copy all the data by the time when another app (Bridge or even the same Illustrator) tries to paste it.

Related

How to copy text to clipboard in Vaadin without addon

I have spent long, too long, trying to make all of the directory components work. They took something that could have been super simple and made it complex and difficult.
I finally buckled and tried to copy a javascript function into my project and it worked with a simple method. The method, like all others need to be initiated by some other component. But do that in any way you want it.
All I'll leave here is the code. And the hope that somebody else will find this and use less time than I did.
void copyText(String text){
Page page = UI.getCurrent().getPage();
page.executeJavaScript(
"var el = document.createElement('textarea');" +
"el.value = $0;" +
"el.setAttribute('readonly', '');" +
"el.style = {" +
" position: 'absolute'," +
" left: '-9999px'" +
"};" +
"document.body.appendChild(el);" +
"el.select();" +
"document.execCommand('copy');" +
"document.body.removeChild(el);",
text);
}
void copyText(String text){
Page page = UI.getCurrent().getPage();
page.executeJavaScript(
"var el = document.createElement('textarea');" +
"el.value = $0;" +
"el.setAttribute('readonly', '');" +
"el.style = {" +
" position: 'absolute'," +
" left: '-9999px'" +
"};" +
"document.body.appendChild(el);" +
"el.select();" +
"document.execCommand('copy');" +
"document.body.removeChild(el);",
text);
}
Just to further explain the code. We need to initialize the page and then execute plain javascript-code. In this code, I pass the String text as a parameter and the utilize it in the code as "$0".
The code creates a textarea, which most of the addons in the directory also does. It then sets the text-string, it hide it from the ui with some styling. Then the textarea gets added to our file, because you are only allowed to copy a value that is visible. Then the text is selected, copied, and lastly the textarea is removed. Fast and clean.
You can also add the following line:
el.setSelectionRange(0, 99999);
Add it after the el.select(); line. According to W3, it should work better on phones with this line, but I have not tested it.

drawImage on HTML5 canvas is not working

I'm creating a 'catch falling items' game, and have successfully drawn the 'catcher' image and the 'falling items' images onto the canvas. But I'd like to also show an image (x.png) when a falling image is not caught and hits the base of my html5 canvas. The generateX function is called from the animate function and when a falling image hits the base of the canvas. The sound.play() is working. The console.logs in the generateX function log the following - 2,3 | 1,3 | 1,3 - so I know that the image is not completely loaded the first time this function runs. Everything seems to be working EXCEPT for the actual image displaying. I tried to structure it in ways that other threads have suggested, but nothing is working. Any help is much appreciated!
generateX: function() {
console.log('inside generateX func');
var imgX = new Image();
imgX.src = 'assets/x.png';
function drawX() {
console.log(3);
counter+=20;
context.drawImage(imgX, xIcon.x + counter, xIcon.y, xIcon.width, xIcon.height);
xArr.push(imgX);
console.log('xArr', xArr);
}
if (imgX.complete) {
console.log(1);
drawX();
} else {
console.log(2);
imgX.onload = drawX;
}
helper.checkMisses();
}
animate: function() {
var sound;
if (continueAnimating) {
requestAnimationFrame(helper.animate);
}
for (var i = 0; i < surveys.length; i++) {
var survey = surveys[i];
if (helper.isColliding(survey, dinoSaurus)) {
sound = new Audio("audio/coinSound.mp3");
sound.play();
score += 5;
helper.resetSurvey(survey);
}
survey.y += survey.speed;
// if the survey is below the canvas,
if (survey.y > canvas.height) {
sound = new Audio("audio/buzzerSound.mp3");
sound.play();
helper.generateX();
helper.resetSurvey(survey);
}
}
// redraw everything
helper.drawAll();
}
--
resetSurvey: function(survey) {
// randomly position survey near the top of canvas
survey.x = Math.random() * (canvas.width - surveyWidth);
survey.y = 40 + Math.random() * 30;
survey.speed = (0.55 + Math.random()) * 0.9;
}
Try loading your image earlier
If I understand your situation correctly, I think the issue is that you need to load the image earlier so that it is easily ready by the time you want to draw it, rather than waiting to load it only inside generateX. The way you are currently coding it, you are loading the image (imgX.src = ...) and then immediately trying to draw it. True, you are checking if the loading is complete and, if not, trying again shortly after. However, a better strategy is to load the image much earlier, e.g. during game initialization.
Demo
The code snippet below demonstrates the difference that this makes. It loads 2 different images. The only difference between the two is that one (on the left) is loaded ahead of time and the other (on the right) is only loaded inside generateX. The former image displays properly the 1st time through the game cycle while the latter image is missing the 1st time and only displays properly the 2nd time through.
function loadLeftImageWellBeforeRunningGenerateX() { // correct timing
imgs[0] = new Image();
imgs[0].src = 'http://placehold.it/200x100.png';
}
function loadRightImageInsideGenerateX() { // incorrect timing
imgs[1] = new Image();
imgs[1].src = 'http://placehold.it/100x50.png';
}
function generateX() {
loadRightImageInsideGenerateX();
log('--inside generateX func');
imgs.forEach(function(imgX, num) { // same as your original code, just done for 2 different images
if (imgX.complete) {
log("----image #" + num + " (" + side[num] + "); " + 1 + ", i.e. image complete");
drawX(imgX, num);
} else {
log("----image #" + num + " (" + side[num] + "); " + 2 + ", i.e. image not complete");
imgX.onload = drawX(imgX, num);
}
});
}
function drawX(imgX, num) { // same as your original code, just allows placement of 2 images side-by-side
log("----image #" + num + " (" + side[num] + "); " + 3 + ", i.e. drawing image (" + prefix[num] + "successfully)");
context.drawImage(imgX, num * 150 + 10, 10, 100, 50);
if (num === 1) {prefix[1] = "";}
}
var
imgs = [],
numClicks = 0,
side = ["left", "right"],
prefix = ["", "un"],
button = document.querySelector("button"),
canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
context.fillStyle = "yellow";
context.fillRect(0, 0, 300, 150);
// as far as game logic goes, the only important lines below are marked with arrows
// the rest is just "fluff" to make the demo more understandable to the user
button.addEventListener("click", function() {
numClicks += 1;
if (numClicks === 1) {
log("You must clear your browser's recent cache every time you run this snippet " +
"in order for it to demonstrate the problems and solutions " +
"associated with loading images in this code.");
button.innerHTML = "Clear browser cache and click here again to start game initialization";
} else if (numClicks === 2) {
loadLeftImageWellBeforeRunningGenerateX(); // <----- ***
log("Game initializes. No images should yet be visible, " +
"but image #0 (left) should be loading/loaded now, i.e. ahead of time. " +
"Image #1 (right) is not yet loading/loaded. Click again to 'play game'.");
button.innerHTML = "Do NOT clear the browser cache and click here again to start playing game";
} else {
button.innerHTML = "Do NOT clear the browser cache and click here again to continue playing game";
if (numClicks === 3) {
log("Game begins. Images are required for the first time. Only the pre-loaded left image shows " +
"even though loading both is attempted.");
} else {
log("Game continues. On second and subsequent re-draws, both images are now available and visible.");
}
generateX(); // <----- ***
}
});
function log(msg) {
document.body.appendChild(document.createElement("p")).innerHTML = msg;
}
p {
margin: 0.2em;
}
<canvas id="myCanvas" width="300" height="80"></canvas>
<div>
<button>Click here to begin demo</button>
</div>
Your browser's cache can hide this bug
By the way, if and when you try to debug this kind of thing, be aware that many/most/all browsers cache images, making it potentially difficult to replicate this kind of bug if you're not aware of what's going on. For example, you might run your buggy code and the image is missing the first time through the game cycle. You study your code, make a change to try to fix the bug and run the code a second time. Voila, it looks like the problem is fixed because the image now appears the first time through the game cycle. However, it may, in fact, only be showing up in that first cycle not because the bug is fixed but because the browser is able to use the cached image even in the first game cycle, eliminating the need to load it from its source. In short, if you're trying to debug an issue like this where you suspect the timing of file loading is important but the bug only appears sometimes, try clearing your browser's recent cache to see if that makes the bug more apparent.
To clear a browser's cache:
Firefox (for Mac or Windows, v44...): click "History" / click "Clear Recent History..." / click to open "Details" if necessary / check "Cache" / click "Clear now"
Chrome (for Mac, v48...) "Chrome" (left menu item) / "Clear Browsing Data..." / select "Cached images and files" / click "Clear browsing data"
Chrome (for Windows, v48...) click customize-and-control icon (at the right) / click "More tools..." / click "Clear browsing data..." / click "Clear browsing data"
Internet Explorer (for Windows, v11...) click "Tools" / click "Delete browsing history" / select "Download history" / click "Delete"

Audio recording javascript

Is it possibly in Jquery or Javascript, without the use of libraries to record audio for X seconds and save to a audio file. I've looked at getUserMedia, an I see that it can retrieve audio and video from the webcam. I am currently using the webcam with another library: Clmtracker and for that reason I would want to try and do this without any more external libraries.
I want to store the recorded audio in a div. I am currently taking a picture and assigning it a unique name, so I am wondering how I can capture a short section of audio and store it in the same generated div.
Question: How can I achieve getting audio for 5 seconds from webcam?
Sub-Question: How can I store that in an element within a div?
My Code for capturing Img and Data on my page
function capturePage() {
var now = new Date();
if (nextAllowedCapture <= now) {
// Do capture logic
audioElement.play();
counting++
console.log("Capturing...");
$(".capturing").show().delay(500).fadeOut(3000);
var innerDiv = document.createElement('div'),
innerDivImg = document.createElement('canvas'),
image = document.createElement('img'),
ul = document.createElement('ul');
innerDiv.className = 'divCreate';
innerDiv.id = 'img' + counting;
innerDivImg.height = 450;
innerDivImg.width = 600;
innerDivImg.getContext('2d').drawImage(vid, 0, 0);
image.id = 'image' + counting;
image.src = innerDivImg.toDataURL();
image.className = 'divCreateImg';
innerDiv.appendChild(image);
innerDiv.appendChild(ul);
document.getElementById('galleryWrapper').appendChild(innerDiv);
$('#measurements h4').each(function () {
$("#" + innerDiv.id + " " + 'ul').append('<li>' + $(this).text() + ': ' + $(this).next().text());
});
nextAllowedCapture = new Date();
nextAllowedCapture.setSeconds(nextAllowedCapture.getSeconds() + coolDownSeconds);
} else {
nextCapTime = (nextAllowedCapture.getTime() - now.getTime()) / 1000;
console.log("Can't capture again yet. This function can be executed again in " +
(nextAllowedCapture.getTime() - now.getTime()) / 1000 +
" seconds.");
}
}
You can see the code for Recorder.js as an example which implements the capture audio functionality and saves it in wav format using getUserMedia annd yes, just html5 and javascript.
Now you might say that you asked without any plugins. In fact, I checked the code for recorder.js which is just 90 lines of plain javascript, just html5 and javascript.
UPDATE: I found one online demo which experiments with this and it seems to work fine and all source code is open. You might want to check that out.
Here is the link:
Recorder JS
Here is another link to tweak it and make it more functional.
Recording MP3 Using Only HTML5 and JavaScript

Watching a javascript namespace variable in the Firebug console

This may be simple, may not. I am trying to track the mouse position in JavaScript and I want to watch the current position using Firebug.
My page has:
var mouse_position = {};
mouse_position.x = 0;
mouse_position.y = 0;
And then on the mousemove of the main content I update these variables. I know this works but I want to watch it a bit more. Now, in my Firebug console I can add a watch to mouse_position.x and when I add it, it gets the current position. Thats all nice.
However, when I move the mouse around, the console does not update. Is this a limitation, or am I doing something wrong?
You can use console.log(mouse_position.x,mouse_position.y)
console.log prints to the console - it is not the same thing as adding a watch that evaluates its contents; it's just a print.
if you want to fake a "watch", you can update the text of an element every time one of the javascript variables changes:
http://jsfiddle.net/f8N69/1/
var mouse_position = {
x: 0,
y: 0
};
var box = document.getElementById('test');
document.onmousemove = function (e) {
mouse_position.x = e.pageX;
mouse_position.y = e.pageY;
box.textContent = 'X: ' + mouse_position.x + ' Y: ' + mouse_position.y;
};
it's not as nice as a live watch since you have to touch the code, but it works for debugging purposes.
note: pageX, pageY, and textContent will not work on IE<8

Jquery .html, Firefox encodes qoutes in attributes

I have a hotfix app which generates HTML slides. The modules are built in Jquery with the background as inline CSS (the best solution i could come up with since they are unique per instance).
The problem is that firefox converts the quotes in the style attribute into:
<div style="background-image: url("bigspace-template.jpg");"
class="nuiOpenspace t1 skin1">
The webkit browsers have no issues with this.
They only way i have been able to get the background attribute is by:
// Build function, shortened
openspace.build = function(){
// ...
var bgstr = 'background-image: url('+ this.val_image + ')';
$o = $('<div class="nuiOpenspace"></div>').attr('style', bgstr);
// ...
}
This is then output appended to the document:
function Sandbox(){
var $sandbox = $("#sandbox");
this.fill = function(o) {
$sandbox.empty();
$sandbox.append(o);
};
// ...
}
I then get the HTML from the dom, convert to string and then output it in a textarea:
function Source(){
this.print = function(o, c_val){
//var parsed_html = this.parse(o, c_val);
//var pretty_html = "";
//pretty_html = style_html( parsed_html );
//console.info(x.replaceAll('&qout;', 'x'));
$code.text( style_html($("#sandbox").html()) );
};
}
var source = new Source();
I´ve tried search and replace but firefox keeps changing to / adding ". Any ideas?
As far as I know, the " is a ", so you have " inside something that is in between its own ". That can never work like this I think.
If you would've changed the origional code (the one that didn't work in firefox) to valid code (using either escapes or a combination of ' and " instead of "nested" "), wouldn't you be closer to a solution?

Categories