sprite-factory 1.0.0

data/lib/sprite_factory/library/chunky_png.rb

@@ -0,0 +1,31 @@
+require 'chunky_png'
+
+module SpriteFactory
+  module Library
+    module ChunkyPng
+
+      VALID_EXTENSIONS = :png
+
+      def self.load(files)
+        files.map do |filename|
+          image = ChunkyPNG::Image.from_file(filename)
+          {
+            :filename => filename,
+            :image    => image,
+            :width    => image.width,
+            :height   => image.height
+          }
+        end
+      end
+
+      def self.create(filename, images, width, height)
+        target = ChunkyPNG::Image.new(width, height, ChunkyPNG::Color::TRANSPARENT)
+        images.each do |image|
+          target.compose!(image[:image], image[:x], image[:y])
+        end
+        target.save(filename)
+      end
+
+    end # module ChunkyPng
+  end # module Library
+end # module SpriteFactory

data/lib/sprite_factory/library/rmagick.rb

@@ -0,0 +1,32 @@
+require 'RMagick'
+
+module SpriteFactory
+  module Library
+    module RMagick
+
+      VALID_EXTENSIONS = [:png, :jpg, :jpeg, :gif]
+
+      def self.load(files)
+        files.map do |filename|
+          image = Magick::Image.read(filename)[0]
+          {
+            :filename => filename,
+            :image    => image,
+            :width    => image.columns,
+            :height   => image.rows
+          }
+        end
+      end
+
+      def self.create(filename, images, width, height)
+        target = Magick::Image.new(width,height)
+        target.opacity = Magick::MaxRGB
+        images.each do |image|
+          target.composite!(image[:image], image[:x], image[:y], Magick::SrcOverCompositeOp)
+        end
+        target.write(filename)
+      end
+
+    end # module RMagick
+  end # module Library
+end # module SpriteFactory

data/lib/sprite_factory/runner.rb

