Slideshow Tutorial - cs.utah.edu · About Slideshow Slideshow is a library for creating slide...

Slideshow Tutorial

Press the spacebar to continue

1

About Slideshow

Slideshow is a library for creating slide presentations

• A Slideshow presentation is a PLT Scheme program

• Instead of a WYSIWYG interface, you get the power of Scheme

2

How to Control this Viewer

Alt-q, Cmd-q, or Meta-q : end show

Esc : if confirmed, end show

→, Space, f, n, or click : next slide

←, Backspace, Delete, or b : previous slide

g : last slide

1 : first slide

Alt-g, Cmd-g, or Meta-g : select a slide

Alt-p, Cmd-p, or Meta-p : show/hide slide number

Alt-c, Cmd-c, or Meta-c : show/hide commentary

Alt-d, Cmd-d, or Meta-d : show/hide preview

Shift-→, etc. : move window 1 pixel

Alt-→, Cmd-→, or Meta-→, etc. : move window 10 pixels3

Slideshow Programs

A Slideshow program has the form

(module mytalk (lib "run.ss" "slideshow")

... code to generate slide content ...)

in a file named mytalk.scm

Run a Slideshow program in DrScheme as follows:

• Open mytalk.scm in DrScheme

• Select Choose Language from the Language menu

• Choose the (module ...) language

• Click Execute

4

Slideshow Programs

A Slideshow program has the form


... code to generate slide content ...)

in a file named mytalk.scm

You can also execute it from the command line:

slideshow mytalk.scm

To print the talk:

slideshow --print mytalk.scm

Run slideshow --help for more options5

Slides and Picts

The body of a Slideshow program

1. Makes and combines picts

For example,

(t "Hello")

creates a pict like this:

Hello

2. Registers certain picts as slides

For example,

(slide (t "Hello"))

registers a slide containing only Hello6

Slides versus Picts

Technically, the pict concept comes from the "texpict" collection,and the "slideshow" collection builds on it

• The distinction between Slideshow and texpict matters when youuse Help Desk to find information

• For now, we ignore the distinction

7

The Rest of the Tutorial

The rest of this tutorial (starting with the next slide) is meant to beviewed while reading the program source

The source is

/home/mflatt/proj/plt/collects/slideshow/tutorial-show.ss

8

Part I: Basic Concepts

9

This slide shows how four picts

get vertically appended by the

slide

function to create and install a slide

10

See how the

t

function takes a string and

produces a pict with a normal sans-serif font, but

tt

produces a pict with a fixed-width font?

11

Breaking up text into lines is painful, so the page-para functiontakes a mixture of strings and picts and puts them into a pagaraph

It doesn't matter how strings are broken into parts in the code

The page-para function puts space between separate strings, butnot before punctuation!

12

The slide/center function centers the slide body vertically

All of the slide functions center the body picts horizontally, butpage-para makes a slide-width picture with left-aligned text

The frame function wraps a frame around a pict to create a new pict,so you can easily see this individual pict

13

Titles

The slide/title function takes a title string before the contentpicts

14

Titles and Centering

The slide/title/center function centers the slide bodyvertically

15

More Centering

The page-para/c function generates a paragraph with centeredlines of text

This line uses the page-para* function

The page-para* function creates a paragraph that is wrapped to fitthe slide, but it allows the resulting pict to be more narrow than theslide

16

More Alignment

Of course, there's also page-para/r

And there's page-para*/r, which is different from page-para* orpage-para*/c only if the paragraph takes multiple lines

For comparision, the same text using page-para/r:

And there's page-para*/r, which is different from page-para* orpage-para*/c only if the paragraph takes multiple lines

Unless your font happens to make the page-para*/r box exactlyas wide as this slide, the last box will be slightly wider with extraspace to the left

17

Spacing

The slide functions insert space between each body pict

The amount of space is 24, which is the value of gap-size

18

Controlling Space

If you want to control the space, simply append the picts yourself tocreate one body pictThe first argument to vc-append determines the space betweenpicturesIf the first argument is a pict instead of a number, then 0 is usedFor text in one paragraph, the page-para function uses line-sep,which is 2

19

Appending Picts

This isvl-append

This isvc-append

This isvr-append

20

Horizontal Appending

This ishc-append

obviously

This isht-appendobviously

This ishb-append

obviously

21

Text Alignment

hbl-appendaligns text baselines

It's especially useful for font mixtures

htl-appendis the same for single lines

The difference between htl-append and hbl-append shows upwith multiple lines:

bottom lines alignwhen usinghbl-append

top lines alignwhen usinghtl-append

22

Superimposing

XO

The cc-superimpose function puts picts on top of each other,centered

