Howdy, Stranger!

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

A Windows utility

Jmv38Jmv38 Mod
edited April 2013 in Code Sharing Posts: 3,297

Hello.
I have made my library of utilities available on my site: http://jmv38.comze.com/CODEAbis/server.php .
A video introduction is there:

This library contains:
- a memory monitor.
- a fps monitor.
- a clock.
- a LUA objects explorer.
- a custom message box function.
- A custom menu function.
- a custom windows manager.
- printing can be redirected to any window (images and text supported).
- multiple alignment options.
- printable buttons.
- there is a tutorial documentation included.
- all the graphics set up are done by touch and the result is saved in a tab of your current project (make a dependancy to this project to include it).
Here is a code to quick start:

-- Main

displayMode(FULLSCREEN)

function setup()
    windows = Windows()
    windowsSmallExample()
end

function draw()
    background(109, 109, 109, 255)
    -- put your drawing before this line
    if windows then windows:draw() end
end

function touched(touch)
    if windows then touch = windows:touched(touch) end
    if not touch then return end
    -- put your touch after this line
end

function windowsSmallExample()
    local str1 = "message1"
    local str2 = "message2"    
    local str3 = "print text"
    local str4 = "print button"
    
    local callback = function(str) 
        windows:message("you have tapped on: "..str)
    end
    
    local func = function(txt)
            if txt == str1 then
                windows:message("Hello this is a simple message")
            elseif txt == str2 then
                windows:message("Choose:","yes","no","cancel",callback)
            elseif txt == str3 then
                local win = windows:get("printer")
                win:print("hello")
                win:frameShow(true)
            elseif txt == str4 then
                local win = windows:get("printer")
                local button1 = WindowButton("yes",callback)
                local button2 = WindowButton("no",callback)
                win:print(button1)
                win:print("   ")
                win:print(button2)
                win:frameShow(true)
            end
        end
        
    windows:menu("myMenu",str1,str2,str3,str4,func)
end

Let me know your feedback.
Oh, one last word: heavy playing with the parameter panel is a bit unstable on my ipad1. I experience from time to time some codea crash when i do many changes. Besides this, my code seems ok (but it is difficult to be sure: 4500 lines...)

