Cider -- interface builder / code generator

Gotta be careful with that code - it does a LOT of stuff that is Cider/Cider2 specific that you don’t need to do to get a UI running :slight_smile:

Are there any places I can find examples of how to integrate the Cider generated code into my own project? I want a couple of simple text input boxes and some two/three position switches to set specific parameters. I am a newbie at this so talk slowly.

Right now, Cider controls are pretty advanced and hard to understand. The goal of it is to include the Cider library into your app and use the code that Cider generates for you; more along the lines of how someone would design a user interface for consumption.

For what you want to do, you migt consider using the interface and dropping 1-2 controls on a simple sccreen, then looking at the code generated and change a few parameters.

Are you able to get the Cider Designer Interface running? If so, you cacn use that to see how Cider generates appropriate LUA code for you to paste intoyour project - about 2-3 lines of code to get the boxes, buttons, etc. working.

If these parameters you want to change in your app are for you and debugging, stick with Codea’s parameters functions. If these params are something that a user changes at run time, then you need UI elements like you are trying to design.

I’ve got a sample of a UI screen in my Cider2 video that changes color parameters on a Window using a UI. Take a look at that video and tell me if that is what you aretrying to accomplish.

http://twolivesleft.com/Codea/Talk/discussion/2168/cider2-windowed-controls

On @briandbrady, if menu2 is a problem, I think you need to move it - it’s possible that you don’t have the Menu class in front Main, so it can’t compile it at runtime.

CiderControls should be first, Main should be last.

@tnlogy I could see this taking off, if you have a UI builder. It’s more aligned with the Cider2 stuff in my mind, though, it seems Window" oriented instead of “screen” oriented in design.

Oh, I should have made it clear that the update I posted was for the “generic” Cider, not @aciolino’s more advanced windowing version.

When you run the designer program (plain old Cider), try dragging some controls out onto the screen then hit the “save code” button on the bottom of the control panel. It will now write that code to a tab called Output. If you quit and run again, what you should see is actually the Output program. So you can test it out quickly. If you like what you see, copy the contents of output and paste them into a new project.

To get the designer up and working normally again, just delete the code in the Output tab.

Yeah, what @Mark said.

I’ve made a simple test program with a text box and a checkbox. I have linked it to Cider and it runs fine showing the two controls. Now I would like to grab the contents of the textbox and print it or do something else with it. This is where I run into difficulties. The textbox is assigned the variable name textBox1002, but I cannot seem to do anything with it. print(textBox) gives me a table value, but I haven’t found out how to properly retrieve the text from the table. I guess I am lacking a fundamental understanding of tables still.

Good news. I am able to get the assigned information from the textbox and checkbox variables. I was missing the textBox1002.text and the checkBox1001.selected. Now I can extract the input information and print it on the main display using the text() command. Although I seem to have another problem now that I cannot solve. I am using a textAlign(LEFT) command one line prior to the text() commands that display the input values of the UI components, but all of the text is centered. What could be making this happen? Is there some global setting somewhere in the Cider code that is forcing the text to center? Thanks for the help.

Oops. I found my over site. I did not have textMode(CORNER) set.

Glad to help! :slight_smile:

I created a new project with a notch slider and checkbox and have successfully read the values from the created variables. i want to relocate the controls based from the top left corner of the screen. I’ve created some variables for the location of a notch slider that use HEIGHT-y where y is my desired location relative to the top of the screen. If I place these variables into the definition of the notch slider, it’s position is changed but it no longer changes states. If I just change the values for the 2 y-locations in the definition, the control changes to the new location and still works. Why does it not work with variables for the location values? Should I be doing something special or does Cider not allow the locations to be defined by variables?

@Briandbrandy Variables should be just fine in any of the values.

For example:

ASlider = NotchSlider('Notch;Slider', 340, HEIGHT - 200, 450, HEIGHT - 100)

Should put a notch slider 100 pix down from the top of the screen. Just remember you need to change BOTH y values when positioning the control.

I just tried again and see my mistake. I had the second y-value less than (below) the first y-value. Oops. Thanks for responding.

hello @Mark
i am trying to use you graet Cider library.
i managed to remove the back screen (thanks to Dave1707 an innody codes)
and to get some code out of it (not so clear, specially if you work landscape as me: all the buttons dont show up, and specially the “save changes” one!)
but now i dont know how to get a callback from the buttons?
here is my code:

-- Generated by Cider
--
-- Add CiderControls as a dependency
--
 
displayMode(FULLSCREEN)
 
function setup()
     button1000 = TextButton('Button', 100, 200, 230, 240, test_Clicked)
     textBox1001 = TextBox('Text Box', 100, 160, 230, 190, test_Clicked)
end

function draw()
     background(194, 194, 194, 255)
     button1000:draw()
     textBox1001:draw()
end

function touched(touch)
     button1000:touched(touch)
     textBox1001:touched(touch)
end

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

can you tell me how to make a callback function? or how you get a return info from the buttons? thanks in advance.

Looks like you are using my mod of the code…tou already defined the callback function (test_Clicked), so now add

Function test_Clicked()
-- your clicked code
End

thanks @aciolino
actually i did it with print(“hello”) as the code in the callback. But:
when i click the button, it get nothing
when i click the text box i get 2 hello printed?
i tried to define test_clicked(v) but v is nil…
How do you get the text back?

Can you share your code? It’s also possible that your text button class is missing the callback in cidercontrols.lua.

I use the code posted just above by @Mark.
I’ve looked into the code: i understand why the text box doesn’t output the text: simply because it isnt programmed that way. It is up to me to get it from the button pointer.
I might grab and modify some of the Cider library to put it in my windows library. Is it ok with you Mark & Aciolino if i do that?

I’m fine with it (it’s really owned by @mark). I’ve done a bunch of work on Cider2 with used Cider as the baseline, but allows for a windowed and a non-windowed version with messages and callbacks built into the components that were in Cider.

I still have to get a decent way of archiving code into GitHub, but once I do you can leverage that.