How to load a selection? - javascript

I am trying to load my selection like the picture below, where the marching ants go around the edges of my object:
However, i only know how to select the whole layer using this code:
doc.selection.selectAll();
Also, i want to contract the selection by a few pixels and paste it into a channel layer. Any help with that would be great but the most important thing is how to load the selection in the first place.

If you look up in the Javascript Scripting Reference document in your Photoshop install directory you'll see that there are a number of methods available on the selection object to do what you need.
var doc = app.activeDocument;
var channelRef = doc.channels.getByName("TestSelection");
doc.selection.load(channelRef, SelectionType.REPLACE);
doc.selection.contract(new UnitValue(20, 'px'));

Related

Potree profile tool clip boxes not visible

I adjusted the viewer.js example from the Potree project to my own needs. I however find that the clipboxes for the Profile tool are not working anymore. When I start the profile tool I am able to draw the spheres, but no matter what clip mode I use (disabled, clip outside, clip inside) the entire Pointcloud remains visible. I have no idea where to start with the problem, as very little code in viewer.js seems to be related to the ProfileTool specifically. Is there something in the material that needs to be set in order for clipping to work? Should the update methods be called in certain order?
Code:
<button class="shortcut button btn" ng-click="tools.profile({ width: potree.pointcloud.boundingSphere.radius / 100})" tooltip-placement="right" uib-tooltip="Height Profiles">
module.controller('PCToolsController', function($rootScope) {
this.profile = function(options) {
return $rootScope.$broadcast('profile:start', options);
};
});
And in the update function (called before every render):
controls.update();
controls.profiles.forEach(function(profile) {
// Clear the clip boxes
ClipBoxes.length = 0;
profile.boxes.forEach(function(box) {
box.updateMatrixWorld();
var boxInverse = new THREE.Matrix4().getInverse(box.matrixWorld);
ClipBoxes.push(boxInverse);
});
});
controls.render();
The ClipBoxes are the array of clipboxes in the material, when I enter pointcloud.material.clipBoxes I can see the array being filled.
I know that this may be a little undescriptive, but I don't think sharing thousands of lines of viewer code in a JSFiddle will be of any help, and if I break down the issue by starting from the viewer.js as basis, I know that it will work, as the example works. I am therefore not so much looking into a final answer, but rather a direction too look in. Of course if it is beneficial of finding the definite answer I'd be willing to share more info.
Turns out you have to use material.setClipBoxes(clipBoxes) rather than updating the array of clipboxes.

hide one of the axes of a parallel-coordinates plot

i'm representing some data with the parallel coordinates library (based on d3.js) ( https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates )
main functional part of the code is the following:
var parcoords = d3.parcoords()("#example") //#example is the div for the drowing
.data(eingabe) // eingabe is the var, which contains the data
.render()
.reorderable()
.shadows()
.brushMode("1D-axes")
so far it works fine :)
but now i want to hide one specific axis of the parallel coordinates; i only don't want to show it.
I want that the axis is completeley removed, so that it takes no place and the lines don't be affected of the values of this dimension, but i don´t want to do that by manipulating the data. i only want to manipulate the plot (thats the reason i called it hide).
i've searched on the api description but didn't find something. I searched in the internet but didn't find anything, too. But i think i remember that i've seen a peace of code, where the first axis was hidden, but i can't find it again.
Can anybody tell me, how i can hide an axis or where i can find the solution?
thank you, greetings
Jones
You're missing a .hideAxis(array) method call, where the array is a list of keys of the exact column names in your dataset that you want to hide. This method does exactly what you said you wanted:
"...hide one specific axis of the parallel coordinates; i only don't want to show it."
"I want that the axis is completley [sic] removed, so that it takes no place"
"the lines dont [sic] be affected of the values of this dimension, but i don´t want to do that by manupulating [sic] the data. i only want to manipulate the plot."
To implement this method, your code would need to be
var parcoords = d3.parcoords()("#example") //#example is the div for the drowing
.data(eingabe) // eingabe is the var, which contains the data
.hideAxis(["col1", "col2"])
.render()
.reorderable()
.shadows()
.brushMode("1D-axes")
Note: .hideAxis can take in a blank array if you don't want to hide any axis, i.e. .hideAxis([])
You can implement this method in some sort of update/redraw function if you want to allow the user to specify which axis(es) to remove; else, removing it completely via the DOM is impossible. This, performing the axis(es) hide via code, is your only option to implement what you want.
To see this method in action, take a look at the API documentation, specifically, their "example1" graph and code at http://syntagmatic.github.io/parallel-coordinates/index.html#example1
Assuming you just want to hide the axes (i.e. make it invisible) and not remove it completely
d3.selectAll("#example0 > svg > g > g.dimension:nth-child(3)").attr("opacity", "0");
Assuming example0 is the id of the wrapper around your svg element. You could also do the same thing directly on your svg element if you have it.
The above would still leave you able to interact with the filter of the hidden axis. To make it non-interactable, use .attr("display", "none");
Don't have a fiddle, but you should be able to copy paste the above line and run it from the console at http://syntagmatic.github.io/parallel-coordinates/ and see the effect on the chart in the Bundling section.
Here is the effect - before and after respectively

Resizing a specific TinyMCE editor added by JS

I am adding/replacing two textareas with TinyMCE via two different javascript clicks/calls. They have different IDs and are being added correctly by the 'execCommand' call:
tinymce.execCommand('mceAddControl',true,'comment1');
However, I am having trouble resizing the objects when there are more than one on screen. If there is just one I am able to successfully call 'resizeTo' using the 'activeEditor' to resize the object, like this:
tinymce.execCommand('mceAddControl',true,'comment1');
var ed = tinymce.activeEditor;
ed.theme.resizeTo(400, 200);
But when there is more than one editor, I cannot use 'activeEditor' and I don't know how to select a specific editor to resize. I have tried the following, but it didn't work:
var edd = tinymce.get('comment2');
edd.theme.resizeTo(350,306);
Any help/suggestions? Thanks!
In order to have to working tinymce editors with textareas as source elements you have given each of those testareas a unique id. This id will help you to get the correct editor instance.
Use
var editor = tinymce.get('your_textarea_id');
to get the correct editor. That's all.

Overlaying tooltip style data on an SVG world map

I've got an SVG map of the world (based on a public domain file from wikipedia), with generated CSS to highlight individual countries.
I need to a add mouseover tooltips containing additional data about each country, the data will be provided by PHP.
I'm an experienced web programmer, but have never worked with SVG until now. What is the best approach to display a text tooltip under the user's mouse, with info about the specific SVG node under the mouse cursor?
Note this SVG is full of nice id and class attributes designed to facilitate this kind of use.
I need this to be as cross browser as practical, but am happy to disable the feature for some browsers (old versions of Internet Explorer).
Detect the mouseover event
Access the title information
Create-or-show a group of title elements
Append them to the end of the SVG document so that they draw above all other content
Populate the elements with the appropriate data based on title
Position the elements accordingly
You'll want to transform the cursor point from screen space to SVG space, or calculate the bounding box of your source element and transform that from possibly-transformed object space to global SVG space.
Detect the mouseout event
Hide-or-destroy the title elements.
Is there any part of the above that you cannot do?
Edit: Answering the wealth of questions from the comment below:
You can place your script inside the SVG or outside in an embedding HTML; if they are self-contained to the SVG (as yours would be) it's better to place them here, so that you can embed your SVG externally and have it still work.
Finding a list of anything is easiest of you place a common class="foo" attribute on them, via one of:
var foos = document.querySelectorAll('.foo');
var foos = document.getElementsByClassName('foo');
Or you can query based on structure; for example, if every country is a <path> contained within a <g id="countries"> then you can use:
var countries = document.querySelectorAll('#countries path');
But if all you have is an array of IDs, then you'll need to do something like:
var countryIDs = [ "usa", "brazil", … ];
// Old school
var countries = [];
for (var i=countryIDs.length; i--; ){
countries[i]=document.getElementById(countryIDs[i]);
}
// New school
var countries = countryIDs.map(function(id){
return document.getElementById(id);
});
To attach an event handler to each:
function showTooltip(evt){
var element = evt.target;
// your code here
}
countries.forEach(function(el){
el.addEventListener('mouseover',showTooltip,false);
});
Alternatively, you can just attach the event handler to a common ancestor once, and handle it there:
svg.addEventListener('mouseover',function(evt){
var element = evt.target;
if (element.hasAttribute('title')){
// your code here
}
}
The <script> is easiest when placed right before the </svg>, but you can put it at the top if you want and it only do its work when the file is done loading, for example:
window.addEventListener('load',function(){
// Put all your code here
},false);
It's easy to find information on embedding SVG, and you are right, there are many ways to do it. Here's one nice article about it. I personally advocate either SVG in XHTML or, if you must, SVG in HTML5.
You can use append svg title to view additional data.
// Here we add an SVG title element the contents of which is effectively rendered in a tooltip
.append("svg:title")
.text(function(d) {return "Name:"+d.Name;});
We can use this tooltip along with all svg element. Here d is a json object form this we are parsing the data.
https://gist.github.com/ilyabo/1339996

How to get the coordinates of a text in a pdf file

can anyone tell me how to get coordinates in pdf document using javascript, suppose if some text is written in pdf document then how can i get coordinates(x,y) of that text. Please help me.
Its very Urgent.
It is of no interest how urgent a task is for your work, because we're not being paid to do your job. SO is here to promote learning.
suppose if some text is written in pdf document then how can i get coordinates(x,y) of that text
Assuming you are talking about JavaScript embedded in a PDF document, my understanding is you don't get access to the full document text. If you want to find the position of one particular bit of the text, you could, however, add an annotation to it, and then access its rect property:
var doc= this; // or however you are accessing it
var annot= doc.getAnnot(0, 'AnnotationName');
var left= annot.rect[0];
var bottom= annot.rect[1];
var right= annot.rect[2];
var top= annot.rect[3];

Categories