1 Icons
1.1 What is an icon?
This section describes an ideal that DrRacket and its tools are steadily approaching.
As a first approximation, an icon is just a small bitmap%, usually with an alpha channel.
But an icon also communicates. Its shape and color are a visual metaphor for an action or a message. Icons should be easily recognizable, distinguishable, visually consistent, and metaphorically appropriate for the actions and messages they are used with. It can be difficult to meet all four requirements at once (“distinguishable” and “visually consistent’ are often at odds), but good examples, good abstractions, and an existing icon library help considerably.
Example: The Macro Stepper icon is composed by appending a text icon and a step icon to get . The syntax quote icon is the color that DrRacket colors syntax quotes by default. The step icon is colored like DrRacket colors identifier syntax by default, and is shaped using metaphors used in debugger toolbars, TV remotes, and music players around the world. It is composed of to connote starting and to connote immediately stopping.
It would not do to have just as the Macro Stepper icon: it would be too easily confused with the Debugger icon , especially for new users and people with certain forms of color-blindness, and thus fail to be distinguishable enough.
As another example, the Check Syntax icon connotes inspecting and passing. Note that the check mark is also the color of syntax.
1.2 About These Icons
> (require slideshow/pict images/icons/control images/icons/style)
> (pict->bitmap (cc-superimpose (bitmap (record-icon "forestgreen" 96 glass-icon-material)) (bitmap (step-icon light-metal-icon-color 48 metal-icon-material))))
All the icons in this collection are first drawn using standard dc<%> drawing commands. Then, to get lighting effects, they are turned into 3D objects and ray traced. Many are afterward composed to create new icons; for example, the stop-signs-icon superimposes three stop-sign-icons, and the magnifying-glass-icon is composed of three others (frame, glass and handle).
The ray tracer helps keep icons visually consistent with each other and with physical objects in day-to-day life. As an example of the latter, the record-icon, when rendered in clear glass, looks like the clear, round button on a Wii Remote. See the plt-logo and planet-logo functions for more striking examples.
When the rendering API is stable enough to publish, it will allow anyone who can draw a shape to turn that shape into a visually consistent icon.
As with any sort of rendering (such as SVG rendering), ray tracing takes time. For icons, this usually happens during tool or application start up. You can reduce the portion of start-up time taken by rendering to almost nothing by using the images/compile-time library to embed bitmaps directly into compiled modules.
1.3 Icon Style
(require images/icons/style) |
Use these constants and parameters to help keep icon sets visually consistent.
light-metal-icon-color : (or/c string? (is-a?/c color%))
=
"azure"
metal-icon-color : (or/c string? (is-a?/c color%))
=
"lightsteelblue"
dark-metal-icon-color : (or/c string? (is-a?/c color%))
=
"steelblue"
syntax-icon-color : (or/c string? (is-a?/c color%))
=
(make-object color% 76 76 255)
halt-icon-color : (or/c string? (is-a?/c color%))
=
(make-object color% 255 32 24)
run-icon-color : (or/c string? (is-a?/c color%))
=
"lawngreen"
Standard toolbar icon colors.Use syntax-icon-color in icons that connote macro expansion or syntax. Example:
> (step-icon syntax-icon-color 32) Use halt-icon-color in icons that connote stopping or errors. Example:
> (stop-icon halt-icon-color 32) Use run-icon-color in icons that connote executing programs or evaluation. Examples:
> (play-icon run-icon-color 32) > (require images/icons/stickman)
> (running-stickman-icon 0.9 run-icon-color "white" run-icon-color 32) For new users and for accessibility reasons, do not try to differentiate icons for similar functions only by color.
(default-icon-height) → (and/c rational? (>=/c 0)) (default-icon-height height) → void? height : (and/c rational? (>=/c 0))
=
24
The height of DrRacket’s standard icons.
(toolbar-icon-height) → (and/c rational? (>=/c 0)) (toolbar-icon-height height) → void? height : (and/c rational? (>=/c 0))
=
16
The height of DrRacket toolbar icons.Use (toolbar-icon-height) as the height argument for common icons that will be used in toolbars, status bars, and buttons.
(When making an icon for DrRacket’s main toolbar, try to keep it nearly square so that it will not take up too much horizontal space when the toolbar is docked vertically. If you cannot, as with the Macro Stepper, send a thinner icon as the alternate-bitmap argument to a switchable-button%.)
plastic-icon-material : deep-flomap-material-value?
glass-icon-material : deep-flomap-material-value?
metal-icon-material : deep-flomap-material-value?
Plastic is opaque and reflects a little more than glass.
Glass is transparent but frosted, so it scatters refracted light. It has the high refractive index of cubic zirconia, or fake diamond. The “glassy look” cannot actually be achieved using glass.
Metal reflects the most, its specular highlight is nearly the same color as the material (in the others, the highlight is white), and it diffuses much more ambient light than directional. This is because, while plastic and glass mostly reflect light directly, metal mostly absorbs light and re-emits it.
Examples: | ||||||||||
|
(default-icon-material) → deep-flomap-material-value? (default-icon-material material) → void? material : deep-flomap-material-value?
=
The material used for rendering most icons and icon parts. There are exceptions; for example, the floppy-disk-icon always renders the sliding cover in metal.
(bitmap-render-icon bitmap [z-ratio material]) → (is-a?/c bitmap%) bitmap : (is-a?/c bitmap%) z-ratio : (and rational? (>=/c 0)) = 5/8
material : deep-flomap-material-value? = (default-icon-material)
The z-ratio argument only makes a difference when material is transparent, such as glass-icon-material. It controls what fraction of bitmap’s height the icon is raised, which in turn affects the refracted shadow under the icon: the higher the z-ratio, the lower the shadow.
Examples: | |||||||||
|
More complex shapes than “embossed and rounded” are possible with the full rendering API, which will be made public in a later release. Still, most of the simple icons (such as those in images/icons/arrow and images/icons/control) can be rendered using only bitmap-render-icon.
> (define outline-color (icon-color->outline-color "forestgreen"))
> (define brush-pict (colorize (filled-ellipse 62 62) "forestgreen"))
> (define pen-pict (linewidth 2 (colorize (ellipse 62 62) outline-color)))
> (bitmap-render-icon (pict->bitmap (inset (cc-superimpose brush-pict pen-pict) 1)) 5/8 glass-icon-material) > (record-icon "forestgreen" 64 glass-icon-material)
The outline width is usually (/ height 32) (in this case, 2), but not always. (For example, recycle-icon is an exception, as are parts of floppy-disk-icon.)
1.4 Arrow Icons
(require images/icons/arrow) |
(right-arrow-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(left-arrow-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(up-arrow-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(down-arrow-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||||||
|
(right-over-arrow-icon color [ height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(left-over-arrow-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(right-under-arrow-icon color [ height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(left-under-arrow-icon color [ height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
1.5 Control Icons
(require images/icons/control) |
(bar-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(play-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(back-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(fast-forward-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(rewind-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(stop-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(record-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(pause-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(step-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(step-back-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(continue-forward-icon color [ height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(continue-backward-icon color [ height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(search-forward-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(search-backward-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
1.6 File Icons
(require images/icons/file) |
(floppy-disk-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(save-icon arrow-color color [height material]) → (is-a?/cbitmap%) arrow-color : (or/c string? (is-a?/c color%)) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(load-icon arrow-color color [height material]) → (is-a?/cbitmap%) arrow-color : (or/c string? (is-a?/c color%)) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(small-save-icon arrow-color color [ height material]) → (is-a?/cbitmap%) arrow-color : (or/c string? (is-a?/c color%)) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(small-load-icon arrow-color color [ height material]) → (is-a?/cbitmap%) arrow-color : (or/c string? (is-a?/c color%)) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
1.7 Symbol and Text Icons
(require images/icons/symbol) |
(text-icon str font color [ trim? outline height material]) → (is-a?/c bitmap%) str : string? font : (is-a?/c font%) color : (or/c string? (is-a?/c color%)) trim? : boolean? = #t outline : (or/c 'auto (and/c rational? (>=/c 0))) = 'auto height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
> (text-icon "An Important Point!" (make-object font% 48 'decorative 'normal 'bold #t) "lightskyblue" #t 'auto 48)
> (text-icon "Q" (make-object font% 32 'default 'normal 'bold) "green" #t 0 96)
To make it easy to create a large enough font, text-icon always interpets font sizes as being in pixels, never points. See font% for details on font sizes.
> (define font (make-object font% 32 'default))
> (list (text-icon "." font "white") (text-icon "." font "white" #f)) (list )
When outline is 'auto, the outline drawn around the text is (/ height 32) pixels wide.
Because different platforms have different fonts, text-icon cannot guarantee the icons it returns have a consistent look or width across all platforms, or that the unicode characters will exist.
(recycle-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(x-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(check-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(lambda-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(hash-quote-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Examples: | |||||
|
1.8 Miscellaneous Icons
(require images/icons/misc) |
(regular-polygon-icon sides start color [ height material]) → (is-a?/c bitmap%) sides : exact-positive-integer? start : real? color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | |||||||
|
(octagon-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(stop-sign-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(stop-signs-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(foot-icon color [height material]) → (is-a?/cbitmap%) color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(magnifying-glass-icon frame-color handle-color [ height material]) → (is-a?/cbitmap%) frame-color : (or/c string? (is-a?/c color%)) handle-color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||||
|
(left-magnifying-glass-icon frame-color handle-color [ height material]) → (is-a?/cbitmap%) frame-color : (or/c string? (is-a?/c color%)) handle-color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(bomb-icon cap-color bomb-color [ height material]) → (is-a?/cbitmap%) cap-color : (or/c string? (is-a?/c color%)) bomb-color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(left-bomb-icon cap-color bomb-color [ height material]) → (is-a?/cbitmap%) cap-color : (or/c string? (is-a?/c color%)) bomb-color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(clock-icon [ height face-color hand-color hours minutes]) → (is-a?/c bitmap%) height : (and/c rational? (>=/c 0)) = (default-icon-height)
face-color : (or/c string? (is-a?/c color%)) = light-metal-icon-color hand-color : (or/c string? (is-a?/c color%)) = "firebrick" hours : (integer-in 0 11) = 1 minutes : (real-in 0 60) = 33
Examples: | ||||
|
1.9 Stickman Icons
(require images/icons/stickman) |
(standing-stickman-icon color arm-color head-color [ height material]) → (is-a?/c bitmap%) color : (or/c string? (is-a?/c color%)) arm-color : (or/c string? (is-a?/c color%)) head-color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(running-stickman-icon t color arm-color head-color [ height material]) → (is-a?/c bitmap%) t : rational? color : (or/c string? (is-a?/c color%)) arm-color : (or/c string? (is-a?/c color%)) head-color : (or/c string? (is-a?/c color%)) height : (and/c rational? (>=/c 0)) = (default-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
> (for/list ([t (in-range 0 1 1/12)]) (running-stickman-icon t run-icon-color "white" run-icon-color 32)) (list )
The stickman’s joint angles are defined by continuous periodic functions, so the run cycle can be sampled at any resolution, or at any real-valued time t. The cycle is modeled after the run cycle of the player’s avatar in the Commodore 64 game Impossible Mission.
1.10 Tool Icons
(require images/icons/tool) |
(check-syntax-icon [height material]) → (is-a?/cbitmap%) height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(small-check-syntax-icon [height material]) → (is-a?/cbitmap%) height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(macro-stepper-icon [height material]) → (is-a?/cbitmap%) height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(small-macro-stepper-icon [height material]) → (is-a?/cbitmap%) height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
(debugger-icon [height material]) → (is-a?/cbitmap%) height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
(small-debugger-icon [height material]) → (is-a?/cbitmap%) height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
material : deep-flomap-material-value? = (default-icon-material)
Example: | ||
|
debugger-bomb-color : (or/c string? (is-a?/c color%))
=
(make-object color% 128 32 32)
macro-stepper-hash-color : (or/c string? (is-a?/c color%))
=
(make-object color% 60 192 60)
small-macro-stepper-hash-color : (or/c string? (is-a?/c color%))
=
(make-object color% 128 255 128)
Constants used within images/icons/tool.