Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
891 lines (808 sloc) 40.2 KB
<deck>
<title>A Deck on Deck</title>
<creator>Anthony Starks</creator>
<subject>presentations, Go, markup, design</subject>
<date>2015-10-18</date>
<description>Deck is a library for clients to make scalable presentations, using a standard markup language.
Clients read deck files into the Deck structure, and traverse the structure for display, publication, etc.
Clients may be interactive or produce standard formats such as SVG or PDF.</description>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="5" yp="45" sp="18">Deck</text>
<rect xp="75" yp="50" wp="40" hr="100" color="rgb(240,240,240)"/>
<rect xp="70" yp="55" wp="20" hr="56.2" color="rgb(127,0,0)"/>
<rect xp="80" yp="50" wp="20" hr="56.2" color="rgb(255,255,255)"/>
<rect xp="75" yp="45" wp="20" hr="56.2" color="rgb(127,127,127)"/>
<text xp="95" yp="5" sp="3" align="right">a Go package for presentations</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<line xp1="5" yp1="90" xp2="90" yp2="90" color="rgb(50,50,50)" sp="0.1"/>
<text xp="5" yp="85" sp="2.5" color="rgb(127,0,0)">DECK: a package for presentations</text>
<list xp="5" yp="60" sp="2.5">
<li>Deck is a package written in Go</li>
<li>That uses a singular markup language</li>
<li>With elements for text, lists, code, and graphics</li>
<li>All layout and sizes are expressed as percentages</li>
<li>Clients are interactive or create formats like PDF or SVG</li>
<li>Servers use a RESTful API to list, upload, stop, start, remove decks</li>
</list>
</slide>
<slide bg="rgb(127,127,127)" fg="white">
<text xp="10" yp="10" sp="5">Elements</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="10" yp="90" sp="4">text element</text>
<text xp="10" yp="70" sp="3" color="rgb(127,0,0)">Hello, World (plain text)</text>
<text xp="10" yp="60" sp="3" wp="60" color="rgb(0,0,127)" font="serif" type="block" lp="1.6">
A block of text, word-wrapped to a specified width. You may specify the size, font, line spacing, color, and opacity.
</text>
<text xp="10" yp="33" sp="2" wp="50" type="code" lp="1.4" file="hw.go"/>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="5" yp="90" sp="4">list element</text>
<list xp="5" yp="70" sp="3" font="sans" color="rgb(0,127,0)" lp="2.0" type="bullet">
<li>Point A</li>
<li>Point B</li>
<li>Point C</li>
<li>Point D</li>
</list>
<text xp="5" yp="30" type="code" wp="27" sp="1.2">&lt;list xp="5" yp="70" sp="3"
type="bullet"
font="sans"
color="rgb(0,127,0)"&gt;
&lt;li&gt;Point A&lt;/li&gt;
&lt;li&gt;Point B&lt;/li&gt;
&lt;li&gt;Point C&lt;/li&gt;
&lt;li&gt;Point D&lt;/li&gt;
&lt;/list&gt;</text>
<list xp="35" yp="70" sp="3" color="rgb(0,0,127)" lp="2.0" font="serif">
<li>First item</li>
<li>Second item</li>
<li>The third item</li>
<li>the last thing</li>
</list>
<text xp="35" yp="30" type="code" wp="27" sp="1.2">&lt;list xp="35" yp="70" sp="3"
type="plain"
font="serif"
color="rgb(0,0,127)"&gt;
&lt;li&gt;First item&lt;/li&gt;
&lt;li&gt;Second item&lt;/li&gt;
&lt;li&gt;The third item&lt;/li&gt;
&lt;li&gt;the last thing&lt;/li&gt;
&lt;/list&gt;</text>
<list xp="70" yp="70" sp="3" font="mono" color="black" lp="2.0" type="number">
<li>This</li>
<li>That</li>
<li>The other</li>
<li>One more</li>
</list>
<text xp="70" yp="30" type="code" wp="27" sp="1.2">&lt;list xp="70" yp="70" sp="3"
type="number"
font="mono"
color="black"&gt;
&lt;li&gt;This&lt;/li&gt;
&lt;li&gt;That&lt;/li&gt;
&lt;li&gt;The other&lt;/li&gt;
&lt;li&gt;One more&lt;/li&gt;
&lt;/list&gt;</text>
</slide>
<slide bg="white">
<text xp="10" yp="90" sp="4">image element</text>
<image xp="50" yp="50" width="360" height="203" name="desert2.jpg"/>
<text xp="50" yp="50" sp="3" align="center" color="black">x, y</text>
<text xp="10" yp="50" sp="3" color="rgb(127,0,0)">height</text>
<text xp="50" yp="25" sp="3" align="center" color="rgb(127,0,0)">width</text>
<text xp="10" yp="10" sp="2" type="code">&lt;image xp="50" yp="50" width="360" height="203" name="desert2.jpg"/&gt;</text>
</slide>
<slide bg="white">
<text xp="10" yp="90" sp="4">rect element</text>
<rect xp="50" yp="50" wp="20" hr="100" color="rgb(127,0,0)"/>
<text xp="50" yp="50" sp="3" align="center" color="white">x, y</text>
<text xp="50" yp="25" sp="3" align="center" color="rgb(127,0,0)">width</text>
<text xp="10" yp="60" sp="3" wp="10" type="block" color="rgb(127,0,0)">height (relative to element or canvas width)</text>
<text xp="10" yp="10" sp="2" type="code">&lt;rect xp="50" yp="50" wp="20" hr="100"/&gt;</text>
</slide>
<slide bg="white">
<text xp="10" yp="90" sp="4">ellipse element</text>
<ellipse xp="50" yp="50" wp="20" hr="100" color="rgb(127,0,0)"/>
<text xp="50" yp="50" sp="3" align="center" color="white">x, y</text>
<text xp="50" yp="25" sp="3" align="center" color="rgb(127,0,0)">width</text>
<text xp="10" yp="60" sp="3" type="block" wp="10" color="rgb(127,0,0)">height (relative to element or canvas width)</text>
<text xp="10" yp="10" sp="2" type="code">&lt;ellipse xp="50" yp="50" wp="20" hr="100"/&gt;</text>
</slide>
<slide bg="white">
<text xp="10" yp="90" sp="4">polygon element</text>
<polygon xc="30 50 70" yc="30 70 30" color="rgb(127,0,0)"/>
<text xp="30" yp="30" align="right" sp="3">(30,50)</text>
<text xp="70" yp="30" align="left" sp="3">(70,30)</text>
<text xp="50" yp="70" align="center" sp="3">(50,70)</text>
<text xp="10" yp="10" sp="2" type="code">&lt;polygon xc="30 50 70" yc="30 70 30"/&gt;</text>
</slide>
<slide bg="white">
<text xp="10" yp="90" sp="4">line element</text>
<line xp1="35" yp1="50" xp2="65" yp2="65" sp="0.5" color="rgb(127,127,127)"/>
<text xp="35" yp="50" sp="3" align="center" color="rgb(127,0,0)">start</text>
<text xp="65" yp="65" sp="3" align="center" color="rgb(127,0,0)">end</text>
<text xp="10" yp="10" sp="2" type="code">&lt;line xp1="35" yp1="50" xp2="65" yp2="65"/&gt;</text>
</slide>
<slide bg="white">
<text xp="10" yp="90" sp="4">arc element</text>
<arc xp="50" yp="50" wp="30" hp="30" a1="0" a2="90" sp="0.5"/>
<text xp="50" yp="70" sp="3" align="center" color="rgb(127,0,0)">angle2 (90 deg)</text>
<text xp="65" yp="50" sp="3" align="center" color="rgb(127,0,0)">angle1 (0 deg)</text>
<text xp="50" yp="50" sp="3" align="center" color="rgb(127,0,0)">x, y</text>
<text xp="10" yp="10" sp="2" type="code">&lt;arc xp="50" yp="50" wp="30" hp="30" a1="0" a2="90"/&gt;</text>
</slide>
<slide bg="white">
<text xp="10" yp="90" sp="4">curve element</text>
<curve xp1="30" yp1="50" xp2="80" yp2="80" xp3="70" yp3="50" sp="0.5"/>
<text xp="30" yp="50" sp="3" align="center" color="rgb(127,0,0)">start</text>
<text xp="80" yp="90" sp="3" align="center" color="rgb(127,0,0)">control</text>
<text xp="70" yp="50" sp="3" align="center" color="rgb(127,0,0)">end</text>
<text xp="10" yp="10" sp="2" type="code">&lt;curve xp1="30" yp1="50" xp2="80" yp2="80" xp3="70" yp3="50"/&gt;</text>
</slide>
<slide bg="rgb(127,127,127)" fg="white">
<text xp="10" yp="10" sp="5">Markup and Layout</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="95" yp="5" sp="3" align="right">Anatomy of a Deck</text>
<list xp="20" yp="90" sp="1.4" font="mono">
<li>&lt;deck&gt;</li>
<li> &lt;canvas width="1024" height="768" /&gt;</li>
<li> &lt;slide bg="white" fg="black"&gt;</li>
<li> &lt;image xp="70" yp="60" width="256" height="179" name="work.png" caption="Desk"/&gt;</li>
<li> &lt;text xp="20" yp="80" sp="3" link="http://goo.gl/Wm05Ex"&gt;Deck elements&lt;/text&gt;</li>
<li> &lt;list xp="20" yp="70" sp="2" type="bullet"&gt;</li>
<li> &lt;li&gt;text, list, image&lt;/li&gt;</li>
<li> &lt;li&gt;line, rect, ellipse&lt;/li&gt;</li>
<li> &lt;li&gt;arc, curve, polygon&lt;/li&gt;</li>
<li> &lt;/list&gt;</li>
<li> &lt;line xp1="20" yp1="10" xp2="30" yp2="10"/&gt;</li>
<li> &lt;rect xp="35" yp="10" wp="4" hr="75" color="rgb(127,0,0)"/&gt;</li>
<li> &lt;ellipse xp="45" yp="10" wp="4" hr="75" color="rgb(0,127,0)"/&gt;</li>
<li> &lt;arc xp="55" yp="10" wp="4" hp="3" a1="0" a2="180" color="rgb(0,0,127)"/&gt;</li>
<li> &lt;curve xp1="60" yp1="10" xp2="75" yp2="20" xp3="70" yp3="10" /&gt;</li>
<li> &lt;polygon xc=75 75 80" yc="8 12 10" color="rgb(0,0,127)"/&gt;</li>
<li> &lt;/slide&gt;</li>
<li>&lt;/deck&gt;</li>
</list>
<list xp="3" yp="90" sp="1.4" color="rgb(127,0,0)" >
<li>Start the deck</li>
<li>Set the canvas size</li>
<li>Begin a slide</li>
<li>Place an image</li>
<li>Draw some text</li>
<li>Make a bullet list</li>
<li></li>
<li></li>
<li></li>
<li>End the list</li>
<li>Draw a line</li>
<li>Draw a rectangle</li>
<li>Draw an ellipse</li>
<li>Draw an arc</li>
<li>Draw a quadratic bezier</li>
<li>Draw a polygon</li>
<li>End the slide</li>
<li>End of the deck</li>
</list>
</slide>
<slide bg="white" fg="black">
<image xp="70" yp="60" width="256" height="179" name="work.png" caption="Desk" />
<text xp="20" yp="90" sp="3" link="http://goo.gl/Wm05Ex">Deck elements</text>
<list xp="20" yp="70" sp="2" type="bullet">
<li>text, list, image</li>
<li>line, rect, ellipse</li>
<li>arc, curve, polygon</li>
</list>
<line xp1="20" yp1="10" xp2="30" yp2="10"/>
<rect xp="35" yp="10" wp="4" hr="75" color="rgb(127,0,0)"/>
<ellipse xp="45" yp="10" wp="4" hr="75" color="rgb(0,127,0)"/>
<arc xp="55" yp="10" wp="4" hp="3" a1="0" a2="180" color="rgb(0,0,127)"/>
<curve xp1="60" yp1="10" xp2="75" yp2="20" xp3="70" yp3="10" />
<polygon xc="75 75 80" yc="8 12 10" color="rgb(0,0,127)"/>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="20" yp="90" sp="3">Text and List Markup</text>
<list xp="5" yp="70" sp="1.5" color="rgb(127,0,0)">
<li>Position, size</li>
<li>Block of text</li>
<li>Lines of code</li>
<li>Attributes</li>
</list>
<list xp="5" yp="35" sp="1.5" color="rgb(127,0,0)">
<li>Position, size</li>
<li>Bullet list</li>
<li>Numbered list</li>
<li>Attributes</li>
</list>
<list xp="20" yp="70" sp="1.5" font="mono">
<li>&lt;text xp="..." yp="..." sp="..."&gt;</li>
<li>&lt;text ... type="block"&gt;</li>
<li>&lt;text ... type="code"&gt;</li>
<li>&lt;text ... color="..." opacity="..." font="..." align="..." link="..."&gt;</li>
</list>
<list xp="20" yp="35" sp="1.5" font="mono">
<li>&lt;list xp="..." yp="..." sp="..."&gt;</li>
<li>&lt;list ... type="bullet"&gt;</li>
<li>&lt;list ... type="number"&gt;</li>
<li>&lt;list ... color="..." opacity="..." font="..." align="..." link="..."&gt;</li>
</list>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="20" yp="90" sp="3">Common Attributes for text and list</text>
<list xp="20" yp="70" sp="2" font="mono" color="rgb(127,0,0)">
<li>xp</li>
<li>yp</li>
<li>sp</li>
<li>type</li>
<li>align</li>
<li>color</li>
<li>opacity</li>
<li>font</li>
<li>link</li>
</list>
<list xp="30" yp="70" sp="2" font="sans">
<li>horizontal percentage</li>
<li>vertical percentage</li>
<li>font size percentage</li>
<li>"bullet", "number" (list), "block", "code" (text)</li>
<li>"left", "middle", "end"</li>
<li>SVG names ("maroon"), or RGB "rgb(127,0,0)"</li>
<li>percent opacity (0-100, transparent - opaque)</li>
<li>"sans", "serif", "mono"</li>
<li>URL</li>
</list>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="50" yp="90" sp="3" align="center">Scaling the canvas</text>
<image xp="25" yp="50" width="400" height="300" name="l.png"/>
<image xp="75" yp="50" width="300" height="400" name="p.png"/>
<text xp="25" yp="10" sp="2" align="center">Landscape</text>
<text xp="75" yp="10" sp="2" align="center">Portrait</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="50" yp="50" sp="5" align="center">Percent Grid</text>
<line xp1="0" yp1="0" xp2="0" yp2="100" sp="0.1" color="blue"/>
<line xp1="0" yp1="0" xp2="100" yp2="0" sp="0.1" color="blue"/>
<line xp1="100" yp1="0" xp2="100" yp2="100" sp="0.1" color="blue"/>
<line xp1="10" yp1="0" xp2="10" yp2="100" sp="0.1" color="lightblue"/>
<text xp="10" yp="95" sp="2" color="gray" align="center">10</text>
<line xp1="20" yp1="0" xp2="20" yp2="100" sp="0.1" color="lightblue"/>
<text xp="20" yp="95" sp="2" color="gray" align="center">20</text>
<line xp1="30" yp1="0" xp2="30" yp2="100" sp="0.1" color="lightblue"/>
<text xp="30" yp="95" sp="2" color="gray" align="center">30</text>
<line xp1="40" yp1="0" xp2="40" yp2="100" sp="0.1" color="lightblue"/>
<text xp="40" yp="95" sp="2" color="gray" align="center">40</text>
<line xp1="50" yp1="0" xp2="50" yp2="100" sp="0.1" color="lightblue"/>
<text xp="50" yp="95" sp="2" color="gray" align="center">50</text>
<line xp1="60" yp1="0" xp2="60" yp2="100" sp="0.1" color="lightblue"/>
<text xp="60" yp="95" sp="2" color="gray" align="center">60</text>
<line xp1="70" yp1="0" xp2="70" yp2="100" sp="0.1" color="lightblue"/>
<text xp="70" yp="95" sp="2" color="gray" align="center">70</text>
<line xp1="80" yp1="0" xp2="80" yp2="100" sp="0.1" color="lightblue"/>
<text xp="80" yp="95" sp="2" color="gray" align="center">80</text>
<line xp1="90" yp1="0" xp2="90" yp2="100" sp="0.1" color="lightblue"/>
<text xp="90" yp="95" sp="2" color="gray" align="center">90</text>
<line xp1="0" yp1="100" xp2="100" yp2="100" sp="0.1" color="blue"/>
<line xp1="0" yp1="10" xp2="100" yp2="10" sp="0.1" color="lightblue"/>
<text xp="5" yp="10" sp="2" color="gray" align="center">10</text>
<line xp1="0" yp1="20" xp2="100" yp2="20" sp="0.1" color="lightblue"/>
<text xp="5" yp="20" sp="2" color="gray" align="center">20</text>
<line xp1="0" yp1="30" xp2="100" yp2="30" sp="0.1" color="lightblue"/>
<text xp="5" yp="30" sp="2" color="gray" align="center">30</text>
<line xp1="0" yp1="40" xp2="100" yp2="40" sp="0.1" color="lightblue"/>
<text xp="5" yp="40" sp="2" color="gray" align="center">40</text>
<line xp1="0" yp1="50" xp2="100" yp2="50" sp="0.1" color="lightblue"/>
<text xp="5" yp="50" sp="2" color="gray" align="center">50</text>
<line xp1="0" yp1="60" xp2="100" yp2="60" sp="0.1" color="lightblue"/>
<text xp="5" yp="60" sp="2" color="gray" align="center">60</text>
<line xp1="0" yp1="70" xp2="100" yp2="70" sp="0.1" color="lightblue"/>
<text xp="5" yp="70" sp="2" color="gray" align="center">70</text>
<line xp1="0" yp1="80" xp2="100" yp2="80" sp="0.1" color="lightblue"/>
<text xp="5" yp="80" sp="2" color="gray" align="center">80</text>
<line xp1="0" yp1="90" xp2="100" yp2="90" sp="0.1" color="lightblue"/>
<text xp="5" yp="90" sp="2" color="gray" align="center">90</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="50" yp="10" sp="4" align="center">Percentage-based layout</text>
<text xp="10" yp="50" sp="3" color="rgb(127,0,0)">Hello</text>
<image xp="50" yp="50" width="360" height="203" name="desert2.jpg"/>
<rect xp="90" yp="50" wp="10" hr="100" color="rgb(127,0,0)" opacity="50"/>
<text xp="10" yp="80" sp="1.5" align="center">10%, 50%</text>
<text xp="50" yp="80" sp="1.5" align="center">50%, 50%</text>
<text xp="90" yp="80" sp="1.5" align="center">90%, 50%</text>
<line xp1="10" yp1="80" xp2="10" yp2="50" sp="0.1" color="gray"/>
<line xp1="50" yp1="80" xp2="50" yp2="50" sp="0.1" color="gray"/>
<line xp1="90" yp1="80" xp2="90" yp2="50" sp="0.1" color="gray"/>
<ellipse xp="10" yp="50" wp="0.5" hr="100" color="gray"/>
<ellipse xp="50" yp="50" wp="0.5" hr="100" color="gray"/>
<ellipse xp="90" yp="50" wp="0.5" hr="100" color="gray"/>
</slide>
<slide bg="black" fg="white">
<image xp="50" yp="50" width="1024" height="576" name="deck-desk1024.jpg"/>
<text xp="10" yp="10" sp="5">Clients</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="5" yp="95" sp="1.4" type="code" color="black" file="deckclient.go"/>
<text xp="90" yp="5" sp="3" align="right">A Deck Client</text>
</slide>
<slide>
<text xp="5" yp="47.5" sp="4">Process</text>
<text xp="50" yp="47.5" sp="4" align="center">deck code</text>
<text xp="75" yp="72.5" sp="4">interactive</text>
<text xp="75" yp="47.5" sp="4">PDF</text>
<text xp="75" yp="22.5" sp="4">SVG</text>
<line xp1="25" yp1="50" xp2="35" yp2="50" sp=".25" color="rgb(127,127,127)"/>
<line xp1="65" yp1="57.5" xp2="70" yp2="75" sp=".25" color="rgb(0,0,127)" />
<line xp1="65" yp1="50" xp2="70" yp2="50" sp=".25" color="rgb(127,0,0)" />
<line xp1="65" yp1="42.5" xp2="70" yp2="25" sp=".25" color="rgb(0,127,0)"/>
<rect xp="50" yp="50" wp="30" hp="15" color="black" opacity="20" />
<rect xp="85" yp="75" wp="30" hp="15" color="rgb(0,0,127)" opacity="20" />
<rect xp="85" yp="50" wp="30" hp="15" color="rgb(127,0,0)" opacity="20" />
<rect xp="85" yp="25" wp="30" hp="15" color="rgb(0,127,0)" opacity="20" />
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="5" yp="95" sp=".9" color="black" wp="70" type="code" file="barchart.go"/>
<text xp="30" yp="90" sp="3">Generating a Barchart</text>
</slide>
<slide bg="rgb(255,255,255)">
<text xp="10.00" yp="80.00" sp="5.00" align="" wp="0.00" font="sans" opacity="100.00" color="black">Go 1.1.2 Build and Test Times</text>
<text xp="10.00" yp="60.00" sp="2.50" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(100,100,100)">Macbook Air</text>
<line xp1="40.00" yp1="61.25" xp2="41.33" yp2="61.25" sp="2.50" opacity="100.00" color="lightgray" />
<text xp="41.83" yp="60.62" sp="1.25" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(127,0,0)">154.7</text>
<text xp="10.00" yp="55.00" sp="2.50" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(100,100,100)">MacBook Pro (2008)</text>
<line xp1="40.00" yp1="56.25" xp2="42.50" yp2="56.25" sp="2.50" opacity="100.00" color="lightgray" />
<text xp="43.00" yp="55.62" sp="1.25" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(127,0,0)">289.6</text>
<text xp="10.00" yp="50.00" sp="2.50" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(100,100,100)">BeagleBone Black</text>
<line xp1="40.00" yp1="51.25" xp2="64.97" yp2="51.25" sp="2.50" opacity="100.00" color="lightgray" />
<text xp="65.47" yp="50.62" sp="1.25" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(127,0,0)">2896.0</text>
<text xp="10.00" yp="45.00" sp="2.50" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(100,100,100)">Raspberry Pi</text>
<line xp1="40.00" yp1="46.25" xp2="89.70" yp2="46.25" sp="2.50" opacity="100.00" color="lightgray" />
<text xp="90.20" yp="45.62" sp="1.25" align="" wp="0.00" font="sans" opacity="100.00" color="rgb(127,0,0)">5765.6</text>
</slide>
<slide>
<image xp="12" yp="85" width="144" height="128" name="rpi-logo.jpg"/>
<text xp="25" yp="85" sp="2.5" font="mono" color="rgb(127,0,0)">go get github.com/ajstarks/deck/cmd/vgdeck</text>
<image xp="12" yp="55" width="128" height="128" name="pdf-logo.jpg"/>
<text xp="25" yp="55" sp="2.5" font="mono" color="rgb(127,0,0)">go get github.com/ajstarks/deck/cmd/pdfdeck</text>
<image xp="12" yp="20" width="145" height="145" name="svg.png"/>
<text xp="25" yp="20" sp="2.5" font="mono" color="rgb(127,0,0)">go get github.com/ajstarks/deck/cmd/svgdeck</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="10" yp="90" sp="3" color="rgb(127,0,0)" font="mono">pdfdeck [options] file.xml...</text>
<list xp="10" yp="80" sp="2">
<li>-sans, -serif, -mono [font] specify fonts</li>
<li>-pagesize [w,h, or Letter, Legal, Tabloid, A2-A5, ArchA, Index, 4R, Widescreen]</li>
<li>-stdout (output to standard out)</li>
<li>-outdir [directory] directory for PDF output</li>
<li>-fontdir [directory] directory containing font information</li>
<li>-author [author name] set the document author</li>
<li>-title [title text] set the document title</li>
<li>-grid [percent] draw a percent grid on each slide</li>
</list>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="10" yp="90" sp="3" color="rgb(127,0,0)" font="mono">svgdeck [options] file.xml...</text>
<list xp="10" yp="80" sp="2">
<li>-sans, -serif, -mono [font] specify fonts</li>
<li>-pagesize [Letter, Legal, A3, A4, A5]</li>
<li>-pagewidth [canvas width]</li>
<li>-pageheight [canvas height]</li>
<li>-stdout (output to standard out)</li>
<li>-outdir [directory] directory for PDF output</li>
<li>-title [title text] set the document title</li>
<li>-grid [percent] draw a percent grid on each slide</li>
</list>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="10" yp="90" sp="3" color="rgb(127,0,0)" font="mono">vgdeck [options] file.xml...</text>
<list xp="10" yp="80" sp="2">
<li>-loop [duration] loop, pausing [duration] between slides</li>
<li>-slide [number] start at slide number</li>
<li>-w [width] canvas width</li>
<li>-h [height] canvas height</li>
<li>-g [percent] draw a percent grid</li>
</list>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="10" yp="90" sp="3">vgdeck Commands</text>
<list xp="50" yp="80" sp="2">
<li>Next slide</li>
<li>Previous slide</li>
<li>First slide</li>
<li>Last slide</li>
<li>Reload</li>
<li>X-Ray</li>
<li>Search</li>
<li>Save</li>
<li>Quit</li>
</list>
<list xp="10" yp="80" sp="2" font="mono" color="rgb(127,0,0)">
<li>+, Ctrl-N, [Return]</li>
<li>-, Ctrl-P, [Backspace]</li>
<li>^, Ctrl-A</li>
<li>$, Ctrl-E</li>
<li>r, Ctrl-R</li>
<li>x, Ctrl-X</li>
<li>/, Ctrl-F [text]</li>
<li>s, Ctrl-S</li>
<li>q</li>
</list>
</slide>
<slide>
<text xp="10" yp="90" sp="3">Deck Web API</text>
<list xp="10" yp="80" sp="1.6" font="mono" color="rgb(127,0,0)">
<li>GET</li>
<li>GET</li>
<li>GET</li>
<li>POST</li>
<li>POST</li>
<li>POST</li>
<li>DELETE</li>
<li>POST</li>
<li>POST</li>
<li>POST</li>
<li>POST</li>
</list>
<list xp="20" yp="80" sp="1.6" font="mono" color="rgb(0,0,127)">
<li>/</li>
<li>/deck/</li>
<li>/deck/?filter=[type]</li>
<li>/deck/content.xml?cmd=1s</li>
<li>/deck/content.xml?cmd=stop</li>
<li>/deck/content.xml?slide=[num]</li>
<li>/deck/content.xml</li>
<li>/upload/ Deck:content.xml</li>
<li>/table/ Deck:content.txt</li>
<li>/table/?textsize=[size]</li>
<li>/media/ Media:content.mov</li>
</list>
<list xp="55" yp="80" sp="1.6">
<li>List the API</li>
<li>List the content on the server</li>
<li>List content filtered by deck, image, video</li>
<li>Play a deck with the specified duration</li>
<li>Stop playing a deck</li>
<li>Play deck starting at a slide number</li>
<li>Remove content</li>
<li>Upload content</li>
<li>Generate a table from a tab-separated list</li>
<li>Specify the text size of the table</li>
<li>Play the specified video</li>
</list>
<text xp="55" yp="90" sp="1" color="rgb(127,0,0)" font="mono">sex -dir [start dir] -listen [address:port] -maxupload [bytes]</text>
</slide>
<slide>
<text xp="10" yp="90" sp="3" font="mono" color="rgb(127,0,0)">deck [command] [argument]</text>
<list xp="10" yp="80" sp="2" font="mono" color="rgb(127,0,0)">
<li>deck play file [duration]</li>
<li>deck stop</li>
<li>deck list [deck|image|video]</li>
<li>deck upload file...</li>
<li>deck remove file...</li>
<li>deck video file</li>
<li>deck table file [textsize]</li>
</list>
<list xp="50" yp="80" sp="2">
<li>Play a deck</li>
<li>Stop playing a deck</li>
<li>List contents</li>
<li>Upload content</li>
<li>Remove content</li>
<li>Play video</li>
<li>Make a table</li>
</list>
<list xp="10" yp="30" sp="1.4" font="mono" color="rgb(127,0,0)">
<li>$ deck upload *.jpg</li>
<li>$ mkpicdeck *.jpg | deck upload /dev/stdin</li>
<li>$ deck play stdin</li>
</list>
<list xp="50" yp="30" sp="1.4" font="mono" color="rgb(127,127,127)">
<li># upload images</li>
<li># generate the slide show deck</li>
<li># play it</li>
</list>
</slide>
<slide>
<!-- Screen -->
<text xp="50" yp="95" sp="2" align="center" color="gray">Display</text>
<rect xp="50" yp="65" wp="50" hr="56.2" color="black"/>
<rect xp="50" yp="65" wp="46" hr="56.2" color="white"/>
<!-- Raspi -->
<text xp="82.5" yp="75" sp="2" align="center" color="gray">Server</text>
<line xp1="75" yp1="70" xp2="80" yp2="70" sp="0.2" color="black"/>
<text xp="77.5" yp="72" sp="1.2" align="center" color="gray">HDMI</text>
<rect xp="82.5" yp="70" wp="5" hr="75" color="green"/>
<!-- Wifi -->
<arc xp="82.5" yp="80" wp="5" hp="5" a1="45" a2="135" color="gray" sp="0.2"/>
<arc xp="82.5" yp="80" wp="4" hp="4" a1="45" a2="135" color="gray" sp="0.2"/>
<arc xp="82.5" yp="80" wp="3" hp="3" a1="45" a2="135" color="gray" sp="0.2"/>
<arc xp="82.5" yp="80" wp="2" hp="2" a1="45" a2="135" color="gray" sp="0.2"/>
<arc xp="82.5" yp="80" wp="1" hp="1" a1="45" a2="135" color="gray" sp="0.2"/>
<!-- Presentation on the remote display -->
<text xp="30" yp="65" sp="2">Good Design</text>
<list xp="45" yp="80" sp="1.1" type="plain">
<li>is innovative</li>
<li>makes a product useful</li>
<li>is aesthetic</li>
<li>makes a product understandable</li>
<li>is unobtrusive</li>
<li>is honest</li>
<li>is long-lasting</li>
<li>is thorough down to the last detail</li>
<li>is environmentally-friendly</li>
<li color="rgb(127,0,0)">is as little design as possible</li>
</list>
<!-- PC -->
<text xp="50" yp="25" sp="2" align="center" color="gray">Controller</text>
<rect xp="50" yp="15" wp="15" hr="70" color="black"/>
<rect xp="50" yp="15" wp="14" hr="70" color="rgb(240,240,240)"/>
<rect xp="50" yp="7" wp="15" hr="5" color="black"/>
<rect xp="50" yp="5" wp="20" hr="5" color="black"/>
<!--
<list xp="45" yp="20" sp="1" color="black">
<li>&gt; list</li>
<li>&gt; upload</li>
<li>&gt; play/stop</li>
<li>&gt; delete</li>
</list>
-->
<!-- Controlling PC, UI -->
<text xp="45" yp="19" sp="1.4">&gt; list</text>
<text xp="45" yp="16" sp="1.4">&gt; upload</text>
<text xp="45" yp="13" sp="1.4">&gt; play/stop</text>
<text xp="45" yp="10" sp="1.4">&gt; delete</text>
<text xp="90" yp="70" sp="1.2" align="center" color="gray">RESTful API</text>
<!-- <curve xp1="57.5" yp1="15" xp2="80" yp2="25" xp3="82.5" yp3="67.5"/> -->
</slide>
<slide bg="rgb(127,127,127)" fg="white">
<text xp="10" yp="10" sp="5">Design Examples</text>
</slide>
<slide fg="white" gradcolor1="black" gradcolor2="gray" >
<ellipse xp="50" yp="0" wp="100" hr="100" color="rgb(44,77,232)"/>
<text xp="50" yp="50" align="center" sp="10">hello, world</text>
</slide>
<slide bg="black" fg="black">
<rect xp="50" yp="95" wp="100" hp="10" color="lightgray"/>
<rect xp="50" yp="5" wp="100" hp="10" color="lightgray"/>
<rect xp="15" yp="50" wp="30" hp="80" color="white"/>
<rect xp="65" yp="50" wp="70" hp="80" color="rgb(127,0,0)"/>
<text xp="50" yp="3" sp="4" align="center">Bottom</text>
<text xp="50" yp="93" sp="4" align="center">Top</text>
<text xp="15" yp="50" sp="10" color="black" align="center">Left</text>
<text xp="65" yp="50" sp="10" color="white" align="center">Right</text>
</slide>
<slide bg="black" fg="black">
<rect xp="50" yp="95" wp="100" hp="10" color="lightgray"/>
<rect xp="50" yp="5" wp="100" hp="10" color="lightgray"/>
<rect xp="15" yp="50" wp="30" hp="80" color="white"/>
<rect xp="65" yp="50" wp="70" hp="80" color="rgb(127,0,0)"/>
<text xp="50" yp="3" sp="4" align="center">20%</text>
<text xp="50" yp="93" sp="4" align="center">20%</text>
<text xp="15" yp="50" sp="10" color="black" align="center">30%</text>
<text xp="65" yp="50" sp="10" color="white" align="center">70%</text>
</slide>
<slide bg="black" fg="black">
<rect xp="50" yp="95" wp="100" hp="10" color="lightgray"/>
<rect xp="50" yp="5" wp="100" hp="10" color="lightgray"/>
<rect xp="15" yp="50" wp="30" hp="80" color="white"/>
<rect xp="65" yp="50" wp="70" hp="80" color="rgb(127,0,0)"/>
<text xp="50" yp="3" sp="4" align="center">Footer (bottom 20%)</text>
<text xp="50" yp="93" sp="4" align="center">Header (top 20%)</text>
<text xp="15" yp="50" sp="5" color="black" align="center">Summary
(30%)</text>
<text xp="65" yp="50" sp="5" color="white" align="center">Detail
(70%)</text>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<rect xp="10" yp="60" wp="30" hp="80" color="red" opacity="20"/>
<rect xp="45" yp="60" wp="30" hp="80" color="red" opacity="20"/>
<rect xp="80" yp="60" wp="30" hp="80" color="red" opacity="20"/>
<rect xp="50" yp="10" wp="100" hp="20" color="green" opacity="20"/>
<text xp="5" yp="80" sp="3" color="rgb(127,0,0)">bullet</text>
<list xp="5" yp="70" sp="3" font="sans" color="rgb(0,127,0)" type="bullet">
<li>Point A</li>
<li>Point B</li>
<li>Point C</li>
<li>Point D</li>
</list>
<text xp="35" yp="80" sp="3" color="rgb(127,0,0)">plain</text>
<list xp="35" yp="70" sp="3" color="rgb(0,0,127)" font="serif">
<li>First item</li>
<li>Second item</li>
<li>The third item</li>
<li>the last thing</li>
</list>
<text xp="70" yp="80" sp="3" color="rgb(127,0,0)">number</text>
<list xp="70" yp="70" sp="3" font="mono" color="black" type="number">
<li>This</li>
<li>That</li>
<li>The other</li>
<li>One more</li>
</list>
<text xp="50" yp="10" sp="4" font="mono" align="center">&lt;list&gt;...&lt;/list&gt;</text>
</slide>
<slide bg="black" fg="white">
<text xp="15" yp="70" sp="11" align="center">BOS</text>
<image xp="15" yp="55" width="50" height="50" name="plane.png"/>
<text xp="15" yp="25" sp="11" align="center">SFO</text>
<line xp1="30" yp1="90" xp2="30" yp2="15" color="white" sp="0.1"/>
<text xp="35" yp="75" sp="6.25">Virgin America 351
Gate B38
8:35am</text>
<text xp="35" yp="25" sp="6.25" color="rgb(136,195,38)">On Time</text>
</slide>
<slide bg="black" fg="white">
<text xp="15" yp="70" sp="11" align="center">JFK</text>
<image xp="15" yp="55" width="50" height="50" name="plane.png"/>
<text xp="15" yp="25" sp="11" align="center">IND</text>
<line xp1="30" yp1="90" xp2="30" yp2="15" color="white" sp="0.1"/>
<text xp="35" yp="75" sp="6.25">US Airways 1207
Gate C31C
5:35pm</text>
<text xp="35" yp="25" sp="6.25" color="red">Delayed</text>
</slide>
<slide bg="black" fg="white">
<list xp="5" yp="80" sp="5.3" >
<li>AAPL</li>
<li>AMZN</li>
<li>GOOG</li>
</list>
<list xp="30" yp="80" sp="5.3" >
<li>503.73</li>
<li>274.03</li>
<li>727.58</li>
</list>
<list xp="55" yp="80" sp="5.3" color="rgb(171,50,50)" >
<li>-16.57 (3.18%)</li>
<li color="rgb(136,195,38)">+6.09 (2.27%)</li>
<li>-12.41 (1.68%)</li>
</list>
</slide>
<slide bg="white" fg="rgb(50,50,50)">
<text xp="50" yp="90" sp="3" align="center">Two Columns</text>
<line xp1="50" yp1="70" xp2="50" yp2="10" sp="0.1" color="black" />
<image xp="20" yp="30" width="360" height="203" name="desert2.jpg" caption="Tree and Sky"/>
<image xp="75" yp="30" width="360" height="203" name="desert3.jpg" caption="Rocks"/>
<list xp="20" yp="70" sp="2">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</list>
<list xp="70" yp="70" sp="2">
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
</list>
</slide>
<slide>
<text xp="5" yp="50" sp="4" font="mono" color="rgb(127,0,0)">go</text>
<text xp="15" yp="90" sp="2" font="mono">build</text>
<text xp="15" yp="83" sp="2" font="mono">clean</text>
<text xp="15" yp="76" sp="2" font="mono">env</text>
<text xp="15" yp="69" sp="2" font="mono">fix</text>
<text xp="15" yp="62" sp="2" font="mono">fmt</text>
<text xp="15" yp="55" sp="2" font="mono">get</text>
<text xp="15" yp="48" sp="2" font="mono">install</text>
<text xp="15" yp="41" sp="2" font="mono">list</text>
<text xp="15" yp="34" sp="2" font="mono">run</text>
<text xp="15" yp="27" sp="2" font="mono">test</text>
<text xp="15" yp="20" sp="2" font="mono">tool</text>
<text xp="15" yp="13" sp="2" font="mono">version</text>
<text xp="15" yp="6" sp="2" font="mono">vet</text>
<text xp="30" yp="90" sp="2" color="gray">compile packages and dependencies</text>
<text xp="30" yp="83" sp="2" color="gray">remove object files</text>
<text xp="30" yp="76" sp="2" color="gray">print Go environment information</text>
<text xp="30" yp="69" sp="2" color="gray">run go tool fix on packages</text>
<text xp="30" yp="62" sp="2" color="gray">run gofmt on package sources</text>
<text xp="30" yp="55" sp="2" color="gray">download and install packages and dependencies</text>
<text xp="30" yp="48" sp="2" color="gray">compile and install packages and dependencies</text>
<text xp="30" yp="41" sp="2" color="gray">list packages</text>
<text xp="30" yp="34" sp="2" color="gray">compile and run Go program</text>
<text xp="30" yp="27" sp="2" color="gray">test packages</text>
<text xp="30" yp="20" sp="2" color="gray">run specified go tool</text>
<text xp="30" yp="13" sp="2" color="gray">print Go version</text>
<text xp="30" yp="6" sp="2" color="gray">run go tool vet on packages</text>
<line xp1="15" yp1="88" xp2="90" yp2="88" sp="0.01"/>
<line xp1="15" yp1="81" xp2="90" yp2="81" sp="0.01"/>
<line xp1="15" yp1="74" xp2="90" yp2="74" sp="0.01"/>
<line xp1="15" yp1="67" xp2="90" yp2="67" sp="0.01"/>
<line xp1="15" yp1="60" xp2="90" yp2="60" sp="0.01"/>
<line xp1="15" yp1="53" xp2="90" yp2="53" sp="0.01"/>
<line xp1="15" yp1="46" xp2="90" yp2="46" sp="0.01"/>
<line xp1="15" yp1="39" xp2="90" yp2="39" sp="0.01"/>
<line xp1="15" yp1="32" xp2="90" yp2="32" sp="0.01"/>
<line xp1="15" yp1="25" xp2="90" yp2="25" sp="0.01"/>
<line xp1="15" yp1="18" xp2="90" yp2="18" sp="0.01"/>
<line xp1="15" yp1="11" xp2="90" yp2="11" sp="0.01"/>
<line xp1="15" yp1="4" xp2="90" yp2="4" sp="0.01"/>
</slide>
<slide>
<line xp1="0" yp1="08.30" xp2="100" yp2="08.30" color="blue" sp="0.1"/>
<line xp1="0" yp1="16.60" xp2="100" yp2="16.60" color="blue" sp="0.1" />
<line xp1="0" yp1="24.90" xp2="100" yp2="24.90" color="blue" sp="0.1" />
<line xp1="0" yp1="33.20" xp2="100" yp2="33.20" color="blue" sp="0.1" />
<line xp1="0" yp1="41.50" xp2="100" yp2="41.50" color="blue" sp="0.1" />
<line xp1="0" yp1="49.80" xp2="100" yp2="49.80" color="blue" sp="0.1" />
<line xp1="0" yp1="58.10" xp2="100" yp2="58.10" color="blue" sp="0.1" />
<line xp1="0" yp1="66.40" xp2="100" yp2="66.40" color="blue" sp="0.1" />
<line xp1="0" yp1="74.70" xp2="100" yp2="74.70" color="blue" sp="0.1" />
<line xp1="0" yp1="83.00" xp2="100" yp2="83.00" color="blue" sp="0.1" />
<line xp1="0" yp1="91.30" xp2="100" yp2="91.30" color="red" sp="0.1"/>
<text xp="50" yp="50" sp="5" align="center" font="mono" color="rgb(100,100,100)">This is not a index card</text>
</slide>
<slide>
<line xp1="50" yp1="100" xp2="50" yp2="0" color="lightgray" opacity="100" sp="0.2"/>
<line xp1="0" yp1="50" xp2="100" yp2="50" color="lightgray" opacity="100" sp="0.2"/>
<text xp="25" yp="75" sp="3" color="blue" align="center">Can't buy me love</text>
<text xp="75" yp="75" sp="3" color="green" align="center">Bliss</text>
<text xp="25" yp="25" sp="3" color="red" align="center">Misery</text>
<text xp="75" yp="25" sp="3" color="purple" align="center">We have each other</text>
<text xp="98" yp="50" sp="2" align="right" font="mono">Better</text>
<text xp="2" yp="50" sp="2" align="" font="mono">Worse</text>
<text xp="50" yp="95" sp="2" align="center" font="mono">Rich</text>
<text xp="50" yp="5" sp="2" align="center" font="mono">Poor</text>
</slide>
<slide>
<text xp="25" yp="90" sp="2" align="center">Code</text>
<text xp="75" yp="90" sp="2" align="center">Output</text>
<image xp="75" yp="50" width="545" height="545" name="rotext.png"/>
<text xp="5" yp="80" sp="1.2" wp="50" type="code" file="rotext.go"/>
</slide>
<slide bg="white" fg="black">
<image xp="95" yp="10" width="75" height="100" name="doc.png"/>
<text xp="20" yp="70" sp="3" wp="40" font="serif" type="block">So, the next time you're about to make a subclass,
think hard and ask yourself</text>
<text xp="20" yp="40" sp="5" font="serif" color="rgb(127,0,0)">what would Go do</text>
<text xp="20" yp="15" sp="2" color="rgb(127,127,127)">Andrew Mackenzie-Ross, http://pocket.co/sSc56</text>
</slide>
<slide bg="rgb(0,0,127)" fg="rgb(240,240,240)">
<text xp="10" yp="75" sp="3.75" wp="65" type="block">Python and Ruby programmers come to Go
because they don't have to surrender much expressiveness,
but gain performance and get to play with concurrency.</text>
<text xp="10" yp="15" sp="2" link="http://commandcenter.blogspot.com/2012/06/less-is-exponentially-more.html">Less is exponentially more
Rob Pike</text>
</slide>
<slide>
<text xp="50" yp="50" sp="3" color="white" align="center">You must not blame me if I do talk to the clouds.</text>
<rect xp="50" yp="52" wp="100" hp="15" color="black" opacity="40"/>
<image name="cloudy1024.jpg" width="1024" height="768" xp="50" yp="50"/>
</slide>
<slide>
<text xp="50" yp="70" sp="6" font="serif" color="rgb(127,0,0)" align="center">FOR, LO,</text>
<text xp="50" yp="60" sp="3.3" font="serif" align="center">the winter is past,
the rain is over and gone;
The flowers appear on the earth;
the time for the singing of birds is come,
and the voice of the turtle is heard in our land.
</text>
<text xp="50" yp="10" sp="1" align="center" color="rgb(127,127,127)">Song of Solomon 2:11-12</text>
</slide>
<slide>
<image xp="70" yp="50" width="600" height="600" name="dr600.jpg" caption="Dieter Rams" color="gray"/>
<text xp="4" yp="90" sp="3" link="https://www.vitsoe.com/us/about/good-design">Good Design</text>
<list xp="4" yp="75" sp="2.0" type="plain">
<li>is innovative</li>
<li>makes a product useful</li>
<li>is aesthetic</li>
<li>makes a product understandable</li>
<li>is unobtrusive</li>
<li>is honest</li>
<li>is long-lasting</li>
<li>is thorough down to the last detail</li>
<li>is environmentally-friendly</li>
<li color="rgb(127,0,0)">is as little design as possible</li>
</list>
</slide>
<slide bg="rgb(127,127,127)" fg="white">
<text xp="50" yp="85" sp="5" align="center" link="http://github.com/ajstarks/deck">github.com/ajstarks/deck</text>
<rect xp="50" yp="50" wp="30" hr="100" color="rgb(240,240,240)"/>
<rect xp="45" yp="55" wp="15" hr="56.2" color="rgb(127,0,0)"/>
<rect xp="55" yp="50" wp="15" hr="56.2" color="rgb(255,255,255)"/>
<rect xp="50" yp="45" wp="15" hr="56.2" color="rgb(127,127,127)"/>
<text xp="50" yp="10" sp="2.5" align="center" link="mailto:ajstarks@gmail.com">ajstarks@gmail.com</text>
<text xp="50" yp="4" sp="2.5" align="center" link="http://twitter.com/ajstarks">@ajstarks</text>
</slide>
</deck>