squib 0.6.0 → 0.7.0

data/samples/layouts_builtin.rb

@@ -0,0 +1,51 @@
+require 'squib'
+
+# This sample demonstrates the built-in layouts for Squib.
+# Each card demonstrates a different built-in layout.
+Squib::Deck.new(layout: 'fantasy.yml') do
+  background color: 'white'
+
+  set font: 'Times New Roman,Serif 32'
+  hint text: '#333' # show extents of text boxes to demo the layout
+
+  text str: 'fantasy.yml', layout: :title
+  text str: 'ur',          layout: :upper_right
+  text str: 'art',         layout: :art
+  text str: 'type',        layout: :type
+  text str: 'tr',          layout: :type_right
+  text str: 'description', layout: :description
+  text str: 'lr',          layout: :lower_right
+  text str: 'll',          layout: :lower_left
+  text str: 'credits',     layout: :copy
+
+  rect layout: :safe
+  rect layout: :cut
+  save_png prefix: 'layouts_builtin_fantasy_'
+end
+
+Squib::Deck.new(layout: 'economy.yml') do
+  background color: 'white'
+
+  set font: 'Times New Roman,Serif 32'
+  hint text: '#333' # show extents of text boxes to demo the layout
+
+  text str: 'economy.yml', layout: :title
+  text str: 'art',         layout: :art
+  text str: 'description', layout: :description
+  text str: 'type',        layout: :type
+  text str: 'lr',          layout: :lower_right
+  text str: 'll',          layout: :lower_left
+  text str: 'credits',     layout: :copy
+
+  rect layout: :safe
+  rect layout: :cut
+  save_png prefix: 'layouts_builtin_economy_'
+end
+
+# Stitch together a deck of all the above examples
+Squib::Deck.new(cards: 2) do
+  Dir.glob('_output/layouts_builtin_*.png').each.with_index do |file, i|
+    png file: file, range: i
+  end
+  save_sheet prefix: 'layouts_builtinsheet_'
+end

data/samples/load_images.rb

