button class

General
21

Hi All,

Just playing around with buttons and looked at rounded corners on rectangles. Simeon put some code in the library but I struggled to get anything from it - probably due to parameters passed in the calls - well, that’s what happens in my routines. Simeon used a rounded line drawing suggested by Andrew to achieve it. Bortels gave his thanks as he was going to try the four part ellipses in the corners method. That’s the one I used.

The code is fairly straightforward and is minimised - using a recursive call for bordered buttons. I’m sure someone could make it much tidier and more professional.

I’ve also added a crude text label for the button and wrapped it in a demo to try out location and parameters on the screen to select options. Colour selection and font styling would be a nice addon - I’ve been thinking about incorporating named styles.

Here’s the code:


-- Main

function setup()
    saveProjectInfo("Description", "Cornered buttons demo")
    saveProjectInfo("Version", "1.002 beta")
    saveProjectInfo("Author", "Bri_G")    
    -- set up the function call parameters to play with the buttons
    -- all self explanatory except cr which is the curvature control
    -- note parameter range affects output, distortions are possible
    parameter("cr",0,1,1)
    iparameter("border",0,4,0)
    iparameter("x",0,600,200)
    iparameter("y",0,600,200)
    iparameter("w",100,600,200)
    iparameter("h",0,100,40)    
    butText = ""           
end

function draw()
    -- This sets the background color to black
    background(0, 0, 0)
    -- Set the fill color
    fill(255,0,0)
    -- call the roundRect function
    roundRect("trial button",x,y,w,h,cr,border)
end
        

function roundRect(butText,x,y,w,h,cr,border)
    local d
    if cr > 1 then cr = 1 end
    d = h*cr
    r=d/2

        fill(43, 68, 174, 255)
        ellipse(x+r,y+r,d,d)
        ellipse(x+w-r,y+r,d,d)
        ellipse(x+r,y+h-r,d,d)
        ellipse(x+w-r,y+h-r,d,d)
    --  fill(198, 39, 39, 255)
        rect(x+r,y,w-d,h)
        rect(x,y+r,w,h-d)
        fill(226, 221, 221, 255)  
    -- print centred text     
        text(butText,x+w/2,y+h/2)
    if border > 0 then
        fill(173, 50, 79, 255)
        ellipse(x+r,y+r,d,d)
        ellipse(x+w-r,y+r,d,d)
        ellipse(x+r,y+h-r,d,d)
        ellipse(x+w-r,y+h-r,d,d)
        fill(198, 39, 39, 255)
        rect(x+r,y,w-d,h)
        rect(x,y+r,w,h-d)
    -- adjust internal variables for inner shape
    -- retain temp copies of variables for text usage
    -- then draw inner button
        xx, yy, ww, hh = x, y, w, h
        x = x + border
        y = y + border
        w = w - 2*border
        h = h - 2*border           
        roundRect("trial button",x,y,w,h,cr,0)       
    end     
end

Hope this embeds properly - I’ll be uploading to one of the code repositories soon and will post links. Tried to include a picture - does this site have a picture repository to upload to so that we can link in properly. I haven’t at the moment and may need to look into it. Also, other forums I’ve used have editing options to add HTML code so that you can embed pics etc directly - does this forum?

Finally Andrew - any chance you can give me a link to the code routine you wrote for Touch recognition and selection. Your link just points to your site - Wow!!! but difficult to search. Thanks.

Bri_G
:slight_smile:

22

Hi All,

Just a quick note - if you want to see how this works add a fill() command before the ellipse code with a contrasting colour. You then see how the corners are built up using the parameter sliders e.g. for ‘cr’.

Secondly - this code is just from play time - it will need tidying up if you wish to use it as a library, mainly making more variables local and push and pop the styles and matrix before/after the routines. I’ll produce a better package if there’s enough interest.

Have fun.

Bri_G

:wink:

23

Hi All,

Here’s my first follow up. Added push an’ pop, plus I’ve also added named styles.

Try it out.

-- Main
function setup()
    saveProjectInfo("Description", "Cornered buttons demo")
    saveProjectInfo("Version", "1.002 beta")
    saveProjectInfo("Author", "Bri_G")    
    -- set up the function call parameters to play with the buttons
    -- all self explanatory except cr which is the curvature control
    -- note parameter range affects output, distortions are possible
    parameter("cr",0,1,1)
    iparameter("border",0,4,0)
    iparameter("x",0,600,200)
    iparameter("y",0,600,200)
    iparameter("w",100,600,200)
    iparameter("h",0,100,40)    
    butText = ""
    name = ""
    on = 1
    off = 0          
end

function draw()
    -- This sets the background color to black
    background(0, 0, 0)
    -- Set the fill color
    fill(255,0,0)
    -- call the roundRect function
    roundRect("trial button",x,y,w,h,cr,border)
end
        

function roundRect(butText,x,y,w,h,cr,border)
    pushStyle()
    pushMatrix()
    if cr > 1 then cr = 1 end
        d = h*cr
        r=d/2
        style("backStyle", on)
        ellipse(x+r,y+r,d,d)
        ellipse(x+w-r,y+r,d,d)
        ellipse(x+r,y+h-r,d,d)
        ellipse(x+w-r,y+h-r,d,d)
        rect(x+r,y,w-d,h)
        rect(x,y+r,w,h-d)
        style("backStyle", off) 
    -- print centred text
        style("fontStyle", on)    
        text(butText,x+w/2,y+h/2)    
        style("fontStyle", off)
    if border > 0 then
        fill(173, 50, 79, 255)
        style("frontStyle", on)
        ellipse(x+r,y+r,d,d)
        ellipse(x+w-r,y+r,d,d)
        ellipse(x+r,y+h-r,d,d)    
        ellipse(x+w-r,y+h-r,d,d)
        rect(x+r,y,w-d,h)
        rect(x,y+r,w,h-d)
        style("frontStyle", off)        
    -- adjust internal variables for inner shape
    -- retain temp copies of variables for text usage
    -- then draw inner button
        xx, yy, ww, hh = x, y, w, h
        x = x + border
        y = y + border
        w = w - 2*border
        h = h - 2*border           
        roundRect("trial button",x,y,w,h,cr,0)       
    end
    popMatrix()
    popStyle()   
end

function style(name,condition)
    if condition == on then
        pushStyle()
        pushMatrix()
        if name == "butStyle" then
            strokeWidth()
            fill(226, 28, 28, 255)            
        elseif name == "backStyle" then
            fill(43,68,174,255)
        elseif name == "frontStyle" then
            fill(136, 205, 60, 255)           
        elseif name == "fontStyle" then
            font("Arial-BoldMT")
            fontSize(17)
            fill(226, 239, 37, 255)
        end
    elseif condition == off then
        popStyle()
        popMatrix()
    end
end

Next thing on the agenda - need to link it to the Touch detection routines.

Bri_G

:slight_smile:

24

Sorry, missed the request. My code is at http://www.math.ntnu.no/~stacey/HowDidIDoThat/iPad/Codea.html. Actually, the touch class is in the anagram program which is one of the sample programs in Codea.

25

Hi Andrew,

No probs, thanks for the link - I’ll chase the code up form the Codea example. I need to add elements to my button code and also to another app I’m working on.

Bri_G

:slight_smile: