Anthony Starks - deck

Deck
a Go package for presentations

DECK: a package for presentations
Deck is a package written in Go
That uses a singular markup language
With elements for text, lists, code, and graphics
All layout and sizes are expressed as percentages
Clients are interactive or create formats like PDF or SVG
Servers use a RESTful API for list, upload, stop, start, remove

Hello, World
A block of text, word-wrapped to a specified width.
You may specify size, font, color, and opacity.
package main
import "fmt"
func main() {
fmt.Println("Hello, World")
}
<text>...</text>

bullet plain number
<list>...</list>
Point A
Point B
Point C
Point D
First item
Second item
The third item
the last thing
1. This
2. That
3. The other
4. One more

x, y
width
height (relative
to element
or canvas
width)
<rect .../>

x, y
width
height (relative
to element
or canvas
width)
<ellipse .../>

angle2 (90 deg)
angle1 (0 deg)x, y
<arc .../>

start
control
end
<curve .../>

Anatomy of a Deck
<deck>
<canvas width="1024" height="768" />
<slide bg="white" fg="black">
<image xp="70" yp="60" width="256" height="179" name="work.png" caption="Desk"/>
<text xp="20" yp="80" 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</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" />
</slide>
</deck>
Start the deck
Set the canvas size
Begin a slide
Place an image
Draw some text
Make a bullet list
End the list
Draw a line
Draw a rectangle
Draw an ellipse
Draw an arc
Draw a quadratic bezier
End the slide
End of the deck

Desk
Deck elements
text, list, image
line, rect, ellipse
arc, curve

Text and List Markup
Position, size
Block of text
Lines of code
Attributes
Position, size
Bullet list
Numbered list
Attributes
<text xp="..." yp="..." sp="...">
<text ... type="block">
<text ... type="code">
<text ... color="..." opacity="..." font="..." align="..." link="...">
<list xp="..." yp="..." sp="...">
<list ... type="bullet">
<list ... type="number">
<list ... color="..." opacity="..." font="..." align="..." link="...">

Common Attributes for text and list
xp
yp
sp
type
align
color
opacity
font
link
horizontal percentage
vertical percentage
font size percentage
"bullet", "number" (list), "block", "code" (text)
"left", "middle", "end"
SVG names ("maroon"), or RGB "rgb(127,0,0)"
percent opacity (0-100, transparent - opaque)
"sans", "serif", "mono"
URL

Graphics Markup
<line xp1="5" yp1="75" xp2="20" yp2="70" sp="0.2"/>
<rect xp="10" yp="60" wp="15" hr="66.6" color="red"/>
<rect xp="15" yp="55" wp="10" hr="100" color="blue" opacity="30"/>
<ellipse xp="10" yp="35" wp="15" hr="66.66" color="green"/>
<ellipse xp="15" yp="30" wp="10" hr="100" color="blue" opacity="30"/>
<curve xp1="5" yp1="10" xp2="15" yp2="20" xp3="15" yp3="10" sp="0.3" color="red"/>
<arc xp="22" yp="10" wp="10" wp="10" a1="0" a2="180" sp="0.2" color="blue"/>

Percent Grid
10 20 30 40 50 60 70 80 90
10
20
30
40
50
60
70
80
90

Percentage-based layout
Hello
10%, 50% 50%, 50% 90%, 50%

package main
import (
"log"
"github.com/ajstarks/deck"
)
func main() {
presentation, err := deck.Read("deck.xml", 1024, 768) // open the deck
if err != nil {
log.Fatal(err)
}
for _, slide := range presentation.Slide { // for every slide...
for _, t := range slide.Text { // process the text elements
x, y, size := deck.Dimen(presentation.Canvas, t.Xp, t.Yp, t.Sp)
slideText(x, y, size, t)
}
for _, l := range slide.List { // process the list elements
x, y, size := deck.Dimen(presentation.Canvas, l.Xp, l.Yp, l.Sp)
slideList(x, y, size, l)
}
}
}
A Deck Client

Process deck code
interactive
PDF
SVG