@@ -1,64 +1,78 @@
-require 'squib'
-
-Squib::Deck.new(width: 825, height: 1125, cards: 1) do
-  background color: '#0b7c8e'
-  rect x: 38, y: 38, width: 750, height: 1050, x_radius: 38, y_radius: 38
-
-  png file: 'shiny-purse.png', x: 620, y: 75 # no scaling is done by default
-  svg file: 'spanner.svg', x: 620, y: 218
-
-  # Can be scaled if width and height are set
-  svg file: 'spanner.svg', x: 50, y: 50, width: 250, height: 250
-  png file: 'shiny-purse.png', x: 305, y: 50, width: 250, height: 250
-  #...but PNGs will warn if it's an upscale
-
-  # We can also limit our rendering to a single object, if the SVG ID is set
-  svg file: 'spanner.svg', id: '#backdrop', x: 50, y: 350, width: 75, height: 75
-  # Squib prepends a #-sign if one is not specified
-  svg file: 'spanner.svg', id: 'backdrop', x: 50, y: 450, width: 125, height: 125
-
-  # We can also load SVGs as a string of XML
-  svg data: File.read('spanner.svg'), x: 50, y: 600, width: 75, height: 75
-
-  # The svg data field works nicely with modifying the SVG XML on-the-fly.
-  # To run this one, do `gem install game_icons` and uncomment the following
-  #
-  # require 'game_icons'
-  # svg data: GameIcons.get('angler-fish').recolor(fg: '#ccc', bg: '#333').string,
-  #     x: 150, y: 600, width: 75, height: 75
-  #
-  # More examples at https://github.com/andymeneely/game_icons
-  # (or `gem install game_icons`) to get & manipulate art from game-icons.net
-  # Nokogiri (already included in Squib) is also great for XML manipulation.
-
-  # WARNING! If you choose to use the SVG ID, the x-y coordinates are still
-  # relative to the SVG page. See this example in an SVG editor
-  svg file: 'offset.svg', id: 'thing',  x: 0, y: 0, width: 600, height: 600
-
-  # Over 15 different blending operators are supported.
-  # See http://cairographics.org/operators
-  # Alpha transparency too
-  png file: 'ball.png', x: 50, y: 700
-  png file: 'grit.png', x: 70, y: 750, blend: :color_burn, alpha: 0.75
-
-  # Images can be rotated around their upper-left corner
-  png file: 'shiny-purse.png', x: 300, y: 700, angle: 0.0 # default (no rotate)
-  png file: 'shiny-purse.png', x: 300, y: 800, angle: Math::PI / 4
-  svg file: 'spanner.svg',     x: 300, y: 900, angle: Math::PI / 2 - 0.1
-
-  # Images can also be used as masks instead of being directly painted.
-  # This is particularly useful for switching directly over to black-and-white for printing
-  # Or, if you want the same image to be used but with different colors/gradients
-  svg mask: '#00ff00',
-      file: 'glass-heart.svg',
-      x: 500, y: 600, width: 200, height: 200
-  svg mask: '(0,0)(0,500) #ccc@0.0 #333@1.0',
-      file: 'glass-heart.svg',
-      x: 500, y: 800, width: 200, height: 200
-
-  # Masks are based on the alpha channel, so this is just a magenta square
-  png mask: :magenta, file: 'shiny-purse.png',
-      x: 650, y: 950
-
-  save prefix: 'load_images_', format: :png
-end
+require 'squib'
+
+Squib::Deck.new(width: 825, height: 1125, cards: 1) do
+  background color: '#0b7c8e'
+  rect x: 38, y: 38, width: 750, height: 1050, x_radius: 38, y_radius: 38
+
+  png file: 'shiny-purse.png', x: 620, y: 75 # no scaling is done by default
+  svg file: 'spanner.svg', x: 620, y: 218
+
+  # Can be scaled if width and height are set
+  svg file: 'spanner.svg', x: 50, y: 50, width: 250, height: 250
+  png file: 'shiny-purse.png', x: 305, y: 50, width: 250, height: 250
+  #...but PNGs will warn if it's an upscale
+
+  # Can be scaled using just width or height, if one of them is set to :scale
+  svg file: 'spanner.svg', x: 200, y: 350, width: 35,     height: :scale
+  svg file: 'spanner.svg', x: 200, y: 390, width: :scale, height: 35
+  png file: 'shiny-purse.png', x: 240, y: 350, width: 35,     height: :scale
+  png file: 'shiny-purse.png', x: 240, y: 390, width: :scale, height: 35
+
+  # We can also limit our rendering to a single object, if the SVG ID is set
+  svg file: 'spanner.svg', id: '#backdrop', x: 50, y: 350, width: 75, height: 75
+  # Squib prepends a #-sign if one is not specified
+  svg file: 'spanner.svg', id: 'backdrop', x: 50, y: 450, width: 125, height: 125
+
+  # We can also load SVGs as a string of XML
+  svg data: File.read('spanner.svg'), x: 50, y: 600, width: 75, height: 75
+
+  # The svg data field works nicely with modifying the SVG XML on-the-fly.
+  # To run this one, do `gem install game_icons` and uncomment the following
+  #
+  # require 'game_icons'
+  # svg data: GameIcons.get('angler-fish').recolor(fg: '#ccc', bg: '#333').string,
+  #     x: 150, y: 600, width: 75, height: 75
+  #
+  # More examples at https://github.com/andymeneely/game_icons
+  # (or `gem install game_icons`) to get & manipulate art from game-icons.net
+  # Nokogiri (already included in Squib) is also great for XML manipulation.
+
+  # WARNING! If you choose to use the SVG ID, the x-y coordinates are still
+  # relative to the SVG page. See this example in an SVG editor
+  svg file: 'offset.svg', id: 'thing',  x: 0, y: 0, width: 600, height: 600
+
+  # Over 15 different blending operators are supported.
+  # See http://cairographics.org/operators
+  # Alpha transparency too
+  png file: 'ball.png', x: 50, y: 700
+  png file: 'grit.png', x: 70, y: 750, blend: :color_burn, alpha: 0.75
+
+  # Images can be rotated around their upper-left corner
+  png file: 'shiny-purse.png', x: 300, y: 700, angle: 0.0 # default (no rotate)
+  png file: 'shiny-purse.png', x: 300, y: 800, angle: Math::PI / 4
+  svg file: 'spanner.svg',     x: 300, y: 900, angle: Math::PI / 2 - 0.1
+
+  # Images can also be used as masks instead of being directly painted.
+  # This is particularly useful for switching directly over to black-and-white for printing
+  # Or, if you want the same image to be used but with different colors/gradients
+  svg mask: '#00ff00',
+      file: 'glass-heart.svg',
+      x: 500, y: 600, width: 200, height: 200
+  svg mask: '(0,0)(0,500) #ccc@0.0 #333@1.0',
+      file: 'glass-heart.svg',
+      x: 500, y: 800, width: 200, height: 200
+
+  # Masks are based on the alpha channel, so this is just a magenta square
+  png mask: :magenta, file: 'shiny-purse.png',
+      x: 650, y: 950
+
+  # Note that this method does nothing, even though it would normally fill up
+  # the card. force_id: true looks to the id field to be non-empty to render.
+  # This is useful if you have multiple different icons in one SVG file,
+  # but sometimes want to use none.
+  # e.g. id: [:attack, :defend, nil]
+  svg file: 'spanner.svg', width: :deck, height: :deck,
+      force_id: true, id: '' # <-- the important part
+
+  save prefix: 'load_images_', format: :png
+end

