SODA is a super great UI library for Codea, made by @yojimbo2000. It’s really something. But it can be hard to get started with.
For the new and/or curious, I’d like to share SODA Designer. With it you can:
- Interactively design a SODA button, using WYSIWYG controls to customize size, position, color, text color, label, and corner radius.
- Load a custom background, so that you can design your button against the actual art it will go with.
- Best of all, once you’ve tweaked your button just how you like it, you can make it into actual code.
- After you press the save button, inside the project itself you’ll find a tab containing the code that creates that exact same button. Then you can simply copy and paste it into your own projects.
SODA can make even the simplest UI design look slick and professional. You really have to check out what it can do.
You owe it to yourself, to Codea, and to the world. 
(In case it isn’t obvious, this project needs SODA as a dependency to work at all. You can get SODA here, free: https://github.com/Utsira/Soda )
--# Main
--SODA Designer
function setup()
displayMode(OVERLAY)
--SODA:
profiler.init(true)
Soda.setup()
--/SODA
backgroundSprite = readImage("Cargo Bot:Game Area")
guineaPig = Soda.Button{ title = "placeholder" }
parameter.text("ButtonTitle", "type in any text", update)
parameter.number("ButtonWidth", 0.0, 1.0, 0.25, update)
parameter.number("ButtonHeight", 0.0, 1.0, 0.12, update)
parameter.number("ButtonX", 0, 1, 0.5, update)
parameter.number("ButtonY", 0, 1, 0.5, update)
parameter.color("FillColor", color(208, 125, 136, 156), update)
parameter.color("TitleColor", color(155, 31, 154, 255), update)
parameter.number("CornerRadius", 0.0, 50.0, 12.0, update)
parameter.boolean("Shadow", true, update)
parameter.text("BackgroundFilename", "Cargo Bot:Game Area", updateBackground)
parameter.action("save settings to project tab", saveSettingsToTab)
print("Scroll up parameter list to see more options")
if newButton ~= nil then
newButton()
end
end
function updateBackground()
if BackgroundFilename ~= "" then
backgroundSprite = readImage(BackgroundFilename)
else
backgroundSprite = nil
end
end
function update()
guineaPig.kill = true
guineaPig = Soda.Button{
title = ButtonTitle,
h = ButtonHeight, w = ButtonWidth, x = ButtonX, y = ButtonY,
style = {
shape = { fill = FillColor, strokeWidth = 1 },
text = { fill = TitleColor}
},
shadow = Shadow,
shapeArgs = { radius = CornerRadius }
}
end
function saveSettingsToTab(name, position)
local dataString =
"function newButton()"..
"\
\\tnewButton = Soda.Button{"..
"\
\\t\\ttitle = \""..ButtonTitle.."\","..
" \
\\t\\th = "..ButtonHeight..", w = "..ButtonWidth..", x = "..ButtonX..", y = "..ButtonY..","..
"\
\\t\\tstyle = {"..
"\
\\t\\t\\tshape = { fill = color"..tostring(FillColor)..", strokeWidth = 1 },"..
"\
\\t\\t\\ttext = { fill = color"..tostring(TitleColor).."}"..
"\
\\t\\t},"..
"\
\\t\\tshadow = "..tostring(Shadow)..","..
"\
\\t\\tshapeArgs = { radius = "..CornerRadius.." }"..
"\
\\t}"..
"\
\\t--background filename used: "..BackgroundFilename..
"\
end"
saveProjectTab("SavedValues",dataString)
print("Settings saved to tab \"SavedValues\"")
end
function draw()
--SODA
pushMatrix()
Soda.camera()
drawing()
popMatrix()
profiler.draw()
--/SODA
end
function drawing(breakPoint)
--SODA
--in order for gaussian blur to work, do all your drawing here
if backgroundSprite == nil then
background(51, 52, 62, 255)
else
sprite(backgroundSprite, WIDTH / 2, HEIGHT / 2, WIDTH, HEIGHT)
end
Soda.draw(breakPoint)
--/SODA
end
function touched(touch)
--SODA
if Soda.touched(touch) then return end
--/SODA
end
--MISC SODA STUFF
--user inputs:
function keyboard(key)
Soda.keyboard(key)
end
function orientationChanged(ori)
Soda.orientationChanged(ori)
end
--measure performance:
profiler={}
function profiler.init(quiet)
profiler.del=0
profiler.c=0
profiler.fps=0
profiler.mem=0
if not quiet then
parameter.watch("profiler.fps")
parameter.watch("profiler.mem")
end
end
function profiler.draw()
profiler.del = profiler.del + DeltaTime
profiler.c = profiler.c + 1
if profiler.c==10 then
profiler.fps=profiler.c/profiler.del
profiler.del=0
profiler.c=0
profiler.mem=collectgarbage("count", 2)
end
end