suzanne.soy/racket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished images/icons contracts and docs

Browse Source 
Please merge into release
This commit is contained in:
Neil Toronto 2012-01-14 14:20:28 -07:00
parent b3c450ffc9
commit b78ee4258c
6 changed files with 278 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
collects/images/icons/file.rkt
View File

@ -43,7 +43,7 @@
[dfm (flomap->deep-flomap fm)] [dfm (flomap->deep-flomap fm)]
[dfm (deep-flomap-icon-style dfm)] [dfm (deep-flomap-icon-style dfm)]
[dfm (deep-flomap-scale-z dfm 1/16)]) [dfm (deep-flomap-scale-z dfm 1/16)])
(deep-flomap-render-icon dfm metal-material))) (deep-flomap-render-icon dfm metal-icon-material)))
(define bottom-indent-fm (define bottom-indent-fm
(draw-icon-flomap (draw-icon-flomap

40
collects/images/icons/misc.rkt
View File

@ -158,7 +158,7 @@
[dfm (deep-flomap-icon-style dfm)] [dfm (deep-flomap-icon-style dfm)]
[dfm (deep-flomap-cc-superimpose 'add dfm indent-dfm)] [dfm (deep-flomap-cc-superimpose 'add dfm indent-dfm)]
[fm (deep-flomap-render-icon dfm material)]) [fm (deep-flomap-render-icon dfm material)])
(flomap-cc-superimpose fm (x-flomap "azure" (* 22 scale) metal-material))))) (flomap-cc-superimpose fm (x-flomap light-metal-icon-color (* 22 scale) metal-icon-material)))))
(defproc (stop-signs-flomap [color (or/c string? (is-a?/c color%))] (defproc (stop-signs-flomap [color (or/c string? (is-a?/c color%))]
[height (and/c rational? (>=/c 0)) (default-icon-height)] [height (and/c rational? (>=/c 0)) (default-icon-height)]
@ -177,20 +177,13 @@
0.25 0.25 0.0 0.25 0.25 0.0
0.0)) 0.0))
(define magnifying-glass-metal-material (defproc (magnifying-glass-flomap [frame-color (or/c string? (is-a?/c color%))]
(deep-flomap-material-value
3.0 0.5 0.0 1.0
0.8 0.1 0.2
0.2 0.8 0.0
0.0))
(defproc (magnifying-glass-flomap [metal-color (or/c string? (is-a?/c color%))]
[handle-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)] [height (and/c rational? (>=/c 0)) (default-icon-height)]
[material deep-flomap-material-value? (default-icon-material)] [material deep-flomap-material-value? (default-icon-material)]
) flomap? ) flomap?
(make-cached-flomap (make-cached-flomap
[height metal-color handle-color material] [height frame-color handle-color material]
(define scale (/ height 32)) (define scale (/ height 32))
(define glass-fm (define glass-fm
(let* ([fm (draw-icon-flomap (let* ([fm (draw-icon-flomap
@ -198,7 +191,7 @@
(send dc set-pen handle-color 1 'solid) (send dc set-pen handle-color 1 'solid)
(send dc set-brush "azure" 'solid) (send dc set-brush "azure" 'solid)
(draw-ellipse/smoothed dc 0 0 18 18) (draw-ellipse/smoothed dc 0 0 18 18)
(send dc set-alpha 0.75) (send dc set-alpha 0.5)
(send dc set-pen "black" 1 'solid) (send dc set-pen "black" 1 'solid)
(send dc set-brush "white" 'transparent) (send dc set-brush "white" 'transparent)
(draw-ellipse/smoothed dc 0 0 18 18)) (draw-ellipse/smoothed dc 0 0 18 18))
@ -214,26 +207,23 @@
(send dc set-pen "black" 3 'solid) (send dc set-pen "black" 3 'solid)
(send dc set-brush "black" 'solid) (send dc set-brush "black" 'solid)
(draw-ellipse/smoothed dc 1 1 26 26) (draw-ellipse/smoothed dc 1 1 26 26)
(send dc set-pen metal-color 1 'solid) (send dc set-pen frame-color 1 'solid)
(send dc set-brush metal-color 'solid) (send dc set-brush frame-color 'solid)
(draw-ellipse/smoothed dc 1 1 26 26)) (draw-ellipse/smoothed dc 1 1 26 26))
scale)] scale)]
[indent-fm (draw-icon-flomap [indent-fm (draw-icon-flomap
28 28 (λ (dc) 28 28 (λ (dc)
(send dc set-pen metal-color 1 'solid) (send dc set-pen frame-color 1 'solid)
(send dc set-brush metal-color 'solid) (send dc set-brush frame-color 'solid)
(draw-ellipse/smoothed dc 5 5 18 18)) (draw-ellipse/smoothed dc 5 5 18 18))
scale)] scale)]
[indent-dfm (flomap->deep-flomap indent-fm)] [indent-dfm (flomap->deep-flomap indent-fm)]
[indent-dfm (deep-flomap-raise indent-dfm (* -3 scale))] [indent-dfm (deep-flomap-raise indent-dfm (* -4 scale))]
;[indent-dfm (deep-flomap-smooth-z indent-dfm (* 2 scale))]
[dfm (flomap->deep-flomap fm)] [dfm (flomap->deep-flomap fm)]
;[dfm (deep-flomap-icon-style dfm)] [dfm (deep-flomap-raise dfm (* 12 scale))]
[dfm (deep-flomap-raise dfm (* 4 scale))]
[dfm (deep-flomap-cc-superimpose 'add dfm indent-dfm)] [dfm (deep-flomap-cc-superimpose 'add dfm indent-dfm)]
[dfm (deep-flomap-smooth-z dfm (* 1 scale))] [dfm (deep-flomap-smooth-z dfm (* 2/3 scale))])
) (deep-flomap-render-icon dfm metal-icon-material)))
(deep-flomap-render-icon dfm magnifying-glass-metal-material)))
(define handle-fm (define handle-fm
(let* ([fm (draw-icon-flomap (let* ([fm (draw-icon-flomap
@ -253,12 +243,12 @@
handle-fm handle-fm
(flomap-pin* 1/2 1/2 1/2 1/2 circle-fm glass-fm)))) (flomap-pin* 1/2 1/2 1/2 1/2 circle-fm glass-fm))))
(defproc (left-magnifying-glass-flomap [metal-color (or/c string? (is-a?/c color%))] (defproc (left-magnifying-glass-flomap [frame-color (or/c string? (is-a?/c color%))]
[handle-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)] [height (and/c rational? (>=/c 0)) (default-icon-height)]
[material deep-flomap-material-value? (default-icon-material)] [material deep-flomap-material-value? (default-icon-material)]
) flomap? ) flomap?
(flomap-flip-horizontal (magnifying-glass-flomap metal-color handle-color height material))) (flomap-flip-horizontal (magnifying-glass-flomap frame-color handle-color height material)))
;; --------------------------------------------------------------------------------------------------- ;; ---------------------------------------------------------------------------------------------------
;; Bomb ;; Bomb
@ -369,7 +359,7 @@
[stop-signs-icon stop-signs-flomap]) [stop-signs-icon stop-signs-flomap])
(define-icon-wrappers (define-icon-wrappers
([metal-color (or/c string? (is-a?/c color%))] ([frame-color (or/c string? (is-a?/c color%))]
[handle-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)] [height (and/c rational? (>=/c 0)) (default-icon-height)]
[material deep-flomap-material-value? (default-icon-material)]) [material deep-flomap-material-value? (default-icon-material)])

101
collects/images/icons/style.rkt
View File

@ -1,12 +1,80 @@
#lang racket #lang racket
(require racket/draw unstable/parameter-group (require racket/draw unstable/parameter-group
racket/contract unstable/latent-contract/defthing racket/contract unstable/latent-contract unstable/latent-contract/defthing
(for-syntax unstable/latent-contract/serialize-syntax)
"../private/flomap.rkt" "../private/flomap.rkt"
"../private/deep-flomap.rkt") "../private/deep-flomap.rkt")
(provide (all-defined-out)) (provide light-metal-icon-color
metal-icon-color
dark-metal-icon-color
syntax-icon-color
halt-icon-color
run-icon-color
plastic-icon-material
glass-icon-material
metal-icon-material
(activate-contract-out
default-icon-height
toolbar-icon-height
default-icon-material)
(only-doc-out (all-defined-out)))
(defthing light-metal-icon-color (or/c string? (is-a?/c color%)) #:document-value
"azure")
(defthing metal-icon-color (or/c string? (is-a?/c color%)) #:document-value
"lightsteelblue")
(defthing dark-metal-icon-color (or/c string? (is-a?/c color%)) #:document-value
"steelblue")
(defthing syntax-icon-color (or/c string? (is-a?/c color%)) #:document-value
(make-object color% 76 76 255))
(defthing halt-icon-color (or/c string? (is-a?/c color%)) #:document-value
(make-object color% 255 32 24))
(defthing run-icon-color (or/c string? (is-a?/c color%)) #:document-value
"lawngreen")
(defparam default-icon-height (and/c rational? (>=/c 0)) 24)
(defparam toolbar-icon-height (and/c rational? (>=/c 0)) 16)
(defthing plastic-icon-material deep-flomap-material-value?
(deep-flomap-material-value
'cubic-zirconia 1.0 0.0 1.0
1.0 0.3 1.0
0.8 0.2 0.0
0.0))
(defthing glass-icon-material deep-flomap-material-value?
(deep-flomap-material-value
'cubic-zirconia 1.0 0.75 0.2
1.0 0.2 1.0
0.2 0.4 0.25
0.08))
(defthing metal-icon-material deep-flomap-material-value?
(deep-flomap-material-value
2.0 2.0 0.0 1.0
0.7 0.15 0.0
0.2 0.8 0.0
0.0))
(defparam default-icon-material deep-flomap-material-value? plastic-icon-material)
;; ===================================================================================================
;; Unpublished so far
(provide deep-flomap-render-icon
deep-flomap-icon-style
draw-icon-flomap
flomap-render-icon
draw-rendered-icon-flomap
flomap-render-thin-icon
draw-short-rendered-icon-flomap
define-icon-wrappers)
(define icon-lighting (define icon-lighting
(deep-flomap-lighting-value (deep-flomap-lighting-value
@ -15,33 +83,6 @@
'(1.0 1.0 1.0) '(1.0 1.0 1.0)
'(1.0 1.0 1.0))) '(1.0 1.0 1.0)))
(define plastic-icon-material
(deep-flomap-material-value
'cubic-zirconia 1.0 0.0 1.0
1.0 0.3 1.0
0.8 0.2 0.0
0.0))
(define glass-icon-material
(deep-flomap-material-value
'cubic-zirconia 1.0 0.75 0.15
1.0 0.2 1.0
0.2 0.4 0.25
0.08))
(define metal-icon-color "lightsteelblue")
(define dark-metal-icon-color "steelblue")
(define syntax-icon-color (make-object color% 76 76 255))
(define halt-icon-color (make-object color% 255 32 24))
(define run-icon-color "lawngreen")
(define default-icon-material (make-parameter plastic-icon-material))
(define default-icon-height (make-parameter 24))
(define toolbar-icon-height (make-parameter 16))
;(default-icon-material glass-icon-material)
;(default-icon-material matte-material)
(define (deep-flomap-render-icon dfm material) (define (deep-flomap-render-icon dfm material)
;(printf "rendering~n") ;(printf "rendering~n")
(parameterize/group ([deep-flomap-material material] (parameterize/group ([deep-flomap-material material]

60
collects/images/icons/tool.rkt
View File

@ -1,6 +1,7 @@
#lang racket/base #lang racket/base
(require racket/draw racket/class racket/math racket/sequence (require racket/draw racket/class racket/math racket/sequence
racket/contract unstable/latent-contract unstable/latent-contract/defthing
"../private/flomap.rkt" "../private/flomap.rkt"
"../private/deep-flomap.rkt" "../private/deep-flomap.rkt"
"../private/utils.rkt" "../private/utils.rkt"
@ -8,52 +9,81 @@
"misc.rkt" "misc.rkt"
"style.rkt") "style.rkt")
(provide (all-defined-out)) (provide debugger-bomb-color
macro-stepper-hash-color
(activate-contract-out
check-syntax-icon check-syntax-flomap
small-check-syntax-icon small-check-syntax-flomap
macro-stepper-icon macro-stepper-flomap
small-macro-stepper-icon small-macro-stepper-flomap
debugger-icon debugger-flomap
small-debugger-icon small-debugger-flomap)
(only-doc-out (all-defined-out)))
(define debugger-bomb-color (make-object color% 128 32 32)) (defthing debugger-bomb-color (or/c string? (is-a?/c color%)) #:document-value
(define macro-stepper-hash-color (make-object color% 30 96 30)) (make-object color% 128 32 32))
(define (check-syntax-flomap [height (toolbar-icon-height)] [material (default-icon-material)]) ;; Actual color is too dark after rendering
;(define macro-stepper-hash-color (make-object color% 30 96 30))
(defthing macro-stepper-hash-color (or/c string? (is-a?/c color%)) #:document-value
(make-object color% 90 192 90))
(defproc (check-syntax-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
[material deep-flomap-material-value? (default-icon-material)]
) flomap?
(flomap-ht-append (flomap-ht-append
(left-magnifying-glass-flomap metal-icon-color "chocolate" height material) (left-magnifying-glass-flomap metal-icon-color "chocolate" height material)
(make-flomap 4 (max 1 (inexact->exact (round (* 1/32 height)))) 0) (make-flomap 4 (max 1 (inexact->exact (round (* 1/32 height)))) 0)
(check-flomap syntax-icon-color height material))) (check-flomap syntax-icon-color height material)))
(define (small-check-syntax-flomap [height (toolbar-icon-height)] [material (default-icon-material)]) (defproc (small-check-syntax-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
[material deep-flomap-material-value? (default-icon-material)]
) flomap?
(flomap-pin* (flomap-pin*
1 1 5/16 1 1 1 5/16 1
(check-flomap syntax-icon-color height material) (check-flomap syntax-icon-color height material)
(magnifying-glass-flomap metal-icon-color "chocolate" (* 3/4 height) material))) (magnifying-glass-flomap metal-icon-color "chocolate" (* 3/4 height) material)))
(define (macro-stepper-flomap [height (toolbar-icon-height)] [material (default-icon-material)]) (defproc (macro-stepper-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
[material deep-flomap-material-value? (default-icon-material)]
) flomap?
(flomap-ht-append (flomap-ht-append
(text-flomap "#'" (make-object font% (max 1 (min 1024 height)) 'system) (text-flomap "#'" (make-object font% (max 1 (min 1024 height)) 'system)
macro-stepper-hash-color #t 'auto height material) macro-stepper-hash-color #t 'auto height material)
(make-flomap 4 (max 1 (inexact->exact (round (* 1/32 height)))) 0) (make-flomap 4 (max 1 (inexact->exact (round (* 1/32 height)))) 0)
(step-flomap syntax-icon-color height material))) (step-flomap syntax-icon-color height material)))
(define (small-macro-stepper-flomap [height (toolbar-icon-height)] [material (default-icon-material)]) (defproc (small-macro-stepper-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
[material deep-flomap-material-value? (default-icon-material)]
) flomap?
(flomap-pin* (flomap-pin*
0 0 7/16 0 0 0 7/16 0
(step-flomap syntax-icon-color height material) (step-flomap syntax-icon-color height material)
(text-flomap "#'" (make-object font% (max 1 (min 1024 height)) 'system) (text-flomap "#'" (make-object font% (max 1 (min 1024 height)) 'system)
macro-stepper-hash-color #t 'auto (* 3/4 height) material))) macro-stepper-hash-color #t 'auto (* 3/4 height) material)))
(define (debugger-flomap [height (toolbar-icon-height)] [material (default-icon-material)]) (defproc (debugger-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
[material deep-flomap-material-value? (default-icon-material)]
) flomap?
(flomap-ht-append (flomap-ht-append
(left-bomb-flomap metal-icon-color debugger-bomb-color height material) (left-bomb-flomap metal-icon-color debugger-bomb-color height material)
(make-flomap 4 (max 1 (inexact->exact (round (* 1/16 height)))) 0) (make-flomap 4 (max 1 (inexact->exact (round (* 1/16 height)))) 0)
(step-flomap run-icon-color height material))) (step-flomap run-icon-color height material)))
(define (small-debugger-flomap [height (toolbar-icon-height)] [material (default-icon-material)]) (defproc (small-debugger-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
[material deep-flomap-material-value? (default-icon-material)]
) flomap?
(flomap-pin* (flomap-pin*
0 0 9/16 0 0 0 9/16 0
(step-flomap run-icon-color height material) (step-flomap run-icon-color height material)
(left-bomb-flomap metal-icon-color debugger-bomb-color (* 3/4 height) material))) (left-bomb-flomap metal-icon-color debugger-bomb-color (* 3/4 height) material)))
(define check-syntax-icon (compose flomap->bitmap check-syntax-flomap)) (define-icon-wrappers
(define small-check-syntax-icon (compose flomap->bitmap small-check-syntax-flomap)) ([height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
(define macro-stepper-icon (compose flomap->bitmap macro-stepper-flomap)) [material deep-flomap-material-value? (default-icon-material)])
(define small-macro-stepper-icon (compose flomap->bitmap small-macro-stepper-flomap)) [check-syntax-icon check-syntax-flomap]
(define debugger-icon (compose flomap->bitmap debugger-flomap)) [small-check-syntax-icon small-check-syntax-flomap]
(define small-debugger-icon (compose flomap->bitmap small-debugger-flomap)) [macro-stepper-icon macro-stepper-flomap]
[small-macro-stepper-icon small-macro-stepper-flomap]
[debugger-icon debugger-flomap]
[small-debugger-icon small-debugger-flomap])

188
collects/images/scribblings/icons.scrbl
View File

@ -2,19 +2,25 @@
@(require scribble/eval @(require scribble/eval
unstable/latent-contract/defthing unstable/latent-contract/defthing
(for-label images/icons/arrow (for-label racket racket/draw
images/icons/control
images/icons/file
images/icons/misc
images/icons/stickman
mrlib/switchable-button
racket
racket/draw)
images/icons/arrow images/icons/arrow
images/icons/control images/icons/control
images/icons/file images/icons/file
images/icons/misc images/icons/misc
images/icons/stickman) images/icons/stickman
images/icons/tool
images/icons/style
images/logos
mrlib/switchable-button
slideshow/pict)
racket/class racket/draw
images/icons/arrow
images/icons/control
images/icons/file
images/icons/misc
images/icons/stickman
images/icons/tool
images/icons/style)
@(define (author-email) "neil.toronto@gmail.com") @(define (author-email) "neil.toronto@gmail.com")
@ -23,56 +29,129 @@
@(define icons-eval (make-base-eval)) @(define icons-eval (make-base-eval))
@interaction-eval[#:eval icons-eval (require racket/class racket/draw racket/math racket/list @interaction-eval[#:eval icons-eval (require racket/class racket/draw racket/math racket/list)]
images/icons/style)]
@;{ @section{What is an icon?}
@section{Introduction (What is an icon, really?)} @margin-note*{This section describes an ideal that DrRacket and its tools are steadily approaching.}
@margin-note*{This introduction describes an ideal, not necessarily the current state of things.}
As a first approximation, an icon is just a small bitmap with an alpha channel. As a first approximation, an icon is just a small @racket[bitmap%], usually with an alpha channel.
But the icons in this collection are not simply loaded from disk.
They are generated programmatically by drawing on a @racket[dc<%>],
Icons can also be rendered , resized, generated programmatically by drawing on a , or composed using @racket[pict] functions.
The @racketmodname[icons] module is intended to make it possible to do all of these things, and to make it easy to get common icons in different colors, heights and styles. But an icon also communicates.
Its shape and color are a visual metaphor for an action or a message.
Icons should be @bold{easily recognizable}, @bold{distinguishable}, @bold{visually consistent}, and @bold{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.
An icon 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. This is difficult to do well, but good examples, good abstractions, and an existing icon library help considerably. @(define (hash-quote) (text-icon "#'" (make-object font% 32 'system)
macro-stepper-hash-color #t 'auto 16))
@(define (step) (step-icon syntax-icon-color 16))
@(define (play) (play-icon syntax-icon-color 16))
@(define (bar) (bar-icon syntax-icon-color 16))
@(define (macro-stepper) (macro-stepper-icon 16))
@(define (hash-quote) (hash-quote-flomap (solid-icon-color '(41 128 38)) 16)) Example: The Macro Stepper icon is composed by appending a text icon @(hash-quote) and a step icon @(step) to get @(macro-stepper).
@(define (step) (step-flomap (solid-icon-color "blue") 16 'diffuse)) The syntax quote icon @(hash-quote) is the color that DrRacket colors syntax quotes by default.
@(define (macro-stepper) (ht-append (hash-quote) (step))) The step icon @(step) 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 @(play) to connote starting and @(bar) to connote immediately stopping.
Example: The Macro Stepper tool composes a new icon @(hash-quote) and an existing icon @(step), resulting in @(macro-stepper) for its toolbar icon. It would not do to have just @(step) as the Macro Stepper icon: it would be too easily confused with the Debugger icon @(step-icon run-icon-color 16),
The @(hash-quote) icon connotes syntax, and is the color of a syntax-quote as rendered by DrRacket by default. especially for new users and people with certain forms of color-blindness, and thus fail to be distinguishable enough.
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 @(go-icon (solid-icon-color "blue") 16 'diffuse) to connote starting and @(bar-icon (solid-icon-color "blue") 16 'diffuse) to connote immediately stopping---a ``step.''
The author of this collection is available to adapt or create SVG icons for DrRacket tools, and charges no more than your immortal soul. As another example, the Check Syntax icon @(check-syntax-icon 16) connotes inspecting and passing. Note that the check mark is also the color of syntax.
@section{About These Icons}
The icons in this collection are designed to be composed to create new ones: they are simple, thematically consistent, and can be constructed in any size and color.
Further, slideshow's @racket[pict] combiners offer a way to compose them almost arbitrarily.
For example, a media player application might create a large ``step'' button by superimposing a @racket[record-icon] and a @racket[step-icon]:
@interaction[#:eval icons-eval @interaction[#:eval icons-eval
(require slideshow/pict) (require slideshow/pict images/icons/control images/icons/style)
(cc-superimpose (bitmap (record-icon "forestgreen" 96 glass-icon-material)) (pict->bitmap
(bitmap (step-icon "azure" 48 plastic-icon-material)))] (cc-superimpose
(bitmap (record-icon "forestgreen" 96 glass-icon-material))
(bitmap (step-icon light-metal-icon-color 48 metal-icon-material))))]
@section{Icon Parameters} All the icons in this collection are first drawn using standard @racket[dc<%>] drawing commands.
Then, to get lighting effects, they are turned into 3D objects and @link["http://en.wikipedia.org/wiki/Ray_tracing_%28graphics%29"]{ray traced}.
Many are afterward composed to create new icons; for example, the @racket[stop-signs-icon] @(stop-signs-icon halt-icon-color 16) superimposes three @racket[stop-sign-icon]s, and the @racket[magnifying-glass-icon] @(magnifying-glass-icon metal-icon-color "orange" 16) 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 @racket[record-icon], when rendered in clear glass, looks like the clear, round button on a @link["http://en.wikipedia.org/wiki/Wiimote"]{Wii Remote}.
See the @racket[plt-logo] and @racket[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.
@section{Icon Style}
@defmodule[images/icons/style]
@interaction-eval[#:eval icons-eval (require images/icons/style)]
Use these constants and parameters to help keep icon sets visually consistent.
@doc-apply[light-metal-icon-color]
@doc-apply[metal-icon-color]
@doc-apply[dark-metal-icon-color]{
Good colors to use with @racket[metal-icon-material]. See @racket[bomb-icon] and @racket[magnifying-glass-icon] for examples.
}
@doc-apply[syntax-icon-color]
@doc-apply[halt-icon-color]
@doc-apply[run-icon-color]{
Standard toolbar icon colors.
Use @racket[syntax-icon-color] in icons that connote macro expansion or syntax. Example:
@interaction[#:eval icons-eval (step-icon syntax-icon-color 32)]
Use @racket[halt-icon-color] in icons that connote stopping or errors. Example:
@interaction[#:eval icons-eval (stop-icon halt-icon-color 32)]
Use @racket[run-icon-color] in icons that connote executing programs or evaluation. Examples:
@interaction[#:eval icons-eval
(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.
}
@doc-apply[default-icon-height]{
The height of DrRacket's standard icons.
}
@doc-apply[toolbar-icon-height]{ @doc-apply[toolbar-icon-height]{
The height of DrRacket toolbar icons. The height of DrRacket toolbar icons.
Use @racket[(toolbar-icon-height)] as the @racket[height] argument when loading common icons that will be used in DrRacket toolbars and buttons, or in the toolbars and buttons of DrRacket tools. Use @racket[(toolbar-icon-height)] as the @racket[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. (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 @racket[alternate-bitmap] argument to a @racket[switchable-button%].) If you cannot, as with the Macro Stepper, send a thinner icon as the @racket[alternate-bitmap] argument to a @racket[switchable-button%].)
} }
@doc-apply[default-icon-height]{ @doc-apply[plastic-icon-material]
The height of standard (e.g. not toolbar) DrRacket icons, used as a default argument through the @racketmodname[icons] module. @doc-apply[glass-icon-material]
@doc-apply[metal-icon-material]{
Materials for icons.
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 @link["http://en.wikipedia.org/wiki/Cubic_zirconia"]{cubic zirconia}, or fake diamond.
The ``glassy look'' cannot actually be achieved using glass.
Metal reflects the most, its @link["http://en.wikipedia.org/wiki/Specular_highlight"]{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[#:eval icons-eval
(require images/icons/misc)
(for/list ([material (list plastic-icon-material
glass-icon-material
metal-icon-material)])
(bomb-icon light-metal-icon-color dark-metal-icon-color 32 material))]
} }
@doc-apply[default-icon-style]{ @doc-apply[default-icon-material]{
The style of DrRacket icons, used as a default argument throughout the @racketmodname[icons] module. The material used for rendering most icons and icon parts.
} There are exceptions; for example, the @racket[floppy-disk-icon] always renders the sliding cover in metal.
} }
@section[#:tag "arrows"]{Arrow Icons} @section[#:tag "arrows"]{Arrow Icons}
@ -146,7 +225,7 @@ The remaining icon @(bar-icon "red" 16), returned by @racket[bar-icon], is used
@interaction-eval[#:eval icons-eval (require images/icons/file)] @interaction-eval[#:eval icons-eval (require images/icons/file)]
@doc-apply[floppy-disk-icon]{ @doc-apply[floppy-disk-icon]{
@examples[#:eval icons-eval (floppy-disk-icon "gold" 32 glass-icon-material)] @examples[#:eval icons-eval (floppy-disk-icon "crimson" 32 glass-icon-material)]
} }
@doc-apply[save-icon] @doc-apply[save-icon]
@ -239,7 +318,8 @@ Equivalent to @racket[(regular-polygon-icon 8 (/ (* 2 pi) 16) color height mater
@doc-apply[magnifying-glass-icon]{ @doc-apply[magnifying-glass-icon]{
@examples[#:eval icons-eval @examples[#:eval icons-eval
(magnifying-glass-icon "azure" "lightblue" 32 glass-icon-material)] (magnifying-glass-icon light-metal-icon-color "lightblue" 32
glass-icon-material)]
} }
@doc-apply[left-magnifying-glass-icon]{ @doc-apply[left-magnifying-glass-icon]{
@ -249,7 +329,7 @@ Equivalent to @racket[(regular-polygon-icon 8 (/ (* 2 pi) 16) color height mater
@doc-apply[bomb-icon]{ @doc-apply[bomb-icon]{
@examples[#:eval icons-eval @examples[#:eval icons-eval
(bomb-icon "azure" "black" 32 glass-icon-material)] (bomb-icon light-metal-icon-color "black" 32 glass-icon-material)]
} }
@doc-apply[left-bomb-icon]{ @doc-apply[left-bomb-icon]{
@ -290,4 +370,28 @@ The cycle is modeled after the run cycle of the player's avatar in the Commodore
@section[#:tag "tool"]{Tool Icons} @section[#:tag "tool"]{Tool Icons}
@section[#:tag "const"]{Icon Constants and Contracts} @defmodule[images/icons/tool]
@interaction-eval[#:eval icons-eval (require images/icons/tool)]
@doc-apply[check-syntax-icon]
@doc-apply[small-check-syntax-icon]{
Icons for Check Syntax. The @racket[small-check-syntax-icon] is used when the toolbar is on the side.
@examples[#:eval icons-eval (list (check-syntax-icon 32) (small-check-syntax-icon 32))]
}
@doc-apply[macro-stepper-icon]
@doc-apply[small-macro-stepper-icon]{
Icons for the Macro Stepper. The @racket[small-macro-stepper-icon] is used when the toolbar is on the side.
@examples[#:eval icons-eval (list (macro-stepper-icon 32) (small-macro-stepper-icon 32))]
}
@doc-apply[debugger-icon]
@doc-apply[small-debugger-icon]{
Icons for the Debugger. The @racket[small-debugger-icon] is used when the toolbar is on the side.
@examples[#:eval icons-eval (list (debugger-icon 32) (small-debugger-icon 32))]
}
@doc-apply[debugger-bomb-color]
@doc-apply[macro-stepper-hash-color]{
Constants used within @racketmodname[images/icons/tool].
}

8
collects/images/scribblings/logos.scrbl
View File

@ -17,12 +17,12 @@
@interaction-eval[#:eval logos-eval (require images/logos images/icons/style)] @interaction-eval[#:eval logos-eval (require images/logos images/icons/style)]
@doc-apply[plt-logo]{ @doc-apply[plt-logo]{
Returns the PLT logo, rendered on clear glass and blue metal by the ray tracer that renders icons. Returns the PLT logo, rendered in tinted glass and azure metal by the ray tracer that renders icons.
@examples[#:eval logos-eval (plt-logo)] @examples[#:eval logos-eval (plt-logo)]
A 256×256 (default-size) rendering is compiled into the @racketmodname[images/logos] module using @racket[compiled-bitmap], meaning that constructing the logo at that size and smaller is cheap. A 256×256 (default height) rendering is compiled into the @racketmodname[images/logos] module using @racket[compiled-bitmap], meaning that constructing the logo at that size and smaller is cheap.
In fact, constructing the logo at the default size is essentially free because it does not need to be downscaled. In fact, constructing the logo at the default height is essentially free because it does not need to be downscaled.
} }
@doc-apply[planet-logo]{ @doc-apply[planet-logo]{
@ -32,5 +32,5 @@ Returns an unofficial PLaneT logo. This is used as the PLaneT icon when DrRacket
(planet-logo) (planet-logo)
(planet-logo (default-icon-height))] (planet-logo (default-icon-height))]
As with the @racket[plt-logo], a default-size rendering is compiled into the @racketmodname[images/logos] module for performance reasons. As with the @racket[plt-logo], a default-height rendering is compiled into the @racketmodname[images/logos] module for performance reasons.
} }