Comments

  • Posts: 140

    @Jmv38... I really like it. Actually my favorite part is the in-program tutorial. I wouldn't mind using it to make a Codea Tutorial. ...hmmm.

  • Jmv38Jmv38 Mod
    Posts: 3,297

    .@Ric_Esrey go ahead! I put this code in public domain for anyone to use it.

  • BriarfoxBriarfox Mod
    Posts: 1,542

    Very cool, thanks!

  • Jmv38Jmv38 Mod
    Posts: 3,297

    Hi all. Is it ok for you to copy the code? It seems too long form me. If you heve the same problem, i'll split the file in 3 smaller ones.

  • Jmv38Jmv38 Mod
    Posts: 3,297

    I have dowloaded my own code with difficulty, but then the only way to make it work is to paste everything in a single tab. If poeple are interested by this code, and @Simeon does not find a fix, i'll rework my link to improve the situation..

  • BriarfoxBriarfox Mod
    Posts: 1,542

    Mine broke out into tabs just fine

  • IgnatzIgnatz Mod
    Posts: 5,396

    It won't paste into my iPad 3 at all, but I'll try again later

  • Posts: 140

    It separated into tabs quite nicely for me. Thanks @Jmv38.

  • Posts: 7

    That object explorer looks really useful.
    I am also blown away by the 3d globe, I was only wondering yesterday how to create sphere mesh.
    I will look forward to looking through your code to figure out how it works.

    Thanks for sharing.

  • Jmv38Jmv38 Mod
    Posts: 3,297

    I see a ''huge'' number of downloads (>40 is huge for me) but very little feedback on the forum... Is it there is a problem and it doesnt work? Or maybe it takes time to use the stuff? My basic idea was it should be really simple to use, hence the 'windows:print', 'windows:message' and 'windows:menu' functions, as in the short example, with all the size and positionning and coloring managed manually without programming anything. Let me know if there is a problem.

  • This looks very cool! My son and I will probably test out in the next day or so. Well done!

  • Sorry, I guess I am among the 40, did not have time to test it extensively but it looks and works great after a few tries. thanks

  • edited April 2013 Posts: 140

    Hey @Jmv38!!! I'm experimenting with your awesome windows utility and I noticed a possible issue. I built a new message window with:

    window:message("Hello World", close)
    

    When I run the program, the message window pops up as expected. The problem occurs when I try to adjust the message window's size and position. I can move my message window around using the parameter sliders but when I stop and rerun the program, the window appears in its original position. It doesn't remember the position I gave it (it does, however, remember the size).

  • Jmv38Jmv38 Mod
    edited April 2013 Posts: 3,297

    Ok thanks for the feedback guys.
    @ric_esrey i made the message window forced to align in the center of the display. This is why it will always come back in the center. Do you really need it to move it? If yes, i'll add a setting to devalidate the 'auto_center' option.

  • edited April 2013 Posts: 140

    @Jmv38... I can see where you would want the message window popping up in the center of the screen. For most purposes, I probably would want the same behaviour. Yet for the UI tutorial, that I was thinking about writing, I wanted the message window to pop up toward the bottom left, when I talked about the command line. Afterward, I wanted to move the window to the top of the screen to discuss the parameter area and the output area.

    Later, I would like to have two message windows open at the same time (one for explanation and one for code). At that point, I would like to make the message boxes so they don't fall on top of each other.

    So, yes, it would be nice if you would give me the option to move the messages. Thanks for your hard work on this. I really like it.

  • Jmv38Jmv38 Mod
    edited April 2013 Posts: 3,297

    Hi Ric.
    I have checked in my code, what you need is already there (put the move after sending the message)

        local  win = windows:get("message")
        win:lock(false)
    
    -- more code.  .....
    
        windows:message("hello")
        win:move({left=100, top=100})
    

    this unlocks the message window (you can also do it manually).
    Then you move the window where you want with move.
    Does it do the job?
    Ps: there is also a function to resize it if you need.

  • Posts: 140

    @Jmv38... That works. Thanks.

  • Jmv38Jmv38 Mod
    edited April 2013 Posts: 3,297

    I've used the library to make quickly two small programs with interfaces. I saw there are still a few things to improve to make it really 100% easy to use:
    - tutorial should be easily removable, it is not.
    - the window autosave should save only the settings different from default options.
    - newline function missing.
    - buttons dont layout as they should.
    - i have to define a simple used function to add callback to images and text (current way is an internal function not supposed to be used by end users).
    - When a window is behind another i can no longer access to it: i must add a way to select it from the settings panel. Also it should be possible to move the window zlevel from the panel (zlevel not used today).
    - i should add a parameter 'lines' similar to 'columns' that presets the number of lines and their height.
    Some people may have difficulties just to copy and paste the code because it is so long (i had difficulties!). I might make a code loader, from one of the examples posted on the forum (Codeslinger's maybe).
    I'll do the changes soon.
    (more or less)

  • Jmv38Jmv38 Mod
    edited April 2013 Posts: 3,297

    hi every one.
    Thanks to the help of @Mpilgrem, i have designed a project downloader. No more hassle to download 3500 lines projects. I have added to my site http://jmv38.comze.com/CODEAbis/server.php the 2 small projects designed for Luger, with the library included (so you should not make any dependency to these project for them to run, they are stand-alone). You can download them if you want to see the result (i wont post the code in the forum because i want to know how many people download the code: since most of the users dont post any comment on the forum, it is the only way for me to know how many people are interested). Actually they contain a sligthtly improved version of the library:
    - images can have callbacks (via an internal function however, i'll design a user function later)
    - the tutorial is removed: it will stop popping up all the time. I'll add it back later with a better way.
    Hope you like it!

  • BriarfoxBriarfox Mod
    Posts: 1,542

    @Jmv38 very cool!

  • Posts: 79

    @jmv38 Thank you. Now it is I have been able to start your examples

  • Jmv38Jmv38 Mod
    Posts: 3,297

    Just added a version with streetView.

  • Jmv38Jmv38 Mod
    edited April 2013 Posts: 3,297

    Too bad google limits the access to street view to 1000/hour (and maybe less)... After playing a while, they stopped send me the images. You'll experience this too i guess.
    Edit: my 17 year old son just taught me how to solve it: off/on the internet box changes the ip adress => bingo! Streeview works again.

  • Posts: 18

    Amazing Jmv38 !

  • Posts: 666

    Street view is a nice addition! Didn't think of that!

  • IgnatzIgnatz Mod
    Posts: 5,396

    [jaw drops]

  • Jmv38Jmv38 Mod
    Posts: 3,297

    .@ignatz thanks. (that was the expected effect :)) :D )

  • Jmv38Jmv38 Mod
    edited April 2013 Posts: 3,297

    Adding functionnalities and reworking, i will change the root name of classes and tabs and images saved to a common root that will not be a problem with your own names. The rules should be:
    - short name.
    - a name that you is not likely to be used in your programs for other purposes.
    So i thought of:
    1/ "WTK" meaning "Windows Tool Kit".
    2/ "JMV38" meaning "My Ego Is Bigger Than Your Ipad". ;-)
    3/ "TK" meaning "tool kit". A short one, but maybe not specific enough?
    4/ "CTK" meaning "Codea Tool Kit".
    5/ "WFC" windows for codea.
    Any suggestion? What would you vote for?

  • Jmv38Jmv38 Mod
    Posts: 3,297

    ok, i'll follow the vast majority of voters after this hot and interesting debate, and will go for "WFC". Starting with a W is good because this stuff will stick at the end of the list. For those of you interested, my next step will be to make the library very easy to integrate into any project. At the first release i had not really used it from the ouside, and, although the library works, the integration process is at least uneasy, and surely doesnt fit in the "codea spirit".
    I' ll also have a look at Cider2 library just published by @Aciolino, to check if there is some commonality between the 2 libraries. If the overlap is too big, and the performances equivalent, i might just stop this project. Cheers.

  • Jmv38Jmv38 Mod
    edited April 2013 Posts: 3,297

    just had a look a Cider2 short video. Actually, the spirit of Cider2 is a bit different from the one i follow: Cider2 helps to built an interface with careful design of where the objects are placed, which is very good. I am targetting more at having the fastest possible way to build an interface: just by printing things (text, image, buttons) into a container (windows) without having to worry about where they are placed exactly, but being satifyied of the final result, thanks to a few simple presets (alignment, columns). This gives less control on the output, but more time to concentrate on other aspects of the app.

    Also I have taken great care to have high FPS and no memory crashes, which led me to an architecture choice based on spriting pre-drawn images, different from Cider1 (drawing all details each time), and Cider2 (meshes? tbc. I avoided meshes with scroll bars, that can create too big texture images and then lead to memory crash). Spriting pre-drawn images is much faster than drawing it all each time, but takes more memory.
    But not as much as meshes, and the performance is only a little less, because there are not so many images to sprite, and they are small. Meshes dont take memory per se, but when you want to make a window with a mesh, you must allocate the memory for a texture of the window size (also for the empty regions). And maybe 2xmore if you want it to be scrollable. This is a problem on my iPad1.
    In my library, only the window bar and frame (the decoration) is made from a mesh, which enable the texture to be very small but can be extended on the screen to any size without FPS or memory cost.

    So there might be some room for the 2 libraries, because they have different goals and use different technical compromises.

  • Posts: 666

    @Jvm38, I agree with your thoughts on the underlying architectures of all three projects, they are all different...my main goal for Cider2 was screen based control, layout and data editing, targeting business-like features. Definitely not going after fast and lean; more like 'business-driven' prototyping.

    One of the cool things I saw in Cider1 was drag and drop, which was, to me, the primary use. I just finished that in Cider2 along with persistence, so that a person can design a screen and reuse it without doing any code, then load that later, once again without code. Once the implementation of the controls is needed, a single module gets edited to perform those functions (currently called UDF).

    Your goals are very different, but if there's anything useful, please let me know!

  • Jmv38Jmv38 Mod
    Posts: 3,297

    Thank you for your comment. Sure i'll let you know if i can hack something from Cider2! I dont want to re-invent the wheel....

  • Posts: 140

    @Jmv38... I've been playing with your Windows builder and it is.... Awesome!! I especially like the stand-alone version (because it doesn't have the tutorial popping up). I only have one question:

    Is there a way to 'fix' the order that the windows are displayed from back to front? For instance, you have a 'Big_Image' window and then you put your 'Direction' buttons on top (which is in its own window). If I long-press the Big_Image window (to adjust its parameters, it becomes the front window and covers the Direction buttons. From that point, I can't access the Direction button's window to bring it to the front without moving the Big_Image window out of the way.

    Therefore, I have a problem resizing the Big_Image window to fill the screen while still placing the direction buttons on top of it. The only way I found to do it is to resize the big window and then go into the editor and cut and paste the Direction window's parameters to a spot below the Big_Image window's parameters.

    Maybe you could add a button that would allow us to cycle through the windows--in case one gets hidden. But I'd also like the option to keep a window (such as a background image) always at the back and another window (such as control buttons) always on top.

  • Jmv38Jmv38 Mod
    Posts: 3,297

    Thanks for the positive feedback. Concerning windows order, I agree, i had the same problem. I will implement a z-level that can be set from the settings. This should fix it.

  • Posts: 666

    z-order is great, until you have to handle modals :)

  • Jmv38Jmv38 Mod
    Posts: 3,297

    .@aciolino what do you mean?

  • Posts: 666

    Modal dialogs vs non modal dialogs are tricky because modals don't play nicely when it comes to touch - they steal all touches by design. It's ... Interesting.

  • Posts: 535

    It's interesting to look at different takes on UI's. It would not be a problem if there was several different to choose from. I've made some different versions as well, first tried with one that was quite similar to QML, but the propagation of values made it a bit too slow. But you could write relations between the UI elements, which made it quite convenient, like "prev.right" to align to the sibling element, or "parent.w" to refer to the width of the parent.

    scene = UI.Item({},
            UI.Rect({w="200", x="b2.x",y="b1.y/2",
                     color=color(100, 183, 91, 255)},
                UI.Image({image="Planet Cute:Character Boy",
                       x=5,y=5,w="parent.w-10",h="parent.h-10"})
            ),
            Button({id="b1", text="Up", y=100, x=10}),
            Button({id="b2", text="Right", x="prev.right", y="prev.y"}),
            Button({id="b3", text="Reset", x="b1.x", y="b1.top"})
        )
    }
    local h = scene:id("b1")
    h.onClicked = function ()
        tween(.2, h, {y=200+h.y})
    end
    

    Now I've removed some of that magic in UI code to make my UI faster. :)

  • Posts: 666

    What you could do \to keep it fast is to assign a parent variable, and then change your x="prev.right" code to x=self.parent.right (no quotes). Similar concept and less manipulation/processing to get to the source value. Now, in your example of b1.top, you'd have to have an instance of b1 before the assignment, and I think that's where your QML processing was helpful.

    I'm doing something similar to your scene example, except that I serialize it as JSON to load/save, as I didn't have a framework like QML as a parameter.

  • Jmv38Jmv38 Mod
    Posts: 3,297

    A little update on this utility, if anyone is interested.
    I've been working these 3 last months on a huge code update: code cleaner, more functionnalities, test everything. I plan to deliver a much more user-friendly version in ... a couple month. Sorry for the delay, i've got to earn my living... Here is video of the "great" :-D ;-) achievement that took me so much time: a Box class that manages box-in-box (any depth), moving. Clip, spatial limits (inside, outide, free), inertia, gestures(tap, multitap, move, zoom), real time response, memory slim. I will use this Box class as the std brick for my windows, menus, buttons etc.. So you wont even see it, but it will provide 'obvious' functionnalities (from the user stand point), but that need the hell lot of code to implenent!
    The big thing for me there is that i hit the "complexity wall" once again, but i found a mehtod to go around it: split functionnalities into many independant ones, and have each of them managed by a single object dedicated to that. Then things become much more manageable, as they can be build one by one, tested, and later improved with a reasonnable brain space.
    Also i ended up by defining a "tree" class, because a lot of the the complexity came from parent-children relationships, that were not always the same (the parent for positionning a box may not be the parent for clipping this box for instance). But you wont have to be bothered by this, it is deeply burried in the sub-sub-sub levels of the library!

  • BriarfoxBriarfox Mod
    Posts: 1,542

    @Jvm38 This project is amazing, Thanks for keeping it going. I'm planning on implementing it into a business app I'm working on.

  • IgnatzIgnatz Mod
    Posts: 5,396

    @Jmv38 - as a spinoff, I would love to hear what you have learned in general about performance optimisation, as a result of your relentless focus on FPS. Seriously!

  • Jmv38Jmv38 Mod
    Posts: 3,297

    @briarfox thanks for your support. If you like the current version, you'll love next one (well, if i succeed ina chiving what i have in mind).
    @ignatz i'll think of it and will try to wrap it all up. But THE key point is rather simple: nosmooth(), nostroke()... Huge difference!

  • Jmv38Jmv38 Mod
    edited May 2013 Posts: 3,297

    So to keep fps high:
    - when using rect() and text(): nosmooth(), nostroke().
    - probably also with sprite() and mesh().
    - avoid creating a lot of strings: each string is a new object, i have noticed that there are very annoying lags of 0.5 to 1s every 5s when i create a lot of strings. They are not corellated to memory cleanup by the garbage collector, so i assume the lag occurs due to memory allocation: maybe the memory manager has to do some sort of memory formating that takes time?
    - same thing if you pass parameters via local tables: ex: func({x=2, value=5}). These unnamed tables seem to eat fps and memory, probably because they are re-created all the time. So i rather create a static table During the init(): self.t = {x=2, value=5} local t=self.t and when i need it i change t.x and t.value and then call func(t).
    - avoid creating iterators with closures: they are nice constructs, but take a lot of fps and memory. Much better to get the table pointer and iterate for i=1,n do table[i] etc...
    - of course: use local data everywhere you can. Local min = math.min is much faster than using math.min directly.
    - when there many settings: instead of a lot of if a==b then ... i try to write several functions like draw1(), draw2() etc... And according to the situation i do draw = draw1 in the setup of the class. Then this is less tests in the draw() function.
    - if i have more i'll add it here

  • IgnatzIgnatz Mod
    edited May 2013 Posts: 5,396

    thanks!

  • Jmv38Jmv38 Mod
    edited May 2013 Posts: 3,297

    Oh, i forgot about that one (you're going to like it, it's a maniac stuff):
    - i said i minimize new string creation, but on top i display the fps (from deltatime), the memory (from gcinfo) and the cpu load (from os.clock). This line may generate a long new string each frame so i do:
    - i keep the last value and last string in memory (self.blabla) ,
    - i check for value change every 0.1 or 0.2s, not every frame,
    - if the value has changed, then i udate the string, overwise i dont,
    - i have rounded the value so it is more likely not to change at each frame,
    - i dont display as a whole line, but i keep it split in 3 parts: there is more likelyhood that there is no change in some of the strings if they show only 1 value, rather than 3.
    All this is to limit new strings rate production, and keep the fps as as low i can :-t

  • IgnatzIgnatz Mod
    Posts: 5,396

    lol, that is intense - but useful info!

    =D>

  • Jmv38Jmv38 Mod
    Posts: 3,297

    Some update about where i am in this project.
    First some good news: i am implementing the basic line "line printer" needed to build windows, menus etc from it. Here is a short video just to show what i mean:

    Now some bad news: i am getting a bit tired about this project. It is a lot of work, and i have some difficult things to do at work that eat all my brain space. I have no room left for evenings/mornings on Codea. And we have a really bad weather here in Grenoble, France, i would say i almost havent seen the sun since October last year, and i feel really depressed. So i am going to let this rest aside for an undetermined time period. Sorry guys, but is a bit too much for me now. If i restart that some day i'll post the update. But maybe in the meantime Simeon will have implemented this kind of stuff, so it will even be useless to finish it....
    Regards!

  • IgnatzIgnatz Mod
    Posts: 5,396

    @Jmv38 - sorry to hear that. Why not visit us in Australia, we have lots of sun to wake your brain up again. ;)

Sign In or Register to comment.