Scrolling an Image

Author: Carl Sassenrath
This example requires REBOL/View
Return to REBOL Cookbook

Scrolling an image is different than scrolling text (Cookbook example #29). To scroll an image, you need to place it within another face (called a subface), then move it relative to that face (using its OFFSET field).

The code below creates a window with a box to hold an image and both vertical and horizontal scroll bars. See the notes that follow to understand what's going on.

    out: layout [
        h3 "Image Scrolling Example" return
        space 0
        i1: box 400x400 coal
        s1: scroller 16x400 [scroll-img-vert i1 s1]
        s2: scroller 400x16 [scroll-img-horz i1 s2]
        pad 0x5 space 5
        button "Open" [open-img i1 s1 s2]

    ; Create a subface for the image:
    i1/pane: make face [color: edge: font: para: none]

    scroll-img-vert: func [img bar][
        img/pane/offset/y: negate bar/data *
            (max 0 img/pane/size/y - img/size/y)
        show img

    scroll-img-horz: func [img bar][
        img/pane/offset/x: negate bar/data *
            (max 0 img/pane/size/x - img/size/x)
        show img

    open-img: func [img vbar hbar /local file][
        if file: request-file [
            file: load first file
            if image? file [
                img/pane/image: file
                update-img img vbar hbar

    update-img: func [img vbar hbar] [
        img/pane/offset: 0x0
        img/pane/size: img/pane/image/size
        s1/data: s2/data: 0
        vbar/redrag img/size/y / img/pane/size/y
        hbar/redrag img/size/x / img/pane/size/x
        show [img vbar hbar]

    view out

The trick to this code is the i1/pane. Every face can contain one or more subfaces in a pane. So i1 is a box that holds the actual image face, and scrolling is done by moving the offset for that image face.

The UPDATE-IMG function resets the offset and size of the image subface. It then resets the scroll bars.

When you click on a scroll bar, the SCROLL-IMG functions are called. They use the position of the scroll bar, the size of the image, and the size of the viewing area (the box) to calculate a new offset for the image within the box.

Use Newer REBOL/View

To run this example, you will need to use a newer version of REBOL/View that defines the SCROLLER style.

2006 REBOL Technologies REBOL.com REBOL.net