the-architect-sprite_generator 0.1.11

data/README.txt

@@ -0,0 +1,33 @@
+= SpriteGenerator
+
+Automatically generate Sprite Images and the corresponding CSS using RMagick and Liquid.
+
+== Dependencies
+
+* RMagick 2.2.2
+* Liquid 1.7.0
+
+== LICENSE:
+
+(The MIT License)
+
+Copyright (c) 2009 Marcel Scherf
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/lib/sprite_batch_generator.rb

@@ -0,0 +1,37 @@
+require 'yaml'
+require 'ostruct'
+require 'pathname'
+require File.expand_path(File.dirname(__FILE__) + '/sprite_generator')
+
+class SpriteBatchGenerator
+  attr_reader :batches
+  
+  def initialize(filename)
+    config = YAML.load(File.read(filename))
+    @batches = config.inject([]) do |arr, pair|
+      if !!defined?(RAILS_ROOT)
+        pair.last.merge!(:config_root => RAILS_ROOT)
+      elsif pair.last[:root]
+        root = File.expand_path(pair.last[:root], file_name)
+        pair.last.merge!(:config_root => root)
+      end
+      arr.push OpenStruct.new(pair.last)
+      arr
+    end
+  end
+  
+  
+  def generate
+    @batches.each do |batch|
+      generator = SpriteGenerator.new(batch.files, batch.output, batch.config_root, batch.options || {})
+      css       = generator.create
+      # only write output if css_output is specified
+      unless css.nil? || css.empty? || batch.css_output.nil?
+        output = batch.css_template.nil? ? css : Liquid::Template.parse(File.open(batch.css_template).read).render('css' => css)
+        File.open(batch.css_output, 'w+'){|f| f.puts output }
+      end
+    end
+  end
+  
+  
+end

data/lib/sprite_generator.rb

