Simple Dialog Control

Vega · May 2012

I have been creating a game with Codea and started thinking how I might like to create a library of simple controls that are easy to implement with just a few lines of code. The first one I worked on is a simple dialog control that displays text in a popup speech bubble and disappears when clicked on. It could be used for character speech or as a pop up for instructions, etc.

Experienced coders, I would love to hear if you have any ideas on how this could be better implemented as I would like to get this and other controls (button is next) to production quality.

Here is a screenshot:

Here is the ShowDialog Class:

ShowDialog = class()

function ShowDialog:init(text,location,width,height)
    self.minimumFontSize = 6 
    --Set the above to the lowest size you want text automatically scaled down to
    self.text = text
    self.location = location
    self.width = width
    self.height = height
    self.visible = false
    self.fontSize = 20
    self.font = "Georgia"
end

function ShowDialog:draw()
    if self.visible == true then
        sprite(self.image, self.location.x, self.location.y)
    end
end

function ShowDialog:touched(touch)
    if self.visible == true then
        if touch.x >= self.location.x - self.width/2 and 
        touch.x <= self.location.x + self.width/2 and 
        touch.y >= self.location.y - self.height/2 and 
        touch.y <= self.location.y + self.height/2 then
            --Close box
            self.visible = false
        end
    end
end

function ShowDialog:setFont(newfont,size)
    self.font = newfont;
    self.fontSize = size;
end

function ShowDialog:changeText(text)
    self.text = text
end

function ShowDialog:move(location)
    self.location = location
end

function ShowDialog:resize(width, height)
    self.width = width
    self.height = height
end

function ShowDialog:hide()
    self.visible = false
end

function ShowDialog:show()
    --Now we have to create the image
    local textWidth, textHeight
    self.image = image(self.width, self.height)
    setContext(self.image)
    sprite("Planet Cute:SpeechBubble",self.width/2,self.height/1.25,self.width,self.height*1.6)
    font(self.font)
    fontSize(self.fontSize)
    textWrapWidth(self.width * .8)
    noStroke()
    fill(0, 0, 0, 255)
    local textFits = false
    while textFits == false do
        textWidth, textHeight = textSize(self.text)
        if textHeight > self.height * .8 then
            local stringLength = string.len(self.text)
            if self.fontSize >= self.minimumFontSize + 1 then
                self.fontSize = self.fontSize - 1
                fontSize(self.fontSize)
            elseif stringLength > 10 then
                self.text = string.sub(self.text,1,stringLength - 10)
            else
                self.text = "error, box too small!"
                textFits = true -- not really, but what else can we do?
            end
        else textFits = true
        end
    end
    text(self.text, self.width * .525, self.height * .525)
    setContext()
    self.visible = true
end

and here is a demo program

displayMode(FULLSCREEN)
function setup()
    dialog1 = ShowDialog("Click to close me.",vec2(180,180),180,180)
    dialog1:setFont("Georgia",14)
    dialog1:show()
    dialog2 = ShowDialog("Notice that I set the fontSize for this text to be 22 pt in the main setup fuction.  At this size, the text wouldn't fit, so the control automatically shrinks it down to a size that does fit.",vec2(WIDTH-260,HEIGHT-160),320,320)
    dialog2:setFont("Papyrus",22)
    dialog2:show()
end

function touched(touch)
    dialog1:touched(touch)
    dialog2:touched(touch)
end

function draw()
    background(0, 0, 0, 255)
    dialog1:draw()
    dialog2:draw()
end

Feedback appreciated.

Bri_G · May 2012

Hi @Vega,

I'm impressed, I've been looking to put something together myself but don't have your skills.

My only suggestions, and this covers a general point for Codea, is that the routines for building up shapes depend on a few primitives - circle/ellipses, rectangle and triangle via mesh. I think we need a library of routines to build up vector based shapes with shading. This would enable the use of these routines to build up smooth realistic shapes, like your speech bubble. The problem with scaling sprites is you lose the definition. Then you can place them anywhere, scale to fit and provide the speech bubble links where needed.

I have an application I am working on at the moment where I have had to use sprites and have shaped them to fit my needs. If it's OK, I'll play around with your routines and see if they help in my app.

Can anyone point me to references which show how to build up these vector based shapes, I'll look into a library then and feedback - IF and when I manage to build something.

Thanks,

Bri_G

B-)

Deamos · May 2012

I like this! We need to collaborate and put our codes together. I've been building a Windowing System for Codea.

https://github.com/deamos/Codea-Window-Manager

Vega · May 2012

Probably you are right, @Bri_G and I should make the controls with vectors. I guess I have been intimidated by trying to code rounded corners for the controls that scale nicely and perhaps a nice drop shadow effect. Maybe I will experiment a bit with this as nearly all controls could use that.

I will check out your Windowing system today @Deamos , this could save I time and effort on nearly every project as well. Maybe a complete Codea RAD windows library could be in order.

Deamos · May 2012

@Vega : Yeah! The example code isn't finished, but as of now, the actual framework is ready to go. I was thinking about adding in some other Apple like widgets/attachments once I get my current project finished. I had even entertained the notion of designing a GUI for building the windows themselves instead of just using the framework code.

Howdy, Stranger!

Categories

In this Discussion

Simple Dialog Control

Comments