func main() {
benchmarks := []Bardata{
{"Macbook Air", 154.701},
{"MacBook Pro (2008)", 289.603},
{"BeagleBone Black", 2896.037},
{"Raspberry Pi", 5765.568},
}
ts := 2.5
hts := ts / 2
x := 10.0
bx1 := x + (ts * 12)
bx2 := bx1 + 50.0
y := 60.0
maxdata := 5800.0
linespacing := ts * 2.0
text(x, y+20, "Go 1.1.2 Build and Test Times", ts*2, "black")
for _, data := range benchmarks {
text(x, y, data.label, ts, "rgb(100,100,100)")
bv := vmap(data.value, 0, maxdata, bx1, bx2)
line(bx1, y+hts, bv, y+hts, ts, "lightgray")
text(bv+0.5, y+(hts/2), fmt.Sprintf("%.1f", data.value), hts, "rgb(127,0,0)")
y -= linespacing
}
}
Generating a Barchart

Go 1.1.2 Build and Test Times
Macbook Air 154.7
MacBook Pro (2008) 289.6
BeagleBone Black 2896.0
Raspberry Pi 5765.6
$ (echo '<deck><slide>'; go run deckbc.go; echo '</slide></deck>')

go get github.com/ajstarks/deck/cmd/vgdeck
go get github.com/ajstarks/deck/cmd/pdfdeck
go get github.com/ajstarks/deck/cmd/svgdeck

pdfdeck [options] file.xml...
-sans, -serif, -mono [font] specify fonts
-pagesize [w,h, or Letter, Legal, Tabloid, A2-A5, ArchA, Index, 4R, Widescreen]
-stdout (output to standard out)
-outdir [directory] directory for PDF output
-fontdir [directory] directory containing font information
-author [author name] set the document author
-title [title text] set the document title
-grid [percent] draw a percent grid on each slide

svgdeck [options] file.xml...
-sans, -serif, -mono [font] specify fonts
-pagesize [Letter, Legal, A3, A4, A5]
-pagewidth [canvas width]
-pageheight [canvas height]
-stdout (output to standard out)
-outdir [directory] directory for PDF output
-title [title text] set the document title
-grid [percent] draw a percent grid on each slide

vgdeck [options] file.xml...
-loop [duration] loop, pausing [duration] between slides
-slide [number] start at slide number
-w [width] canvas width
-h [height] canvas height
-g [percent] draw a percent grid

vgdeck Commands
Next slide
Previous slide
First slide
Last slide
Reload
X-Ray
Search
Save
Quit
+, Ctrl-N, [Return]
-, Ctrl-P, [Backspace]
^, Ctrl-A
$, Ctrl-E
r, Ctrl-R
x, Ctrl-X
/, Ctrl-F [text]
s, Ctrl-S
q

Deck Web API sex -dir [start dir] -listen [address:port] -maxupload [bytes]
GET
GET
GET
POST
POST
POST
DELETE
POST
POST
POST
POST
/
/deck/
/deck/?filter=[type]
/deck/content.xml?cmd=1s
/deck/content.xml?cmd=stop
/deck/content.xml?slide=[num]
/deck/content.xml
/upload/ Deck:content.xml
/table/ Deck:content.txt
/table/?textsize=[size]
/media/ Media:content.mov
List the API
List the content on the server
List content filtered by deck, image, video
Play a deck with the specified duration
Stop playing a deck
Play deck starting at a slide number
Remove content
Upload content
Generate a table from a tab-separated list
Specify the text size of the table
Play the specified video

deck [command] [argument]
deck play file [duration]
deck stop
deck list [deck|image|video]
deck upload file...
deck remove file...
deck video file
deck table file [textsize]
Play a deck
Stop playing a deck
List contents
Upload content
Remove content
Play video
Make a table
$ deck upload *.jpg
$ mkpicdeck *.jpg | deck upload /dev/stdin
$ deck play stdin
# upload images
# generate the slide show deck
# play it

Display
Server
HDMI
Good Design
Controller
> list
> upload
> play/stop
> delete
RESTful API
is innovative
makes a product useful
is aesthetic
makes a product understandable
is unobtrusive
is honest
is long-lasting
is thorough down to the last detail
is environmentally-friendly
is as little design as possible