@@ -0,0 +1,204 @@
+require 'pathname'
+
+module SpriteFactory
+  class Runner
+
+    #----------------------------------------------------------------------------
+
+    attr :input
+    attr :config
+  
+    def initialize(input, config = {})
+      @input  = input.to_s[-1] == "/" ? input[0...-1] : input # gracefully ignore trailing slash on input directory name
+      @config = config
+      @config[:style]    ||= SpriteFactory.style    || :css
+      @config[:layout]   ||= SpriteFactory.layout   || :horizontal
+      @config[:library]  ||= SpriteFactory.library  || :rmagick
+      @config[:selector] ||= SpriteFactory.selector || 'img.'
+      @config[:csspath]  ||= SpriteFactory.csspath
+      @config[:report]   ||= SpriteFactory.report
+    end
+  
+    #----------------------------------------------------------------------------
+
+    def run!(&block)
+
+      raise RuntimeError, "unknown layout #{layout_name}"     if !Layout.respond_to?(layout_name)
+      raise RuntimeError, "unknown style #{style_name}"       if !Style.respond_to?(style_name)
+      raise RuntimeError, "unknown library #{library_name}"   if !Library.respond_to?(library_name)
+
+      raise RuntimeError, "input must be a single directory"  if input.nil?  || input.to_s.empty? || !File.directory?(input)
+      raise RuntimeError, "no output file specified"          if output.nil? || output.to_s.empty?
+      raise RuntimeError, "no image files found"              if image_files.empty?
+
+      raise RuntimeError, "set :width for fixed width, or :hpadding for horizontal padding, but not both." if width  && !hpadding.zero?
+      raise RuntimeError, "set :height for fixed height, or :vpadding for vertical padding, but not both." if height && !vpadding.zero?
+
+      images = load_images
+      max    = layout_images(images)
+      header = summary(images, max)
+
+      create_sprite(images, max[:width], max[:height])
+
+      css_file = File.open(output_style_file, "w+")
+      css_file.puts style_comment(header)
+      css_file.puts style(selector, css_path, images, &block)
+      css_file.puts IO.read(custom_style_file) if File.exists?(custom_style_file)
+      css_file.close
+
+      report(header)
+
+    end
+
+    #----------------------------------------------------------------------------
+  
+    private
+
+    def output
+      config[:output] || input
+    end
+
+    def selector
+      config[:selector]
+    end
+
+    def style_name
+      config[:style]
+    end
+
+    def layout_name
+      config[:layout]
+    end
+
+    def library_name
+      config[:library]
+    end
+
+    def hpadding
+      config[:hpadding] || config[:padding] || 0
+    end
+
+    def vpadding
+      config[:vpadding] || config[:padding] || 0
+    end
+
+    def width
+      config[:width]
+    end
+
+    def height
+      config[:height]
+    end
+
+    def output_image_file
+      "#{output}.png" if output
+    end
+
+    def output_style_file
+      "#{output}.#{style_name}" if output and style_name
+    end
+
+    def custom_style_file
+      File.join(input, File.basename(input) + ".#{style_name}")
+    end
+
+    def css_path
+      base   = File.basename(output_image_file)
+      custom = config[:csspath]
+      if custom
+        if custom.is_a?(Proc)
+          custom.call(base)          # allow custom path using a lambda
+        elsif custom.include?('$IMAGE')
+          custom.sub('$IMAGE', base) # allow custom path with token replacement
+        else
+          File.join(custom, base)    # allow custom path with simple prepend
+        end
+      else
+        base                         # otherwise, just default to basename of the output image
+      end
+    end
+
+    def image_files
+      return [] if input.nil?
+      valid_extensions = library::VALID_EXTENSIONS
+      expansions = Array(valid_extensions).map{|ext| File.join(input, "**", "*.#{ext}")}
+      Dir[*expansions].sort
+    end
+
+    #----------------------------------------------------------------------------
+
+    def library
+      @library ||= Library.send(library_name)
+    end
+
+    def load_images
+      images = library.load(image_files)
+      images.each do |i|
+        i[:name] = File.basename(i[:filename])
+        i[:ext]  = File.extname(i[:name])
+        i[:name] = i[:name][0...-i[:ext].length] unless i[:ext].empty?
+
+        raise RuntimeError, "image #{i[:name]} does not fit within a fixed width of #{width}" if width && (width < i[:width])
+        raise RuntimeError, "image #{i[:name]} does not fit within a fixed height of #{height}" if height && (height < i[:height])
+      end
+      images
+    end
+
+    def create_sprite(images, width, height)
+      library.create(output_image_file, images, width, height)
+    end
+
+    #----------------------------------------------------------------------------
+
+    def layout_images(images)
+      Layout.send(layout_name, images, :width => width, :height => height, :hpadding => hpadding, :vpadding => vpadding)
+    end
+
+    #----------------------------------------------------------------------------
+
+    def style(selector, path, images, &block)
+      defaults = Style.generate(style_name, selector, path, images) # must call, even if custom block is given, because it stashes generated css style into image[:style] attributes
+      if block_given?
+        yield images.inject({}) {|h,i| h[i[:name].to_sym] = i; h} # provide custom rule builder a hash by image name
+      else
+        defaults
+      end
+    end
+
+    def style_comment(comment)
+      Style.comment(style_name, comment)
+    end
+
+    #----------------------------------------------------------------------------
+
+    def summary(images, max)
+      return <<-EOF
+
+        Creating a sprite from following images:
+        \n#{images.map{|i| "        #{report_path(i[:filename])} (#{i[:width]}x#{i[:height]})" }.join("\n")}
+
+        Output files:
+          #{report_path(output_image_file)}
+          #{report_path(output_style_file)}
+
+        Output size:
+          #{max[:width]}x#{max[:height]}
+
+      EOF
+    end
+
+    def report(msg)
+      puts msg if config[:report]
+    end
+
+    def report_path(path) # always report paths relative to . to avoid machine specific information in report (to avoid DIFF issues in tests and version control)
+      @cwd ||= Pathname.new(File.expand_path('.'))
+      path = Pathname.new(path)
+      path = path.relative_path_from(@cwd) if path.absolute?
+      path.to_s
+    end
+
+    #----------------------------------------------------------------------------
+
+  end # class Runner
+end # module SpriteFactory

data/lib/sprite_factory/style.rb

@@ -0,0 +1,58 @@
+module SpriteFactory
+  module Style
+
+    #----------------------------------------------------------------------------
+
+    def self.css(selector, name, attributes)
+      "#{selector}#{name} { #{css_style(attributes)}; }"
+    end
+
+    def self.css_style(attributes)
+      attributes.join("; ")
+    end
+
+    def self.css_comment(comment)
+      return "/*\n#{comment}\n*/"
+    end
+
+    #----------------------------------------------------------------------------
+
+    def self.sass(selector, name, attributes)
+      "#{selector}#{name}\n" + sass_style(attributes)
+    end
+
+    def self.sass_style(attributes)
+      attributes.map{|a| "  #{a}"}.join("\n") + "\n"
+    end
+
+    def self.sass_comment(comment)
+      return "/* #{comment.rstrip} */" # SASS has peculiar indenting requirements in order to recognise closing block comment
+    end
+
+    #----------------------------------------------------------------------------
+
+    def self.generate(style_name, selector, path, images)
+      styles = []
+      images.each do |image|
+        attr = [
+          "width: #{image[:cssw]}px",
+          "height: #{image[:cssh]}px",
+          "background: url(#{path}) #{-image[:cssx]}px #{-image[:cssy]}px no-repeat"
+        ]
+        image[:style] = send("#{style_name}_style", attr) # make pure style available for (optional) custom rule generators (see usage of yield inside Runner#style)
+        styles << send(style_name, selector, image[:name], attr)
+      end
+      styles << ""
+      styles.join("\n")
+    end
+
+    #----------------------------------------------------------------------------
+
+    def self.comment(style_name, comment)
+      send("#{style_name}_comment", comment)
+    end
+
+    #----------------------------------------------------------------------------
+
+  end
+end

