Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Tutorial Page View Control

edited August 2015 in Code Sharing Posts: 1,254

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

Comments

  • edited August 2015 Posts: 1,254

    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.

  • Posts: 289

    nice,how to make Codea's reference style?

  • Posts: 725

    Very nice.

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

  • Posts: 1,254

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

Sign In or Register to comment.