Cider -- interface builder / code generator

Wow @Mark, this is great!

I’ve modified a couple of slider methods to make the controls work better. When you drag the slider, it stays grabbed when you move your finger away.

function Slider:init(s, left, bottom, right, top, min, max, val)
    Control.init(self, s, left, bottom, right, top)
    self.controlName = "Slider"
    self.min = min
    self.max = max
    self.val = val
    self.grabbed = false
end

function Slider:touched(touch)
    local x, scale
    if touch.state == BEGAN then
        if self:ptIn(touch.x, touch.y) then
            self.grabbed = true
        else
            self.grabbed = false
        end
    end
    if self.grabbed then
        x = touch.x - self.left - 10
        scale = ((self.right - self.left) - 20) /
        (self.max - self.min)
        self.val = math.floor(x / scale) + self.min
        if self.val < self.min then
            self.val = self.min
        elseif self.val > self.max then
            self.val = self.max
        end
        return true
    end
end

It seems I can only edit a post once, so sorry for the double post.

New modification: buttons activate when pressed down then up:

function TextButton:init(s, left, bottom, right, top)
    Control.init(self, s, left, bottom, right, top)
    self.controlName = "TextButton"
    self.pressed = false
    self.background = color(119, 158, 199, 255)
    self.highlight = color(64, 192, 66, 255)
    self.grabbed = false
end

function TextButton:touched(touch)
    if self:ptIn(touch.x, touch.y) and touch.state == BEGAN then
        self.grabbed = true
    end
    if self.grabbed then
        if self:ptIn(touch.x, touch.y) then
            self.pressed = true
        else
            self.pressed = false
        end
        if touch.state == ENDED then
            if self.pressed then
                return true
            end
            self.grabbed = false
        end
    end
    return false
end

function IconButton:init(s, left, bottom, right, top, img)
    Control.init(self, s, left, bottom, right, top)
    self.controlName = "IconButton"
    self.foreground = color(191, 191, 191, 255)
    self.background = color(91, 91, 91, 255)
    self.img = img
    self.textAlign = CENTER
    self.vertAlign = BOTTOM
    self.grabbed = false
end

function IconButton:touched(touch)
    if self:ptIn(touch.x, touch.y) and touch.state == BEGAN then
        self.grabbed = true
    end
    if self.grabbed then
        if touch.state == ENDED then
            if self:ptIn(touch.x, touch.y) then
                return true
            end
            self.grabbed = false
        end
    end
    return false
end

Now dialogs!

function Dialog:init(t, left, bottom, right, top)
    Control.init(self, t, left, bottom, right, top)
    self.controlName = "Dialog"
    self.text = t
    self.inner = Frame(left + 4, bottom + 4, right - 4, top - 40)
    self.background = color(255, 255, 255, 255)
    self.grabbed = false
    self.showing = false
end

function Dialog:touched(touch)
    if self.showing and self:ptIn(touch.x, touch.y) then
        if touch.state == BEGAN then
            self.grabbed = true
        end
    end
    if self.grabbed then
        if touch.state == ENDED then
            self.grabbed = false
            if self:ptIn(touch.x, touch.y) then
                return true
            end
        end
    end
    return false
end

function Dialog:show()
    self.showing = true
end

function Dialog:hide()
    self.showing = false
end

Notch slider:

function NotchSlider:init(s, left, bottom, right, top)
    Control.init(self, s, left, bottom, right, top)
    self.controlName = "NotchSlider"
    self.itemText = {}
    self:splitText()
    self.grabbed = false
end

