Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Cider2 - Windowed Controls

edited February 2013 in General Posts: 666

I've recorded a beta of the Cider2 project and posted it on YouTube.

I have done a major rewrite of a lot of the controls, but still have a few to merge, including (importantly) the TouchArray/grid control. I have added an event model to the controls, but it's still hinky and incomplete, furthermore many controls aren't event sensitive and go directly to the data instead of calling events or properties. sigh...lots of rewriting...

Some examples of the current progress are shown below:

The main file, showing several features is here:

Similar to the above, but a little less long:

The property builder and the color picker windows are an example of quick builds with Cider2. For example, for the property builder,
I took the controls that were built, added the 'property' controls declaratively, and added a little event code to update the properties of any Cider2 control. You can see in the second video how the property box changes depending on the control selected.

One thing I was disappointed by is that the recording doesn't do sound - I forgot about that. Each touch or action has some sound associated to it, currently not changeable, so that the user can know that the system was aware of the action and is going to do something in response. They are basic sounds for now.

The code is spread across 15 or so modules. This is a pain for others, but it makes debugging much easier.

As soon as 1.5 comes out, I'll be testing this code against that!


  • SimeonSimeon Admin Mod
    Posts: 5,782

    This is really comprehensive — very impressive work @aciolino! Is there a reason you went for a windowed system on iPad? Do you find it works well?

  • Posts: 666

    Well, two things I can think of:
    1) Because I can (same reason I wrote Cofender :P)

    2) There is a real challenge on Codea that I felt and that was with apps that were able to do minor productivity. Editing data records, or doing simple multitasking. While I don't believe that an iPad is a good tool for doing these things, there have been enough times that I wished I could do some simple data manipulation that is non-device specific.

    For example: I plan to make this into a library, and also link my DropBox library to it. With those two, I need only write a simple UI window (10-15 lines of code) to be able to navigate through my DropBox folders, possibly using it as a rudamentary picture library manager.

    More likely for me: this could be used to do simple database examination. I am planning on hooking up MOAI to this tool (already wrote the library) and will be able to examine database records, possibly even edit and resubmit them.

    Finally, if we can ever get GitHub to work right (1.5 can write tabs...GitHub already written by ruilov), I can port this into a multi-window editor for Codea.

    So, at the end of the day, I wanted to open some doors to options for this fine piece of software.

    I'll post another video later of more controls (including a Modal Dialog, which I forgot to record) when I get them ported this week.

  • BortelsBortels Mod
    Posts: 1,557

    very impressive. I can see many uses for this - With http, there are lots of business enterprise things, tiny vertical applications that would be used by a few 10s of people, that would be very easy to implement.

  • Posts: 1,255

    That's terrific, @aciolino. I think you'll get a lot of fans from people moving over from traditional Mac / PC development who will find this a very approachable way to reproduce the type of tools they've built in the past.

    If you don't mind, at this point I'd like to fork the Cider project so I can keep banging around my simple-one screen version without interfering with your more advanced project. Sound like the right approach?

  • Posts: 666

    @Mark, sure, go ahead. I'm going to call that version dead to me, especially since I've rewritten so much of it to support both windowed and windowless instances of controls.

    Basically, I create a single modal window and place all controls on that window, which effectively gives me a single-screen view without needing to hack a lot if if statements.

    I've also rewritten and culled portions of the original controls; there was a lot of detrius in there from trial and error on both my part and the original writer (who I forgot, sorry!!!). At this point, the controls are significantly leaner.

    After I get some of the event model fixed and 1.5 is installed and tested, then I'll make a Git of the whole library with samples.

    I'm also going to put some blog posts on what I did and how to use this week (I hope).

    Thanks for the positive comments! Very appreciated!

  • Posts: 666

    @Bortels I totally agree with your thoughts there. What I need to get / make (I guess) is a decent Text box. I've seen a few and they somehow just don't quite cut it. I have one that I am looking at now that used to work OK, but it seems to be too buggy. sigh

  • Posts: 1,255

    The original ugly stuff was mine. Only right I should have to live with it. :)

  • Looks absolutely amazing aciolino ... so polished you must have spent ages.

  • Posts: 666

    @Mark, it has been very helpful and really an inspiration. Nothing to diminish it; I just wanted to have some multi window views.

  • Posts: 666

    @corneliuhoffman I did most of this in a week at nights.

  • Posts: 666

    I've added a new video showing some of the tools in action, this is a simple image viewer that took less than an hour to hack together.

  • Posts: 666

    Example code for above video (library not published yet, so this is for eyes not cpu's). Something causes a crash when this this overused, but no surprise since there's no optimizations yet.

    displayMode(FULLSCREEN_NO_BUTTONS) function setup() --Creates Main Window Handler wh = WindowHandler() init() end function draw() -- This sets a dark background color --background(69, 69, 69, 255) -- this is forced so that all calculations use the same coord sytem. --VERY SLOPPY!! ellipseMode(CORNER) spriteMode(CORNER) rectMode(CORNER) textMode(CENTER) --Cycles Through All Windows attached to the Window Handler and Draws Windows wh:draw() end function touched(touch) --Cycles through all windows wh:touched(touch) end --place in different place later, this is the code for the Image viewer... -- startup for any initialization function init() files=spriteList("Dropbox") local navWindow = Window({title="Navigation Window", pos=vec2(4,4), toolbarButtons ={ MINMAX=true,WINCLOSE=false} , size=vec2(200,HEIGHT-20), id="navwin", borderColor=color(57, 68, 131, 255), zOrder=99, borderSize=4 , fixed = true}) wh:addWindow(navWindow) --create a button for each file local iter= 0 for k,v in pairs(files) do local pos = vec2(10, iter*22) local params = {id="button_"..v, pos=pos, size=vec2(190,22), text=v, fontsize=12} local btn = TextButton(params) btn.onClicked = function() CreateImageWindow("Dropbox:"..btn.text) end navWindow:addControl(btn) iter = iter + 1 end end function CreateImageWindow(imageSrc) local img = readImage(imageSrc) if img ~= nil then id="win"..imageSrc local imgWindow = Window({title="Image: " .. imageSrc, pos=vec2(210+math.random(5,25)*5,300+math.random(5,25)*5), size=vec2(300,300), id=id, borderColor=color(57, 68, 131, 255), borderSize=4 , fixed = false}) wh:addWindow(imgWindow) local params = {id=picCtlName, pos=vec2(0,0), size=vec2(300,300), text="PictureControl", fontsize=12, url=imageSrc} imgCtl = PictureControl(params) imgWindow:addControl(imgCtl) -- find the resizer. when we resize, recalc the picture control so it stretches. local rz = imgWindow:getControlByName("_resizer") rz.onMoving =function(x) Resizer.onMoving(x) ctl = x.parent:getControlByName(picCtlName) ctl.size = x.parent.size end end end
  • @aciolino this is amazing. Do you plan to add something like a scrollable container? E.g. the buttons in the navWindow should be accessible when they become too many to fit in the window. I would really like to be able to build a table view like in cocoa touch. Actually an easy way to build a 'navigation based' application with codea. Ok, the simple version of that make most sense for iPhone applications. That would also implement the need to have the visuals similar to the cocoa touch elements. I'm sure TLL will implement a library like that in codea then :-) heavy dreaming This thread is definately added to my favorites list in the forum!

  • Posts: 196

    Great work @aciolino, Codea has a pretty fantastic community !

  • Posts: 666

    I think a scrollable container should be next; it's definitely missing from Cider.

  • BriarfoxBriarfox Mod
    Posts: 1,542

    Looking good! When can we expect it up on github?

  • Posts: 666

    I thought I posted it, but I had some issues with GitHub losing a lot of my code - only for it to reappear 3 days ago.

    I'll post whatever version I have "soon".

  • BriarfoxBriarfox Mod
    Posts: 1,542

    Thanks aciolino, I was browsing your gist and git and couldnt find it, I'll keep an eye out

  • Posts: 666

    I've added a scrolling container. There's some hinkiness to the container, though - it seems to override the window that it is hosted in and breaks the clipping functionality. I'll record a demo of the container. For some reason, the camera seems to override clip also...:(

  • BriarfoxBriarfox Mod
    Posts: 1,542

    @aciolino have you had a chance to host the code?

  • Posts: 666

    Unfortunately, no, I didn't I am kind of stuck with archiving solutions right now...typically I've been putting them in DropBox, but I really want to put it in a GIT since that seems to be where people are looking.

  • Wow!
    I second your comments above on the need for minor productivity. Nothing big, but the ability to whip up little apps for small biz use without the need to deal with obj-c is very intresting to me.
    Nice job! Looking forward to playing with it!

  • edited April 2013 Posts: 666

    I have uploaded the initial version of Cider2 here.

    There are two files:

    1.       Cider2.lua - the entire current state of Cider2

    2.       BingImageSearch.lua - example that uses Cider2. Comment out the call to Backup() on line 60.


    These are "Codea-friendly"; tap and hold the New Project "+" and do a "Paste into project". I suggest keeping the Cider2 name for now on Cider2.



    Cider2 should be self-contained; other than Backup() being called externally. Set the backup variable to false in main() to bypass that code.


    Running Cider2 should present you a simple windowed environment with a palette on the right and a working designer surface on the left. drag and drop controls to place on the designer. By default, the windows are created in Design mode, so controls will (typically) not execute.

    ·         Double-click a control to set its public properties.

    ·         Triple-click the window to set the window's public properties

    ·         Select "Design" from the window menu to change the window into Run mode, where the controls will execute.

    There is also an app, HACKED together, called "SampleApp" built into Cider2; move the SampleApp to the last tab in the project to make it take over; main will be the second to last tab and will get overridden.

    The Sample app will create a simple image viewer; your images from DropBox will be listed; select a button and a new window is created showing the image. You can change it to Documents if you don't have a DropBox account; uncomment line 38 and change line 53 to "Documents"


    The BingImageSearch app shows the Cider2 controls in two states - Windowed and non-windowed. It's written to come up windowed to begin, and hitting the MODE button will change the state into a non-windowed version. I don't allow toggling for this POC, it just shows that the same code executes in both contexts (once).

    BingImageSearch will search Bing for images based on the keywords entered into the text box. Enter a phrase, hit search, watch the spinner...and images will load into the scrolling container. Touch an image to view it.



    This code is very much still work in progress:

    ·         Code can (and in the BingImageSearch app, WILL) crash Codea often

    ·         Sounds are mostly for debugging, not usefulness

    ·         Code may reference images directly in Documents library, such as a reference to the Cider2 background image (not parameter driven yet)

    ·         Some controls are defined but not ported (NotchSlider)

    ·         Some controls operate but are tricky to understand (PropoertyBuilder)

    ·         Some controls simply have bugs (ex: ContainerControl renders outside of it's extents if an PictureControl image is bad)

    ·         The Code Builder portion is not complete; I can Save() and Load() controls, but I don't write and read them yet.


  • Posts: 666

    I made a textbox that tries it's best to be a good citizen, but it isn't really "right", that said, it does allow you to move the cursor around the text and type in the middle. I still need to implement cursor controls though.

  • Posts: 666

    v1.02: Made a change so that you can design a window and save it to the same window id. Once saved, it can be loaded again by the same window id.

    The goal is to allow UI design to occur and save the UI, loading it again at will either programatically or via the UI by a user in design mode.

    There is a bug in that if you load the window and generate another window, the cached version of the configuration will get loaded in the second window. It's a feature, not a bug :)

  • BriarfoxBriarfox Mod
    Posts: 1,542

    I'm getting an error PictureControl = class(control) line 80 attempt to index local i a nil value

  • Posts: 666

    Make sure that control is the first tab.

  • BriarfoxBriarfox Mod
    Posts: 1,542

    It is, still getting the error. I'll take a look at it and see if I can figure out why.

  • Jmv38Jmv38 Mod
    Posts: 3,297

    Hi @Aciolino. Github is a good place to put the code we share. I have switched to my website just because i wanted to know the number of downloads. Do you know whether github can provide this information and how? If yes i'll switch back to github. Thanks.

  • Posts: 140

    @Aciolino, I received the same error as @BriarFox when I run Cider 2 by itself. 'Control' is the first tab...

  • Posts: 666

    I'll open a new project and see what happens.

  • edited April 2013 Posts: 666

    @jvm38 if github had a good web UI for posting to a GIT, I'd use that. So far, only gist seems to work with a web client from and ipad.

  • Posts: 666

    The error is because of the picture property self.url; I have "documents:truck" , you don't. Go to CreatePalette and change the url.

  • BriarfoxBriarfox Mod
    Posts: 1,542

    Cant get the bing test project to work. I created a bing mobile key. Nothing comes up when i hit search.

  • Posts: 666

    you have to put your bing key into the bing Codea app where it says "your key here". Also, type in some search criteria...finally, don't forget to include the Cider2 library as a dependency. Guess I should update the Bing code to check for that automatically :)

  • BriarfoxBriarfox Mod
    Posts: 1,542

    Tried that :) Keys there, no errors but Search seems to do nothing. I'll play around with it some more.

  • Posts: 666

    @Briarfox, take a look at the debug panel and see if it says "0 results"...

  • BriarfoxBriarfox Mod
    Posts: 1,542

    All I get is Attempt to index global Base64 a nil value

  • Posts: 666

    oof...yup, Base64 is in my Utils class for base64 encoding. I've included it in the BingImageSearch Gist (manually, hope it's ok)

  • edited April 2013 Posts: 666

    Added a bar chart control to Cider2; same code base runs in both single screen and multi-windowed worlds.

    Video found here:
    Non-Windowed execution:
    Windowed (resizable) execution:

Sign In or Register to comment.