Tutorial Page View Control

Mark

Ever have the need to put some "tutorial cards" on the screen that users can paw through to learn the basics of your app? Just feed this class a collection of images and you're ready to go.

Tutorial = class()
-- A simple class for building tutorial style page controls
-- Mark Sumner

function Tutorial:init(w, h, images)
    self.page = 1
    self.images = images
    self.show = false
    self.ox = 0
    self.h = h
    self.w = w
end

function Tutorial:draw()
    pushStyle()
    fill(255, 255, 255, 66)
    rect(0, 0, WIDTH, HEIGHT)
    noTint()
    clip(WIDTH / 2 - self.w / 2, HEIGHT / 2 - self.h / 2, self.w, self.h)
    sprite(self.images[self.page], WIDTH / 2 - self.ox, HEIGHT / 2, self.w, 
    self.h)
    if self.page < #self.images then
        sprite(self.images[self.page + 1], WIDTH / 2 - self.ox + self.w  + 
        20, HEIGHT / 2, self.w, self.h)
    end
    if self.page > 1 then
        sprite(self.images[self.page - 1], WIDTH / 2 - self.ox - 
        self.w  - 20, HEIGHT / 2, self.w, self.h)
    end
    clip()
    fill(0, 0, 0, 63)
    noStroke()
    for i = 1, #self.images do
        ellipse(WIDTH / 2 - (#self.images / 2 - i) * 40, 
        HEIGHT / 2 - self.h / 2 - 30, 15)
    end
    fill(255, 255, 255, 255)
    ellipse(WIDTH / 2 - (#self.images / 2 - self.page) * 40, 
    HEIGHT / 2 - self.h / 2 - 30, 15)
    popStyle()
end

function Tutorial:touched(touch)
    if touch.state == BEGAN then
        self.ox = 0
    end
    if touch.state == MOVING then
        self.ox = self.ox - touch.deltaX
        if self.ox > self.w * .8 then 
            self.page = self.page + 1 
            self.ox = 0
        end 
        if self.ox < - self.w * .8 then 
            self.page = self.page - 1
            self.ox = 0
        end 
        if self.page == 1 and self.ox < - self.w / 4 then
            self.ox = - self.w / 4
        end
        if self.page == #self.images and self.ox > self.w / 4 then
            self.ox = self.w / 4
        end
    end
    if touch.state == ENDED then
        if self.ox > self.w / 3 and self.page < #self.images then
            self.page = self.page + 1
        end
        if self.ox < - self.w / 3 and self.page > 1 then
            self.page = self.page - 1
        end
        self.ox = 0
    end
end

Mark

Just realized after posting this that it made use of the Button class from Cider.

I've edited the code now so there should be no dependencies.

firewolf

nice，how to make Codea's reference style？

West

Very nice.

A very minor thing, but a noStroke() before you draw the "progress circles" gives a cleaner look

Mark

Thanks, @west. I've added that line to the code.