Each of l, r, and c is matched with each of t, b, c, bl, and tl in allcombinations with -superimpose

For example, cbl-superimpose:

one linetwolines

23

By definition, the screen is 1024 x 768 units

If you have more or less pixels, the image is scaled

There's a margin, so the "client" area is 984 x 728

The font size is 32

24

Titled Client Area

If you use a title, then titleless-page is the same size as thearea left for the body

It's useful25

More on Paragraphs

The page- in page-para makes the paragraph take the width of theslide

The para functionrequires an explicitsize for the width ofthe paragraph, 300in this case

So page-para is a shorthand for para with client-w

Naturally, there is para*,para*/c, and para*/r

26

Text and Styles

Functions exist for bold, italic, and even bold-italic text

The text function gives you more direct control over the font, size,

and even angle

27

Scheme Code

For Scheme code, the (lib "code.ss" "slideshow") libraryprovides a handy code macro for typesetting literal code

The code macro uses source-location information to indent code

(define (length l)

(cond

[(null? l) 0]

[else (+ 1 (length (cdr l)))]))

28

Colors

Use the colorize function to color most things, including text

A colorize applies only to sub-picts that do not already have acolor

29


Part II: Practical Slides

Using make-outline and more...

Part III: Fancy Picts

Part IV: Advanced Slides

Part V: Controlling the Background

Part VI: Printing

Conclusion

30

Itemize

• Bulleted sequences are common in slides

• The page-item function makes a bulleted paragraph that is aswide as the slide

+ You can set the bullet, if you like, by using page-item/bullet

Naturally, there is also page-subitem

31

Itemize

You could write page-item yourself:

(define (page-item . l)

(htl-append

(/ gap-size 2)

bullet

(apply para

(- client-w (pict-width bullet)

(/ gap-size 2))

l)))

where bullet is a constant pict: •

32

Grouping and Space

Sometimes you want to group items on a slide

• A bullet goes with a statement

• And another does, too

Creating a zero-sized pict with (blank) effectively doubles the gap,making a space that often looks right

33

Steps

• Suppose you want to show only one item at a time

• In addition to body picts, the slide functions recognize certainstaging symbols

• Use 'next in a sequence of slide arguments to create multipleslides, one containing only the preceding content, and another withthe remainder

'next is not tied to page-item, though it's often used with items

34-36

Alternatives

Steps can break up a linear slide, but sometimes you need to replaceone thing with something else

For example, replace this...

37

Alternatives

Steps can break up a linear slide, but sometimes you need to replaceone thing with something else

... with something else

• An 'alts in a sequence must be followed by a list of lists

• Each list is a sequence, a different conclusion for the slide'ssequence

• Anything after the list of lists is folded into the last alternative

Of course, you can mix 'alts and 'next in interesting ways

38-40




Creating interesting graphics



Part VI: Printing

Conclusion

41

Fancy Picts

In part I, we saw some basic pict constructors: t, vl-append, etc.

The libraries

(lib "mrpict.ss" "texpict")

and (lib "utils.ss" "texpict")

provide many more functions for creating picts

Slideshow re-exports all of those functions, so you can just use them

42

Bitmaps

For example, the bitmap function loads a bitmap to display

43

Symbols

The (lib "symbol.ss" "texpict") library provides varioussymbol constants, such as

∈ sym:in

→ sym:rightarrow

∞ sym:infinity

Slideshow does not re-export this library, so you must require it touse sym:in, etc.

Unless otherwise stated in the following slides, however, alldefinitions are provided by Slideshow

44

Clickbacks

The clickback function attaches an arbitrary thunk to a pict forinteractive slides

Click Me

45

Tables

The table function makes rows and columns

First cons

Second car

Third cdr

Fourth null?

The above also uses standard-fish, jack-o-lantern, cloud,and file-icon

46

Arrows

The arrow function creates an arrow of a given size and orientation(in radians)

Simple:

Fun:

