Racket Libraries

Table of Contents

1 Drawing libraries

2 pict-lib

2.1 Constructors

  • text
  • hline, vline
  • frame
  • ellipse, circle, filled-ellipse, disk
  • rectangle, filled-rectangle
  • rounded-rectangle
  • filled-rounded-rectangle
  • bitmap: read a bitmap image
  • arrow, arrowhead

Use pin to create lines connecting picts

  • pin-line, pin-arrow-line, pin-arrows-line: add lines onto a pict. It finds positions in the src and dst picts, and can set angle to create curve

2.1.1 More constructors

  • cloud
  • file-icon
  • standard-fish
  • jack-o-lantern
  • angel-wing
  • desktop-machine
  • thermometer
  • face, face*

Balloon annotation

  • wrap-balloon
  • pin-wrap-balloon
  • pin-balloon
  • balloon
  • filled-flash
  • outline-flash


  • typeset-code
  • code
  • define-code
  • code-align: align code with pict
  • codeblock-pict: a block of code, seems to respect #lang option inside the code string, to decide lexer

code parameters

  • current-code-font
  • current-code-tt
  • current-code-line-sep
  • current-comment-color
  • current-keyword-color
  • current-id-color
  • current-literal-color
  • current-const-color
  • current-base-color
  • current-reader-forms: this should be able to define language
  • current-keyword-list
  • current-const-list
  • current-literal-list
  • code-colorize-enabled
  • code-italic-underscore-enabled
  • code-scripts-enabled

2.2 Combiners

  • various of append
    • syntax: v and h, then alignment
    • vl, vc, vr, ht, htl, hc, hbl, hb
    • v and h for vertical and horizontal
    • t,b for top, bottom
    • l,c,r for left, center, right
  • superimpose
    • Syntax: horizontal alignment, vertical alignment
    • lt,ltl,lc,lbl,lb,ct,ctl,cc,cbl,cb,rt,rtl,rc,rbl,rb
    • l,c,r for left, center, and right
    • t,b for top and bottom
  • pin
    • pin-over
    • pin-under
  • table

2.3 Adjusters

  • scale, scale-to-fit, scale/improve-new-text
  • rotate
  • ghost: does not draw (invisible), but use the size
  • cellophane: make is semi-transparent
  • clip, inset/clip
  • freeze: to bitmap

The followings can be used to specify parameters

  • linewidth
  • linestyle
  • colorize
  • black-and-white

2.4 Bounding box

  • inset
  • clip-decent
  • lift-above-baseline
  • drop-below-ascent
  • baseless
  • refocus: focus on the top most sub-pict
  • panorama: enclose all sub-picts
  • use-last, use-last*

2.5 Pict finder

  • with -find suffix
    • lt,ltl,lc,lbl,lb,ct,ctl,cc,cbl,cb,rt,rtl,rc,rbl,rb

2.6 Tree layout

tree-layout creates a layout containing edges. The layout can be rendered to pict by

  • naive-layered (seems to be good)
  • binary-tidier
  • hv-alternating

3 graph

This is a generic graphic library. graph is defined through a generic interface gen:graph, supporting the following methods:

  • has-vertex?
  • has-edge?
  • vertex=?
  • add-vertex!
  • remove-vertex!
  • rename-vertex!
  • add-edge!
  • remove-edge!
  • get-vertices
  • in-vertices
  • get-neighbors
  • in-neighbors
  • get-edges
  • in-edges
  • edge-weight
  • transpose
  • graph-copy
  • graph-union!

This actually is mostly not functional.

To construct a graph, use directed-graph or undirected-graph with list of edges represented as list of vertex, with first being the source, rest being target. These functions seems only support single target.

The library let you define vertex and edge properties, just like those in boost library. You can do bfs or dfs, shortest path, graph coloring, maximum flow.

Finally, you can call graphviz to convert the graph to a string of dot format. It cannot output a pict.

4 2htdp/image

This is teachpack of How to design program version 2. It provides several basic images, rotation, scale, flip, overlay.

Other interesting packages in this pack:

  • 2htdp/planetcute contains many images

4.1 Common Concepts

The length is measured in terms of pixels, angle means degree. When using names, both string and symbol are acceptable, and case-insensitive.

Mode can be 'solid or 'outline. The string format is also supported. Solid fills, outline only draws the outside line. A integer between 0 and 255 instead will indicate the transparency.

Color can be name or color structure. If the name is not recognized, no error is reported, and black is used. The complete list (plus transparent) is in the document of color-database<%>. This is an interface, defined in racket/draw.