data/sprite_factory.gemspec

@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+$LOAD_PATH.push File.expand_path("lib", File.dirname(__FILE__))
+require 'sprite_factory'
+
+Gem::Specification.new do |s|
+
+  s.name        = "sprite-factory"
+  s.version     = SpriteFactory::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Jake Gordon"]
+  s.email       = ["jake@codeincomplete.com"]
+  s.homepage    = "https://github.com/jakesgordon/sprite-factory"
+  s.summary     = SpriteFactory::SUMMARY
+  s.description = SpriteFactory::DESCRIPTION
+
+  s.add_development_dependency 'rmagick'
+  s.add_development_dependency 'chunky_png'
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+end

data/test/images/custom/custom.css

@@ -0,0 +1,4 @@
+div.running span.running { display: inline; }
+div.running span.stopped { display: none;   }
+div.stopped span.running { display: none;   }
+div.stopped span.stopped { display: inline; }

data/test/images/empty/readme.txt

@@ -0,0 +1 @@
+this file is only here because git can't deal with empty directories (uck)

data/test/images/irregular/readme.txt

@@ -0,0 +1,2 @@
+this file is not an image file, but is in a directory that is going to be sprited to see if the SpriteFactory
+can handle it without crashing. Lets hope so!

data/test/images/reference/custom.css

@@ -0,0 +1,22 @@
+/*
+
+        Creating a sprite from following images:
+        
+        test/images/custom/running.png (46x25)
+        test/images/custom/stopped.png (46x25)
+
+        Output files:
+          test/images/custom.png
+          test/images/custom.css
+
+        Output size:
+          92x25
+
+
+*/
+div.running img.button { cursor: pointer; width: 46px; height: 25px; background: url(custom.png) 0px 0px no-repeat }
+div.stopped img.button { cursor: pointer; width: 46px; height: 25px; background: url(custom.png) -46px 0px no-repeat }
+div.running span.running { display: inline; }
+div.running span.stopped { display: none;   }
+div.stopped span.running { display: none;   }
+div.stopped span.stopped { display: inline; }

data/test/images/reference/formats.css

@@ -0,0 +1,22 @@
+/*
+
+        Creating a sprite from following images:
+        
+        test/images/formats/alice.gif (50x50)
+        test/images/formats/monkey.gif (50x50)
+        test/images/formats/spies.jpg (150x92)
+        test/images/formats/thief.png (50x50)
+
+        Output files:
+          test/images/formats.png
+          test/images/formats.css
+
+        Output size:
+          300x92
+
+
+*/
+img.alice { width: 50px; height: 50px; background: url(formats.png) 0px -21px no-repeat; }
+img.monkey { width: 50px; height: 50px; background: url(formats.png) -50px -21px no-repeat; }
+img.spies { width: 150px; height: 92px; background: url(formats.png) -100px 0px no-repeat; }
+img.thief { width: 50px; height: 50px; background: url(formats.png) -250px -21px no-repeat; }

