Jump to content




How to make a good UI in ComputerCraft


3 replies to this topic

#1 Blue

  • Members
  • 309 posts
  • LocationGlass/UX/main.lua

Posted 22 November 2015 - 12:59 PM

Posted Image
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
(the forums messed up the indenting)
Add it to the top of your program and use this code:
drawFAB("+",colors.red) -- replace the color/letter with whatever you want[/size]

Output:
2. The sidebar
Nothing special here,just add a white "=" at 2,2
term.setCursorPos(2,2)
print("=")
3. Textbox
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   ")
You may have to adjust the coordinates depending on how many textboxes you have.
Output:
If you want a transparent background,use the surface API to print("Login")
local surf = surface.load("your_nft_or_nfp_file.nfp")
surf:drawText(10, 9, "Login")
surf:render(term)
That's it for now! I'll improve the tutorial(alot) when I have more time

Edited by Glass Systems, 22 November 2015 - 03:25 PM.


#2 KingofGamesYami

  • Members
  • 3,002 posts
  • LocationUnited States of America

Posted 22 November 2015 - 03:17 PM

Spoilers are broken, after quoting your post I noticed you've got some b & /b tags in there that're probably messing it up. Here's the Output spoiler, properly formatted:

View PostGlass Systems, on 22 November 2015 - 12:59 PM, said:

Output

[namedspoiler="Output"]
[url="http://www.computercraft.info/forums2/index.php?app=core&module=attach&section=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]
[/namedspoiler]

Edited by KingofGamesYami, 22 November 2015 - 03:18 PM.


#3 Blue

  • Members
  • 309 posts
  • LocationGlass/UX/main.lua

Posted 22 November 2015 - 03:23 PM

View PostKingofGamesYami, on 22 November 2015 - 03:17 PM, said:

- snip -
Thanks!

#4 Waitdev_

  • Members
  • 432 posts
  • LocationAdelaide

Posted 23 November 2015 - 09:06 AM

Great tutorial! i can't wait to see it finished, and i'd guess it's gonna up the amount of operating systems on the forums! +1 ;)





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users