(That's 64 uses of arrow)

47

Arrows

The arrowhead function creates an arrowhead of a given size andorientation (in radians)

Simple:

Fun:

(That's 64 uses of arrowhead)

48

Faces

The (lib "face.ss" "texpict") library makes faces

49

Arbitrary Drawing

The dc function provides an escape hatch to the underlying MrEdtoolkit

For example, (disk 100) is the same as

(dc (lambda (dc dx dy)

(send dc draw-ellipse dx dy 100 100))

100 100 0 0)

50

Frames

• As we've already seen, the frame function wraps a frame around apict

• The color-frame function wraps a colored frame; compare toframe followed by colorize, like this

• One way to increase the line thickness is to use linewidth

• It's often useful to add space around a pict with inset beforeframing it

51

Lines and Pict Dimensions

• The hline function creates a horizontal line, given a boundingwidth and height:

(The hline result is framed in green above)

• Naturally, there's also vline:

• To underline a pict, get its width using pict-width, then usehline and vc-append

• If the pict is text, you can restore the baseline using pict-ascent,pict-ascent, drop, and lift

(Granted, that's a little tricky)52

Placing Picts

• Another underline strategy is to use place-over, which placesone pict on top of another to generate a new pict

• The new pict has the original pict's bounding box and baselines

(The green frame is the "bounding box" of the result)

• The place-over function is useful with arrow-line to draw anoutgoing arrow without changing the layout

53

Finding Picts

Typically, an arrow needs to go from one pict to another

Functions like find-rc locate a point of a pict (such as "rightcenter") inside a larger pict

There's a find- function for every combination of l, c, and r with t,c, b, bl, and tl

54

Connecting with Arrows

Actually, straight-arrow combinations are so common that Slideshowprovides add-arrow-line

55

Balloons

The (lib "balloon.ss" "texpict") library provides cartoonballoons — another reason to use find- functions

Fish File

56

Ghosting

The ghost function turns a picture invisible

For example, the figure on the left and the figure on the right are thesame size, because the right one uses the ghost of the left one

57





Beyond 'next and 'alts


Part VI: Printing

Conclusion

58

In-Picture Sequences

Although 'next and 'alts can create simple sequences, useprocedure abstraction and ghost to create complex sequencesinside pict assemblies

59



Fish

60



Fish File

Larger example: run code

61

Named Steps

The (lib "step.ss" "slideshow") library provides awith-steps form to better express complex sequences

62

Named Steps


(with-steps

(step-name ...) slide-expr)

A with-steps form has a sequences of step names followed by anexpression to evaluate once for each step

63

Named Steps


(with-steps

(intro detail conclusion)

slide-expr)

For example, the above has three steps: intro, detail, andconclusion

64

Named Steps


(with-steps


((vonly intro)

(t "For a start...")))

In the body expression, use ((vonly step-name) pict-expr)to make pict-expr visible only during step-name

The expression (vonly step-name) produces either ghost or theidentity function

65

Named Steps


(with-steps


((vafter detail)

(t "like this")))

Use ((vafter step-name) pict-expr) to make pict-exprvisible after step-name

66

Named Steps


(with-steps


((vafter detail)

(t "like this")))

There's also vbefore, vbetween, and more

67

Transition Animations

The scroll-transition function scrolls some part of the currentslide before shifting to the next slide.

68

Transition Animations

The scroll-transition function scrolls some part of the currentslide before shifting to the next slide.

The face should have moved from left to right

69






Changing the overall look of your talk

Part VI: Printing

Conclusion

70

Controlling the Background

The current-slide-assembler parameter lets you change theoverall look of a slide

For this slide and the previous one, the assembler

• Colorizes the uncolored content as dark red

• Left-aligns the title

• Draws a fading box around the slide

71






Part VI: Printing

Exporting slides as PostScript

Conclusion

72

Printing

To export a set of slides as PostScript, use the slideshowcommand-line program:

slideshow --print myttalk.scm

Slideshow steps through slides while producing PostScript pages

The slides will look bad on the screen — because text is measured forprinting instead of screen display — but the PostScript will be fine

73

Condensing

Often, it makes sense to eliminate 'step staging when printingslides:

slideshow --print --condense myttalk.scm

You can also condense without printing

slideshow --condense myttalk.scm

For example, in condensed form, this slide appears without steps

74-76

Steps and Condensing

If you condense these slides, the previous slide's steps will beskipped

77

Steps and Condensing

If you condense these slides, the previous slide's steps will beskipped

Not this slide's steps, because it uses 'next!

78

Condensing Alternatives

Condensing does not merge 'alts alternatives

But sometimes you want condensing to just use the last alternative

'alts~ creates alternatives where only the last one is used whencondensing

79-80

Condensing Steps

The (lib "step.ss" "slideshow") provides with-steps~where only the last step is included when condensing

Also, a with-steps step name that ends with ~ is skipped whencondensing

81

Printing and Condensing Your Own Abstractions

You can customize your slides using printing? and condensing?

This particular slide is printed and condensed

When you skip a whole slide, use skip-slides to keep pagenumbers in sync

82






Part VI: Printing

Conclusion

This is the end

83

Your Own Slides

A Slideshow presentation is a Scheme program in a module, so tomake your own:


... your code here ...)

For further information, search for slideshow and texpict in HelpDesk

84

Date post:	18-Mar-2020
Category:	Documents
Upload:	others
View:	26 times
Download:	0 times

Slideshow Tutorial - cs.utah.edu · About Slideshow Slideshow is a library for creating slide...

Documents