how to create a spritesheet using node-spritesheet? - node.js

I installed node-spritesheet and tried to create a spritesheet like this.
I created main.js and 3 images - image1.png, image2.png and image3.png in my home folder and in the same folder I've another folder called node-modules in which node modules like express, node-spritesheet etc. are present.
This's my main.js file
var Builder = require( 'node-spritesheet' ).Builder;
var builder = new Builder({
outputDirectory: '/home/XYZ',
outputImage: 'sprite.png',
outputCss: 'sprite.css',
selector: '.sprite',
images: [ 'image1.png', 'image2.png', 'image3.png' ]
});
builder.build( function() {
console.log( "Built from " + builder.files.length + " images" );
});
Next I ran
node main.js
which gave the following result
--------------------------------------------------------------
Building 'default' at pixel ratio 1
--------------------------------------------------------------
/home/XYZ/node_modules/node-spritesheet/lib/imagemagick.js:14
throw "Error in identify (" + filepath + "): " + (error || stderr);
^
Error in identify (image1.png): Error: Command failed: /bin/sh: 1: identify: not found
I tried different paths for image like ./image1.png, /home/XYZ/image1.png instead of just image1.png.
Can someone please explain why this's happening?
P.S : I'm new to node, so please excuse any silly mistakes I made and correct me.

The problem seems to be because the command identify isn't found, which is in imagemagick module. So it worked fine after installing imagemagick.

Related

Gulp, vinyl-fs and error "TypeError: isStream is not a function"

