Cider -- interface builder / code generator

@ForgePoet you may need to add displayMode(FULLSCREEN) just under function setup()

So, I deleted my old project, made a fresh one, copied main from the github raw via chrome, repeated for the controls, and… it worked.

As near as I can tell, my problem was that I had moved the “main” file to first in the order. When I rebuilt, I left it alphabetical. Swapping the file order gives me the same issue again. Weird. Hope this helps someone else!

A thought on the Cider model of processing -

Maybe, to make the tool appear less scripts, the idea of callbacks should be used/generated. So, have the button have a callback of button1000_clicked(param) and code-gen

Function button1000_clicked(param)
    --todo: user to add clicked code
End

That way, we don’t have to write that same code all over.

Also, different objects might have several events, so possibly modify the properties box to have checkboxes next to possible events. So text-selected and text-focus events can be handled differently.

This would probably make Cider the toolkit to use!

Interesting ideas, @aciolino. Let me bang it around a bit. I particularly like adding some optional events.

Take a look at the DropBox stuff I just wrote, it uses a callback mechanism.

Got a few minutes free. Can you add this to the code base?

Change Control:init, add this.

function Control:init(s, left, bottom, right, top, callback)
.
.
. -- after self.controlname...
    self.callback = callback or nil

And each control change the signature…I did the TextButton one here, but anything that needs a simple event is done this way.

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

And change the touched to callback once a hit is true…we should probably change this to account for button up, but we’re in a hurry.

function TextButton:touched(touch)
    if self:ptIn(touch.x, touch.y) and touch.state == ENDED then -- changed this!!!
        self.pressed = true --can probably kill this
        self.callback()
        return true -- and this
    else -- and this whole thing
        self.pressed = false
        return false 
    end
end

Call it this way…in setup()

button1002 = TextButton('Access Token', 20, 580, 150, 610, button1002_Clicked)

And add a function to your code base…could put it in a different code file to keep it seperate and cleaner…

function button1002_Clicked()
    print("button1002 clicked.") 
end

Some folks could consider an array of event handlers, but once again, this is done in a hurry…

After printTouched in printElements()

    if swtMain.selected then
        --print("end")
        print("")
    else    
        print("  ")
        print("-- ===================")
        print("--  Events ")
        print("-- ===================") 
    end
    for i, e in ipairs(elements) do
        e:printEvent()
    end

And for UIElement()

function UIElement:printEvent()
    print("function "..self.name.."_Clicked()")
    print("    -- user adds code here")
    print("end")
end

Thanks @mark. I’ve basically deprecated that code in the Button class so that we can use handlers more effectively. Not sure how this impacts ohter areas of the interface builder, but with the removal of the button in favor on a menu, I don’t has as much of a worry anymore :slight_smile:

Terrific, @aciolino

See what you think of the effect of adding this code near the top of the draw function.

stroke(202, 151, 151, 255)
    strokeWidth(2)
    if swtGrid.selected then
        for x=0, WIDTH, 20 do
            line(x, 0, x, HEIGHT)
        end
        for y=0, HEIGHT, 20 do
            line(0, y, WIDTH, y)
        end
    end

I can’t decide whether or not I like it.

And dropping this little snippet just below the text command for the little “I” adds some dimensions to resizing controls.

text(dragElement.element:width(), infoRect:midX(), 
        rightBottomSize.bottom)
text(dragElement.element:height(), leftBottomSize:midX(), 
        dragElement.element:midY())

That’s about everything I’ve done since the 1.3 version of the interface builder.

With the changes you made and @twpster’s improved text boxes, this is a big upgrade. Thanks!

i have also coded a save/load routine for the Cider designer, so layouts can be serialized and reloaded for re-generation. What I don’t know is where to “hook” it into the flyout menu; the menu is out of room.

Maybe it’s time to consider addin a menu system to the main screen (hey…we don’t have menus as a control in Cider!) so we can do File Save/Load.

Sounds fantastic, @aciolino. I’m still wading through the tutorial screens on my (newly renamed) ChipBots app, so I may be a bit getting things pulled together from my end.

Please feel free to update a Github with your latest. If you’re okay with it, will call that the new “root” branch.

About the only things I’ve done lately are a small bit of code to make the placement grid visible as a light set of lines, and a touch of text around controls being resized to show their size in pixels. Both things easily slipped in later.

I’d like to get a 1.4 version of Cider out, then maybe camp a bit until the 1.5 version of Codea hits, which would allow more flexibility in directly generating projects.

