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 ...
Elements
Hello, World
A block of text, word-wrapped to a specified
width. You may specify size, font, color,
and opacity.

package ...
bullet

plain

number

Point A

First item

1. This

Point B

Second item

2. That

Point C

The third item

3. The other
...
height

x, y

width

<image .../>
height (relative
to element
or canvas
width)

x, y

width

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

x, y

width

<ellipse .../>
end

start

<line .../>
angle2 (90 deg)

x, y

angle1 (0 deg)

<arc .../>
control

start

end

<curve .../>
Markup and Layout
Start the deck

<deck>

Set the canvas size

<canvas width="1024" height="768" />

Begin a slide

<slide bg="white" fg="bl...
Deck uses these elements

text, list, image
line, rect, ellipse
arc, curve

Desk
Text and List Markup

Position, size

<text xp="..." yp="..." sp="...">

Block of text

<text ... type="block">

Lines of ...
Common Attributes for text and list

xp

horizontal percentage

yp

vertical percentage

sp

font size percentage

type

"...
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"/...
10

20

30

40

50

60

90

80

70

60

50

40

30

20

10

Percent Grid

70

80

90
10%, 50%

50%, 50%

Hello

Percentage-based layout

90%, 50%
bullet

plain

number

Point A

First item

1. This

Point B

Second item

2. That

Point C

The third item

