314 posts
Glass/UX/main.lua
Posted 22 November 2015 - 12:59 PM
How to make a good UI in CC
This tutorial is part of project UI.
So,some of you may have liked Glass UI's design and may want to use it in your programs/OS's. I haven't made an API yet,so for now you'll have to follow this tutorial
1. The Floating Action Button
The FAB is a button which,when clicked,performs the program's main action. For example,in an e-mail program,the FAB would be a paper plane and would allow you to send emails.
Just add a 3 x 3 box in the right corner with a color that matches your program's theme
I've already made a code for you:
local function drawFAB(icon,color) -- Draw a FAB(floating action button)
term.setTextColor(colors.white)
if color==colors.white then
term.setTextColor(colors.black)
end
term.setBackgroundColor(color)
term.setCursorPos(46,15)
print(" ")
term.setCursorPos(46,16)
print(" "..icon.." ")
term.setCursorPos(46,17)
print(" ")
end
Add it to the top of your program and use this code:
drawFAB("+",colors.red) -- replace the color/letter with whatever you wantSpoiler
Nothing special here,just add a white "=" at 2,2
term.setCursorPos(2,2)
print("=")
Textboxes have a white title and a white box with light-gray text.
term.setBackgroundColor(colors.cyan)
term.clear()
term.setCursorPos(10,9)
print("Login")
term.setBackgroundColor(colors.white)
term.setTextColor(colors.gray)
term.setCursorPos(10,11)
print(" Username ")
Spoiler
local surf = surface.load("your_nft_or_nfp_file.nfp")
surf:drawText(10, 9, "Login")
surf:render(term)
Edited on 22 November 2015 - 02:25 PM
![http://www.computercraft.info/forums2/index.php?app=core&module=attach§ion=attach&attach_rel_module=post&attach_id=2411"][img]http://www.computercraft.info/forums2/uploads/monthly_10_2015/post-24180-0-23033300-1443865586_thumb.png[/img][/url](http://www.computercraft.info/forums2/index.php?app=core&module=attach§ion=attach&attach_rel_module=post&attach_id=2411%22][img]http://www.computercraft.info/forums2/uploads/monthly_10_2015/post-24180-0-23033300-1443865586_thumb.png[/img][/url){kind=link}