@Mark, I’ve still not figured out quite ow to make a GitHub on my own; do I fork your and use that?

I’ve a bunch of changes related to callbacks completed, but I also notice tat the existing main() uses pressed=true quite a bit, which I’dl like to deprecate. You OK with that?

I’ll see if I can get a fork of the Git and mangle it from there.

Hmm. I think the only place you should see “pressed” is in TextButton, where @floppy_gunk provided an update to provide functionality for “touched button initially but moved off the button before release.”

I’ve merged all my changes into this gist: https://gist.github.com/4127177 and https://gist.github.com/4128192 . I still have to go out and grab @twpster’s changes and integrate those, though :slight_smile:

I have added a menu to save and load a single instance of Cider development, a cache class to read locally, and callback mechanisms for the controls. Additionally, code can be saved to DropBox if you have a DropBox account and want to configure your own storage sandbox.

Finally, the Code Generator will generate stubs for all event handlers on controls generated.

I’ll integrate twpster’s stuff later tonight and add this too.

@Twpster, can you send me the code for long-press or double tap for select all text?

Thanks so much to everyone to this effort. Especially Mark, Twpster and aciolino.

I am a relative newcomer to codea, but I have been using on an off for several months and it is great!

I just started using Cider and it functions to some degree.

I recognize that it is a work in progress.

However, it would be helpful if some of you more knowledgeable folks to write down the best way to utilize it. Particularly helpful would be the best way to install it. Also particularly helpful would be when a new version was posted, what should work and what should not.

Here is what I have done:

I started with Mark’s posting of version 1.5 on September 22. (I did not realize that that was actually the oldest post.) Then, just last evening, I installed version 1.5.1 by aciolino on Nov 21 (https://gist.github.com/4127177 and https://gist.github.com/4128192).

My installation method is as follows:

  1. Create a project called Cider. Added a tab called “Controls” and last night, “Menu” and “Cache.”
  2. Using Goodreader, downloaded the tar.gz from gethub (e.g., the links above)
  3. Extracted (Open In…) the two files using iZip and displayed them (in iZip) as text.
  4. With the two files above there were a total of four files, the main Cider code, the controls, the menu code and the cache code. I selected all and copied and pasted the four files into my Cider project in each of the four tabs.

Maybe there is a better way. If so, please let me know.

The main problems I am having are the following:

  1. In this new code as well as the initial vers 1.5 code (Sept 22), a label control seems to generate code for a IconButton (e.g., label1000=IconButton(‘Label’, 360, 860, 480, 890, label1000_clicked). Copying and pasting the generated code into a new project (setting the dependencies to point to the Cider project, of course) and running it shows that the first argument is incorrect. Manually changing the generated code line from “IconButton” to “Label” allows the generated code to run correctly.
  2. In the 1.5.1. code ( from the links above and installed as above), the “Save” menu item generates an error that says “attempt to index global ‘JSON’ (a nil value).” I can’t find JSON either. Perhaps it’s just part of the “work in progress” and wasn’t supposed to work yet. (Of course DropBox doesn’t work yet, either.) Anyway, a listing what should work and what should not would be helpful.

Keep of the good work, and thanks to you all.

Bob

Installation was good and clean, that’s a successful way to so it.

Label making icon button- that m bug, I can fix. For now, replace icon button with label. I’ll get it patched tonight.

The JSON and DropBox stuff was also in the gist, there are multiple files. All should operate. As far as DropBox, without a dev account, you won’t get far…because you need to put in your dev key. I’ll release my dev key once I decide if it’s safe to do. You can still load and save your current layout though.

Antonio, thanks for the reply.

I guess I am not clear on the files. In Gist 4127177, I see only one file called “CiderControls 1.5.1” and it appears to be the controls.

I Gist4128192, I see three files, called “Cider 1.5.1” which I put in the Main tab, “Cache.Lua” which I put in the Cache tab, and “gistfile.txt” which I put in the Cache tab.

Looking at those four files, I do not see the JSON and DropBox code.

Perhaps iZip is not extracting the properly. However, I just re-downloaded the files from GitHub on my PC and extracted the tar.gz files on that and I only see the four mentioned. Searching for the string “json” in each of those, I only find the two instantiation calls. No definitions are found.

What am I doing wrong? Are the files somewhere else at GitHub?

Thanks in advance.

Bob

Pull the https://gist.github.com/4091848 gist. It has DropBox and JSON.