SVGo Workshop: 2011

An introduction to SVGo, includes a introduction to the Go programming language, a library overview, sketching with code with numerous examples, and drawing pictures from Internet services

Transcript

1. Programming  Pictures Anthony  Starks SVG  Open  2011  Workshop
2. A  Li=le  Go Library  Overview Sketching  with  code Pictures
3. A  Li=le  Go Library  Overview Sketching  with  code Pictures
4. Go  Fundamentals:  program  structure package main import ( "pkg" ) func foo(x, y int) int { ... } // start here func main() { z := foo(10, 20) pkg.Stuff(z) }
5. Go  Fundamentals:  variables  and  declaraEons var ( number,i,j int big float64 = 12345678.90 things = []string{"one", "two"} ) foo := 10 bar := 20.0 baz := `SVG is "really" cool`
6. Go  Fundamentals:  if  and  loop if SVGisCool { ... } else { ... } for t:= 0.0; t <= 360.0; t += 60.0 { ... }
7. A  Li=le  Go Library  Overview Sketching  with  code Pictures
9. Rect(100,  200,  250,  125,"fill:gray;  stroke:blue") object arguments CSS  style objects,  API  and  output <rect  x="100"  y="200"   width="250"  height="125"   style="fill:gray;  stroke:blue"/> (100,200) 250 125
10. Rect(100,  200,  250,  125, object arguments objects,  API  and  output `id="box"`,  `fill="gray"`,  `stroke="blue"`) <rect  x="100"  y="200" width="250"  height="125" id="box"  fill="gray"  stroke="blue"/> a=ributes (100,200) 250 125
11. Structure,  Metadata,  Links New(w  io.Writer) Specify  the  desEnaEon  for  the  generated  code Start(w,  h  int,  opEons  ...string) Begin  the  SVG  document,  with  opEons Startview(w,  h,  minx,  miny,  vw,  vh  int) Begin  the  document  with  a  viewport Group(s  ...string)/Gend() Begin  a  group  with  arbitrary  a=ributes Gid(id  string)/Gend() Begin/end  a  group  with  an  id Gstyle(s  string)/Gend() Begin/end  a  group  style ClipPath(s  ...string)/ClipEnd() Begin/end  ClipPath Def(s  string)/DefEnd() Begin/end  definiEon  block Title(s  string) Specify  the  document  Etle Desc(s  string) Specify  the  document  descripEon Link(href,  Etle  string)/LinkEnd() Link  to  content  between  Link  and  LinkEnd Use(x,  y  int,  link  string,  style  ...string) Use  previously  defined  content End() End  the  SVG  document
12. Shapes CenterRect(x,  y,  w,  h  int,  s  ...string) Rect(x,  y,  w,  h  int,  s  ...string) Polygon(x,  y  []int,    s  ...string) Ellipse(x,  y,  rx,  ry  int,  s  ...string) Circle(x,  y,  r  int,    s  ...string) Roundrect(x,  y,  w,  h,  rx,  ry  int,  s  ...string) Square(x,  y,  w  int,  s  ...string)
13. Lines,  Curves,  and  Path Polyline(x,  y  []int,  s  ...string) Line(x1,  y1,  x2,  y2  int,  s  ...string) Arc(sx  sy,  ax,  ay,  r  int,  large,  sweep  bool,  ex  ey  int,  s  ...string) Bezier(sx,  sy,  cx,  cy,  px,  py,  ex,  ey  int,  s  ...string) Path(d  string,  s  ...string) Qbez(sx,  sy,  cx,  cy,  ex,  ey  int,  s  ...string)
14. Transforms SkewX(a  float64) SkewXY(ax,  ay  float64) SkewY(a  float64) Scale(n  float64) ScaleXY(dx,  dy  float64) Translate(x,  y  int) Rotate(r  float64) RotateTranslate(x,  y  int,  r  float64) TranslateRotate(x,  y  int,  r  float64) Gtransform(s  string)
15. Textpath(t,  pathid  string,  s  ...string) Text(x,  y  int,  t  string,  s  ...string) Image(x,  y,  w,  h  int,  link  string,  s  ...string) Textlines(x,  y  int,  s  []string,  size,  spacing  int,  fill,  align  string) Text  and  Image
16. Gradients Offset  uint8 Color  string Opacity  float64 Offcolor LinearGradient(id  string,  x1,  y1,  x2,  y2  uint8,  sc  []Offcolor) RadialGradient(id  string,  cx,  cy,  r,  fx,  fy  uint8,  sc  []Offcolor)
17. Colors,  Grid RGB(r,  g,  b  int) 44 77 232 ⟶ RGBA(r,  g,  b  int,  alpha  float64) .33 ⟶ 44 77 232 Grid(x,  y,  w,  h,  n  int,  s  ...string)
18. ScripEng canvas.Start(500, 500, `onload="Startup()"`) canvas.Script("application/javascript", "http://example.com/myscript.js") canvas.Rect(10, 10, 100, 200) canvas.End() 1 2 3 4 function StartUp() { ... } function doStuff(element) { ... } example.com/myscript.js 1 2 3 4 Begin  the  document,  load  your  funcEon   specify  the  script,  by  reference specify  SVG  elements,  operate  on  these end  the  SVG  document
19. A  Li=le  Go Library  Overview Sketching  with  code Pictures
20. SVGo  Hello  world
24. using  goplay  and  a  browser  to  sketch  with  code
25. inspecEng  the  generated  code
26. A  Li=le  Go Library  Overview Sketching  with  code Pictures
27. Bugdriod
28. Arc Circle Line Rect Roundrect Line fill:rgb(164,198,57) Scale
59. Pictures  from  the  Internet
60. <?xml  version="1.0"  encoding="ug-­‐8"  ?> <rsp  stat="ok"> <photos  page="1"  pages="377728"  perpage="50"  total="18886368">      <photo  id="6161689323"  owner="30858303@N04"                      secret="62b5d50e76"  server="6171"  farm="7"                      Etle="Los  Urros  (Sunrise)"  ispublic="1"  isfriend="0"  isfamily="0"  />      <photo  id="6145252600"  owner="29609591@N08"                      secret="306ae87341"  server="6088"  farm="7"                      Etle="Ardnamurchan  Lighthouse"  ispublic="1"  isfriend="0"  isfamily="0"/>                  .... </photos> </rsp> $ flickr50 beach h=p://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=...&text=beach&per_page=50&sort=interesEngness-­‐desc 2 1 3 4 command flickr  request  URL flickr  XML  response Picture 1 3 4 2
61. define  the  input  data  structures read  the  input parse  the  input  into  the  structures draw read/parse/draw  pa=ern
62. package main import ( "os" "http" "url" "xml" "fmt" "github.com/ajstarks/svgo" ) type FlickrResp struct { Stat string `xml:"attr"` Photos Photos } type Photos struct { Photo []Photo } type Photo struct { Id string `xml:"attr"` Secret string `xml:"attr"` Server string `xml:"attr"` Farm string `xml:"attr"` Title string `xml:"attr"` } imports data  structures
63. var ( width = 805 height = 500 canvas = svg.New(os.Stdout) ) const ( apifmt = "http://api.flickr.com/services/rest/?method=%s&api_key=%s&%s=%s&per_page=50&sort=interestingness-desc" urifmt = "http://farm%s.static.flickr.com/%s/%s.jpg" apiKey = "...your key here..." textStyle = "font-family:Calibri,sans-serif; font-size:48px; fill:white; text-anchor:start" imageWidth = 75 imageHeight = 75 ) Variables  and  constants
64. make  the  image  grid  from  the  XML  response // FlickrAPI calls the API given a method with single name/value pair func flickrAPI(method, name, value string) string { return fmt.Sprintf(apifmt, method, apiKey, name, value) } // makeURI converts the elements of a photo into a Flickr photo URI func makeURI(p Photo, imsize string) string { im := p.Id + "_" + p.Secret if len(imsize) > 0 { im += "_" + imsize } return fmt.Sprintf(urifmt, p.Farm, p.Server, im) } // imageGrid reads the response from Flickr, and creates a grid of images func imageGrid(f FlickrResp, x, y, cols, gutter int, imgsize string) { if f.Stat != "ok" { fmt.Fprintf(os.Stderr, "%v\n", f) return } xpos := x for i, p := range f.Photos.Photo { if i%cols == 0 && i > 0 { xpos = x y += (imageHeight + gutter) } canvas.Link(makeURI(p, ""), p.Title) canvas.Image(xpos, y, imageWidth, imageHeight, makeURI(p, "s")) canvas.LinkEnd() xpos += (imageWidth + gutter) } }
65. // fs calls the Flickr API to perform a photo search func fs(s string) { var f FlickrResp r, weberr := http.Get(flickrAPI("flickr.photos.search", "text", s)) if weberr != nil { fmt.Fprintf(os.Stderr, "%v\n", weberr) return } defer r.Body.Close() xmlerr := xml.Unmarshal(r.Body, &f) if xmlerr != nil || r.StatusCode != http.StatusOK { fmt.Fprintf(os.Stderr, "%v (status=%d)\n", xmlerr, r.StatusCode) return } canvas.Title(s) imageGrid(f, 5, 5, 10, 5, "s") canvas.Text(20, height-30, s, textStyle) } // for each search term on the commandline, create a photo grid func main() { for i := 1; i < len(os.Args); i++ { canvas.Start(width, height) canvas.Rect(0, 0, width, height, "fill:black") fs(url.QueryEscape(os.Args[i])) canvas.End() } } Call  the  API  from  the  main  funcEon
66. have  fun  programming  pictures Contact ajstarks@gmail.com Repository h=ps://github.com/ajstarks/svgo Examples h=p://flic.kr/s/aHsjpMnssp Go  Programming  Language h=p://golang.org