data/test/images/reference/index.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <title>Test page for sprite factory</title>
+    <link href='regular.css'              rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='regular.horizontal.css'   rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='regular.vertical.css'     rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='regular.padded.css'       rel='stylesheet' type='text/css' media='screen'></link> 
+    <link href='regular.fixed.css'        rel='stylesheet' type='text/css' media='screen'></link> 
+    <link href='regular.sassy.css'        rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='irregular.css'            rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='irregular.horizontal.css' rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='irregular.vertical.css'   rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='irregular.padded.css'     rel='stylesheet' type='text/css' media='screen'></link> 
+    <link href='irregular.fixed.css'      rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='irregular.sassy.css'      rel='stylesheet' type='text/css' media='screen'></link> 
+    <link href='custom.css'               rel='stylesheet' type='text/css' media='screen'></link>
+    <link href='formats.css'              rel='stylesheet' type='text/css' media='screen'></link>
+    <style>
+      img { border: 1px solid red; }
+    </style>
+  </head>
+  <body>
+
+    <h1>Regular (defaults)</h1>
+    <img src='s.gif' class='regular1'>
+    <img src='s.gif' class='regular2'>
+    <img src='s.gif' class='regular3'>
+    <img src='s.gif' class='regular4'>
+    <img src='s.gif' class='regular5'>
+
+    <h1>Regular (horizontal)</h1>
+    <img src='s.gif' class='horizontal_regular1'>
+    <img src='s.gif' class='horizontal_regular2'>
+    <img src='s.gif' class='horizontal_regular3'>
+    <img src='s.gif' class='horizontal_regular4'>
+    <img src='s.gif' class='horizontal_regular5'>
+
+    <h1>Regular (vertical)</h1>
+    <img src='s.gif' class='vertical_regular1'><br>
+    <img src='s.gif' class='vertical_regular2'><br>
+    <img src='s.gif' class='vertical_regular3'><br>
+    <img src='s.gif' class='vertical_regular4'><br>
+    <img src='s.gif' class='vertical_regular5'><br>
+
+    <h1>Regular (padded)</h1>
+    <img src='s.gif' class='padded_regular1'>
+    <img src='s.gif' class='padded_regular2'>
+    <img src='s.gif' class='padded_regular3'>
+    <img src='s.gif' class='padded_regular4'>
+    <img src='s.gif' class='padded_regular5'>
+
+    <h1>Regular (fixed)</h1>
+    <img src='s.gif' class='fixed_regular1'>
+    <img src='s.gif' class='fixed_regular2'>
+    <img src='s.gif' class='fixed_regular3'>
+    <img src='s.gif' class='fixed_regular4'>
+    <img src='s.gif' class='fixed_regular5'>
+
+    <h1>Regular (sassy)</h1>
+    <img src='s.gif' class='sassy_regular1'>
+    <img src='s.gif' class='sassy_regular2'>
+    <img src='s.gif' class='sassy_regular3'>
+    <img src='s.gif' class='sassy_regular4'>
+    <img src='s.gif' class='sassy_regular5'>
+
+    <h1>Irregular (defaults)</h1>
+    <img src='s.gif' class='irregular1'>
+    <img src='s.gif' class='irregular2'>
+    <img src='s.gif' class='irregular3'>
+    <img src='s.gif' class='irregular4'>
+    <img src='s.gif' class='irregular5'>
+
+    <h1>Irregular (horizontal)</h1>
+    <img src='s.gif' class='horizontal_irregular1'>
+    <img src='s.gif' class='horizontal_irregular2'>
+    <img src='s.gif' class='horizontal_irregular3'>
+    <img src='s.gif' class='horizontal_irregular4'>
+    <img src='s.gif' class='horizontal_irregular5'>
+
+    <h1>Irregular (vertical)</h1>
+    <img src='s.gif' class='vertical_irregular1'><br>
+    <img src='s.gif' class='vertical_irregular2'><br>
+    <img src='s.gif' class='vertical_irregular3'><br>
+    <img src='s.gif' class='vertical_irregular4'><br>
+    <img src='s.gif' class='vertical_irregular5'><br>
+
+    <h1>Irregular (padded)</h1>
+    <img src='s.gif' class='padded_irregular1'>
+    <img src='s.gif' class='padded_irregular2'>
+    <img src='s.gif' class='padded_irregular3'>
+    <img src='s.gif' class='padded_irregular4'>
+    <img src='s.gif' class='padded_irregular5'>
+
+    <h1>Irregular (fixed)</h1>
+    <img src='s.gif' class='fixed_irregular1'>
+    <img src='s.gif' class='fixed_irregular2'>
+    <img src='s.gif' class='fixed_irregular3'>
+    <img src='s.gif' class='fixed_irregular4'>
+    <img src='s.gif' class='fixed_irregular5'>
+
+    <h1>Irregular (sassy)</h1>
+    <img src='s.gif' class='sassy_irregular1'>
+    <img src='s.gif' class='sassy_irregular2'>
+    <img src='s.gif' class='sassy_irregular3'>
+    <img src='s.gif' class='sassy_irregular4'>
+    <img src='s.gif' class='sassy_irregular5'>
+
+    <h1>Custom</h1>
+    <div class='running' id='timer'>
+      <img src='s.gif' class='button' onclick="SpriteFactory.toggleTimer();">
+      <span class='running'>running</span>
+      <span class='stopped'>stopped</span>
+    </div>
+
+    <h1>Other Formats</h1>
+    <img src='s.gif' class='alice'>
+    <img src='s.gif' class='monkey'>
+    <img src='s.gif' class='spies'>
+    <img src='s.gif' class='thief'>
+
+    <script>
+      SpriteFactory = {
+        toggleTimer: function() {
+          var timer = document.getElementById('timer');
+          if (timer) {
+            timer.setAttribute('class', timer.getAttribute('class') == 'running' ? 'stopped' : 'running');
+          }
+        }
+      }
+    </script>
+
+  </body>
+</html>