Looking for Scrollbox examples

Hi, I’ve searched the forum and this is the only Scrollbox example I’ve found. Has anyone found any other examples I may use to help me learn?

https://gist.github.com/fredbogg/2283493

@FearMe2142 - search for the Cider project, it has a lot of UI controls

@Ignatz, thanks! It has some future stuff I need like switches, but Not a scroll box from what I’ve seen.

@FearMe2142 Here’s a small example of a scroll box. Slide your finger up or down in the box to scroll the text. Double tap in the box to show the keyboard. When you start to key text, the text in the scroll box will shift so the text is entered at the bottom of the box. One thing you need to know is if the height of all the text exceeds 1024 pixels, all the text will disappear. That’s a limit of the text command. Since I don’t know what plans you have for this, I just did the basics.

displayMode(FULLSCREEN)

function setup()
    textMode(CORNER)
    fontSize(12)
    str=readProjectTab("Main")
    x,y=200,400
    w,h=200,300
    sw=2
    textWrapWidth(w)
    dy=0
end

function draw()
    background(0)
    noFill()
    stroke(255)
    strokeWidth(sw)
    rect(x-sw,y-sw,w+sw*2,h+sw*2)
    clip(x,y,w,h)
    fill(255)
    text(str,x,y+dy)
end

function touched(t)
    if t.x>x and t.x<x+w and t.y>y and t.y<y+h then
        if t.tapCount==2 then
                if not showKeyboard() then
                    showKeyboard()
                end
        end
        if t.state==MOVING then
            dy=dy+t.deltaY
        end
    end
end

function keyboard(k)
    if k==BACKSPACE then
        str=string.sub(str,1,string.len(str)-1)
    else
        dy=0
        str=str..k
    end
end

@dave1707 so if I made each line in the box a string in a table

Line = {}

Would that fix the text problem?
I will need it to be able to do more than 1024 in pixels

And that was a perfect example!!! Thank you!!!

@FearMe2142 Here’s a version that uses a scroll class just in case you need more that 1 scroll box. You might be able to use a line table, but then you’ll have to do the calculations on line breaks to keep it within the scroll box width. I wasn’t sure how much text you would be putting in the scroll box, that’s why I did it the easy way.

displayMode(FULLSCREEN)

function setup()
    textMode(CORNER)
    temp=readProjectTab("Main") -- something to display
    temp=string.sub(temp,1,400) -- only use the first 400 characters
    fontSize(12)
    scr={}  -- scroll table
    table.insert(scr,scroll(100,400,100,300))
    table.insert(scr,scroll(400,400,200,300))
end

function draw()
    background(0)
    for a,b in pairs(scr) do
        b:draw()
    end
end

function touched(t)
    for a,b in pairs(scr) do
        b:touched(t)
    end
end

function keyboard(k)
    for a,b in pairs(scr) do
        b:keyboard(k)
    end
end

scroll=class()

function scroll:init(x,y,w,h)
    self.x=x
    self.y=y
    self.w=w
    self.h=h  
    self.sw=2  
    self.dy=0
    self.selected=false
    self.color=color(255)
    self.str=temp   -- something to display
end

function scroll:draw()
    textWrapWidth(self.w)
    noFill()
    stroke(self.color)
    strokeWidth(self.sw)
    rect(self.x-self.sw,self.y-self.sw,self.w+self.sw*2,self.h+self.sw*2)
    clip(self.x,self.y,self.w,self.h)
    fill(255)
    text(self.str,self.x,self.y+self.dy)
    clip()
end

function scroll:touched(t)
    self.selected=false
    self.color=color(255)
    if t.x>self.x and t.x<self.x+self.w and t.y>self.y and t.y<self.y+self.h then
        self.selected=true
        self.color=color(255,0,0)
        if t.tapCount==2 then
            if not showKeyboard() then
                showKeyboard()
            end
        end
        if t.state==MOVING then
            self.dy=self.dy+t.deltaY
        end
    end   
end

function scroll:keyboard(k)
    if not self.selected then
        return
    end
    if k==BACKSPACE then
        self.str=string.sub(self.str,1,string.len(self.str)-1)
    else
        self.dy=0
        self.str=self.str..k
    end    
end

@FearMe2142 Here’s a quick example that uses a table. It’s not very good, but I don’t have time to make it better right now. It won’t have the 1024 pixel problem but it needs work on the scrolling part to speed it up.

