Howdy, Stranger!

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

Scrolling text window

dave1707dave1707 Mod
edited October 26 in Code Sharing Posts: 6,325

Here’s a scrolling text window where the text doesn’t disappear if it exceeds the screen size. After concatenating the strings 4 times, str1 contains 2561 words and str2 contains 2689 words. There are 4 windows to play with, 2 for str1 and 2 for str2. To scroll the text, touch in a window and slide your finger up or down. Your finger can go beyond the window to scroll. The text won’t scroll lower than the top of the window. To move a window, tap twice and slide your finger on the second tap. To increase or decrease the font size in a window, triple tap near the top of the window to increase the font size by 2 or tap near the bottom to decrease by 2. I didn’t put a whole lot into this, so it’s kind of bare bones.

Code deleted, see updated code below.

Comments

  • dave1707dave1707 Mod
    Posts: 6,325

    This code replaces the code I posted above. Here are the changes I made. To move a window, touch in the center of a window and move it. To resize a window, touch just inside the corners to move that corner. To increase or decrease the font size, double tap near the top of a window to increase by 2 and near the bottom to decrease by 2. To scroll the text, swipe up or down inside the window but don’t start the swipe at the direct center or just inside the four corners. To view the touch points, slide the > in the upper left corner to show the parameter slider and slide the ’show reacts` parameter on.

    displayMode(FULLSCREEN)
    supportedOrientations(LANDSCAPE_ANY)
    
    function setup()
        parameter.boolean("show rects",false)
    
        str1="Five little monkeys jumping on the bed. One fell off and bumped his head. Mama called the doctor and the doctor said: No more monkeys jumping on the bed! Four little monkeys jumping on the bed. One fell off and bumped his head. Mama called the doctor and the doctor said: No more monkeys jumping on the bed! Three little monkeys jumping on the bed. One fell off and bumped his head. Mama called the doctor and the doctor said: No more monkeys jumping on the bed! Two little monkeys jumping on the bed. One fell off and bumped his head. Mama called the doctor and the doctor said: No more monkeys jumping on the bed! One little monkey jumping on the bed. He fell off and bumped his head. Mama called the doctor and the doctor said: No more monkeys jumping on the bed! Now there's no little monkeys jumping on the bed. They`re all jumping on the sofa instead!"
    
        str2="Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky. Twinkle, twinkle, little star, How I wonder what you are! When the blazing sun is gone, When he nothing shines upon. Then you show your little light, Twinkle, twinkle, all the night. Twinkle, twinkle, little star, How I wonder what you are! Then the traveller in the dark Thanks you for your tiny spark. He could not see which way to go, If you did not twinkle so. Twinkle, twinkle, little star, How I wonder what you are! In the dark blue sky you keep, And often through my curtains peep. For you never shut your eye, Till the sun is in the sky. Twinkle, twinkle, little star, How I wonder what you are! As your bright and tiny spark, Lights the traveller in the dark. Though I know not what you are, Twinkle, twinkle, little star. Twinkle, twinkle, little star, How I wonder what you are!"
    
        diff=20
    
        for z=1,4 do
            str1=str1..str1    -- concatinate the string to make 2561 words
            str2=str2..str2    -- concatinate the string to make 2689 words
        end
    
        --  x,y (lower left corner)   width, height (window size) fontSize, string to view
        tw1=textWindow(50,100,200,600,20,str1)
        tw2=textWindow(400,100,300,300,40,str2)
        tw3=textWindow(300,500,500,100,15,str1)
        tw4=textWindow(850,50,100,500,8,str2)
    end
    
    function draw()
        background(0)
        tw1:draw()
        tw2:draw()
        tw3:draw()
        tw4:draw()
    end
    
    function touched(t)
        tw1:touched(t)
        tw2:touched(t)
        tw3:touched(t)
        tw4:touched(t)
    end
    
    textWindow=class()
    
    function textWindow:init(x,y,w,h,fs,str)
        self.x=x
        self.y=y
        self.w=w
        self.h=h
        self.fs=fs  -- font size
        self.dy=0
        self.tx=0   -- text width
        self.ty=0   -- text heighth
        self.topLeft=false
        self.topRight=false
        self.bottomLeft=false
        self.bottomRight=false
        self.center=false
        self.scroll=false
        self.tab={} -- table of words per line
        self.words={}   -- table of words
        for w in string.gmatch(str,"%g+") do
            table.insert(self.words,w)   -- put each word in a table
        end
        self:adjust(self)
    end
    
    function textWindow:adjust(self)
        self.dy=0
        self.tab={}
        hWord=self.words[1]
        fontSize(self.fs)
        for z=2,#self.words do
            wrd=self.words[z]
            self.tx,self.ty=textSize(hWord..wrd)
            if self.tx<=self.w then
                hWord=hWord.." "..wrd
            else
                table.insert(self.tab,hWord)
                hWord=wrd.." "
            end
        end 
        if hWord~="" then
            table.insert(self.tab,hWord)
        end
    end
    
    function textWindow:draw()
        textMode(CORNER)
        if show_rects then
            noStroke()
            fill(0, 228, 255, 100)
            rect(self.x+self.w/2-20,self.y+self.h/2-20,40,40)        
            rect(self.x,self.y,40,40)
            rect(self.x+self.w-35,self.y,40,40)
            rect(self.x+self.w-35,self.y+self.h-40,40,40)
            rect(self.x,self.y+self.h-40,40,40)
        end
        fontSize(self.fs)
        noFill()
        stroke(255)
        strokeWidth(5)
        rect(self.x-5,self.y-5,self.w+15,self.h+10)
        clip(self.x,self.y,self.w+8,self.h)
        fill(255)
        for a,b in pairs(self.tab) do
            text(b,self.x,self.y+self.h-a*self.ty+self.dy)
        end
        clip()
    end
    
    function textWindow:touched(t)
        if t.state==BEGAN then
            if t.x>self.x and t.x<self.x+40 and -- top left
                    t.y>self.y+self.h-40 and t.y<self.y+self.h then
                self.topLeft=true
            elseif t.x>self.x and t.x<self.x+40 and -- bottom left
                    t.y>self.y and t.y<self.y+40 then
                self.bottomLeft=true
            elseif t.x>self.x+self.w-35 and t.x<self.x+self.w and -- top right
                    t.y>self.y+self.h-40 and t.y<self.y+self.h then
                self.topRight=true
            elseif t.x>self.x+self.w-35 and t.x<self.x+self.w and  -- bottom right
                    t.y>self.y and t.y<self.y+40 then
                self.bottomRight=true
            elseif t.x>self.x+self.w/2-40 and t.x<self.x+self.w/2+40 and    -- center 
                    t.y>self.y+self.h/2-40 and t.y<self.y+self.h/2+40 then
                self.center=true
            elseif t.x>self.x and t.x<self.x+self.w and -- inside
                    t.y>self.y and t.y<self.y+self.h then
                self.scroll=true
            end
            if t.tapCount==2 and self.scroll then
                if t.y>self.y+self.h/2 then
                    self.fs=self.fs+2
                else
                    self.fs=self.fs-2
                end
                self:adjust(self)
            end
        end
        if t.state==MOVING then
            if self.topLeft then
                self.x=self.x+t.deltaX
                self.w=self.w-t.deltaX
                self.h=self.h+t.deltaY
            end
            if self.bottomLeft then
                self.x=self.x+t.deltaX
                self.w=self.w-t.deltaX
                self.y=self.y+t.deltaY
                self.h=self.h-t.deltaY
            end
            if self.topRight then
                self.w=self.w+t.deltaX
                self.h=self.h+t.deltaY
            end
            if self.bottomRight then
                self.y=self.y+t.deltaY
                self.w=self.w+t.deltaX
                self.h=self.h-t.deltaY           
            end
            if self.center then
                self.x=self.x+t.deltaX
                self.y=self.y+t.deltaY           
            end
            if self.scroll then
                self.dy=self.dy+t.deltaY
                if self.dy<0 then
                    self.dy=0
                end
            end
        end  
        if t.state==ENDED then
            if self.topLeft or self.topRight or self.bottomLeft or self.bottomRight then
                self:adjust(self)
            end
            self.scroll=false
            self.topLeft=false
            self.topRight=false
            self.bottomLeft=false
            self.bottomRight=false
            self.center=false
            self.began=false
        end
    end
    
  • Posts: 25

    thanks and support. I will test it whether it is good for my app.

    if counting too much in each draw , the code can make app run very slowly. even my strings are only about hundroud words.

Sign In or Register to comment.