The color structure is

(struct color (red green blue alpha))

In many places, the color also accepts a pen. pen is a structure. It seems only for drawing lines, so outline mode will support it. Its definition is

(struct pen (color width style cap join))
solid, dot, long-dash, short-dash, dot-dash
round, projecting, butt
round, bevel, miter

When doing alignment, you can use pinhole, only if all the images have a pinhole. You can add pinhole to image by

  • center-pinhole image
  • put-pinhole x y image
  • clear-pinhole

And retrieve pinhole by

  • pinhole-x
  • pinhole-y

4.2 basic shape

  • shape
    • (circle radius mode color)
    • (ellipse width height mode color)
    • triangle
      • (triangle side-length mode color)
      • right-triangle
      • isosceles-triangle
      • triangle/sss
    • square x
    • rectangle x y
    • rhombus x θ
    • star
      • star x
      • star-polygon
      • radial-star
    • polygon
      • regular-polygon
      • polygon
      • add-polygon
      • scene+polygon
  • line
    • (line x y color): draw a line from (0,0) to (x,y).
    • (add-line image x1 y1 x2 y2 color): add line to image, from (x1,y1) to (x2,y2)
    • add-curve
    • add-solid-curve
  • text
    • (text string font-size color)
    • text/font: this will use a complete font specification, including
      • face: which font name
      • family: default, script, modern, etc
      • style: normal, italic
      • weight: normal, bold, light
      • underline?: #t #f

4.3 Overlay

  • overlay accepts a sequence of images, with the first being on top. Images are aligned on their center.
  • overlay/align x-place y-place controls where to align the images.
    • x: left, right, middle, center, pinhole
    • y: top, bottom, middle, center, baseline, pinhole
  • overlay/offset i1 x y i2: moves i2 by (x,y) compared to (0,0), thus to down right
  • overlay/align/offset combines both options
  • overlay/xy: what's the difference from offset?
  • overlay/pinhole

There's also an underlay version that does the reverse order, for all above.

  • beside accepts images, and placing them in horizontal row, aligned on their centers
  • beside/align y
  • above: in a vertical row
  • above/align x

4.4 scene

Typically you place images on a scene. If an image is placed (using those place functions) or add lines (using scene+XXX) on scene, it is cropped based on the size of scene. You can still compose the image by overlay or add-line, but those does not respect the size of scene.

  • empty-scene x y color
  • place-image image x y scene: the (x,y) is according to the top-left corner of scene
  • place-image/align image
  • place-images: just a list of images and a list of positions
  • place-images/align
  • scene+line: add a line to the scene
  • scene+curve

4.5 transform

  • rotate angle image
  • scale factor image
  • scale/xy: using different factor for x and y
  • flip-horizontal image
  • flip-vertical image
  • crop x y width height image
  • crop/align
  • frame image: return an image with a black frame around the bounding box of the it. Even if the image might be a circle, the bounding box is still rectangle.
  • color-frame color image

4.6 bitmap

You can load a bit map file by (bitmap filename), or (bitmap/url url) to download from web. For a vector image you created in racket, you can "freeze" it to bitmap by freeze image.

Finally, you can save image to file by

  • save-image image filename [width height]: png
  • save-svg-image image filename [width height]: svg

4.7 properties

  • image-width
  • image-height
  • image-baseline

5 Networking

5.1 HTML parsing

The package is html-parsing. It has only one function, html->xexp.

The xexp is a list like this:

(*TOP* (html (head (title) (title "whatever"))
  (body "\n"
    (a (@ (href "url")) "link"))))

The xexp needs to use sxml (needs install) package to parse. sxpath is a function for XPath like query. Use like this

((sxpath '(html body table tr td a @ (*or* href title)))

sxpath itself returns a function, apply that function on an xexp data, a list will be returned for matched results.

  1. the xexp must begin with *TOP*, the query result will not have it. So if you want to parse it again, construct it by `(*TOP* ,x)
  2. the xpath starts from root (html)
  3. you can use '(// table) to query tables at arbitrary level

5.2 URL & HTTP

require the package net/url (needs install) and net/url-string. First, construct a url by string->url, then, open input port by get-pure-port, this is using GET method. The port can be used as input, e.g. port->string. How to download binary file, like pdf? It should be bytes streaming, so maybe

  • copy-port in out
  • port->bytes then write-bytes

The call/input-url URL connect handle will call handle on the port, and close the port on return. The connect is a procedure, e.g. get-pure-port.