function setup()
    fontSize(12)
    textMode(CORNER)
    str=readProjectTab("Main")
    str=str..str
    str=str..str  -- make a long string to display
    str1=""
    tab={}
    tab1={}
    wid=200
    dy=0
end

function draw()
    background(40, 40, 50)
    noFill()
    stroke(255)
    strokeWidth(2)
    rect(100,300,wid,400)
    clip(100,300,wid,400)
    tw=0
    tab1={}
    fill(255)
    for z=1,string.len(str) do
        v=string.sub(str,z,z)
        w,h=textSize(v)
        if tw+w>wid or v=="\
" then
            table.insert(tab1,str1)
            str1=v
            tw=0
        else
            tw=tw+w
            str1=str1..v
        end
    end
    th=0
    for a,b in pairs(tab1) do
        w,h=textSize(b)
        text(b,100,700-th+dy)
        th=th+h/2
    end
end

function touched(t)
    if t.state==MOVING then
        dy=dy+t.deltaY
    end
end

@dave1707 thanks for all the help Dave! :slight_smile: also creating a table that holds each lines does allow the box to hold more pixels.

Would you happen to know in a string.find() if there is an end index? I know I can chose to start the search, but I need it to end early as well. I’ve googled string.finds and haven’t found anything with that yet either. Cheers.

@FearMe2142 There isn’t an end indicator on string.find, just a start value. I’m not sure if this would help, but if you’re not searching a really big section, you could use string.sub to copy a section of the larger string into a temporary string and do a string.find on the temporary string. I have a better example of the above scroll box code using a table that I’ll post once I clean it up. I have a lot going on today and tomorrow, so I’m not sure how soon it will be.

I’m not sure whether this would help, but $ at the end of a pattern anchors that search to the end of the string

@dave1707 oh that’s fine! I’d like to say I really appreciate how helpful everyone is here! I will be really excited to show my final product when it’s done. Hopefully by the end of this year is what I’m shooting for.

@FearMe2142 Here’s the updates version of the scroll box. This version allow you to vary the width and height of the box. I also changed the way I determine how many characters fit in the box width. When using textSize, it returns a rounded up value of the characters width. That results in sometimes not enough characters being put in a line because all the rounding values were added. By checking a string width as a character is added, then the string is filled with enough characters to fit the width. I don’t know it you want to use anything in this version, but it was fun to write.

function setup()
    parameter.watch("st")
    fs=10
    fontSize(fs)
    textMode(CORNER)
    str=readProjectTab("Main")  -- something to display
    str=str..str
    str=str..str
    str=str..str    -- make the string even larger
    str1=""
    st=1
    x,y=200,100 -- x,y position of bottom left corner
    parameter.integer("recWidth",25,300,100,set)
    parameter.integer("recHeight",100,650,300,set)
    resizeTab()
end

function set()
    resize=0    -- resize sliders are being moved
end

function resizeTab()    -- resize the string to fit in scroll box
    lines=recHeight/fs-1    -- number of lines in rectangle
    tab={}
    str1=""
    temp=""
    -- determine number of characters that fit in rectangle width
    for z=1,string.len(str) do
        v=string.sub(str,z,z)
        temp=temp..v
        w1,h1=textSize(temp)
        if z==string.len(str) then
            table.insert(tab,temp)
        elseif v=="\
" then
            table.insert(tab,str1)
            str1=""
            temp=""
        elseif w1>recWidth then
            table.insert(tab,str1)
            str1=v
            temp=v
        else
            str1=str1..v
        end
    end
    output.clear()
    print(string.len(str).." characters")   -- characters in string
    print(#tab.." table lines") -- number of entries in table
end

function draw()
    background(40, 40, 50)
    if resize<4 then  -- delay resizing while changing rectangle size
        resize=resize+1
        if resize==4 then
            resizeTab()
            resize=5
        end
    end
    noFill()
    stroke(255)
    strokeWidth(2)
    rect(x-2,y-2,recWidth+4,recHeight+4)
    clip(x,y,recWidth,recHeight)
    fill(255)
    if #tab>0 then
        th=0
        st=math.max(st,1)//1
        en=math.min(st+lines,#tab)
        for z=st,en do
            th=th+fs
            text(tab[z],x,y+recHeight-th)
        end
    end
    clip()
end

function touched(t)
    if t.state==MOVING then
        st=st+t.deltaY/5
    end
end