scream-js

scream-js command line application

Scream.js integrates resolution detection via media queries. To prevent artifacts, it’s important that images display at native resolution. To accomplish this, a large number of variations must be created for each screen resolution. Scream.js can solve that by dynamically adjusting the size of images according to the user’s browser system.

The software is designed for usage while development. It can be used with any web development environment like PHP, ASP.NET, Node.js, Ruby on Rails, much more and even in static HTML websites. After productive build of your project there are no further server side system requirements necessary and the assets are ready to deploy.

The commandline application supports Microsoft Windows, Mac OS X and Linux.

beta

Detailed description

To get an overview read http://saquery.com/scream-js-image-server-based-on-node-js

Demo

Since Reyncor mentioned there is an online demo available at http://s-a.github.io/scream-js/.

Workflow video ( amateur style :O/ )

http://youtu.be/PWEl2Onearw

Dependencies

Windows

• Node.js: http://nodejs.org/
• ImageMagick: http://www.imagemagick.org/
• OptiPNG: http://optipng.sourceforge.net/

Linux

• Node.js: sudo apt-get install nodejs To install latest Node.js on Ubuntu sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
• imageMagick: sudo apt-get install imagemagick
• OptiPNG: sudo apt-get install optipng

Mac OS X

• Node.js: http://nodejs.org/
• imageMagick: http://www.imagemagick.org/script/binary-releases.php#macosx
• OptiPNG: brew install optipng

Be shure the commands convert, indentify and optipng are in PATH of your machine.

To validate if all system requirements are installed run scream --validate

Installation

npm install -g scream-js

or

git clone https://github.com/s-a/scream-js.git
cd scream-js
npm install -g

Usage

First you need to setup a Virtual Image Directory. VID settings are stored within a simple Node.js module. VID module sample

To initialize from scratch with all images in a special folder goto the folder and type
scream --init folder_path --size=x64 [--sprite=SPRITENAME] The init script needs an initial image size in form of [maxheight]x[maxWidth]. Optional you can pass an Sprite Sheet ID to bundle all images in a Sprite Sheet. scream --init . --size=x64 --sprite=sprite

scream --help Usage: scream.js sream <virtual image directory [file] ...> [options]

Options:

-h, --help output usage information
-V, --version output the version number
-b, --build Build virtual image directory
-i, --init [dir] Initialize from current or given directory
-s, --sprite [value] used with ---init
-z, --size [value] used with ---init ; [height]x[width]
-v, --validate Validate system requirements

Start a development server

scream original-image-pool/scream-config.js

Start a build for deployment server

scream original-image-pool/scream-config.js --build

Virtual Image Directory setup

var config = {
    supportedPixelRatios : [1, 1.5, 2, 2.1, 3],
    spriteSheetPrefix : "sprite__",							// prefix of spritesheet filenames and classnames
    settings : {
        images : {
            route : "/assets/images/",
            targetCacheDirectory : __dirname + "/../www-root-dev/assets/images"
        },
        css: {
            route : "/assets/css/",
            imageUrl : "../../images/",						// points to the target url of image directory. In this case relative to "/assets/css/{pixelResolution}"
            targetCacheDirectory : __dirname + "/../www-root-dev/assets/css"
        }
    },
    images : {
        "brand-nodejs-32.png" : {							// alias
            filename : __dirname + "/brand-nodejs.png",		// original filename
            batch : [										// image processing shell scripts with paramters
                '-resize', 'x32'							// -size width[xheight][+offset]
            ],
            sprite: "gui-background"						// determines if the image should be included within specified sprite sheet
        },
        "brand-grayscale-nodejs-32.png" : {					// alias
            filename : __dirname + "/brand-nodejs.png",		// original filename
            batch : [										// image processing shell scripts with paramters
                '-resize', 'x32',							// -size width[xheight][+offset]
                '-colorspace', 'Gray'
            ],
            sprite: "gui-background",						// determines if the image should be included within specified sprite sheet
            createCssRule: false							// default: true. Determines if scream-js should create a css rule for background-image
        },
        "brand-inverted-nodejs-32.png" : {					// alias
            filename : __dirname + "/brand-nodejs.png",		// original filename
            batch : [										// image processing shell scripts with paramters
                '-resize', 'x32',							// -size width[xheight][+offset]
                '-negate'
            ],
            sprite: "page-background"						// determines if the image should be included within specified sprite sheet
        },
        "brand-inverted-watermarked-nodejs-32.png" : {		// alias
            filename : __dirname + "/brand-nodejs.png",		// original filename
            batch : [										// image processing shell scripts with paramters
                '-negate',
                '-colorspace', 'Gray',
                '-font', 'Arial', '-pointsize', '41' ,
                '-draw', 'fill #282828  gravity south text 0,11 scream.js',
                '-font', 'Arial', '-pointsize', '40' ,
                '-draw', 'fill red  gravity south text 0,10 scream.js',
                '-resize', 'x32'							// -size width[xheight][+offset] 
            ]
        }
    }
};
 
module.exports = config;

Tests

Execute scream --validate to show the test instructions or navigate to scream-js folder and execute npm test.

Roadmap

• optional usage of imports in CSS files.
• minify CSS output in non test mode.
• partial rebuild. Currently Scream.js rebuilds all components if the VID module changes. This will change soon.

Licenses

Open Source- GPL
Allows the use of scream.js in GPL-ed projects for free.

Commercial License
Allows you to use scream.js on one workstation. This license costs 210€.

Enterprise License
Allows you to use scream.js on an unlimited number of workstations on the condition that all of them are used by one company. This license costs 660€.

How to purchase for your company?

To purchase Scream-js Image Service send an E-Mail to [e-mail]. Specify the license type and your company name and address in topic or mail text.