function NotchSlider:touched(touch)
    local x, scale
    if touch.state == BEGAN then
        if self:ptIn(touch.x, touch.y) then
            self.grabbed = true
        else
            self.grabbed = false
        end
    end
    if self.grabbed then
        if #self.itemText > 1 then
            scale = self:width() / (#self.itemText - 1)
            x = touch.x - self.left + 20
            self.selected = math.floor(x / scale) + 1
        end
        return true
    end
end

Text box:

function TextBox:touched(touch)
    if touch.state == BEGAN then
        if self:ptIn(touch.x, touch.y) then
            CCActiveTextBox = self
            if not isKeyboardShowing() then showKeyboard() end
            return true
        elseif CCActiveTextBox == self then
            CCActiveTextBox = nil
        end
    else
        return false
    end
    return true
end

Good stuff, @floppy_gunk. I’ve added your code into the controls.

One thing I changed; add self.pressed = false right above return true in the TextButton touched function.

Thanks. And thanks, @Simeon

I have just made a bunch of UI changes that I haven’t kept track of (in both Cider and Cider Controls), so I’ve forked your Cider gist.

Cider

Cider controls

Cool beans. I’m going through the Cider code at the moment, cleaning up the touch handling (which was getting a little out of control). Once I have it halfway decent again, I’ll roll in your appearance upgrades. Thanks.

Yesterday I asked if it was possible to decrement values With iparameter and @dave1707 responded as follows :

I tried doing that and it didn’t work. You can do -10,-1,-10 and change the sign of the value you get by multiplying it by -1, which would give you the 10,1.

It worked perfectly, I suggest to @Mark, adding a parameter to his Slider control on the Cider controls section, enabling the choice of decreasing values.

Thanks a lot for the great effort and for the tendancy to increase the number of controls properties.

in this program generated by CIDER I am trying to get the content of txtquestion,txtanswer,txtimage and txtscoring in the textarea called myrecap, but I am unable to get them separate by a carriage return I tried /n without success.
Any help please.


-- Generated by Cider
-- 
-- Add CiderControls as a dependency to enable controls
-- 
supportedOrientations(LANDSCAPE_ANY) 
displayMode(FULLSCREEN)

-- Generated by Cider
-- 
-- Add CiderControls as a dependency to enable controls
-- 
 
displayMode(FULLSCREEN)
-- 
function setup()
    
     notchSlider1000 = NotchSlider('Sect. A; B;C;D;E;F;G;H', 120, 650, 700, 680)
     notchSlider1000.fontSize = 22
     notchSlider1000.font = 'Arial-BoldMT'
     -- // QUESTION 
     myquestion = IconButton('Question : ',40,580,160,610)
     myquestion.fontSize = 20
     myquestion.font = 'Arial-BoldMT'
    
     txtquestion = TextBox('', 220, 580, 960, 610)
     txtquestion.fontSize = 20
     txtquestion.font = 'Arial-BoldMT'
     -- // ANSWER
     myanswer = IconButton('Answer :', 40, 500, 160, 530)
     myanswer.fontSize = 20
     myanswer.font = 'Arial-BoldMT'
    
     txtanswer = TextBox('', 220, 500, 960, 530)
     txtanswer.fontSize = 20
     txtanswer.font = 'Arial-BoldMT'
     -- // IMAGE
     myimage = IconButton('Image :', 40, 420, 160, 450)
     myimage.fontSize = 20
     myimage.font = 'Arial-BoldMT'
    
     txtimage = TextBox('', 220, 420, 660, 450)
     txtimage.fontSize = 20
     txtimage.font = 'Arial-BoldMT'
     -- // SCORING
     myscoring = IconButton('Scoring :', 40, 340, 160, 370)
     myscoring.fontSize = 20
     myscoring.font = 'Arial-BoldMT'  
     
     txtscoring = MultiButton('2;1;0', 220, 340, 360, 370)
     txtscoring.fontSize = 24
     txtscoring.font = 'Arial-BoldMT'
    
     myconfirmation = TextButton('ACCEPT', 400, 80, 530, 120)
     myconfirmation.fontSize = 20
     myconfirmation.font = 'Arial-BoldMT'
    
     myrecap = TextBox('', 220, 140, 960, 310)
     myrecap.fontSize = 18
     myrecap.font = 'Arial-BoldMT'
    
     label1011 = IconButton('Question Number :', 500, 720, 740, 750)
     label1011.fontSize = 20
     label1011.font = 'Arial-BoldMT'
    
     questionnumber = IconButton('0', 860, 720, 960, 750)
     questionnumber.fontSize = 22
     questionnumber.font = 'Arial-BoldMT'
    
     btnnewquestion = TextButton('NEW Question', 600, 80, 790, 120)
     btnnewquestion.fontSize = 20
     btnnewquestion.font = 'Arial-BoldMT'
end

function draw()
     background(194, 194, 194, 255)
     notchSlider1000:draw()
     myquestion:draw()
     myanswer:draw()
     myimage:draw()
     myscoring:draw()
     txtquestion:draw()
     txtanswer:draw()
     txtimage:draw()
     txtscoring:draw()
     myconfirmation:draw()
     myrecap:draw()
     label1011:draw()
     questionnumber:draw()
     btnnewquestion:draw()
end

function touched(touch)
     notchSlider1000:touched(touch)
     myquestion:touched(touch)
     myanswer:touched(touch)
     myimage:touched(touch)
     myscoring:touched(touch)
     txtquestion:touched(touch)
     txtanswer:touched(touch)
     txtimage:touched(touch)
     txtscoring:touched(touch)
     -- myconfirmation:touched(touch)
     if myconfirmation:touched(touch) then
        myrecap.text="Question : " ..txtquestion.text .. " Réponse : " ..txtanswer.text .."image : "..txtimage.text .. txtscoring.itemText[i]
    end
     myrecap:touched(touch)
     label1011:touched(touch)
     questionnumber:touched(touch)
     if btnnewquestion:touched(touch) then
        -- // INCREMENTATION ????
        questionnumber.text=""
     end
end

function keyboard(key)
    if CCActiveTextBox then
       CCActiveTextBox:acceptKey(key)
    end
end
  

I am unable to increment the question Number is there an strtoint function ? Or val(string) ?

Thanks in advance.

There’s an issue with IconButton code generation that’s screwing up your code. I’ll make a little patch ASAP.

@Mark, I am very impressed with your Interface Builder Program. I started using the very first version and it worked well. I did notice the the TextBox had some room for improvement. So I set out to do an update that would make it a bit more useful. The video shows what I have to date. This, unfortunately, was not based on your most recent Version 1.5 I wanted to get something out for people to look at so this is a work in progress. The code is here: https://github.com/twpster/Cider.git I’m new to github so let me know if you can’t find it. All comments / suggestions are very welcome. The video is here: http://www.youtube.com/watch?v=B1nOpITo-gQ&feature=plcp

Thanks, @twpster. That looks really nice. I’m falling a bit behind in rolling the conributions into Cider, but I really love that this project is moving other people to contribute.

If we could get to the point of having a really nice set of open source, community-generated controls, all of which share common features and predicatble APIs, it should be a big help to both game and non-game projects.

I’ll have a new version up Real Soon Now.

@Mark, how do you set up Cider?

@JakAttak First copy the Cider code into a project. Then create a second project and insert the code for CiderControls into that one.

Once you have both projects, go into the Cider project, touch the “+” at the upper right of the screen, and look for CiderControls under the Dependencies list. Select it.

Cider should now run as intended.

You know, it occurs to me that it’s high time I documented this thing!

@Mark When I select Cider Controls under Dependencies, it says 0 imported tabs

Hmm. Take a look on the CiderControls project and make sure the Codie’s there. There should be 20 tabs.

@Mark All the code is in one tab

Could it be updated so that double-tap or long press selects all text?

It should be fairly easy to add that. It sounds like a good feature. I’ll give it a try. Thanks @aciolino!

New user here, apologies in advance if this is horribly stupid, but my Cider doesn’t look like the video. The drawn text (interface title, “Cider”, etc) is missing and the switch is way below the switch box. And it’s not very interactive.

I copy pasted from the 1.5 GitHubs in the top post, making two files, main and cidercontrols. I tried raw, double checked the line counts, tried through goodreader. Obviously I am missing something! Would appreciate any help.

I just updated my cider today, same as you, And it works fine.

Try going to a web browser, and using the raw link of the gist. It’s harder to copy, but it’s always accurate.

It’s possible to GoodReader has a bug in copying raw text.