3. The other
...
Clients
package main
import (
"log"
"github.com/ajstarks/deck"
)
func main() {
presentation, err := deck.Read("deck.xml", 1024, 76...
interactive

Process

deck code

PDF

SVG
func main() {
benchmarks := []Bardata{
{"Macbook Air", 154.701},
{"MacBook Pro (2008)", 289.603},
{"BeagleBone Black", 289...
Go 1.1.2 Build and Test Times
Macbook Air
MacBook Pro (2008)
BeagleBone Black
Raspberry Pi

154.7
289.6

$ (echo '<deck><s...
go get github.com/ajstarks/deck/cmd/vgdeck

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

go get github.com/ajstarks/deck/c...
pdfdeck [options] file.xml...
-sans, -serif, -mono [font] specify fonts
-pagesize [w,h, or Letter, Legal, Tabloid, A2-A5, ...
svgdeck [options] file.xml...
-sans, -serif, -mono [font] specify fonts
-pagesize [Letter, Legal, A3, A4, A5]
-pagewidth [...
vgdeck [options] file.xml...
-loop [duration] loop, pausing [duration] between slides
-slide [number] start at slide numbe...
vgdeck Commands
+, Ctrl-N, [Return]

Next slide

-, Ctrl-P, [Backspace]

Previous slide

^, Ctrl-A

First slide

$, Ctrl-E...
Deck Web API

sex -dir [start dir] -listen [address:port] -maxupload [bytes]

GET

/

List the API

GET

/deck/

List the ...
deck [command] [argument]
deck play file [duration]

Play a deck

deck stop

Stop playing a deck

deck list [deck|image|vi...
Display

is innovative
makes a product useful

Server

is aesthetic
makes a product understandable
is unobtrusive

Good De...
Design Examples
hello, world
Top

Left

Right

Bottom
20%

30%

70%

20%
Header (top 20%)

Summary
(30%)

Detail
(70%)

Footer (bottom 20%)
bullet

plain

number

Point A

First item

1. This

Point B

Second item

2. That

Point C

The third item

3. The other
...
BOS
SFO

Virgin America 351
Gate B38
8:35am
On Time
JFK
IND

US Airways 1207
Gate C31C
5:35pm
Delayed
AAPL

503.73

-16.57 (3.18%)

AMZN

274.03

+6.09 (2.27%)

GOOG

727.58

-12.41 (1.68%)
Two Columns

One

Five

Two

Six

Three

Seven

Four

Eight

Tree and Sky

Rocks
build
clean

remove object files

env

print Go environment information

fix

run go tool fix on packages

fmt

go

compil...
This is not a index card
Rich

Can't buy me love

Bliss

Worse

Better

Misery

We have each other

Poor
Code

package main
import (
"github.com/ajstarks/svgo"
"os"
)
func main() {
canvas := svg.New(os.Stdout)
width, height := ...
A few months ago, I had a look at the brainchild of
a few serious heavyweights working at Google. Their
project, the Go pr...
The Go Programming Language
is a static typed,
c lookalike,
semicolon-less,
self formatting,
package managed,
object orien...
The Go Programming Language
is a static typed,
c lookalike,
semicolon-less,
self formatting,
package managed,
object orien...
The Go Programming Language

is a static typed, c lookalike, semicolon-less, self formatting,
package managed, object orie...
So, the next time you're about
to make a subclass, think hard
and ask yourself

what would Go do

Andrew Mackenzie-Ross, h...
Python and Ruby programmers come to
Go because they don't have to surrender
much expressiveness, but gain performance
and ...
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...
Good Design

is innovative
makes a product useful
is aesthetic
makes a product understandable
is unobtrusive
is honest
is ...
github.com/ajstarks/deck

ajstarks@gmail.com
@ajstarks
Upcoming SlideShare
Loading in …5
×

Deck: A Go Package for Presentations

501
-1

Published on

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.

Also included is a REST API for listing content, uploading, stopping, starting and removing decks, generating tables, and playing video.

All layout in done in terms of percentages, using a coordinate system with the origin (0%, 0%) at the lower left. The x (horizontal) direction increases to the right, with the y (vertical) direction increasing to upwards. For example, to place an element in the middle of the canvas, specify xp="50" yp="50". To place an element one-third from the top, and one-third from the bottom: xp="66.6" yp="33.3".

The size of text is also scaled to the width of the canvas. For example sp="3" is a typical size for slide headings. The dimensions of graphical elements (width, height, stroke width) are also scaled to the canvas width.

The content of the slides are automatically scaled based on the specified canvas size (sane defaults are should be set the clients, if dimensions not specified)

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
501
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Deck: A Go Package for Presentations

  1. 1. Deck a Go package for presentations
  2. 2. 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
  3. 3. Elements
  4. 4. 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>
  5. 5. bullet plain number Point A First item 1. This Point B Second item 2. That Point C The third item 3. The other Point D the last thing 4. One more <list>...</list>
  6. 6. height x, y width <image .../>
  7. 7. height (relative to element or canvas width) x, y width <rect .../>
  8. 8. height (relative to element or canvas width) x, y width <ellipse .../>
  9. 9. end start <line .../>
  10. 10. angle2 (90 deg) x, y angle1 (0 deg) <arc .../>
  11. 11. control start end <curve .../>
  12. 12. Markup and Layout
  13. 13. Start the deck <deck> Set the canvas size <canvas width="1024" height="768" /> Begin a slide <slide bg="white" fg="black"> Place an image <image xp="70" yp="60" width="256" height="179" name="work.png" caption="Desk"/> Draw some text <text xp="20" yp="80" sp="3">Deck uses these elements</text> Make a bullet list <list xp="20" yp="70" sp="2" type="bullet"> <li>text, list, image</li> <li>line, rect, ellipse</li> <li>arc, curve</li> End the list </list> Draw a line <line xp1="20" yp1="10" xp2="30" yp2="10"/> Draw a rectangle <rect xp="35" yp="10" wp="4" hr="75" color="rgb(127,0,0)"/> Draw an ellipse <ellipse xp="45" yp="10" wp="4" hr="75" color="rgb(0,127,0)"/> Draw an arc <arc xp="55" yp="10" wp="4" hp="3" a1="0" a2="180" color="rgb(0,0,127)"/> Draw a quadratic bezier <curve xp1="60" yp1="10" xp2="75" yp2="20" xp3="70" yp3="10" /> End the slide End of the deck </slide> </deck> Anatomy of a Deck
  14. 14. Deck uses these elements text, list, image line, rect, ellipse arc, curve Desk
  15. 15. Text and List Markup Position, size <text xp="..." yp="..." sp="..."> Block of text <text ... type="block"> Lines of code <text ... type="code"> Attributes <text ... color="..." opacity="..." font="..." align="..."> Position, size <list xp="..." yp="..." sp="..."> Bullet list <list ... type="bullet"> Numbered list <list ... type="number"> Attributes <list ... color="..." opacity="..." font="..." align="...">
  16. 16. Common Attributes for text and list xp horizontal percentage yp vertical percentage sp font size percentage type "bullet", "number" (list), "block", "code" (text) align "left", "middle", "end" color SVG names ("maroon"), or RGB "rgb(127,0,0)" opacity percent opacity (0-100, transparent - opaque) font "sans", "serif", "mono"
  17. 17. 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"/>
  18. 18. 10 20 30 40 50 60 90 80 70 60 50 40 30 20 10 Percent Grid 70 80 90
  19. 19. 10%, 50% 50%, 50% Hello Percentage-based layout 90%, 50%
  20. 20. bullet plain number Point A First item 1. This Point B Second item 2. That Point C The third item 3. The other Point D the last thing 4. One more <list>...</list>
  21. 21. Clients
  22. 22. 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
  23. 23. interactive Process deck code PDF SVG
  24. 24. 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
  25. 25. Go 1.1.2 Build and Test Times Macbook Air MacBook Pro (2008) BeagleBone Black Raspberry Pi 154.7 289.6 $ (echo '<deck><slide>'; go run deckbc.go; echo '</slide></deck>') 2896.0 5765.6
  26. 26. go get github.com/ajstarks/deck/cmd/vgdeck go get github.com/ajstarks/deck/cmd/pdfdeck go get github.com/ajstarks/deck/cmd/svgdeck
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. vgdeck Commands +, Ctrl-N, [Return] Next slide -, Ctrl-P, [Backspace] Previous slide ^, Ctrl-A First slide $, Ctrl-E Last slide r, Ctrl-R Reload x, Ctrl-X X-Ray /, Ctrl-F [text] Search s, Ctrl-S Save q Quit
  31. 31. Deck Web API sex -dir [start dir] -listen [address:port] -maxupload [bytes] GET / List the API GET /deck/ List the content on the server GET /deck/?filter=[type] List content filtered by deck, image, video POST /deck/content.xml?cmd=1s Play a deck with the specified duration POST /deck/content.xml?cmd=stop Stop playing a deck POST /deck/content.xml?slide=[num] Play deck starting at a slide number DELETE /deck/content.xml Remove content POST /upload/ Deck:content.xml Upload content POST /table/ Deck:content.txt Generate a table from a tab-separated list POST /table/?textsize=[size] Specify the text size of the table POST /media/ Media:content.mov Play the specified video
  32. 32. deck [command] [argument] deck play file [duration] Play a deck deck stop Stop playing a deck deck list [deck|image|video] List contents deck upload file... Upload content deck remove file... Remove content deck video file Play video deck table file [textsize] Make a table $ deck upload *.jpg # upload images $ mkpicdeck *.jpg | deck upload /dev/stdin # generate the slide show deck $ deck play stdin # play it
  33. 33. Display is innovative makes a product useful Server is aesthetic makes a product understandable is unobtrusive Good Design is honest is long-lasting is thorough down to the last detail is environmentally-friendly is as little design as possible Controller > list > upload > play/stop > delete HDMI RESTful API
  34. 34. Design Examples
  35. 35. hello, world
  36. 36. Top Left Right Bottom
  37. 37. 20% 30% 70% 20%
  38. 38. Header (top 20%) Summary (30%) Detail (70%) Footer (bottom 20%)
  39. 39. bullet plain number Point A First item 1. This Point B Second item 2. That Point C The third item 3. The other Point D the last thing 4. One more <list>...</list>
  40. 40. BOS SFO Virgin America 351 Gate B38 8:35am On Time
  41. 41. JFK IND US Airways 1207 Gate C31C 5:35pm Delayed
  42. 42. AAPL 503.73 -16.57 (3.18%) AMZN 274.03 +6.09 (2.27%) GOOG 727.58 -12.41 (1.68%)
  43. 43. Two Columns One Five Two Six Three Seven Four Eight Tree and Sky Rocks
  44. 44. build clean remove object files env print Go environment information fix run go tool fix on packages fmt go compile packages and dependencies run gofmt on package sources get download and install packages and dependencies install compile and install packages and dependencies list list packages run compile and run Go program test test packages tool run specified go tool version print Go version vet run go tool vet on packages
  45. 45. This is not a index card
  46. 46. Rich Can't buy me love Bliss Worse Better Misery We have each other Poor
  47. 47. Code 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() } Output
  48. 48. 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.
  49. 49. 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. Andrew Mackenzie-Ross, OBJECTIVE-C LESSONS FROM GO
  50. 50. 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. Andrew Mackenzie-Ross, OBJECTIVE-C LESSONS FROM GO
  51. 51. 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. Andrew Mackenzie-Ross, OBJECTIVE-C LESSONS FROM GO
  52. 52. 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
  53. 53. 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
  54. 54. You must not blame me if I do talk to the clouds.
  55. 55. 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
  56. 56. Good Design 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 Dieter Rams
  57. 57. github.com/ajstarks/deck ajstarks@gmail.com @ajstarks
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×