sprite_generator 0.2.4

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,264 @@
+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         = find_files_for_mode(options[:distribution] || :smart)
+    @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?
+    build_tile
+    destination = @root.nil? || @root.empty? ? @output : File.join(@root, @output)
+    image, css  = build_sprite_and_css
+    background  = @background
+    image.write(destination){ self.background_color = background }
+    css
+  end
+  
+protected
+  
+  def build_sprite_and_css
+    background  = @background
+    @images     = ImageList.new{ self.background_color = background }
+    context     = { 'sprite_location' => @sprite_location }
+    @css        = []
+    
+    @analyzed.keys.sort.each do |key|
+      value = @analyzed[key]
+      
+      context['top']      = 0
+      puts "basename: %s" % key
+      context['basename'] = key
+      context['overall']  = @images.length
+      if value.size > 1
+        context = build_image_list(context, value.sort)
+      else
+        context = build_single_image(context, value.flatten.first)
+      end
+      @css << build_css(context)
+    end
+    [@images.append(false), @css.join("\n")]
+  end
+  
+  
+  def build_single_image(context, filename)
+    background  = @background
+    image       = Image.read(filename){ self.background_color = background }.flatten.first
+    
+    context.merge!(build_context_for_single_image(image, filename, context['basename']))
+    if @tile
+      @images.from_blob(@tile.composite(image, @alignment, Magick::OverCompositeOp).to_blob){ self.background_color = background }
+    else
+      @images.from_blob(image.to_blob){ self.background_color = background }
+    end
+    context
+  end
+  
+  
+  def build_context_for_single_image(image, filename, basename)
+    file_basename = File.basename(filename, '.*')
+    {
+      'variations'       => 0,
+      'variation_number' => 0,
+      'full_filename'    => filename,
+      'file_basename'    => file_basename,
+      'variation_name'   => file_basename.gsub("#{basename}#{@delimiter}", ''),
+      'width'            => @tile ? @tile.columns : image.columns,
+      'height'           => @tile ? @tile.rows    : image.rows,
+      'type'             => :image,
+      'left'             => left_value_for_context
+    }
+  end
+  
+  
+  def left_value_for_context
+    @tile ? (@images.length * @tile.columns) : (@images.any? ? @images.append(false).columns : 0)
+  end
+  
+  
+  def build_image_list(context, image_filenames)
+    background  = @background
+    image_list = ImageList.new(*image_filenames){ self.background_color = background }
+    context.merge!(build_context_for_image_list(image_list, image_filenames))
+    if @tile
+      tiles = ImageList.new{ self.background_color = background }
+      image_list.each do |image|
+        tiles << @tile.composite(image, @alignment, Magick::OverCompositeOp)
+      end
+      append_to_sprite(tiles)
+    else
+      append_to_sprite(image_list)
+    end
+    context
+  end
+  
+  
+  def append_to_sprite(images)
+    background  = @background
+    @images.from_blob(images.append(true).to_blob){ self.background_color = background }
+  end
+  
+  
+  def build_context_for_image_list(image_list, image_filenames)
+    {
+      'variations' => image_list.length,
+      'type'       => :list,
+      'images'     => image_list,
+      'filenames'  => image_filenames,
+      'left'        => left_value_for_context
+    }
+  end
+  
+  
+  def build_tile
+    return if @tile_size.nil?
+    background = @background
+    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
+  
+  
+  def build_css(context = {})
+    type = context['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
+    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.rows : 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
+  
+  
+  # put filenames in format for each mode
+  def find_files_for_mode(mode)
+    case mode.to_sym
+    when :smart
+      smart_distribution
+    when :horizontal
+      horizontal_distribution
+    when :vertical
+      vertical_distribution
+    end
+  end
+  
+  
+  # gather information about the selected files
+  # check for variations by using a delimiter as an indicator
+  def smart_distribution
+    @files.inject(Hash.new{|hash, key| hash[key] = Array.new;}) do |h, file|
+      basename          = File.basename(file, '.*')
+      without_variation = basename.split(@delimiter)[0..-2].join(@delimiter)
+      basename          = without_variation.nil? || without_variation == '' ? basename : without_variation
+      h[basename] << file
+      h
+    end
+  end
+  
+  
+  def horizontal_distribution
+    @files.inject(Hash.new{|hash, key| hash[key] = Array.new;}) do |h, file|
+      basename = File.basename(file)
+      h[basename] << file
+      h
+    end
+  end
+  
+  
+  def vertical_distribution
+    @files.inject(Hash.new{|hash, key| hash[key] = Array.new;}) do |h, file|
+      basename = File.basename(file)
+      h['all'] << file
+      h
+    end
+  end
+  
+  
+  # simplyfied version of active_support's camelize version
+  def camelize(lower_case_and_underscored_word)
+    lower_case_and_underscored_word.to_s.gsub(/\/(.?)/) { "::#{$1.upcase}" }.gsub(/(?:^|_)(.)/) { $1.upcase }
+  end
+  
+end

data/test/units/test_sprite_batch_generator.rb

@@ -0,0 +1,35 @@
+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
+  
+protected
+
+  def this_method
+    caller[0] =~ /`([^']*)'/ and $1
+  end
+  
+end

data/test/units/test_sprite_generator.rb

@@ -0,0 +1,219 @@
+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_sprite_for_tile_with_vertical_distribution
+    options = {
+      :distribution => 'vertical',
+      :tile         => '40x300',
+      :alignment    => 'north_west',
+      :template     => "a.{{file_basename}} { padding-left:2em; background: transparent url(#{this_method}.png) -{{left}}px -{{top}}px no-repeat; }"
+    }
+    
+    generator = SpriteGenerator.new(@all_images_path, "test/output/#{this_method}.png", nil, options)
+    css = generator.create
+    assert css.include?('-4500px')
+    
+    page = Liquid::Template.parse(File.open('test/templates/link.html').read).render('css' => css, 'image' => "#{this_method}.png")
+    output_file = File.join('test', 'output', "#{this_method}.html")
+    File.open(output_file, 'w+'){ |f| f.puts page }
+    assert File.exists?(output_file)
+  end  
+  
+  
+  def test_should_create_correct_sprite_for_tile_with_vertical_distribution
+    options = {
+      :distribution => 'vertical',
+      :tile         => '40x300',
+      :alignment    => 'north_west',
+      :template     => "a.{{file_basename}} { padding-left:2em; background: transparent url(#{this_method}.png) -{{left}}px -{{top}}px no-repeat; }"
+    }
+    
+    generator = SpriteGenerator.new(@all_images_path, "test/output/#{this_method}.png", nil, options)
+    css = generator.create
+    assert css.include?('-4500px')
+    
+    page = Liquid::Template.parse(File.open('test/templates/link.html').read).render('css' => css, 'image' => "#{this_method}.png")
+    output_file = File.join('test', 'output', "#{this_method}.html")
+    File.open(output_file, 'w+'){ |f| f.puts page }
+    assert File.exists?(output_file)
+  end
+  
+  
+  
+  def test_should_create_correct_sprite_for_tile_with_horizontal_distribution
+    options = {
+      :distribution => 'horizontal',
+      :tile         => '400x50',
+      :alignment    => 'north_west',
+      :template     => "a.{{file_basename}} { padding-left:2em; background: transparent url(#{this_method}.png) -{{left}}px -{{top}}px no-repeat; }"
+    }
+    
+    generator = SpriteGenerator.new(@all_images_path, "test/output/#{this_method}.png", nil, options)
+    css = generator.create
+    assert css.include?('-6000px')
+    
+    page = Liquid::Template.parse(File.open('test/templates/link.html').read).render('css' => css, 'image' => "#{this_method}.png")
+    output_file = File.join('test', 'output', "#{this_method}.html")
+    File.open(output_file, 'w+'){ |f| f.puts page }
+    assert File.exists?(output_file)
+  end
+  
+  
+  def test_should_user_horizontal_distribution
+    template = %q{ {{left}} }
+    generator = SpriteGenerator.new(@all_images_path, @output, nil, { :template => template, :distribution => 'horizontal' })
+    css = generator.create
+    assert css.include?('240')
+  end
+  
+  def test_should_user_vertical_distribution
+    template = %q{ {{top}} }
+    generator = SpriteGenerator.new(@all_images_path, @output, nil, { :template => template, :distribution => 'vertical' })
+    css = generator.create
+    assert css.include?('240')
+  end
+  
+  def test_should_set_correct_context_filebasename_for_images_without_variations
+    template = %q{ {{file_basename}} }
+    generator = SpriteGenerator.new(@all_images_path, @output, nil, { :template => template, :delimiter => '_' })
+    css = generator.create
+    assert css.include?('emoticon-evilgrin')
+  end
+  
+  def test_should_set_correct_context_width_for_images_without_variations
+    template = %q{ {{width}} }
+    generator = SpriteGenerator.new(@all_images_path, @output, nil, { :template => template, :delimiter => '_' })
+    css = generator.create
+    assert css.include?('16')
+  end
+  
+  def test_should_set_correct_context_top_for_images_without_variations
+    template = %q{ {{top}} }
+    generator = SpriteGenerator.new(@all_images_path, @output, nil, { :template => template, :delimiter => '_' })
+    css = generator.create
+    assert !css.include?('-16')
+  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
+
+protected
+
+  def this_method
+    caller[0] =~ /`([^']*)'/ and $1
+  end
+
+end

metadata

@@ -0,0 +1,77 @@
+--- !ruby/object:Gem::Specification 
+name: sprite_generator
+version: !ruby/object:Gem::Version 
+  version: 0.2.4
+platform: ruby
+authors: 
+- Marcel Scherf
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2009-12-08 00:00:00 +01: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
+licenses: []
+
+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.3.5
+signing_key: 
+specification_version: 3
+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