data/samples/ranges.rb

@@ -1,53 +1,64 @@
-require 'squib'
-
-data = {'name' => ['Thief', 'Grifter', 'Mastermind'],
-        'type' => ['Thug', 'Thinker', 'Thinker'],
-        'level' => [1,2,3]}
-
-Squib::Deck.new(width: 825, height: 1125, cards: 3) do
-  # Default range is :all
-  background color: :white
-  text str: data['name'], x: 250, y: 55, font: 'Arial 54'
-  text str: data['level'], x: 65, y: 40, font: 'Arial 72'
-
-  # Could be explicit about using :all, too
-  text range: :all,
-       str: data['type'], x: 40, y: 128, font: 'Arial 18',
-       width: 100, align: :center
-
-  # Ranges are inclusive, zero-based
-  text range: 0..1, str: 'Thief and Grifter only!!', x: 25, y:200
-
-  # Integers are also allowed
-  text range: 0, str: 'Thief only!', x: 25, y: 250
-
-  # Negatives go from the back of the deck
-  text range: -1, str: 'Mastermind only!', x: 25, y: 250
-  text range: -2..-1, str: 'Grifter and Mastermind only!', x: 25, y: 650
-
-  # We can use Arrays too!
-  text range: [0,2], str: 'Thief and Mastermind only!!', x: 25, y:300
-
-  # Just about everything in Squib can be given an array that
-  # corresponds to the deck's cards. This allows for each card to be styled differently
-  # This renders three cards, with three strings that had three different colors at three different locations.
-  text str: %w(red green blue),
-       color: [:red, :green, :blue],
-       x: [40, 80, 120],
-       y: [700, 750, 800]
-
-  # Useful idiom: construct a hash from card names back to its index (ID),
-  # then use a range. No need to memorize IDs, and you can add cards easily
-  id = {} ; data['name'].each_with_index{ |name,i| id[name] = i}
-  text range: id['Thief']..id['Grifter'],
-       str: 'Thief through Grifter with id lookup!!',
-       x:25, y: 400
-
-  # Useful idiom: generate arrays from a column called 'type'
-  type = {}; data['type'].each_with_index{ |t,i| (type[t] ||= []) << i}
-  text range: type['Thinker'],
-       str: 'Only for Thinkers!',
-       x:25, y: 500
-
-  save prefix: 'ranges_', format: :png
-end
+require 'squib'
+
+data = {'name' => ['Thief', 'Grifter', 'Mastermind'],
+        'type' => ['Thug', 'Thinker', 'Thinker'],
+        'level' => [1,2,3]}
+
+Squib::Deck.new(width: 825, height: 1125, cards: 3) do
+  # Default range is :all
+  background color: :white
+  text str: data['name'], x: 250, y: 55, font: 'Arial 54'
+  text str: data['level'], x: 65, y: 40, font: 'Arial 72'
+
+  # Could be explicit about using :all, too
+  text range: :all,
+       str: data['type'], x: 40, y: 128, font: 'Arial 18',
+       width: 100, align: :center
+
+  # Ranges are inclusive, zero-based
+  text range: 0..1, str: 'Thief and Grifter only!!', x: 25, y:200
+
+  # Integers are also allowed
+  text range: 0, str: 'Thief only!', x: 25, y: 250
+
+  # Negatives go from the back of the deck
+  text range: -1, str: 'Mastermind only!', x: 25, y: 250
+  text range: -2..-1, str: 'Grifter and Mastermind only!', x: 25, y: 650
+
+  # We can use Arrays too!
+  text range: [0,2], str: 'Thief and Mastermind only!!', x: 25, y:300
+
+  # Just about everything in Squib can be given an array that
+  # corresponds to the deck's cards. This allows for each card to be styled differently
+  # This renders three cards, with three strings that had three different colors at three different locations.
+  text str: %w(red green blue),
+       color: [:red, :green, :blue],
+       x: [40, 80, 120],
+       y: [700, 750, 800]
+
+  # Useful idiom: construct a hash from card names back to its index (ID),
+  # then use a range. No need to memorize IDs, and you can add cards easily
+  id = {} ; data['name'].each_with_index{ |name,i| id[name] = i}
+  text range: id['Thief']..id['Grifter'],
+       str: 'Thief through Grifter with id lookup!!',
+       x:25, y: 400
+
+  # Useful idiom: generate arrays from a column called 'type'
+  type = {}; data['type'].each_with_index{ |t,i| (type[t] ||= []) << i}
+  text range: type['Thinker'],
+       str: 'Only for Thinkers!',
+       x:25, y: 500
+
+  # Useful idiom: draw a different number of images for different cards
+  hearts = [nil, 1, 2] #i.e. card 0 has no hearts, card 2 has 2 hearts drawn
+  1.upto(2).each do |n|
+    range = hearts.each_index.select { |i| hearts[i] == n}
+    n.times do |i|
+      svg file: 'glass-heart.svg', range: range,
+          x: 150, y: 55 + i*42, width: 40, height: 40
+    end
+  end
+
+  rect color: 'black' # just a border
+  save_sheet prefix: 'ranges_', columns: 3
+end

