Cider2 - Windowed Controls

General
1

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:
http://www.youtube.com/watch?v=NjrIhE9nTP8&feature=share&list=UUws5tivGh67Ik0aw1i0HQeA

Similar to the above, but a little less long:
http://www.youtube.com/watch?v=6L01LB9yMBU&feature=share&list=UUws5tivGh67Ik0aw1i0HQeA

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!

2

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?

3

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.

4

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.

5

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?

6

@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!

7

@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

8

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

9

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

10

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

11

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

12

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.

http://youtu.be/Db-nzysW9mY

13

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)

    id=params.id
  
    -- find the resizer. when we resize, recalc the picture control so it stretches.
    local rz = imgWindow:getControlByName(imgWindow.id.."_resizer")
        rz.onMoving =function(x) Resizer.onMoving(x) 
            ctl = x.parent:getControlByName(picCtlName)
            ctl.size = x.parent.size
     end
    end
end
14

@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 :slight_smile: heavy dreaming This thread is definately added to my favorites list in the forum!

15

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

16

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

17

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

18

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”.

19

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

20

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…:frowning: