We Keep Coding

Shapes aren't drawn on the good page when the document setup is 'facing page' in InDesign (CEP/JavaScript)

I am creating an InDesign plugin where one of the features is to draw shapes on a given page.
I get a drawing from the backend with the page number on which it should be drawn.
For this, I do :
app.activeDocument.pages[index] to get the page I want.
Unfortunately, I realized that this technique only works when the pages are not facing each other like this :
When the pages are facing each other like this :
, the shapes on page 3 will be drawn on page 2 instead of on page 3.
Here, the drawings are on the right page :
But here, the rectangle isn't on the right page :
I also tried to draw the shape in a raw way by doing app.activeDocument.spreads[indexSpread].pages[1], which should logically write the note on the 2nd page of the board in question except that it is always drawn on the 1st page of the board.
Here is my code to draw the rectangle :
var doc = app.activeDocument;
var page = doc.pages[pageIndex-1];
var myRectangle = page.rectangles.add();

To address pages inside a spread use the page origin coordinates:
app.activeDocument.viewPreferences.rulerOrigin = RulerOrigin.PAGE_ORIGIN;
var doc = app.activeDocument;
var page = doc.spreads[indexSpread].pages[1];
var myRectangle = page.rectangles.add();

How to draw non-scalable text in SVG with Javascript?

I'm using d3 library to create a svg graphic. The problem I have is when I resize the window. The whole graphic resizes meaning that texts (legend and axis) resize as well, to the point where it's unreadable. I need it to keep the same size when resizing.
I've been searching online and I found this solution:
var resizeTracker;
// Counteracts all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
var unscale = function (el) {
var svg = el.ownerSVGElement;
var xf = el.scaleIndependentXForm;
if (!xf) {
// Keep a single transform matrix in the stack for fighting transformations
xf = el.scaleIndependentXForm = svg.createSVGTransform();
// Be sure to apply this transform after existing transforms (translate)
el.transform.baseVal.appendItem(xf);
}
var m = svg.getTransformToElement(el.parentNode);
m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
xf.setMatrix(m);
};
[].forEach.call($("text"), unscale);
$(window).resize(function () {
if (resizeTracker) clearTimeout(resizeTracker);
resizeTracker = setTimeout(function () { [].forEach.call($("text"), unscale); }, 0);
});
And added it to my code, but it's not working. I debugged it and at this part of the code:
var xf = el.scaleIndependentXForm;
It always returns the same matrix: 1 0 0 1 0 0 and the text keeps resizing as does the rest of the svg elements instead of keeping static.
Could anyone help me, please?
Thanks in advance.

The same thing was happening to me with an SVG generated by SnapSVG until I noted that the example page on which this does work wraps its 'main' SVG tag in another SVG tag before using el.ownerSVGElement.ownerSVGElement rather than el.ownerSVGElement.
Wrapping my SVG in an 'empty' wrapper SVG (note style overflow:visible;) I had much better results!
Edit: oh, wait. Internet Explorer still isn't happy. Seems the author of the solution is aware...

Can't select svg element with d3

I am working on a visualization tool that uses a svg image of the brain. Now this svg has paths that are filled with a color. I want to loop over all these paths to set the fill color to white, but for some reason I cannot get the element.
The project can be seen here. The svg is inside a div and I even assigned an identifier brain to the div. The svg itself has an id svg2. So far I've tried the following:
function clearBrainColors() {
var brain = d3.select("#svg2");
console.log(brain);
var paths = brain.selectAll("path");
console.log(paths.length);
brain.selectAll('path').each(function(d,i) { console.log(this); });
}
But it outputs null in the array[0] component of the selection and 0 with paths.length.
I've also tried to use lines such as
var brain = d3.select("#brain svg"); and var brain = d3.select("#brain svg#svg2"); but those do not work either.
So, how can I select the brain svg using d3?

Decided to put the svg inline as it apparently speeds things up.
The code I used to fill the svg is now:
$("#svg2").find("path").each(function(){
$(this).css({ fill: "#ff0000" });
});

You can try setTimeOut() , following example
setTimeOut(function() {
var brain = d3.select("#svg2");
console.log(brain);
}, 1000);
this could be the svg is generate on the spot, d3 unable get at that moment.
Hope this help :)

Soundcloud Custom Player with Waveform.js and scrubber functionality

I'm working on a custom Soundcloud player for my website using waveform.js to generate waveforms. It works great but it lacks the scrubber functionality. How can I add that?
I'm not a JS wizard, still learning my ways around so I'll be very thankful for any help or suggestions!
Update IV: I found a new way of including canvas generated waveforms into original SoundCloud Custom Player sc-player.js.
First of all I found a line of code responsible for HTML structure of the player and added id="waveform" to sc-waveform container on line 529:
.append('<div class="sc-time-span"><div class="sc-waveform-container" id="waveform">
</div><div class="sc-buffer"></div><div class="sc-played"></div></div>')
Then I updated the line 676, replacing img with canvas
$available = $scrubber.find('.sc-waveform-container canvas'),
Next, I located a piece of code responsible for embedding the original image of waveform on line 340 and commented it out:
// $('.sc-waveform-container', $player).html('<img src="' + track.waveform_url +'" />');
And then I posted the code below at the bottom of my page:
<script>
SC.get("/tracks/80348246", function(track){
var waveform = new Waveform({
container: document.getElementById("waveform"),
height: 40,
innerColor: '#ffffff'
});
waveform.dataFromSoundCloudTrack(track);
});
//----------- end of insterted waveform.js code ----------------------
</script>
Results are very promising, Now I have fully customizable waveform and scrubber is working as well. However there are still things I'd like to fix.
In Chrome, when I press play and pause, then click the waveform, the track starts playing, but the play button doesn't change its state. Then need to double click it to stop the track.
The buffer and progress bar are still just the sc-player divs in the background. How could I link sc-player.js and waveform.js together so the progress is generated on the waveform canvas (as in example on http://waveformjs.org/)?
Any ideas how to fix those?
Here's the player on the live website:
http://www.code.spik3s.com/rnr/

on play call
myVar=setInterval(Timed,100);
function Timed() {
total_duration = duration of the track playing;
current_duration = the current position of the track.
width = canvas width;
pointer = the id of the pointer being used to show the progress.
position = (canvas_width / total_duration) * current_duration;
pointer.style.left = position;
}
you'll have to set the information in, but something like this will do

Javascript Scrollable/Scrubbable Animation w/ svg.js

I would like to create an interface where I can scroll or scrub through the frames of an animation that was created using svg.js (http://www.svgjs.com/). Is there any way I can create this, maybe using a web app framework like Angular JS?
E.g there is a div with the animation and a timeline below in which I could scroll and move through the animation.

You can scrub through animations with svg.js:
http://documentup.com/wout/svg.js#animating-elements/controlling-animations-externally
Here is a quick example:
// Create svg.js canvas
var draw = SVG('canvas')
// Create circle
var circle = draw.circle(100).move(100, 10).fill('#fff').animate('=', SVG.easing.backOut).move(200,200)
// Create image
var image = draw.image('http://distilleryimage11.s3.amazonaws.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg', 100, 100).move(10, 100).animate('=', SVG.easing.elastic).y(300)
// Use mouse movement to animate elements
document.onmousemove = function(event) {
circle.to(event.clientX / 1000)
image.to(event.clientY / 1000)
}
(load both svg.js and the svg.easing.js plugin to make it work)
You can see it in action here:
http://jsfiddle.net/wout/BqqNs/
Roll your mouse over the pink canvas to see the result.