Cider -- interface builder / code generator

Ahh I saw self.callback = callback or nil and checked it off :slight_smile:

Forgot to mention one of my favorite things in this version. Drag a Dial onto the screen and check properties. You can automatically generate code tying the dial to Gravity or UserAcceleration.

It’s a simple thing, but expect more of this sort of option going forward.

aciolino - Great work on Cider. Where can we download the latest? Are we free to use it in our commerical apps? What license are you putting it under?

Thanks

Ask @Mark about cider. I’m sure it’s open.

Yes, absolutely. I’m just happy that someone finds some value.

With several articles pointing toward a more flat look for iOS7, immitating Apple’s standard controls may actually become easier and require less code.

As soon as we get a glimpse (which probably means waiting for WWDC) I’ll update the Cider controls to better mimic the new direction.

From what I saw on some concept videos and know of the code underneath, I’d say that about 60% of the painful UI stuff written goes away.

@Mark, it’s likely that stripping a lot of the bezel stuff out of the existing Cider controls is all that will really be needed; most of the controls in Cider spend time doing bezels that would get removed.

I might start next week on retooling the dials. I’m curious about the best design mechanism for the on/off switch.

As plain as it appears, I’m actually pretty excited to see the iOS 7 UI.

Hey, so I have a quick issue and I’m unsure as to why it is occurring.

So basically I made my uhh GUI/Interface or w/e you want to call it with Cider, then I used Print Code. I copied all that code and placed it into a project.

I then got the controls class and placed that in as well. All worked out fine.

Then 10 minutes later I try it and I got all this crap on my screen that I didn’t even get in the code.

Basically what I added was:
1 text box
1 slider
3 buttons

When I run it now, I’m getting a box that says Text Boxes, and 4 text boxes inside of that.
A box that says Switches, but nothing inide of that.
Then a box that says buttons that has everything else in it, Left/Center/Right, slider, Button B, The other slider thing, and Icon Button.

None of this extra crap was in my code so I don’t understand why it is now all of the sudden popping up… :frowning:

Code:

displayMode(FULLSCREEN)

function setup()

textBox1 = TextBox('Choose Your Color:', 400, 660, 640, 690)

textBox1.fontSize = 26

ColorSlider = NotchSlider('Red;Orange;Yellow;Green;Pink', 340, 540, 700, 650)

button1 = TextButton('New Game', 120, 340, 360, 460)

button1.fontSize = 26

button2 = TextButton('Continue Game', 400, 340, 640, 460)

button2.fontSize = 26

button3 = TextButton('Information', 680, 340, 920, 460)

button3.fontSize = 26

end

function draw()

background(194, 194, 194, 255)

textBox1:draw()

ColorSider:draw()

button1:draw()

button2:draw()

button3:draw()

end


function touched(touch)

textBox1:touched(touch)

ColorSlider:touched(touch)

button1:touched(touch)

button2:touched(touch)

button3:touched(touch)

end


function keyboard(key)

if CCActiveTextBox then

CCActiveTextBox:acceptKey(key)

end

end

Can someone help me with my issue?

Edit: So the issue seems to be depending upon the order in which I have Frame and Main
Frame has to go first for whatever reason. And I think the reason is because it is actually pasting over top of whatever Frame is creating

I think you copied the main tab out of CiderControls, which provides a sample of each control.

You don’t need to copy any of the controls into your project. Just put CiderControls into a project of their own, the. Touch the + in the upper right and add the controls project as a dependency.

But if I was to send the code to my friend
How would he get the dependency?

Just load it as two projects and then add the dependency — it doesn’t take a sec.

If you want to put it all in one project, be sure to delete the main tab in CiderControls.

@jakAttack That’s not going to work.

Both Cider and CiderControls should import to multiple tabs. At the start of each tab, you should see the

–#

text that signals the start of a new tab.

Cider Controls
https://gist.github.com/devilstower/5384106

Cider
https://gist.github.com/devilstower/5384102

Go to the Gist page and select the complete text. Then come back to Codea, create a new project and select ā€œpaste into projectā€ when it pops up. It should properly distribute the text across tabs. I just gave it a try again and everything went fine.

Edit: Nevermind, I found it and got it working, thank you. Cider is excellent

Ok, so I downloaded Cider 1.6 and Cider Controls 1.5 and have put everything nice and tidy on their own tabs.

When I try to run Cider I get errors all the way through. Its very weird. Many times inheritance seems not to want to propagate properly. When different classes call self:width() or self:height() it pops out an Error. So I fixed some of those, and then self:roundRec() doesnt want to work either. Any ideas on what might be going on? Is there an easy fix?

My guess is tab order. Make sure frame and control classes are the first tabs.

Check to make sure that the first two tabs are Frame then Control. Everything else shouldn’t really matter (I don’t think).

Thanks! That was it. I had no idea that it mattered.

I’m reworking Cider’s core controls to make them match the appearance of iOS 7.

Unfortunately, this will mean that existing apps using Cider will probably need some tweaking. For example, the default font in Cider at this point is the Helvetica Neue in normal or bold, and the new version will be the light stroke. To make this clear with noSmooth(), I’ve increased the standard fontSize of controls from 16 to 20. This has the general effect of making many controls a bit larger than they were before.

Additionally, plain TextButtons look a good deal different (borderless and without curved corners) and to make them look good in an iOS7 style app, they need to be a bit higher than the old variety.

Switches have also changed a good deal. The text placement and appearance is considerably different, as is their reaction to scaling.

The SelectList container, which can display either a ā€œchecklistā€ or ā€œmulti selectā€ style group of items, has some new flexibility and now uses embedded Switch controls. Code using the old calls should still work, but the appearance and behavior are different in both large and subtle ways.

TextBoxes suck as much as they ever did, I’m afraid.

In any case, I’ll have an update in a few days, but if you’re well along with an app using the existing Cider controls, I’d suggest you keep them as is.

As to that… is anyone using these controls? It would be nice to get some sense of how much (or little) they’re being used. Thanks.

@mark Update sounds great! I use these and love them. Codea not having a GUI makes it hard to develop non-games. I use Cider regularly to overcome this.

@Mark, I would love to see an update. I also use the controls regularly. In fact, I keep this discussion bookmarked. Moreover, I’ve seen cases, on this forum, where people referred back to this discussion. For instance, someone asked, ā€œHow do you make a checkbook?ā€ Several people pointed to Cider. How do you make a Start button? How do you make a text box? Is there a way to make a user interface in Codea? Someone will usually post a link to Cider. Honestly, to do this stuff in Codea without it would be a pain in the butt. I think Cider definitely fills a major Codea capability gap.