Footer (bottom 20%)
Header (top 20%)
Summary
(30%)
Detail
(70%)

BOS
SFO
Virgin America 351
Gate B38
8:35am
On Time

JFK
IND
US Airways 1207
Gate C31C
5:35pm
Delayed

AAPL
AMZN
GOOG
503.73
274.03
727.58
-16.57 (3.18%)
+6.09 (2.27%)
-12.41 (1.68%)

Tree and Sky Rocks
Two Columns
One
Two
Three
Four
Five
Six
Seven
Eight

go
build
clean
env
fix
fmt
get
install
list
run
test
tool
version
vet
compile packages and dependencies
remove object files
print Go environment information
run go tool fix on packages
run gofmt on package sources
download and install packages and dependencies
compile and install packages and dependencies
list packages
compile and run Go program
test packages
run specified go tool
print Go version
run go tool vet on packages

Can't buy me love Bliss
Misery We have each other
BetterWorse
Rich
Poor

Code Output
package main
import (
"github.com/ajstarks/svgo"
"os"
)
func main() {
canvas := svg.New(os.Stdout)
width, height := 500, 500
a, ai, ti := 1.0, 0.03, 10.0
canvas.Start(width, height)
canvas.Rect(0, 0, width, height)
canvas.Gstyle("font-family:serif;font-size:144pt")
for t := 0.0; t <= 360.0; t += ti {
canvas.TranslateRotate(width/2, height/2, t)
canvas.Text(0, 0, "i", canvas.RGBA(255, 255, 255, a))
canvas.Gend()
a -= ai
}
canvas.Gend()
canvas.End()
}

A few months ago, I had a look at the brainchild of a few serious
heavyweights working at Google. Their project, the Go programming
language, is a static typed, c lookalike, semicolon-less, self
formatting, package managed, object oriented, easily parallelizable,
cluster fuck of genius with an unique class inheritance system.
It doesn't have one.

The Go Programming Language
Andrew Mackenzie-Ross, OBJECTIVE-C LESSONS FROM GO
is a static typed,
c lookalike,
semicolon-less,
self formatting,
package managed,
object oriented,
easily parallelizable,
cluster fuck of genius
with an unique class inheritance system.

The Go Programming Language
It doesn't have one.
Andrew Mackenzie-Ross, OBJECTIVE-C LESSONS FROM GO
is a static typed, c lookalike, semicolon-less, self formatting,
package managed, object oriented, easily parallelizable,
cluster fuck of genius with an unique class inheritance system.

So, the next time you're about to
make a subclass, think hard and
ask yourself
what would Go do
Andrew Mackenzie-Ross, http://pocket.co/sSc56

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.
Less is exponentially more
Rob Pike

You must not blame me if I do talk to the clouds.

FOR, LO,
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.
Song of Solomon 2:11-12

Genesis 3
Now the serpent was more subtil than any beast of the
field which the LORD God had made. And he said unto
the woman, Yea, hath God said, Ye shall not eat of every
tree of the garden? And the woman said unto the serpent,
We may eat of the fruit of the trees of the garden: But
of the fruit of the tree which is in the midst of the garden,
God hath said, Ye shall not eat of it, neither shall ye touch
it, lest ye die. And the serpent said unto the woman, Ye
shall not surely die: For God doth know that in the day
ye eat thereof, then your eyes shall be opened, and ye
shall be as gods, knowing good and evil.

Dieter Rams
Good Design
is innovative
is aesthetic
is unobtrusive
is honest
is long-lasting
is environmentally-friendly

is innovative
is aesthetic
is unobtrusive
is long lasting
is environmentally friendly
Good Design

is innovative
is aesthetic
is unobtrusive
is long lasting
is environmentally friendly
is as little design as possibleGood Design

github.com/ajstarks/deck
ajstarks@gmail.com
@ajstarks

Anthony Starks - deck

More Related Content

Viewers also liked (9)

Similar to Anthony Starks - deck (20)

Recently uploaded (20)

Anthony Starks - deck