UI Class

I decided about a week ago to make a gui class for a toolbar sort of thing, so far I have: A Button, Dial, Slider, Toggle, Drop down menu. I want to continue creating this class and release it when I’ve finished for everyone to use. The aim for this is that people can easily add a UI to their game. Here is an example of how these functions work:

 --Button command: Button(Position,Size,Text,Colour,BorderWidth,CallBack)
    var1 = "Press Me" --readImage("Cargo Bot:Clear Button")
    btn = Button(vec2(WIDTH/2,HEIGHT/2),vec2(100,60),var1,
    color(154, 227, 8, 255),5,function() print("test") end)
    var = 100
    --Slider command: Slider(Position,Size,StartValue,EndValue,Value)
    --Note: Size variable must always be vec2. If the 'y' value of the Size variable is less than 
    ------- 20 then the Slider will remain as a linear (single valued) Slider, but if the 'y' 
    ------- value is greater than 20 then this means the Slider becomes a scalar valued Slider,
    ------- allowing for 2D movement of the axis, this type of slider needs the StartVal,EndVal
    ------- and Value variables to be Scalar variables (vec2(x,y)). If the Slider is a linear 
    ------- Slider then the StartValue,EndValue and Value variables must remain linear otherwise 
    ------- this will cause errors.
    sldr = Slider(vec2(WIDTH/2,300),vec2(150,15),50,200,var)
    var2 = 0
    --Toggle command: Toggle(Position,Size,Value) , Toggle Value: Toggle:getValue()
    tog = Toggle(vec2(WIDTH/2,HEIGHT/2+100),vec2(75,30),var2)
    --Dial command: Dial(Position,Size,StartVal,EndVal,Value) , Dial Value: Dial:getValue()
    dial = Dial(vec2(WIDTH/2,HEIGHT/2+200),65,0,20,10)
    dial:setFloat(0)
    --Drop Down Menu command: DMenu(Position,Size) , DMenu item: DMenu:addItem(Name,Callback)
    dropd = DMenu(vec2(WIDTH/2+200,HEIGHT/2),vec2(150,30))
    dropd:addItem("try me",function() print("test") end)
    dropd:addItem("try me2",function() print("test2") end)

Here’s what it looks like, hopefully you know which one is which!

http://i269.photobucket.com/albums/jj69/qwerty-keyboard-bucket/image.jpg

Good job! Keep knocking it out!

If you need inspiration, take a look at Cider. Also there is a QML port in here.

Thanks I’m looking for ideas of good controls if you’ve got any! Here’s a video of it now http://youtu.be/T4FcD54C0ao

Your video is private and I can’t see it.

@Luatee, @SkyTheCoder is correct

Sorry about that I swear it said public, done now

Wow, nice…

Wow is right… That’s awesome

Luatee : i like your toggle wich i find best than cider version
your dropdown menu does’nt exist in cider and i need
please could you share the code thanks

Thanks ill keep it flowing, @hpsoft i will upload the code as soon as i have another 5 UI functions, so i need ideas! Thanks for the positive comments, i could do with some negatives aswell

5 more?
What about:

  • joystick.
  • textbox.
  • radio button.
  • roller spinner.
  • color picker.
  • toolbar (with pushbutton icons).
    No excuse now!
    :slight_smile:

Text box was on my list, roller spinner? Not sure what that is. Radio button is a good shout that will be added. Colour picker I’ve always wanted to do but not to sure, @Andrew_Stacey has a brilliant colour picker in his complex numbers app so i know its possible. A toolbar? Like a bar with a load of buttons? This project was actually started to make the ui functions to go on a toolbar. Thanks for those suggestions ill give an update at the end of the day!

“roller spinner”: i mean thg equivalent to your drop down menu, but instaed of dropping down, it looks like a rotation barrel that you can spin with your finger (i dont know the name for that). It is like the native apple component for entering dates.

I get what you mean, I’d only do a 2d roller spinner though I’m assuming that’s what you were refering to, I’ve done the radio button that was simple next ill do the text box

Looks great. The way the dropdown text looks as it as appering looks off because of the way you have them appear. The menu is fine, but a better looking transition is needed. Maybe the menu outline appears and you draw the buttons and then fade in the names. It just needs some more love. Or maybe draw it off the screen on the init of the dropdown and then just draw it and update it as needed.

I honestly thought the menu looked good as it was but I’m not entirely sure what you’re on about, you don’t like the way the text on the menu expands out?

Edit: @Thwapp I’ve made the text fade in and out when i expand or collapse the menu which looks quite nice but I’m not going to change the transition of the menu because its meant to as it says ‘drop down’

Looking at a more professionally developed vgui here’s Derma: http://servewow.free.fr/gmod/derma/lua/ , I will take most my ideas from here

Added windows and parenting: http://youtu.be/bI2wePMCPSI

Wow…! =D> =D> =D>

Nice!

The fading of the text looks much better