Slide 1

Slide 1 text

The other side of Go Programming Pictures Anthony Starks

Slide 2

Slide 2 text

Go is great in the back end

Slide 3

Slide 3 text

But sometimes it's about the picture

Slide 4

Slide 4 text

API Design Client Program Design Visual Design and Relationships Why Go?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Element Arguments Rect (100,200,250,125) (100, 200) 250 125

Slide 7

Slide 7 text

Element Arguments CSS Style Rect (100,200,250,125, "fill:gray;stroke:blue") (100, 200) 250 125

Slide 8

Slide 8 text

Element Arguments Attributes Rect (100,200,250,125, `id="box"`, `fill="gray"`, `stroke="blue"`) (100, 200) 250 125

Slide 9

Slide 9 text

package main import ( "os" "github.com/ajstarks/svgo" ) func main() { width := 960 height := 540 canvas := svg.New(os.Stdout) canvas.Start(width, height) canvas.Rect(0, 0, width, height, "fill:black") canvas.Circle(width/2, height, width/2, "fill:rgb(44,77,232)") canvas.Text(width/2, height/2, "hello, world", "fill:white;font-size:60pt;font-family:serif;text-anchor:middle") canvas.End() }

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Scale Roundrect Circle Line Rect Line Arc fill:rgb(164,198,57)

Slide 12

Slide 12 text

const defaultstyle = "fill:rgb(127,0,0)" func circle(w http.ResponseWriter, req *http.Request) { w.Header().Set("Content-Type", "image/svg+xml") s := svg.New(w) s.Start(500, 500) s.Title("Circle") s.Circle(250, 250, 125, shapestyle(req.URL.Path)) s.End() } func shapestyle(path string) string { i := strings.LastIndex(path, "/") + 1 if i > 0 && len(path[i:]) > 0 { return "fill:" + path[i:] } return defaultstyle }

Slide 13

Slide 13 text

clock funnel rotext flower rshape cube mondrian lewitt face pacman tux concentric http://ajstarks.org:1958/{thing}/

Slide 14

Slide 14 text

/pacman/?angle=20 /pacman/?angle=40 /pacman/?angle=70

Slide 15

Slide 15 text

Read/Parse/Draw Pattern

Slide 16

Slide 16 text

Data Picture This is small This is medium This is large

Slide 17

Slide 17 text