data/samples/sample.csv

@@ -1,3 +1,3 @@
-Type,"Level"
-Thief,1
+Type,"Level"
+Thief,1
 Mastermind,2

data/samples/text_options.rb

@@ -1,94 +1,102 @@
-# encoding: UTF-8
-require 'squib'
-
-data = {'name' => ['Thief', 'Grifter', 'Mastermind'],
-        'level' => [1,2,3]}
-longtext = "This is left-justified text, with newlines.\nWhat do you know about tweetle beetles? well... When tweetle beetles fight, it's called a tweetle beetle battle. And when they battle in a puddle, it's a tweetle beetle puddle battle. AND when tweetle beetles battle with paddles in a puddle, they call it a tweetle beetle puddle paddle battle. AND... When beetles battle beetles in a puddle paddle battle and the beetle battle puddle is a puddle in a bottle... ..they call this a tweetle beetle bottle puddle paddle battle muddle."
-
-Squib::Deck.new(width: 825, height: 1125, cards: 3) do
-  background color: :white
-  rect x: 15, y: 15, width: 795, height: 1095, x_radius: 50, y_radius: 50
-  rect x: 30, y: 30, width: 128, height: 128, x_radius: 25, y_radius: 25
-
-  # Arrays are rendered over each card
-  text str: data['name'], x: 250, y: 55, font: 'Arial weight=900 54'
-  text str: data['level'], x: 65, y: 40, font: 'Arial 72', color: :burnt_orange
-
-  text str: 'Font strings are expressive!', x:65, y: 200,
-       font: 'Impact bold italic 36'
-
-  text str: 'Font strings are expressive!', x:65, y: 300,
-       font: 'Arial,Verdana weight=900 style=oblique 36'
-
-  text str: 'Font string sizes can be overridden per card.', x: 65, y: 350,
-       font: 'Impact 36', font_size: [16, 20, 24]
-
-  text str: 'This text has fixed width, fixed height, center-aligned, middle-valigned, has a red hint, and "smart quotes"',
-       hint: :red,
-       x: 65, y: 400,
-       width: 300, height: 125,
-       align: :center, valign: 'MIDDLE', # these can be specified with case-insenstive strings too
-       font: 'Serif 16', quotes: [:smart,:smart, :dumb]
-
-  extents = text str: 'Ink extent return value',
-       x: 65, y: 550,
-       font: 'Sans Bold', font_size: [16, 20, 24]
-  margin = 10
-  # Extents come back as an array of hashes, which can get split out like this
-  ws = extents.inject([]) { |arr, ext| arr << ext[:width] + 10; arr }
-  hs = extents.inject([]) { |arr, ext| arr << ext[:height] + 10; arr }
-  rect x: 65 - margin/2, y: 550 - margin/2,
-       width: ws, height: hs,
-       radius: 10, stroke_color: :black
-
-  # If width & height are defined and the text will overflow the box, we can ellipsize.
-  text str: "Ellipsization!\nThe ultimate question of life, the universe, and everything to life and everything is 42",
-       hint: :green, font: 'Arial 22',
-       x: 450, y: 400,
-       width: 280, height: 180,
-       ellipsize: true
-
-  # Text hints are guides for showing you how your text boxes are laid out exactly
-  hint text: :cyan
-  text str: 'Text hints are also globally togglable!',
-        x: 65, y: 625,
-        font: 'Arial 22'
-  hint text: :off
-  text str: 'See? No hint here.',
-        x: 565, y: 625,
-        font: 'Arial 22'
-
-  text str: 'Rotated',
-        x: 565, y: 675, angle: 0.2,
-        font: 'Arial 18', hint: :red
-
-  # Text can be justified, and have newlines
-  text str: longtext, font: 'Arial 16',
-       x: 65, y: 700,
-       width: '1.5in', height: inches(1),
-       justify: true
-
-  # Here's how you embed images into text.
-  # Pass a block to the method call and use the given context
-  embed_text = 'Embedded icons! Take 1 :tool: and gain 2:health:. If Level 2, take 2 :tool:'
-  text(str: embed_text, font: 'Sans 18',
-       x: '1.8in', y: '2.5in', width: '0.85in',
-       align: :left, ellipsize: false) do |embed|
-    embed.svg key: ':tool:',   width: 28, height: 28, file: 'spanner.svg'
-    embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
-  end
-
-  text str: "Stroke n <span fgcolor=\"\#ff0000\">fill</span>",
-       color: :green, stroke_width: 2.0, stroke_color: :blue,
-       x: '1.8in', y: '3in', width: '0.85in', font: 'Sans Bold 26', markup: true
-
-  text str: "<b>Markup</b> is <i>quite</i> <s>'easy'</s> <span fgcolor=\"\#ff0000\">awesome</span>. Can't beat those \"smart\" 'quotes', now with 10--20% more en-dashes --- and em-dashes --- with explicit ellipses too...",
-       markup: true,
-       x: 50, y: 1000,
-       width: 750, height: 100,
-       valign: :bottom,
-       font: 'Serif 18', hint: :cyan
-
-
-  save prefix: 'text_', format: :png
-end
+# encoding: UTF-8
+require 'squib'
+
+data = {'name' => ['Thief', 'Grifter', 'Mastermind'],
+        'level' => [1,2,3]}
+longtext = "This is left-justified text, with newlines.\nWhat do you know about tweetle beetles? well... When tweetle beetles fight, it's called a tweetle beetle battle. And when they battle in a puddle, it's a tweetle beetle puddle battle. AND when tweetle beetles battle with paddles in a puddle, they call it a tweetle beetle puddle paddle battle. AND... When beetles battle beetles in a puddle paddle battle and the beetle battle puddle is a puddle in a bottle... ..they call this a tweetle beetle bottle puddle paddle battle muddle."
+
+Squib::Deck.new(width: 825, height: 1125, cards: 3) do
+  background color: :white
+  rect x: 15, y: 15, width: 795, height: 1095, x_radius: 50, y_radius: 50
+  rect x: 30, y: 30, width: 128, height: 128, x_radius: 25, y_radius: 25
+
+  # Arrays are rendered over each card
+  text str: data['name'], x: 250, y: 55, font: 'Arial weight=900 54'
+  text str: data['level'], x: 65, y: 40, font: 'Arial 72', color: :burnt_orange
+
+  text str: 'Font strings are expressive!', x:65, y: 200,
+       font: 'Impact bold italic 36'
+
+  text str: 'Font strings are expressive!', x:65, y: 300,
+       font: 'Arial,Verdana weight=900 style=oblique 36'
+
+  text str: 'Font string sizes can be overridden per card.', x: 65, y: 350,
+       font: 'Impact 36', font_size: [16, 20, 24]
+
+  text str: 'This text has fixed width, fixed height, center-aligned, middle-valigned, and has a red hint',
+       hint: :red,
+       x: 65, y: 400,
+       width: 300, height: 125,
+       align: :center, valign: 'MIDDLE', # these can be specified with case-insenstive strings too
+       font: 'Serif 16'
+
+  extents = text str: 'Ink extent return value',
+       x: 65, y: 550,
+       font: 'Sans Bold', font_size: [16, 20, 24]
+  margin = 10
+  # Extents come back as an array of hashes, which can get split out like this
+  ws = extents.inject([]) { |arr, ext| arr << ext[:width] + 10; arr }
+  hs = extents.inject([]) { |arr, ext| arr << ext[:height] + 10; arr }
+  rect x: 65 - margin/2, y: 550 - margin/2,
+       width: ws, height: hs,
+       radius: 10, stroke_color: :black
+
+  # If width & height are defined and the text will overflow the box, we can ellipsize.
+  text str: "Ellipsization!\nThe ultimate question of life, the universe, and everything to life and everything is 42",
+       hint: :green, font: 'Arial 22',
+       x: 450, y: 400,
+       width: 280, height: 180,
+       ellipsize: true
+
+  # Text hints are guides for showing you how your text boxes are laid out exactly
+  hint text: :cyan
+  set font: 'Serif 20' # Impacts all future text calls (unless they specify differently)
+  text str: 'Text hints & fonts are globally togglable!', x: 65, y: 625
+  set font: :default # back to Squib-wide default
+  hint text: :off
+  text str: 'See? No hint here.',
+        x: 565, y: 625,
+        font: 'Arial 22'
+
+  # Text can be rotated, in radians, about the upper-left corner of the text box.
+  text str: 'Rotated',
+        x: 565, y: 675, angle: 0.2,
+        font: 'Arial 18', hint: :red
+
+  # Text can be justified, and have newlines
+  text str: longtext, font: 'Arial 16',
+       x: 65, y: 700,
+       width: '1.5in', height: inches(1),
+       justify: true, spacing: -6
+
+  # Here's how you embed images into text.
+  # Pass a block to the method call and use the given context
+  embed_text = 'Embedded icons! Take 1 :tool: and gain 2:health:. If Level 2, take 2 :tool:'
+  text(str: embed_text, font: 'Sans 18',
+       x: '1.8in', y: '2.5in', width: '0.85in',
+       align: :left, ellipsize: false) do |embed|
+    embed.svg key: ':tool:',   width: 28, height: 28, file: 'spanner.svg'
+    embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
+  end
+
+  text str: "Fill n <span fgcolor=\"\#ff0000\">stroke</span>",
+       color: :green, stroke_width: 2.0, stroke_color: :blue,
+       x: '1.8in', y: '2.9in', width: '0.85in', font: 'Sans Bold 26', markup: true
+
+  text str: "Stroke n <span fgcolor=\"\#ff0000\">fill</span>",
+       color: :green, stroke_width: 2.0, stroke_color: :blue, stroke_strategy: :stroke_first,
+       x: '1.8in', y: '3.0in', width: '0.85in', font: 'Sans Bold 26', markup: true
+
+  text str: "Dotted",
+       color: :white, stroke_width: 2.0, dash: '4 2', stroke_color: :black,
+       x: '1.8in', y: '3.1in', width: '0.85in', font: 'Sans Bold 26', markup: true
+  #
+  text str: "<b>Markup</b> is <i>quite</i> <s>'easy'</s> <span fgcolor=\"\#ff0000\">awesome</span>. Can't beat those \"smart\" 'quotes', now with 10--20% more en-dashes --- and em-dashes --- with explicit ellipses too...",
+       markup: true,
+       x: 50, y: 1000,
+       width: 750, height: 100,
+       valign: :bottom,
+       font: 'Serif 18', hint: :cyan
+
+  save prefix: 'text_', format: :png
+end