@@ -0,0 +1,190 @@
+require 'rubygems'
+require 'RMagick'
+require 'liquid'
+
+class SpriteGenerator
+  VERSION = '0.1.10'
+  
+  include Magick
+    
+  # parameters:
+  # files_or_path: can be Dir.glob-able paths or an array of filenames 
+  #   ie: ['../images/icons/icon1_out.png', '../images/icons/icon1_over.png'] or '../images/icons/icon*.png' 
+  # output: filename where the generated sprite will be stored
+  #   ie: '../images/sprites/icons.png'
+  # options: set a variety of options
+  #   - delimiter: characters by which multiple variations of images will be found
+  #     ie: '_' for 'icon_hover.png'
+  #     ie: '-' for 'icon-hover.png'
+  #         if icon is the basename
+  #   - align: 
+  #   - sprite_location: will be available as variable in the liquid template, if this is not set, the template will use output as sprite_location
+  #   - tile: if set to ie. '100x100' it will center every image on a 100 by 100 tile
+  #   - template: Liquid template for each sprite, use this to build the css for your sprites
+  #             these variables are available:
+  #             - top: distance to top border of sprite in pixels 
+  #             - left: distance to left border of sprite in pixels 
+  #             - width: width of current image in pixels 
+  #             - height: height of current image in pixels 
+  #             - basename: filename or basename of variations
+  #               ie: with variations: icon_out.png, icon_over.png  => icon
+  #               ie: without variations: icon.png => icon.png
+  #             - file_basename: always the name of the current image without extension
+  #               ie: icon_over
+  #             - filename: icon_over.png
+  #             - full_filename: ../images/icons/icon_over.ong
+  #             - variations: number of variations as number
+  #             - variation: the current variation as zero based number
+  #             - sprite_location: path to sprite
+  def initialize(files_or_paths, output, root, options = {})
+    @files = find_files(files_or_paths)
+    return if @files.nil? || @files.empty?
+    @root       = root || ''
+    @output     = output
+    @delimiter  = options[:delimiter] || '-'
+    @analyzed   = analyze_filenames(@files, @delimiter)
+    @template   = Liquid::Template.parse(options[:template] || '')
+    
+    @sprite_location = options[:sprite_location] || @output
+    @background = options[:background] || '#FFFFFF00'
+    @tile_size  = options[:tile]
+    @alignment    = options[:alignment] ? Magick.const_get("#{camelize(options[:alignment])}Gravity") : Magick::CenterGravity
+  end
+  
+  
+  def create
+    raise 'No files found.' if @files.nil? || @files.empty?
+    background = @background
+    unless @tile_size.nil?
+      size_x, size_y = @tile_size.split('x').first(2).map{|dim| dim.to_i}
+      tile = Magick::Image.new(size_x, size_y){ self.background_color = background }
+      tile.format = "PNG"
+    end
+    destination = @root.nil? || @root.empty? ? @output : File.join(@root, @output)
+    image, css = build(tile)
+    image.write(destination){ self.background_color = background }
+    css
+  end
+  
+  
+protected
+  
+  # simplyfied version of active_supports camelize version
+  def camelize(lower_case_and_underscored_word)
+    lower_case_and_underscored_word.to_s.gsub(/\/(.?)/) { "::#{$1.upcase}" }.gsub(/(?:^|_)(.)/) { $1.upcase }
+  end
+  
+  def build(tile = nil)
+    background = @background
+    images = ImageList.new{ self.background_color = background }
+    context = { 'sprite_location' => @sprite_location, 'tile' => tile }
+    css = []
+    
+    @analyzed.each do |key, value|
+      if tile
+        context['left'] = images.length > 0 ? tile.columns : 0
+      else
+        context['left'] = images.length > 0 ? images.append(false).columns : 0
+      end
+      context['top'] = 0
+      context['basename'] = key
+      context['overall'] = images.length
+      
+      if value.size > 1
+        image_list = ImageList.new(*value){ self.background_color = background }
+        if tile
+          tiles = ImageList.new{ self.background_color = background }
+          image_list.each do |image|
+            tiles << tile.composite(image, @alignment, Magick::OverCompositeOp)
+          end
+          images.from_blob(tiles.append(true).to_blob){ self.background_color = background }
+        else
+          images.from_blob(image_list.append(true).to_blob){ self.background_color = background }
+        end
+        context['variations'] = image_list.length
+        context['type'] = :list
+        context['images'] = image_list
+        context['filenames'] = value
+      else
+        image = Image.read(value.flatten.first){ self.background_color = background }
+        context['variations'] = 0
+        context['variation_name'] = ''
+        context['variation_number'] = 0
+        context['type'] = :image
+        
+        if tile
+          images.from_blob(tile.composite(image.first, @alignment, Magick::OverCompositeOp).to_blob){ self.background_color = background }
+        else
+          images.from_blob(image.first.to_blob){ self.background_color = background }
+        end
+      end
+      css << build_css(context)
+    end
+    
+    [images.append(false), css.join("\n")]
+  end
+  
+  
+  def build_css(context = {})
+    type = context.delete('type')
+    case type
+    when :list
+      css = build_css_for_list(context)
+    when :image
+      # render template if there is only one image
+      css = @template.render(context)
+    end
+    css
+  end
+  
+  
+  def build_css_for_list(context)
+    new_context = context.dup
+    tile = new_context.delete('tile')
+    image_list = context.delete('images')
+    new_context['type'] = :image
+    css = image_list.inject([]) do |css, image|
+      new_context['width'] = tile ? tile.columns : image.columns
+      new_context['height'] = tile ? tile.rows : image.rows
+      new_context['variation_number'] = css.size
+      
+      new_context['full_filename'] = context['filenames'].shift
+      new_context['filename'] = File.basename(new_context['full_filename'])
+      new_context['file_basename'] = File.basename(new_context['full_filename'], '.*')
+      new_context['variation_name'] = new_context['file_basename'].gsub(/^#{new_context['basename']}#{@delimiter}/, '')
+
+      css << build_css(new_context.dup)
+      new_context['top'] += tile ? tile.columns : new_context['height']
+      css
+    end.join("\n")
+  end
+  
+  
+  # gather files that will be used to create the sprite
+  def find_files(*args)
+    args.inject([]) do |files, arg|
+      found_files = Dir.glob(arg)
+      if found_files.empty?
+        files << arg if File.exists?(arg) rescue raise arg.inspect
+      else
+        files << found_files.flatten
+      end
+      files.flatten.compact.uniq
+    end
+  end
+  
+  
+  # gather information about the selected files
+  # check for variations by using a delimiter as an indicator
+  def analyze_filenames(file_names, delimiter = '_')
+    file_names.inject(Hash.new{|hash, key| hash[key] = Array.new;}) do |h, file|
+      basename = File.basename(file).split('.').first
+      without_variation = basename.split(delimiter)[0..-2].join(delimiter)
+      basename = without_variation.nil? || without_variation == '' ? basename : without_variation
+      h[basename] << file
+      h
+    end
+  end
+  
+  
+end

data/test/units/test_sprite_batch_generator.rb

@@ -0,0 +1,29 @@
+require 'test/unit'
+require File.expand_path(File.dirname(__FILE__) + '/../../lib/sprite_batch_generator')
+
+class SpriteBatchGeneratorTest < Test::Unit::TestCase
+
+  def setup
+    @config = 'test/config/batch.yml'
+  end
+  
+  def teardown
+    # delete test output
+    Dir.glob('test/output/*').each{|f| File.delete f }
+  end
+  
+  def test_should_read_config_file
+    @batch = SpriteBatchGenerator.new(@config)
+    assert_not_nil @batch
+    assert_equal 2, @batch.batches.size
+  end
+  
+  def test_should_create_files_from_config
+    @batch = SpriteBatchGenerator.new(@config)
+    css = @batch.generate
+    assert_not_nil css
+    output_files = Dir.glob('test/output/*')
+    assert 6, output_files.size
+  end
+  
+end

data/test/units/test_sprite_generator.rb

@@ -0,0 +1,122 @@
+require 'rubygems'
+require 'liquid'
+require 'test/unit'
+require File.expand_path(File.dirname(__FILE__) + '/../../lib/sprite_generator')
+
+class SpriteGeneratorTest < Test::Unit::TestCase
+  
+  def setup
+    @template = '.{{basename}}_{{variation}}{ background:transparent url({{sprite_location}}) -{{left}}px -{{top}}px no-repeat; width:{{width}}px; height:{{height}}px; }'
+    @all_images_path = 'test/images/*.png'
+    @output = 'test/output/sprite_by_create.png'
+    @page_path = 'test/output/test.html'
+  end
+  
+  
+  def teardown
+    # delete test output
+    Dir.glob('test/output/*').each{|f| File.delete f }
+  end
+  
+  
+  def test_should_create_correct_context
+    template = %q{
+      basename: {{basename}}
+      variation: {{variation}}
+      sprite_location: {{sprite_location}}
+      left: {{left}}
+      top: {{top}}
+      width: {{width}}
+      height: {{height}}
+      filename: {{filename}}
+      file_basename: {{file_basename}}
+      full_filename: {{full_filename}}
+      variations: {{variations}}
+      variation_number: {{variation_number}}
+      variation_name: {{variation_name}}
+    }
+    @generator = SpriteGenerator.new(@all_images_path, @output, nil, {:template => template})
+    css = @generator.create
+    assert css.include?('basename: emoticon-evilgrin')
+    assert css.include?('variation_name: evilgrin')
+    assert css.include?('file_basename: emoticon-evilgrin')
+  end
+  
+  def test_should_use_alignment_option
+    assert_nothing_raised do
+      SpriteGenerator.new(@all_images_path, @output, nil, {:template => @template, :tile => '100x100', :background => '#FFFFFF', :alignment => 'west'})
+    end
+  end
+  
+  def test_should_complain_over_unknown_alignment_option
+    assert_raise NameError do
+      SpriteGenerator.new(@all_images_path, @output, nil, {:template => @template, :tile => '100x100', :background => '#FFFFFF', :alignment => 'somewhere'})
+    end
+  end
+  
+  def test_should_center_images_on_tiles
+    @generator = SpriteGenerator.new(@all_images_path, @output, nil, {:template => @template, :tile => '100x100', :background => '#FFFFFF00'})
+    css = @generator.create
+    page = Liquid::Template.parse(File.open('test/templates/test.html').read).render('css' => css)
+    assert page.include?("{ background:")
+    assert page.include?("width:100px")
+    assert page.include?("height:100px")
+    assert page.include?("-300px")
+    assert page.include?("-800px")
+    File.open(@page_path, 'w+'){|f| f.puts page }
+    assert File.exists?(@page_path)
+  end
+  
+  
+  def test_should_create_correct_css
+    @generator = SpriteGenerator.new(@all_images_path, @output, nil, :template => @template)
+    css = @generator.create()
+    page = Liquid::Template.parse(File.open('test/templates/test.html').read).render('css' => css)
+    assert page.include?("{ background:")
+    assert page.include?("width:16px")
+    assert page.include?("height:16px")
+    assert page.include?("-16px")
+    assert page.include?("-96px")
+    File.open(@page_path, 'w+'){|f| f.puts page }
+    assert File.exists?(@page_path)
+  end
+  
+  
+  def test_should_generate_sprite_file
+    @generator = SpriteGenerator.new(@all_images_path, @output, nil, :template => @template)
+    css = @generator.create
+    assert !(css.nil? || css.empty?)
+    assert File.exists?(@output)
+  end
+  
+  # bad, testing internal state
+  def test_should_find_versions_of_emoticons
+    files = Dir.glob(@all_images_path)
+    @generator = SpriteGenerator.new(files, @output, nil, {})
+    analyzed = @generator.instance_variable_get(:@analyzed)
+    assert_equal 9, analyzed['emoticon'].size
+  end
+  
+  # bad, using internal state
+  def test_should_find_files_for_glob_path
+    @generator = SpriteGenerator.new(@all_images_path, @output, nil, {})
+    files = @generator.instance_variable_get(:@files)
+    assert_equal 16, files.size
+  end
+  
+  # bad, using internal state
+  def test_should_find_files
+    @generator = SpriteGenerator.new(['test/images/emoticon-evilgrin.png', 'test/images/emoticon-grin.png'], @output, nil, {})
+    files = @generator.instance_variable_get(:@files)
+    assert_equal 2, files.size
+  end
+  
+  # bad, using internal state
+  def test_should_not_find_anything
+    @generator = SpriteGenerator.new('test/blalala/*.hurz', @output, nil, {})
+    files = @generator.instance_variable_get(:@files)
+    assert_equal 0, files.size
+  end
+  
+  
+end

metadata

@@ -0,0 +1,75 @@
+--- !ruby/object:Gem::Specification 
+name: the-architect-sprite_generator
+version: !ruby/object:Gem::Version 
+  version: 0.1.11
+platform: ruby
+authors: 
+- Marcel Scherf
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2009-04-21 00:00:00 -07:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: liquid
+  type: :runtime
+  version_requirement: 
+  version_requirements: !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: "0"
+    version: 
+- !ruby/object:Gem::Dependency 
+  name: rmagick
+  type: :runtime
+  version_requirement: 
+  version_requirements: !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: "0"
+    version: 
+description: 
+email: marcel.scherf@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: 
+- README.txt
+files: 
+- lib/sprite_batch_generator.rb
+- lib/sprite_generator.rb
+- README.txt
+has_rdoc: true
+homepage: http://github.com/the-architect/spritegenerator
+post_install_message: 
+rdoc_options: 
+- --charset=UTF-8
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.2.0
+signing_key: 
+specification_version: 2
+summary: Automatically generate Sprite Images and the corresponding CSS using RMagick and Liquid.
+test_files: 
+- test/units/test_sprite_batch_generator.rb
+- test/units/test_sprite_generator.rb