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!
I have no appreciation :-(( .
I worked for hours.
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.
Oh. I made a sample image with it and found a few problems.
- The top section of the colored buttons are the wrong color.
- The images are 1/2 the real size.
Thanks for the suggustion @ruilov. I’ll work on it.
Here’s a test screenshot @ruilov -
I also added the actual .intaglio file for those other curious people. You can find it here
alright!
so is that using a custom sprite pack importing in iexplore or something like that?
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.
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.
Zoyt, build and they will come
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!
I meant your UI stuff, I think it’s a good idea.
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 
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.
@Zoyt I have another UI for you. See the below video
http://www.youtube.com/watch?v=CuBN3E_jsm8
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!
@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!
@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.
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…