Howdy, Stranger!

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

CODEA STYLE UI OUT!

edited January 2012 in Code Sharing Posts: 2,820

I finally finished this UI I've wanted done forever. It has no code to go with it, but it will soon. Especially if I had help (hint hint). I hope you like it! You can find it here.. I WOULD REALLY LIKE HELP!
Thanks!

Comments

  • edited January 2012 Posts: 2,820

    I have no appreciation :-(( .
    I worked for hours.

  • Posts: 447

    and nice work!

    I opened it up but couldn't figure out what to do with it. Maybe a visual guide to each of the elements would help. Or perhaps a simple code example, which sounds like it's what you're planning already anyway.

  • Posts: 2,820

    Oh. I made a sample image with it and found a few problems.
    1. The top section of the colored buttons are the wrong color.
    2. The images are 1/2 the real size.
    Thanks for the suggustion @ruilov. I'll work on it.

  • Posts: 2,820

    Here's a test screenshot @ruilov -
    here
    I also added the actual .intaglio file for those other curious people. You can find it here

  • Posts: 447

    alright!

    so is that using a custom sprite pack importing in iexplore or something like that?

  • Posts: 2,820

    Oh, sorry. Yes. This image was actually made in Intaglio because of the bug I have with it, but yes. Sadly, the images for the sprite pack were exported 1/2 size. I'll fix everything, remake the sprite pack, and get all of you guys some test code and a module to go with it. Have fun @ruilov.

  • Posts: 2,820

    You see, my goal is to make a module for my UI sprite packs and eventually others when they use it. That way, it will be easy to make new ones. Man. I spent about 4.5 hours on this and only one person even noticed it. I guess it's because there's a few other UIs out there including your own.

  • Posts: 447

    Zoyt, build and they will come

  • Posts: 2,820

    Build apps? What? Examples? Utilities? You seem to be an expert. You're in the beta (lucky... or your just a great coder).
    Thanks for actually noting my rough piece of work!

  • Posts: 447

    I meant your UI stuff, I think it's a good idea.

  • edited February 2012 Posts: 2,820

    Thanks. Can't wait to get a 64G iPad 2. By the way, read my wall. It describes my reason for lack of coding in Codea. That why I want LoveCodify to work... Having trouble. See my post on the discussion. This will be awesome to me when I'm done.
    Thanks for your recognition!
    EDIT: Meh... Waiting for an iPad 3 :-)

  • edited February 2012 Posts: 2,820

    Here is my plan:

    • I'm still laboring over easy setup, so that is still in progress.
    • My plan (for an example) is to create a UI designer (like Dapp) were you can design, test, and save UI interfaces (button actions will come a while from now). Then, you will be able to export code for that :-)
  • This is super cool Zoyt! My dreams of a GUI to work with now have a spark. Nice work.

  • Posts: 76

    @Zoyt I have another UI for you. See the below video

    Here is the code for OnButton class

    --onButton Class
    OnButton = class()
    
    function OnButton:init(pos,defaultValue)
        -- you can accept and set parameters here
        self.x = pos.x
        self.y = pos.y
        self.sx = 0
        self.width = 60
        self.height = 30
        self.value = defaultValue
        if self.value then
            self.sx = self.x+self.width/2
        else
            self.sx = self.x-self.width/2
        end
    end
    
    function OnButton:getValue()
        return self.value
    end
    
    function OnButton:setValue(v)
        self.value = v
    end
    
    function OnButton:toggleValue()
        self.value = not self.value
    end
    
    function OnButton:draw()
        -- Codea does not automatically call this method
        
        strokeWidth(1)
        stroke(0,0,0,255)
        if self.value then
            fill(255, 164, 0, 255)
        else
            fill(255)
        end
        ellipse(self.x-self.width/2,self.y,self.height+2,self.height+2) 
        ellipse(self.x+self.width/2,self.y,self.height+2,self.height+2)
        strokeWidth(3)
        line(self.x-self.width/2,self.y+self.height/2,self.x+self.width/2,self.y+self.height/2)
        line(self.x-self.width/2,self.y-self.height/2,self.x+self.width/2,self.y-self.height/2)
        strokeWidth(0)
        rectMode(CENTER)
        rect(self.x,self.y,self.width,self.height)
        
        font("Courier-Bold")
        fontSize(26)
        if self.value then
            fill(255)
            text("ON",self.x-self.height/2,self.y)
        else
            fill(118, 118, 118, 255)
            text("OFF",self.x+self.height/2,self.y)
        end
        
        strokeWidth(1)
        fill(205, 205, 205, 255)
        if CurrentTouch.state ~= MOVING then
            if self.sx>self.x and self.sx<self.x+self.width/2 then
                self.sx = self.x+self.width/2
            end
            if self.sx<self.x and self.sx>self.x-self.width/2 then
                self.sx = self.x-self.width/2
            end
        end
        if self.sx>=self.x then
            self.value = true
        else
            self.value = false
        end
        ellipse(self.sx,self.y,self.height,self.height)
        
    end
    
    function OnButton:touched(touch)
        -- Determine the touch is within the area of switch object
        if touch.x>=self.x-self.width/2 and touch.y>= self.y-self.height/2
            and touch.x<=self.x+self.width/2 and touch.y <= self.y+self.height/2 then
            
            --when clicking the switch to tongle the status of switch
            if touch.state==ENDED then
                self.value = not self.value
                if self.value then
                    self.sx = self.x+self.width/2
                else
                    self.sx = self.x-self.width/2
                end
            end
            --locate the switch status according to touch.x
            if touch.state==MOVING then
                self.sx = touch.x
            end
        end
    end
    
    -- Main
    
    -- Use this function to perform your initial setup
    
    function setup()
        print("Hello World!")
        --Color for the light
        c = color(180, 180, 180, 255)
        --Create an instance of OnButton
        offbut = OnButton(vec2(WIDTH/2,HEIGHT/2),false)
    end
    
    -- This function gets called once every frame
    function draw()
        -- This sets a dark background color 
        background(40, 40, 50)
    
        -- Show the circle light
        fill(c)
        ellipse(WIDTH/2,HEIGHT-200,100,100)
        
        --Show the on/off switch
        font("Courier-Bold")
        fontSize(26)
        fill(255)
        text("Light switch",200,HEIGHT/2)
        offbut:draw()
    end
    
    function touched(touch)
        --handle the touch event
        offbut:touched(touch)
        --if switch is turned on
        if offbut:getValue() then
            c = color(0,255,0,255)
        else
            c = color(180, 180, 180, 255)
        end
    end
    
    
    

    Have fun!

  • Posts: 2,820

    @sanit - Thanks! That will help with my switch! I've been using mesh to do my switches and it's a heck of a lot of code and it's slow. But this will help. Thanks! I think I'll alter my sprite pack for this... By the way, if anybody wants to help me making some of the UI elements, please LMK!

  • Posts: 1,255

    @Zoyt -- it took me a bit to get it through my head, but I think a "Visual Studio" style UI creator project is perfectly doable in Codea.

    That is, a little project in which you can draw interfaces of buttons, switches, sliders, etc. from standard components, get it all laid out and working as you want, the copy / paste the generated code into another project to implement the interface.

    I'll start fiddling with it.

  • Posts: 2,820

    That's what I was saying. I thought about it a little more when I was bored in social studies, and I did notice it's not too hard. Just get the functions done (I have so many projects, their getting jammed in the door to get released), and it's down hill(ish) from there. I think that it will have a Spritely inspired interface (What you have done with spritely has really inspired me to do a lot of things. :-) ). Well... maybe...

Sign In or Register to comment.