docs: provide previews of built-in layouts

Closes #163
This commit is contained in:
Andy Meneely
2016-09-08 23:19:35 -04:00
parent 4ec1a33cfd
commit c8e1daf79d
15 changed files with 184 additions and 6 deletions
+2
View File
@@ -0,0 +1,2 @@
# Ignore outputs in directory, but keep the directory to suppress warning
*.png
+74
View File
@@ -0,0 +1,74 @@
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
Squib::Deck.new(layout: 'hand.yml') do
background color: 'white'
%w(title bonus1 bonus2 bonus3 bonus4 bonus5 description
snark art).each do |icon|
text str: icon.capitalize, layout: icon,
hint: :red, valign: 'middle', align: 'center'
end
save_png prefix: 'layouts_builtin_hand_'
end
Squib::Deck.new(layout: 'playing-card.yml') do
background color: 'white'
text str: "A\u2660", layout: :bonus_ul, font: 'Sans bold 100', hint: :red
text str: "A\u2660", layout: :bonus_lr, font: 'Sans bold 100', hint: :red
text str: 'artwork here', layout: :art, hint: :red
save_png prefix: 'layouts_builtin_playing_card_'
end
Squib::Deck.new(layout: 'tuck_box.yml', width: 2325, height: 1950) do
background color: 'white'
rect layout: :top_rect
rect layout: :bottom_rect
rect layout: :right_rect
rect layout: :left_rect
rect layout: :back_rect
rect layout: :front_rect
curve layout: :front_curve
save_png prefix: 'layouts_builtin_tuck_box_'
end
+60
View File
@@ -0,0 +1,60 @@
# Used in the layouts.rb sample in conjunction with custom-layout2.yml
frame:
x: 38
y: 38
width: 750
height: 1050
radius: 25
title:
x: 125
y: 50
width: 625
height: 100
align: center #strings also work for most options
valign: !ruby/symbol middle #yaml also support symbols, see http://www.yaml.org/YAML_for_ruby.html#symbols
subtitle:
x: 150
y: 150
width: 575
height: 60
align: center
valign: middle
icon:
width: 125
height: 125
y: 250
icon_left:
extends: icon
x: 150
icon_middle:
extends: icon
x: 350
y: 400 #overrides the y inherited from icon
icon_right:
extends: icon
x: 550
# Squib also supports its own merging-and-modify feature
# Called "extends"
# Any layout can extend another layout, so long as it's not a circle
# Order doesn't matter since it's done after YAML procesing
# And, if the entry overrides
bonus: #becomes our bonus rectangle
x: 250
y: 600
width: 300
height: 200
radius: 32
bonus_inner:
extends: bonus
x: += 10 # i.e. 260
y: += 10 # i.e. 610
width: -= 20 # i.e. 180
height: -= 20 # i.e. 180
radius: -= 8
bonus_text:
extends: bonus_inner
x: +=10
y: +=10
width: -= 20
height: -= 20
+15
View File
@@ -0,0 +1,15 @@
# Used in the layouts.rb sample in conjunction with custom-layout.yml
#
# When used with custom-layout.yml loaded first, this layout overrides subtitle
subtitle:
x: 150
y: 150
width: 575
height: 60
align: left
valign: middle
font_size: 25
# This one is completely new
description:
extends: subtitle
y: += 350
Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

