{"id":20700363,"url":"https://github.com/s-a/scream-js","last_synced_at":"2025-04-22T22:33:53.257Z","repository":{"id":6292739,"uuid":"7527180","full_name":"s-a/scream-js","owner":"s-a","description":"a command line app which specializes in modifying images and delivering static image and css files","archived":false,"fork":false,"pushed_at":"2013-06-26T09:10:51.000Z","size":32533,"stargazers_count":11,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T19:34:30.886Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://saquery.com/scream-js-image-server-based-on-node-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s-a.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-09T19:11:44.000Z","updated_at":"2025-03-09T19:36:26.000Z","dependencies_parsed_at":"2022-09-08T00:01:42.876Z","dependency_job_id":null,"html_url":"https://github.com/s-a/scream-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-a%2Fscream-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-a%2Fscream-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-a%2Fscream-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-a%2Fscream-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s-a","download_url":"https://codeload.github.com/s-a/scream-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250334171,"owners_count":21413522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T00:35:02.519Z","updated_at":"2025-04-22T22:33:53.232Z","avatar_url":"https://github.com/s-a.png","language":"JavaScript","readme":"scream-js command line application \r\n==================================\r\nScream.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.  \r\n\r\n\r\nThe 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.  \r\n\r\n\r\nThe commandline application supports Microsoft Windows, Mac OS X and Linux.\r\n \r\n  \r\n[beta \u003cimg src=\"https://travis-ci.org/s-a/scream-js.png\" /\u003e](https://travis-ci.org/s-a/scream-js)  \r\n\r\nDetailed description\r\n====================\r\n\r\nTo get an overview read http://saquery.com/scream-js-image-server-based-on-node-js\r\n\r\nDemo\r\n====\r\nSince [Reyncor](https://github.com/Reyncor) mentioned there is an online demo available at http://s-a.github.io/scream-js/.  \r\n![Android smartphone device screenshot](http://saquery.com/blg/wp-content/uploads/2013_06_18_10.30.49.png \"Screenshot of online demo with Samsung SG II\")\r\n\r\n\r\nWorkflow video\r\n==============\r\nhttp://youtu.be/Jy0cVkfmnA0\r\n\r\n\r\nDependencies\r\n============\r\n\r\n#### Windows\r\n- Node.js: \t\t\u003chttp://nodejs.org/\u003e\r\n- ImageMagick: \t\u003chttp://www.imagemagick.org/\u003e \r\n- OptiPNG: \t\t\u003chttp://optipng.sourceforge.net/\u003e \r\n\r\n#### Linux  \r\n- Node.js: \t\t`sudo apt-get install nodejs`\r\nTo install latest Node.js on Ubuntu\r\n`sudo add-apt-repository ppa:chris-lea/node.js`  \r\n`sudo apt-get update`  \r\n`sudo apt-get install nodejs`  \r\n- imageMagick: \t`sudo apt-get install imagemagick`  \r\n- OptiPNG: \t\t`sudo apt-get install optipng`  \r\n\r\n#### Mac OS X\r\n- Node.js: \t\t\u003chttp://nodejs.org/\u003e\r\n- imageMagick: \t\u003chttp://www.imagemagick.org/script/binary-releases.php#macosx\u003e\r\n- OptiPNG: \t\t`brew install optipng`  \r\n\r\n***Be shure the commands `convert`, `indentify` and `optipng` are in PATH of your machine.***\r\n\r\nTo validate if all system requirements are installed run `scream --validate`\r\n\r\n\r\nInstallation\r\n============\r\n\r\n`npm install -g scream-js`\r\n\r\nor  \r\n\r\n`git clone https://github.com/s-a/scream-js.git`  \r\n`cd scream-js`   \r\n`npm install -g`  \r\n\r\n\r\nUsage\r\n=====\r\n\r\nFirst you need to setup a Virtual Image Directory. VID settings are stored within a simple Node.js module.\r\n[VID module sample](https://github.com/s-a/scream-js/blob/master/original-image-pool/scream-config.js)\r\n\r\nTo initialize from scratch with all images in a special folder goto the folder and type  \r\n`scream --init folder_path --size=x64 [--sprite=SPRITENAME]`\r\nThe 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.\r\n`scream --init . --size=x64 --sprite=sprite`\r\n\r\n`scream --help`\r\n`Usage: scream.js sream \u003cvirtual image directory [file] ...\u003e [options]`  \r\n    \r\n`Options:`  \r\n\r\n`\t-h, --help            output usage information`  \r\n`\t-V, --version         output the version number`  \r\n`\t-b, --build           Build virtual image directory`  \r\n`\t-i, --init [dir]      Initialize from current or given directory`  \r\n`\t-s, --sprite [value]  used with ---init`  \r\n`\t-z, --size [value]    used with ---init ; [height]x[width]`  \r\n`\t-v, --validate\t\t  Validate system requirements`  \r\n\r\n\r\n#### Start a development server  \r\n`scream original-image-pool/scream-config.js`\r\n\r\n#### Start a build for deployment server  \r\n`scream original-image-pool/scream-config.js --build`\r\n\r\nVirtual Image Directory setup\r\n=============================\r\n```javascript\r\nvar config = {\r\n\tsupportedPixelRatios : [1, 1.5, 2, 2.1, 3],\r\n\tspriteSheetPrefix : \"sprite__\",\t\t\t\t\t\t\t// prefix of spritesheet filenames and classnames\r\n\tsettings : {\r\n\t\timages : {\r\n\t\t\troute : \"/assets/images/\",\r\n\t\t\ttargetCacheDirectory : __dirname + \"/../www-root-dev/assets/images\"\r\n\t\t},\r\n\t\tcss: {\r\n\t\t\troute : \"/assets/css/\",\r\n\t\t\timageUrl : \"../../images/\",\t\t\t\t\t\t// points to the target url of image directory. In this case relative to \"/assets/css/{pixelResolution}\"\r\n\t\t\ttargetCacheDirectory : __dirname + \"/../www-root-dev/assets/css\"\r\n\t\t}\r\n\t},\r\n\timages : {\r\n\t\t\"brand-nodejs-32.png\" : {\t\t\t\t\t\t\t// alias\r\n\t\t\tfilename : __dirname + \"/brand-nodejs.png\",\t\t// original filename\r\n\t\t\tbatch : [\t\t\t\t\t\t\t\t\t\t// image processing shell scripts with paramters\r\n\t\t\t\t'-resize', 'x32'\t\t\t\t\t\t\t// -size width[xheight][+offset]\r\n\t\t\t],\r\n\t\t\tsprite: \"gui-background\"\t\t\t\t\t\t// determines if the image should be included within specified sprite sheet\r\n\t\t},\r\n\t\t\"brand-grayscale-nodejs-32.png\" : {\t\t\t\t\t// alias\r\n\t\t\tfilename : __dirname + \"/brand-nodejs.png\",\t\t// original filename\r\n\t\t\tbatch : [\t\t\t\t\t\t\t\t\t\t// image processing shell scripts with paramters\r\n\t\t\t\t'-resize', 'x32',\t\t\t\t\t\t\t// -size width[xheight][+offset]\r\n\t\t\t\t'-colorspace', 'Gray'\r\n\t\t\t],\r\n\t\t\tsprite: \"gui-background\",\t\t\t\t\t\t// determines if the image should be included within specified sprite sheet\r\n\t\t\tcreateCssRule: false\t\t\t\t\t\t\t// default: true. Determines if scream-js should create a css rule for background-image\r\n\t\t},\r\n\t\t\"brand-inverted-nodejs-32.png\" : {\t\t\t\t\t// alias\r\n\t\t\tfilename : __dirname + \"/brand-nodejs.png\",\t\t// original filename\r\n\t\t\tbatch : [\t\t\t\t\t\t\t\t\t\t// image processing shell scripts with paramters\r\n\t\t\t\t'-resize', 'x32',\t\t\t\t\t\t\t// -size width[xheight][+offset]\r\n\t\t\t\t'-negate'\r\n\t\t\t],\r\n\t\t\tsprite: \"page-background\"\t\t\t\t\t\t// determines if the image should be included within specified sprite sheet\r\n\t\t},\r\n\t\t\"brand-inverted-watermarked-nodejs-32.png\" : {\t\t// alias\r\n\t\t\tfilename : __dirname + \"/brand-nodejs.png\",\t\t// original filename\r\n\t\t\tbatch : [\t\t\t\t\t\t\t\t\t\t// image processing shell scripts with paramters\r\n\t\t\t\t'-negate',\r\n\t\t\t\t'-colorspace', 'Gray',\r\n\t\t\t\t'-font', 'Arial', '-pointsize', '41' ,\r\n\t\t\t\t'-draw', 'fill #282828  gravity south text 0,11 scream.js',\r\n\t\t\t\t'-font', 'Arial', '-pointsize', '40' ,\r\n\t\t\t\t'-draw', 'fill red  gravity south text 0,10 scream.js',\r\n\t\t\t\t'-resize', 'x32'\t\t\t\t\t\t\t// -size width[xheight][+offset] \r\n\t\t\t]\r\n\t\t}\r\n\t}\r\n};\r\n\r\nmodule.exports = config;\r\n```\r\n\r\n\r\n\r\n\r\nTests\r\n=====\r\nExecute `scream --validate` to show the test instructions or navigate to scream-js folder and execute \r\n`npm test`.  \r\n\r\nRoadmap\r\n=======\r\n- optional usage of imports in CSS files.\r\n- minify CSS output in non test mode.\r\n- partial rebuild.\r\nCurrently Scream.js rebuilds all components if the VID module changes. This will change soon.\r\n\r\n\r\nLicenses\r\n========\r\n\r\n***Open Source- GPL***  \r\nAllows the use of scream.js in GPL-ed projects for free. \r\n\r\n***Commercial License***  \r\nAllows you to use scream.js on one workstation. \r\nThis license costs 210€. \r\n\r\n***Enterprise License***  \r\nAllows you to use scream.js on an unlimited number of workstations \r\non the condition that all of them are used by one company. \r\nThis license costs 660€.  \r\n\r\nHow to purchase for your company?\r\n=================================\r\nTo purchase Scream-js Image Service send an E-Mail to purchase-scream-js@ahlf-it.de. Specify the ***license type*** and your ***company name*** and ***address*** in topic or mail text.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-a%2Fscream-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-a%2Fscream-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-a%2Fscream-js/lists"}