fonts/basket.ttf lib/saucy_helper.rb lib/saucy_render.rb @@ -1,12 +1,90 @@ Saucy ===== -Dynamic Text Rendering Plugin. - -It uses jQuery to replace innerHTML of elements with an image. - -The filename of the image contains all necessary information to allow Imagemagick to render the text. +Dynamic Text Rendering Plugin for Rails. Like sIFR but without the hassle/flash/javascript. * Automatic cacheing * SEO friendly +* render any TTF font +* Shadows, outlines, rotation. + +Use +--- + +In a view: + +<%= saucy_tag tag, text, style, options %> + +* tag: the type of tag to output, eg. "h1" +* text: your own text. Note it can contain newlines which will be interpreted as multiline text. +* style: a style hash +* options: html attributes to be inserted + +Styles +------ + +The style has has several options and the default style is: + + DEFAULT_STYLE = { + :background => "transparent", + :font => {:size=>18, :color => "#000", :font => "arial", :stretch => "normal"}, + :stroke => {:width => 0, :color => "#000", :inner => true }, + :shadow => {:color => "#000", :opacity => 0.6, :top => 2, :left => 2, :blur => 5.0, :render => false }, + :rotate => 0, + :spacing => {:letter => 0, :word => 0} + } + +The style that's passed in will be merged over the top of this. + +Internet Explorer +----- + +If the background is transparent, Saucy will automatically output a tag with CSS that IE will interpret and use it's AlphaFilter properly. + +* Bonus: you can output any pngs as transparent with the following helper, no javascript needed! : + +<%= transparent_png(filename) %> + + +Fonts +----- + +Fonts are loaded from the /plugins/saucy/fonts directory. + + +Try out +------- + +* In your controller + +<pre> +def saucy + @stroked = { :stroke => { :color => "red", :width => 1 }, :font => { :size => 100, :color => "#fff" }, :spacing => {:letter => 100 } } + @thick_stroked = { :stroke => { :color => "red", :width => 20, :inner => 1 }, :font => { :size => 100, :color => "#fff" } } + @bauhaus = { :font => { :size => 100, :font => "bauhausl.ttf" } } + @shadow = { :background => "transparent", :font => { :size => 100, :font => "basket.ttf", :color => "#fff" }, :shadow => { :render => true, :top => 5, :left => 5 } } + @rotate = { :rotate => -15, :font => { :size => 100, :font => "bauhausl.ttf", :color => "red", :stretch => "condensed" } } +end +</pre> + +* In saucy.html.erb + +<pre> + <style> + body {background: url(http://www.parkerfox.co.uk/images/bg.png) } + </style> + <%= saucy_tag "p", "default - no style", {} %> + <%= saucy_tag "p", "mutli\nline\nbauhaus", @bauhaus %> + <%= saucy_tag "p", "stroked!!", @stroked, {:class=>"myclass"} %> + <%= saucy_tag "p", "stroked!!", @thick_stroked, {:class=>"myclass"} %> + <p>Lorem ispsum</p> + + <%= saucy_tag "h2", "h2 tag", @bauhaus, {:id=>"myid"} %> + <p>Lorem ispsum</p> + <%= saucy_tag "p", "lets rotate!", @rotate %> + <%= saucy_tag "p", "shadow", @shadow %> + <a href='/'> + <%= saucy_tag "p", "rotate the lettters", {:font => { :rotate => -90, :size => 40}, :rotate => 90 } %> + </a> +</pre> README @@ -1,3 +1,5 @@ -::ActionController::Routing::RouteSet::Mapper.send(:include, Saucy::Routing) -require "RMagick" -Mime::Type.register "image/png", :png \ No newline at end of file +require "saucy" +ActionView::Base.send(:include, Saucy::SaucyHelper) + +Saucy.cache_image_sizes + init.rb @@ -6,8 +6,8 @@ rails_root = defined?(RAILS_ROOT) ? RAILS_ROOT : "#{here}/../../.." STDOUT.puts "*********" STDOUT.puts "* Saucy *" STDOUT.puts "*********" -STDOUT.puts "Copying Saucy assets to Rails public Directory" -FileUtils.cp_r "#{rails_root}/vendor/plugins/saucy/assets/saucy", "#{rails_root}/public" +STDOUT.puts "Creating /public/saucy Directory" +FileUtils.mkdir "#{rails_root}/public/saucy" STDOUT.puts "... done" -STDOUT.puts "* add `map.saucy` in the your routes.rb" -STDOUT.puts "* start server and visit http://localhost:3000/saucy/saucy.html to test it is working" \ No newline at end of file +STDOUT.puts "See README for more information" + install.rb @@ -1,155 +1,29 @@ -require 'rvg/rvg' -include Magick -require "json" -require "base64" module Saucy + OUTPUT_DIR = "/saucy" + ABS_OUTPUT_DIR = "#{RAILS_ROOT}/public/#{OUTPUT_DIR}" -class RenderTTF - - @@font_store = "#{RAILS_ROOT}/vendor/plugins/saucy/fonts/" - @@output = "#{RAILS_ROOT}/public/saucy/images/" - - - def self.render file - attrs = self.parse(file) - attrs["size"] = attrs["size"].to_i - attrs["stroke_width"] = attrs["stroke_width"].to_i - - attrs["stroke_color"].gsub!('HX','#') if attrs["stroke_color"] - attrs["color"].gsub!('HX','#') if attrs["color"] - attrs["shadow_color"].gsub!('HX','#') if attrs["shadow_color"] - - image = self.draw(attrs) - image = shadow_render image, attrs if attrs["shadow_color"] - - image.write(@@output + file + ".png") - return image + def self.png_dimensions file + IO.read(file)[0x10..0x18].unpack('NN') end - - def self.draw attrs - - attrs = {"size"=>10, "stroke_width" => 0, "background" => "transparent", "color" => "#000", "text" => "no text!", "stroke_color" => "#000"}.merge(attrs) - - - width = attrs["size"]*attrs["text"].length + attrs["stroke_width"]*2 - height = attrs["size"]*2+ attrs["stroke_width"]*2 - - #throw attrs.inspect - rvg = RVG.new(width, height) do |canvas| - canvas.background_fill = attrs["background"] if attrs["background"] != 'transparent' - - font_file = @@font_store + attrs["font"]+".ttf" - sw = attrs["stroke_width"] - if attrs["stroke_width"] == 0 - canvas.text(0+sw,attrs["size"]+sw, attrs["text"]).styles(:font => '"' + font_file + '"', :font_size=>attrs["size"], :fill=>attrs["color"]) - else - canvas.text(0+sw,attrs["size"]+sw, attrs["text"]).styles(:font => '"' + font_file + '"', :font_size=>attrs["size"], :fill=>attrs["color"], :stroke => attrs["stroke_color"], :stroke_width => attrs["stroke_width"]) - end + def self.get_png_size filename + size = Rails.cache.read("Saucy:" + filename) -# if stroke_inside > 0 -# canvas.text(0+sw,font_size+sw, text).styles(:font => '"' + font_file +'"', :font_size => font_size, :fill=> color, :stroke_width => stroke_inside, :stroke => color ) -# end + if(!size) + size = Saucy.png_dimensions("#{RAILS_ROOT}/public" + filename) + Rails.cache.write("Saucy:" + filename, size) end - img = rvg.draw - return img.trim + size end - - def self.shadow_render input, attrs - - shadow_color = (attrs['shadow_color'] || 'black') - shadow_opacity = 255 - ((attrs['shadow_opacity'] || '0.6').to_f * 255).to_i - shadow_top = (attrs['shadow_top'] || '2').to_i - shadow_left = (attrs['shadow_left'] || '2').to_i - blur_radius = (attrs['shadow_blur'] || '5').to_f - - w=input.columns+ blur_radius*4+shadow_left.abs*2 - h=input.rows+ blur_radius*4+shadow_top.abs*2 - - input.matte = true - - opacity_color = "rgb(#{shadow_opacity},#{shadow_opacity},#{shadow_opacity})" - input_colorized= input.copy.colorize(1.0, 1.0, 1.0, opacity_color) - - shadow_mask = Image.new(w,h ){self.background_color = '#fff'} - - zero=[shadow_left.abs+blur_radius,shadow_top.abs+blur_radius] - - shadow_mask.composite!(input_colorized, blur_radius, blur_radius, OverCompositeOp) - - shadow_mask.matte=true - shadow_mask = shadow_mask.blur_image(blur_radius,blur_radius) - - output = Image.new(w,h){self.background_color = shadow_color} - inverse_shadow_mask = shadow_mask.negate - inverse_shadow_mask.matte = false - - output.matte = true - output.composite!(inverse_shadow_mask, zero[0]+shadow_left,zero[1]+shadow_top, CopyOpacityCompositeOp) - output.composite!(input, zero[0]+blur_radius,zero[1]+blur_radius, OverCompositeOp) - - - return output.trim - end - - @@keys = { - "b" => "background", - "t" => "text", - "s" => "size", - "c" => "color", - "f" => "font", - "sw" => "stroke_width", - "sc" => "stroke_color", - "shc" => "shadow_color", - "sho" => "shadow_opacity", - "shl" => "shadow_left", - "sht" => "shadow_top", - "shb" => "shadow_blur" - } - - def self.parse file - params = file.gsub(".png","").split("__") - - attrs = {} - - params.each do |param| - p = param.split("==") - key = p[0] - val = p[1] - attrs[@@keys[key]] = val + def self.cache_image_sizes + Dir.entries(ABS_OUTPUT_DIR).select {|f| f.match(/.png$/)}.each do |image| + get_png_size("#{OUTPUT_DIR}/#{image}") end - - attrs - end - -=begin - def rotate_render input, attrs - angle=attrs['pr'].to_i - input.matte = true - input.rotate!(angle) - return input - end - - - def guassian_blur_render input, attrs - blur_radius = (attrs['pg'] || '10').to_f - w=input.columns#+ blur_radius*2 - h=input.rows#+ blur_radius*2 - output = Image.new(w,h) {self.background_color = 'transparent'} - - blur = input.blur_image(blur_radius/2,blur_radius/2) - output.composite!(blur, 0,0, OverCompositeOp) - output end -=end - -end - end - - - +require "saucy_render" +require "saucy_helper" lib/saucy.rb 772d09ae54535a52db09855ac0cdb163d8959fb5 weepy jonahfox@gmail.com http://github.com/weepy/saucy/commit/d1bae5b8d3f9b9fd40da49d69d9571b93754b4bd d1bae5b8d3f9b9fd40da49d69d9571b93754b4bd 2008-11-27T15:00:39-08:00 2008-11-27T15:00:39-08:00 updating a8fd31de784c04e26279db2d6d732cc40ccfa0a2 weepy jonahfox@gmail.com