I have a gulp file that up until relatively recently was working fine, but has started just throwing an error. I'm unsure of the best way to debug this, and google has not been of any help, so am looking for ideas on what might be wrong. The gulpfile has the following task defined (I've removed some other tasks to try and simplify this)
/// <binding AfterBuild='moveToCss' />
var gulp = require('gulp');
var paths = {
npmSrc: "./node_modules/",
cssTarget: "./wwwroot/css/",
};
var cssToMove = [
paths.npmSrc + '/bootstrap/dist/css/bootstrap.min.css',
paths.npmSrc + '/datatables.net-bs/css/dataTables.bootstrap.css',
paths.npmSrc + '/datatables.net-select-bs/css/select.bootstrap.css'
];
gulp.task('moveToCss', function () {
return gulp.src(cssToMove).pipe(gulp.dest(paths.cssTarget));
});
but when I run this I get the following error:
[13:52:27] Using gulpfile C:\MyProject\gulpfile.js
[13:52:27] Starting 'moveToCss'...
gulp : C:\MyProject\node_modules\gulp\node_modules\vinyl-fs\node_modules\vinyl\i
ndex.js:142
At line:1 char:1
+ gulp moveToCss >> result.txt 2>&1
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (C:\MyProject\...yl\index.js:142:String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
if (!isBuffer(val) && !isStream(val) && !isNull(val)) {
^
TypeError: isStream is not a function
at File.Object.defineProperty.set (C:\MyProject\node_modules\gulp\node_modul
es\vinyl-fs\node_modules\vinyl\index.js:142:28)
at new File (C:\MyProject\node_modules\gulp\node_modules\vinyl-fs\node_modul
es\vinyl\index.js:27:17)
at DestroyableTransform.createFile
(C:\MyProject\node_modules\gulp\node_modules\vinyl-fs\lib\src\index.js:12:12)
at DestroyableTransform.Transform._read (C:\MyProject\node_modules\gulp\node
_modules\readable-stream\lib\_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (C:\MyProject\node_modules\gulp\nod
e_modules\readable-stream\lib\_stream_transform.js:172:12)
at doWrite (C:\MyProject\node_modules\gulp\node_modules\readable-stream\lib\
_stream_writable.js:237:10)
at writeOrBuffer (C:\MyProject\node_modules\gulp\node_modules\readable-strea
m\lib\_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (C:\MyProject\node_modules\gulp\node_
modules\readable-stream\lib\_stream_writable.js:194:11)
at Stream.ondata (stream.js:31:26)
at emitOne (events.js:77:13)
Can anyone suggest anything? Either ideas for what might be wrong or ideas for how to diagnose the issue...?
Since you seem to directly access files from the node_modules folder, the first thing I would try is to erase the entire node_modules folder and reinstall all dependencies in case you inadvertently fraked something up.
If that doesn't help the offending line is here. isStream comes from the ./lib/isStream module which does nothing more than export a function. How you can end up with a TypeError: isStream is not a function message in that context is a bit of a mystery to me.
The only thing I can think of that could be of help is to add some debugging output. In C:\MyProject\node_modules\gulp\node_modules\vinyl-fs\node_modules\vinyl\index.js add the following right before the offending if statement:
console.log(require('util').inspect(isStream, { showHidden: true, depth: null}));
That should at least tell us what type isStream is at the time the error is thrown.

node.js mkdir enonent when passed a string

I'm trying to build folders with a string, but I keep erroring out, everything looks good, but I'm obviously missing something, any help would be great.
var setFile = 'dijit/analysis/images/'
folders = setFile.substr(0,setFile.lastIndexOf('/'));
fs.mkdir(folders, function(err){
console.log('problem: ' + err);
});
Error: Error: ENOENT, mkdir 'dijit/analysis/images'
Thanks,
fs.mkdir can able to built only a single folder. You are trying to create a folder inside a non existing folder. This problem can be solved by fs-extra module of npm. Following code should fulfill your need.
var setFile = 'dijit/analysis/images/',
fsExtra = require('fs-extra'),
folders = setFile.substr(0, setFile.lastIndexOf('/'));
fsExtra.mkdirp(folders, function(err) {
console.log('problem: ' + err);
});
Kundu's comment answers this problem, but if you want a different solution there is plenty over at How to create full path with node's fs.mkdirSync?

Protractor running tests on PhantomJS

I can't seem to get PhantomJS through a test successfully. I tried to integrate it into my project, but after that failed I tried to just run the basic Angular Docs samples and I'm getting the same issue. My steps so far:
npm install -g phantomjs
phantomjs --webdriver=9515 // ... GhostDriver - Main - running on port 9515
protractor protractorConf.js
This is the same file from the example with only browserName, and seleniumAddress port changed:
// An example configuration file.
exports.config = {
// The address of a running selenium server.
seleniumAddress: 'http://localhost:9515',
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'phantomjs'
},
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['onProtractorRunner.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
}
};
I get the following error message:
UnknownError: Error Message => 'Detected a page unload event; asynchronous script execution does not work across page loads.'
I found this issue on github, which seemed to be related. I thought I had made enough sense of their brower-setup.md to include it in one of my beforeEach functions. Then I found here ptor is just wrapping the driver anyway. Wow, I know I'm a noob here in protractor/selenium land, but the signal to noise ratio is intensively dissuasive. I'd really like to get the performance benefits of using PhantomJS, but the prospect of losing several more hours on this is hurting my head. I'm on Windows 7 Enterprise 64-bit, in case that matters. Thanks!
Acutally this fix was solving the same issue for me:
https://github.com/pschwartau/protractor/commit/1eeff8b1b2e3e8f3b7c8152264411f26d4665a07
As originally described here: https://github.com/angular/protractor/issues/85#issuecomment-26846255 by renanmartins
Inside protractor/lib/protractor.js Replace
this.driver.get('about:blank');
this.driver.executeScript(
'window.name = "' + DEFER_LABEL + '" + window.name;' +
'window.location.href = "' + destination + '"');
with
var driver = this.driver;
this.getCapabilities().then(function (capabilities) {
if (capabilities.caps_.browserName === 'phantomjs') {
driver.executeScript('window.name = "' + DEFER_LABEL + '" + window.name;');
driver.get(destination);
} else {
driver.get('about:blank');
driver.executeScript(
'window.name = "' + DEFER_LABEL + '" + window.name;' +
'window.location.href = "' + destination + '"');
}
// Make sure the page is an Angular page.
driver.executeAsyncScript(clientSideScripts.testForAngular, 10).
then(function(hasAngular) {
if (!hasAngular) {
throw new Error('Angular could not be found on the page ' +
destination);
}
});
});

Find absolute base path of the project directory

Until now we could get the absolute path of a file to open later as readStream with this code snippet:
var base = path.resolve('.');
var file = base + '/data/test.csv';
fs.createReadStream(file)
Since Meteor 0.6.5 the base path is pointing to .meteor/local/build/programs/...
There is also the Assets API, which but can not give us back a path but only the read document. We but need a stream to process some bigger data files?
Another way to find your project's root directory now is this:
var base = process.env.PWD
Note that this is not the same as process.cwd(). Instead it is the directory where you ran the meteor command, which is typically what you are looking for. Note also that this probably won't be very helpful when running your app from a deployed bundle.
I ran into the same predicament when I updated to 0.6.5.
What I'm currently doing is getting the path like this:
var meteor_root = Npm.require('fs').realpathSync( process.cwd() + '/../' );
This returns on dev mode:
/my/application/.meteor/local/build/programs
and on bundled mode:
/my/application/build/app/programs
So from here I'm getting to my application's "root" path like so:
var application_root = Npm.require('fs').realpathSync( meteor_root + '/../' );
// if running on dev mode
if( Npm.require('path').basename( Npm.require('fs').realpathSync( meteor_root + '/../../../' ) ) == '.meteor' ){
application_root = Npm.require('fs').realpathSync( meteor_root + '/../../../../' );
}
The only case in which this would fail is if you happen to name your application's folder ".meteor" but that's an edge case.
Relative to that you can access whatever else you need to.
Additionally, you can also get direct access to to the assets folder that the meteor bundler creates:
var assets_folder = meteor_root + '/server/assets/' + Npm.require('path').basename( application_root );
This is likely to be temporary as I expect better file/path interaction APIs to be added eventually..
Hope that helps
Since version 1.3, the documented function
Assets.absoluteFilePath(assetPath)
seems to be the best way to get the project path reliably.
Meteor Github
Hey you do not need to hardcode like the above answers... take a look to This package
After install it you can access the root path of your meteor just wih Meteor.rootPath
For Meteor 0.8.3,
__meteor_bootstrap__.serverDir gives out the working directory, when run in server mode.
example
if (Meteor.isServer) {
console.log(__meteor_bootstrap__.serverDir);
}
you could get project basic root path by
process.env.PWD
As of Meteor 1.2.1, this works for me:
var absoluteBasePath = path.resolve('../../../../../.');
The same result using split:
var absoluteBasePath = path.resolve('.').split(path.sep + '.meteor')[0];
Using process.cwd():
var absoluteBasePath = path.resolve(process.cwd(), '../../../../../');
var absoluteBasePath = path.resolve(process.cwd()).split(path.sep + '.meteor')[0];

trying to access and manipulate images with node.js and GD or imagemagick

i'm trying to create a thumbnail of an jpg that resides on the server. i tried using node-gd and/or node-imagemagick but neither could access the file:
var gd = require('node-gd');
gd.openJpeg("./test.jpeg", function (img, path) {
if (img) {
console.log("file opened ... " + img);
}
else {
console.log("failed to open file ...");
}
});
logs: failed to open file ...
imagemagick:
var im = require('imagemagick');
im.identify('./test.jpeg', function (err, features) {
if (err) throw err;
console.log(features);
});
logs: Error: Command failed: execvp(): No such file or directory
but the test.jpeg file is definitely there.
var fs = require('fs');
fs.open(filePath, 'r', function (err, fd) {
console.log("open file ... " + err + " " + fd);
});
works fine!? no error is logged.
i tried chmod 0777 on the jpeg. nothing.
From what I understand of the documentation of the imagemagick module for node is, that the module provides access to the comandline binaries of imagemagick. Do you have imagemagick (the commandline binaries) installed? Are they in the PATH of you shell?
You are looking for a binary named "identify". You can show the path to it by running "which identify". It should give you a full path - if the prompt just returns, you don't have it installed or it's not in your path.
If you are on win32 the which command won't help, you have to check for a binary called identify.exe.
(never worked with gd - so I am unsure there)
here is the imagemagick example with your code - please note, the path to identify may be different in your environment:
snowflake:Desktop rhaen$ node check_im.js
{ format: 'JPEG', width: 320, height: 250, depth: 8 }
snowflake:Desktop rhaen$ which identify
/usr/local/bin/identify
So - the node module and your code works for me.

Resources