Imports Data Structures Flags and Main Read the Input Parse and Load Draw package main import ( "encoding/xml" "flag" "fmt" "io" "os" "github.com/ajstarks/svgo" ) type Thing struct { Top int `xml:"top,attr"` Left int `xml:"left,attr"` Sep int `xml:"sep,attr"` Item []item `xml:"item"` } type item struct { Width int `xml:"width,attr"` Height int `xml:"height,attr"` Name string `xml:"name,attr"` Color string `xml:"color,attr"` Text string `xml:",chardata"` } var ( width = flag.Int("w", 1024, "width") height = flag.Int("h", 768, "height") canvas = svg.New(os.Stdout) ) func main() { flag.Parse() for _, f := range flag.Args() { canvas.Start(*width, *height) dothing(f) canvas.End() } } func dothing(location string) { f, err := os.Open(location) if err != nil { fmt.Fprintf(os.Stderr, "%v\n", err) return } defer f.Close() readthing(f) } func readthing(r io.Reader) { var t Thing err := xml.NewDecoder(r).Decode(&t) if err != nil { fmt.Fprintf(os.Stderr, "%v\n", err) return } drawthing(t) } func drawthing(t Thing) { x := t.Left y := t.Top thingfmt := "font-size:%dpx;fill:%s" tfmt := "%s:%s/%s" for _, v := range t.Item { s := fmt.Sprintf(thingfmt, v.Width/2, v.Color) canvas.Circle(x, y, v.Height/4, "fill:"+v.Color) canvas.Text(x+t.Sep, y, fmt.Sprintf(tfmt, v.Name, v.Text, v.Color, s) y += v.Height } }

Slide 18

Slide 18 text

Source: AnandTech, April 14, 2015

Slide 19

Slide 19 text

SVGo Clients

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

f50 sunset https://api.flickr.com/services/rest/ ?method=flickr.photos.search &api_key=... &text=sunset &per_page=50 &sort=interestingness-desc ...

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

ti = 15 ti = 30 ti = 45 func main() { width := 200 height := 200 a := 1.0 ai := 0.03 ti := 15.0 canvas := svg.New(os.Stdout) canvas.Start(width, height) canvas.Rect(0, 0, width, height) canvas.Gstyle("font-family:serif;font-size:100pt") 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() }

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

package main import ( "bufio" "github.com/ajstarks/openvg" "os" ) func main() { width, height := openvg.Init() w2 := openvg.VGfloat(width / 2) h2 := openvg.VGfloat(height / 2) w := openvg.VGfloat(width) openvg.Start(width, height) // Start the picture openvg.BackgroundColor("black") // Black background openvg.FillRGB(44, 100, 232, 1) // Big blue marble openvg.Circle(w2, 0, w) // The "world" openvg.FillColor("white") // White text openvg.TextMid(w2, h2, "hello, world", "serif", width/10) // Greetings openvg.End() // End the picture bufio.NewReader(os.Stdin).ReadBytes('\n') // Pause until [RETURN] openvg.Finish() // Graphics cleanup }

Slide 49

Slide 49 text

OpenVG Functions Circle Ellipse Rect Roundrect Line Polyline Polygon (x, y, r VGfloat) (x, y, w, h VGfloat) (x, y, w, h VGfloat) (x, y, w, h, rw, rh VGfloat) (x1, y1, x2, y2 VGfloat) (x, y []VGfloat) (x, y []VGfloat) Arc Qbezier Cbezier Image Text TextMid TextEnd (x, y, w, h, sa, aext VGfloat) (sx, sy, cx, cy, ex, ey VGfloat) (sx, sy, cx, cy, px, py, ex, ey VGfloat) (x, y VGfloat, w, h int, s string) (x, y VGfloat, s, font string, size int) (x, y VGfloat, s, font string, size int) (x, y VGfloat, s, font string, size int)

Slide 50

Slide 50 text

Deck a Go package for presentations

Slide 51

Slide 51 text

Anatomy of a Deck Deck elements
  • text, list, image
  • line, rect, ellipse
  • arc, curve, polygon
  • 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 Draw a polygon End the slide End of the deck

    Slide 52

    Slide 52 text

    Dreams Deck elements text, list, image line, rect, ellipse arc, curve, polygon

    Slide 53

    Slide 53 text

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

    Slide 54

    Slide 54 text

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

    Slide 55

    Slide 55 text

    Landscape Portrait Scaling the canvas

    Slide 56

    Slide 56 text

    Process deck code interactive PDF SVG

    Slide 57

    Slide 57 text

    deck/generate text and list functions Text TextBlock TextMid TextEnd Code List (x, y float64, s, font string, size float64, color string, opacity ...float64) (x, y float64, s, font string, size, margin float64, color string, opacity ...float64) (x, y float64, s, font string, size float64, color string, opacity ...float64) (x, y float64, s, font string, size float64, color string, opacity ...float64) (x, y float64, s string, size, margin float64, color string, opacity ...float64) (x, y, size float64, items []string, ltype, font, color string)

    Slide 58

    Slide 58 text

    deck/generate graphic functions Image Arc Circle Ellipse Square Rect Curve Line Polygon (x, y float64, w, h int, name string) (x, y, w, h, size, a1, a2 float64, color string, opacity ...float64) (x, y, w float64, color string, opacity ...float64) (x, y, w, h float64, color string, opacity ...float64) (x, y, w float64, color string, opacity ...float64) (x, y, w, h float64, color string, opacity ...float64) (x1, y1, x2, y2, x3, y3, size float64, color string, opacity ...float64) (x1, y1, x2, y2, size float64, color string, opacity ...float64) (x, y []float64, color string, opacity ...float64)

    Slide 59

    Slide 59 text

    func main() { deck := generate.NewSlides(os.Stdout, 1600, 900) // 16x9 deck to stdout deck.StartDeck() // start the deck deck.StartSlide("rgb(180,180,180)") // ... deck.EndSlide() deck.StartSlide() // ... deck.EndSlide() deck.StartSlide("black", "white") // ... deck.EndSlide() deck.EndDeck() // end the deck }

    Slide 60

    Slide 60 text

    // Text alignment deck.StartSlide("rgb(180,180,180)") deck.Text(50, 80, "Left", "sans", 10, "black") deck.TextMid(50, 50, "Center", "sans", 10, "gray") deck.TextEnd(50, 20, "Right", "sans", 10, "white") deck.Line(50, 100, 50, 0, 0.2, "black", 20) deck.EndSlide()

    Slide 61

    Slide 61 text

    // List items := []string{"First", "Second", "Third", "Fourth", "Fifth"} deck.StartSlide() deck.Text(10, 90, "Important Items", "sans", 5, "") deck.List(10, 70, 4, items, "bullet", "sans", "red") deck.EndSlide()

    Slide 62

    Slide 62 text

    // Picture with text annotation quote := "Yours is some tepid, off-brand, generic ‘cola’. " + "What I’m making is “Classic Coke”" person := "Heisenberg" deck.StartSlide("black", "white") deck.Image(50, 50, 1440, 900, "classic-coke.png") deck.TextBlock(10, 80, quote, "sans", 2.5, 30, "") deck.Text(65, 15, person, "sans", 1.2, "") deck.EndSlide()

    Slide 63

    Slide 63 text

    capgen slides.txt | pdfdeck ... > slides.pdf # Designing for People title A View of User Experience: Designing for People Anthony Starks / [email protected] / @ajstarks section Design gray white caption eames.png Ray Eames What works good is better than what looks good, because what works good lasts.

    Slide 64

    Slide 64 text

    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

    Slide 65

    Slide 65 text

    Design Examples

    Slide 66

    Slide 66 text

    Bottom Top Left Right

    Slide 67

    Slide 67 text

    10% 10% 30% 70%

    Slide 68

    Slide 68 text

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

    Slide 69

    Slide 69 text

    My Story Section A. Person, November 2015 One Two Three Four Five Six

    Slide 70

    Slide 70 text

    Document Links Add web and mailto links with the link attribute of the text element. Once rendered as a PDF, clicking on the link opens the default browser or email client. A Guide to Deck Page 10

    Slide 71

    Slide 71 text

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

    Slide 72

    Slide 72 text

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

    Slide 73

    Slide 73 text

    AAPL 119.08 3.58 (3.10%) AMZN 599.03 35.12 (6.23%) FB 102.19 2.52 (2.53%) GOOG 702.00 50.21 (7.70%) MSFT 52.87 4.84 (10.08%) 2015-10-24 11:56:35

    Slide 74

    Slide 74 text

    AAPL 114.55 -0.73 (-0.63%) AMZN 611.01 2.40 (0.39%) FB 103.70 -0.07 (-0.07%) GOOG 708.49 -4.29 (-0.60%) MSFT 53.69 -0.56 (-1.03%) 2015-10-28 00:39:19

    Slide 75

    Slide 75 text

    go build compile packages and dependencies clean remove object files doc show documentation for package or symbol env print Go environment information fix run go tool fix on packages fmt run gofmt on package sources generate generate Go files by processing source 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

    Slide 76

    Slide 76 text

    This is not a index card

    Slide 77

    Slide 77 text

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

    Slide 78

    Slide 78 text

    So, the next time you're about to make a subclass, think hard and ask yourself what would Go do Andrew Mackenzie-Ross

    Slide 79

    Slide 79 text

    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

    Slide 80

    Slide 80 text

    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

    Slide 81

    Slide 81 text

    What is it about Go?

    Slide 82

    Slide 82 text

    fmt

    Slide 83

    Slide 83 text

    func

    Slide 84

    Slide 84 text

    io.Writer io.Reader

    Slide 85

    Slide 85 text

    net/http

    Slide 86

    Slide 86 text

    encoding/xml encoding/json

    Slide 87

    Slide 87 text

    cgo

    Slide 88

    Slide 88 text

    The Community

    Slide 89

    Slide 89 text

    From: Russ Cox Subject: Re: [go-nuts] Visualizing Random Number Generators... Date: March 5, 2010 1:14:44 EST To: ajstarks are you going to share the library or just tease us with pictures? ;-)

    Slide 90

    Slide 90 text

    Thompson wanted to create a comfortable computing environment constructed according to his own design, using whatever means were available. Dennis M. Ritchie, “The Development of the C Language”

    Slide 91

    Slide 91 text

    Go is not the product of a Whiggish development process. We were just trying to get something that worked for us. Rob Pike, “Origin of Go’s interface design”, golang-nuts

    Slide 92

    Slide 92 text

    Making Tools

    Slide 93

    Slide 93 text

    Fun

    Slide 94

    Slide 94 text

    Reducing the distance from the idea to the picture

    Slide 95

    Slide 95 text

    No content

    Slide 96

    Slide 96 text

    Picasso Turing

    Slide 97

    Slide 97 text

    Thank you github.com/ajstarks @ajstarks [email protected] flickr.com/photos/ajstarks speakerdeck.com/ajstarks mindchunk.blogspot.com