+71
View File
@@ -0,0 +1,71 @@
# encoding: utf-8
require 'squib'
require 'pp'
Squib::Deck.new(layout: 'custom-layout.yml') do
background color: :white
hint text: :cyan
# Layouts are YAML files that specify any option as a default
rect layout: :frame
# You can also override a given layout entry in the command
circle layout: :frame, x: 50, y: 50, radius: 25
# Lots of commands have the :layout option
text str: 'The Title', layout: :title
# Layouts also support YAML merge keys toreuse settings
svg file: 'spanner.svg', layout: :icon_left
png file: 'shiny-purse.png', layout: :icon_middle
svg file: 'spanner.svg', layout: :icon_right
# Squib has its own, richer merge key: "extends"
rect fill_color: :black, layout: :bonus
rect fill_color: :white, layout: :bonus_inner
text str: 'Extends!', layout: :bonus_text
# Strings can also be used to specify a layout (e.g. from a data file)
text str: 'subtitle', layout: 'subtitle'
# For debugging purposes, you can always print out the loaded layout
# require 'pp'
# pp layout
save_png prefix: 'layout_'
end
Squib::Deck.new(layout: ['custom-layout.yml', 'custom-layout2.yml']) do
text str: 'The Title', layout: :title # from custom-layout.yml
text str: 'The Subtitle', layout: :subtitle # redefined in custom-layout2.yml
text str: 'The Description', layout: :description # from custom-layout2.yml
save_png prefix: 'layout2_'
end
# Built-in layouts are easy to use and extend
Squib::Deck.new(layout: 'playing-card.yml') do
text str: "A\u2660", layout: :bonus_ul, font: 'Sans bold 100', hint: :red
text str: "A\u2660", layout: :bonus_lr, font: 'Sans bold 100', hint: :red
text str: 'artwork here', layout: :art, hint: :red
save_png prefix: 'layout_builtin_playing_card_'
end
# Built-in layouts are easy to use and extend
Squib::Deck.new(layout: 'hand.yml') do
%w(title bonus1 bonus2 bonus3 bonus4 bonus5
description snark art).each do |icon|
text str: icon.capitalize, layout: icon,
hint: :red, valign: 'middle', align: 'center'
end
save_png prefix: 'layout_builtin_hand_'
end
# Layouts can also be specified in their own DSL method call
# Each layout call will progressively be merged with the priors
Squib::Deck.new do
use_layout file: 'custom-layout.yml'
use_layout file: 'custom-layout2.yml'
text str: 'The Title', layout: :title # from custom-layout.yml
text str: 'The Subtitle', layout: :subtitle # redefined in custom-layout2.yml
save_png prefix: 'layout3_'
end
Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

+91
View File
@@ -0,0 +1,91 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 128 128"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
width="100%"
height="100%"
sodipodi:docname="spanner.svg">
<metadata
id="metadata18">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs16" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="1002"
id="namedview14"
showgrid="false"
inkscape:zoom="2.8284271"
inkscape:cx="98.928938"
inkscape:cy="62.194589"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g3767"
inkscape:document-units="in"
units="px"
showguides="true"
inkscape:guide-bbox="true" />
<g
id="g3767"
transform="matrix(0.24961486,0,0,0.24961486,0.197194,96.049335)">
<rect
ry="67.108368"
y="-378.68747"
x="5.3126979"
height="501.3746"
width="501.3746"
id="backdrop"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:10.62539577;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
inkscape:label="#rect3765" />
<path
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 36.267098,-7.709219 C 16.393265,5.1318032 3.2161811,27.462365 3.2161811,52.884128 c 0,39.825874 32.2852369,72.111092 72.1110909,72.111092 23.870397,0 44.964938,-11.67699 58.089488,-29.545518 -11.26063,7.275808 -24.65607,11.517748 -39.060173,11.517748 -39.825853,0 -72.11109,-32.285221 -72.11109,-72.111095 0,-15.95546 5.248882,-30.6218942 14.021601,-42.565574 z"
id="path3790"
inkscape:connector-curvature="0" />
<g
id="g6"
transform="matrix(18.68858,0,0,18.68858,-3385.6437,-2608.3849)">
<path
style="fill:#ffffff"
inkscape:connector-curvature="0"
id="path8"
d="m 192.2325,129.3203 -10,10 v 5.5625 h 5.375 l 10.0938,-10.0938 -5.4688,-5.4688 z" />
<path
style="fill:#ffffff;stroke:#000000"
inkscape:connector-curvature="0"
id="path10"
d="m 181.7796,141.8591 15.6196,-15.6178 m 3.349,3.3486 -15.8051,15.8032" />
<path
style="fill:#ffffff"
inkscape:connector-curvature="0"
id="path12"
d="m 201.2023,119.7104 c -2.8283,-0.73 -5.9623,-0.004 -8.1759,2.2097 -3.3293,3.3292 -3.3293,8.7358 -2e-5,12.065 3.32928,3.3292 8.7358,3.3292 12.065,0 2.216,-2.216 2.9436,-5.3452 2.2097,-8.1759 l -5.6348,5.6348 -4.8172,-1.2816 -1.2816,-4.8171 5.6348,-5.6348 z" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB