I'm creating visualizations with d3 that use svg masks and I'm trying to get a screenshot using casper js. It usually works fine except it's not rendering the mask properly; it shows all of the layers rather than just the one being masked. This is the casper code:
var casper = require('casper').create();
casper.start('http://localhost:3000', function() {
this.captureSelector('bicycles.png', 'svg');
});
casper.run();
Anybody else having issues with this?
Thanks, Tom
I don't know if it will help, but in my tests I always set the viewport size and then add a delay before running any other code. One reason for the delay is because we are using knockout and DOM elements have not been fully created by the time the 'start' function is called.
So your test would look like this:
var casper = require('casper').create();
casper.start('http://localhost:3000', function () {
casper.viewport(1024, 768);
});
casper.wait(1000); // Wait for knockout bindings and animations...
casper.then(function () {
this.captureSelector('bicycles.png', 'svg');
});
casper.run();
Probably won't help you, but worth a try?
Related
mtlLoader.load('.mtl_file_path', function (materials) {
materials.preload()
console.log(materials.materials)
objLoader.setMaterials(materials)
objLoader.load('/resource/obj/mycar.obj', function (car) {
do somthing
})
})
This is my code. I want to know my mtl's values.
So, console.log(materials.materials)
console result is
I can see in my brower console, but i don't know how can approach it on code.
I tried
console.log(materials.materials[0])
console.log(materials.materials{"midnight_blue"})
console.log(materials.materials.midnight_blue)
materials.preload()
console.log(materials.materials.midnight_blue)
I want to write a test for my setInterval and test that the alert window has fired with the value 'pulse'. How do I do this? I've tried so many variations on this but can not seem to figure this out. I've provided the code and my spec file. I'm using jasmine 2.0. Any help is appreciated.
countTimer.js
function CountTimer(timelength){
this.timelength = timelength;
this.running = false;
}
CountTimer.prototype.start = function(){
this.running = true;
setInterval(function () {alert('pulse')}, 2000);
};
CountTimer.prototype.stop = function(){
this.running = false;
};
countTimerSpec.js
describe("Timer",function() {
var myTimer;
beforeEach(function() {
myTimer = new CountTimer(25);
});
...
it("start should run setInterval 'pulse' every 2 seconds via setInterval", function(){
myTimer.start();
//what goes here???
expect(sut.callback).toHaveBeenCalled();
});
});
You want to use the jasmine clock (it hooks the real clock and allows you to simulate time as you want).
Check the jasmine help - the example there is pretty much exactly what you are trying to do. http://jasmine.github.io/2.3/introduction.html
Basic steps (in your test):
jasmine.clock().install();
myTimer.start();
jasmine.clock().tick(2001); //enough that your interval gets tripped
expect(...)
jasmine.clock().uninstall();
In Fabric.js we have Object modified events like object:modified. Do we have similar event for the entire canvas.
Actually I am trying to implement undo and redo features. I am saving the canvas as JSON if something happens on it and loading it again for undo feature.
Do we have any better solution for this features in Fabric.js?
Don't forget to check for added/removed objects too. You could implement it like this:
var canvasModifiedCallback = function() {
console.log('canvas modified!');
};
canvas.on('object:added', canvasModifiedCallback);
canvas.on('object:removed', canvasModifiedCallback);
canvas.on('object:modified', canvasModifiedCallback);
This is better explained in this link. Use it this way:
canvas.on('object:moving', function(e) { // or 'object:added'
var activeObject = e.target;
console.log(activeObject.get('left'), activeObject.get('top'));
});
EDIT - URL to see the issue http://syndex.me
I am dynamically resizing images bigger than the browser to equal the size of the browser.
This was no easy feat as we had to wait for the images to load first in order to check first if the image was bigger than the window.
We got to this stage (which works):
var maxxxHeight = $(window).height();
$(".theImage").children('img').each(function() {
$(this).load( function() { // only if images can be loaded dynamically
handleImageLoad(this);
});
handleImageLoad(this);
});
function handleImageLoad(img)
{
var $img = $(img), // declare local and cache jQuery for the argument
myHeight = $img.height();
if ( myHeight > maxxxHeight ){
$img.height(maxxxHeight);
$img.next().text("Browser " + maxxxHeight + " image height " + myHeight);
};
}
The thing is, the page is an infinite scroll (I'm using this)
I know that you are not able to attach 'live' to 'each' as 'live' deals with events, and 'each' is not an event.
I've looked at things like the livequery plugin and using the ajaxComplete function.
With livequery i changed
$(".theImage").children('img').each(function() {
to
$(".theImage").children('img').livequery(function(){
But that didnt work.
ajaxComplete seemed to do nothing so i'm guessing the inifinte scroll i'm using is not ajax based. (surely it is though?)
Thanks
Use delegate:
$(".theImage").delegate('img', function() {
$(this).load( function() { // only if images can be loaded dynamically
handleImageLoad(this);
});
handleImageLoad(this);
});
The problem is that your infinite scroll plugin does not provide the callback functionality. Once your pictures are loaded there is no way to affect them.
I have tried to modify your plugin, so that it will serve your needs, please see http://jsfiddle.net/R8yLZ/
Scroll down the JS section till you see a bunch of comments.
This looks really complicated, and I probably don't get it at all, but I'll try anyway :-)
$("img", ".theImage").bind("load", function() {
var winH = $(window).height();
var imgH = $(this).height();
if (winH < imgH) {
$(this).height(winH);
$(this).next().text("Browser " + winH + " image height " + imgH);
}
});
I'm trying to display an image while I'm doing some Ajax updating (which I've placed in a queue). Here's the code
$(".SaveButton").click(function () {
$(".SavingImage").fadeIn("fast");
$(this).dequeue("Updates");
$(".SavingImage").fadeOut("fast");
$(".ResultItem").data("isDirty", false)
});
.show() and .hide() work, but not the animations. Let me know if more code is needed, I figured this would suffice.
you need to add the function in the call back of the animate function. Something like this:
$(".SaveButton").click(function () {
$(".SavingImage").fadeIn("fast",function(){
$(this).dequeue("Updates");
});
$(".SavingImage").fadeOut("fast");
$(".ResultItem").data("isDirty", false));
});