How do i make a color UI?

I never did this before and I want some help with it. I want to have colored text, buttons etc.

First you need a compatible screen, if the computer is gold then you are good to go. (Normal computers/monitors don't have coloured screens)
You can use a gold monitor with a normal computer, just make sure that you are drawing to the monitor

Second you need to know the functions to use, look at the term api on the wiki you want to use the settextcolor and setbackgroundcolor functions.

Finally, the colors API pass to the settextcolour functions

Lupus590, on 30 November 2015 - 10:52 AM said:

First you need a compatible screen, if the computer is gold then you are good to go. (Normal computers/monitors don't have coloured screens)
You can use a gold monitor with a normal computer, just make sure that you are drawing to the monitor

Second you need to know the functions to use, look at the term api on the wiki you want to use the settextcolor and setbackgroundcolor functions.

Finally, the colors API pass to the settextcolour functions

I know these functions but i want some actual code. I also have an advanced computer.

I am actually going to recommend the paintutils api as it is easier to use when you are first starting. Which can be found here

Little example for drawing:

paintutils.drawBox(1,1,10,5,colors.blue) --# draws a blue box from the coordinates x = 1 to x = 10, and y = 1 to y = 5

To set up a button you will essentially just be telling the computer to listen for click events, and then checking to see if the coordinates returned by the event is within the area the button is drawn to.
example for a button (Example is set up to listen for the "button" we drew in the drawing example:

while true do --# repeating forever
  local event, button, x, y = os.pullEvent("mouse_click") --# telling the computer to listen for mouse click events, button will equal which mouse button is pressed, x is the x coord, and y is the y coord
  if x>=1 and x<=10 and y>=1 and y<=5 then
	--# our button was pressed, so do stuff
	paintutils.drawBox(1,1,10,5,2^math.random(0,15)) --# this is just for you to be able to visually see the button do something when pressed, this will randomly change the color of the button when it is pressed
  end
end

Hope this helps :P/>

valithor, on 30 November 2015 - 10:56 PM said:

I am actually going to recommend the paintutils api as it is easier to use when you are first starting. Which can be found here

Little example for drawing:

paintutils.drawBox(1,1,10,5,colors.blue) --# draws a blue box from the coordinates x = 1 to x = 10, and y = 1 to y = 5

Could you give me a better example for drawing colors. And can I use the program paint to draw the colors?

You can make a file in CC paint and then have your program load and draw it to the screen using painutils (if this is what you are asking)

valithor, on 30 November 2015 - 10:56 PM said:

I am actually going to recommend the paintutils api as it is easier to use when you are first starting. Which can be found here

Little example for drawing:

paintutils.drawBox(1,1,10,5,colors.blue) --# draws a blue box from the coordinates x = 1 to x = 10, and y = 1 to y = 5

To set up a button you will essentially just be telling the computer to listen for click events, and then checking to see if the coordinates returned by the event is within the area the button is drawn to.
example for a button (Example is set up to listen for the "button" we drew in the drawing example:

while true do --# repeating forever
  local event, button, x, y = os.pullEvent("mouse_click") --# telling the computer to listen for mouse click events, button will equal which mouse button is pressed, x is the x coord, and y is the y coord
  if x>=1 and x<=10 and y>=1 and y<=5 then
	--# our button was pressed, so do stuff
	paintutils.drawBox(1,1,10,5,2^math.random(0,15)) --# this is just for you to be able to visually see the button do something when pressed, this will randomly change the color of the button when it is pressed
  end
end

Hope this helps :P/>

I am still confused how to make buttons.

Lupus590, on 01 December 2015 - 08:19 AM said:

You can make a file in CC paint and then have your program load and draw it to the screen using painutils (if this is what you are asking)

But can I print text without messing up the colors?

There's not any magic behind making a button, all you do is put some color & text on a certain area, then check if a mouse_click event occurs in that area.


Here's an example utilizing nothing but basic commands. Obviously this isn't the shortest, nor the easiest way of doing it. However, this is essentially what all buttons are.

Most people use button APIs either written by themselvees or by others to handle the drawing and events. I have a few APIs I use for them, usually specifying a maximum and minimum for x and y, a background color, a text color, and some text. Sometimes the color values are hard-coded, and sometimes the max values are scaled according to the length of the text. I even created a Automatically scaling Button GUI, which takes a series of strings and a couple colors to create a menu. Obviously, this is extremely limiting to anyone who might use it, but it is extremely useful if you don't want to mess with placement of buttons and such.

term.setBackgroundColor( colors.orange )
term.setCursorPos( 1, 1 )
term.write( string.rep( " ", 8 ) )
term.setCursorPos( 1, 2 )
term.write( string.rep( " ", 8 ) )
term.setCursorPos( 1, 3 )
term.write( string.rep( " ", 8 ) )
term.setTextColor( colors.blue )
term.setCursorPos( 3, 2 )
term.write( "Button" )
while true do
  local event = {os.pullEvent()}
  if event[ 1 ] == "mouse_click" and event[ 3 ] >= 1 and event[ 3 ] <= 8 and event[ 4 ] >= 1 and event[ 4 ] <= 3 then
    break
    print( "Button was clicked!" )
  end
end

KingofGamesYami, on 01 December 2015 - 02:49 PM said:

There's not any magic behind making a button, all you do is put some color & text on a certain area, then check if a mouse_click event occurs in that area.


Here's an example utilizing nothing but basic commands. Obviously this isn't the shortest, nor the easiest way of doing it. However, this is essentially what all buttons are.

Most people use button APIs either written by themselvees or by others to handle the drawing and events. I have a few APIs I use for them, usually specifying a maximum and minimum for x and y, a background color, a text color, and some text. Sometimes the color values are hard-coded, and sometimes the max values are scaled according to the length of the text. I even created a Automatically scaling Button GUI, which takes a series of strings and a couple colors to create a menu. Obviously, this is extremely limiting to anyone who might use it, but it is extremely useful if you don't want to mess with placement of buttons and such.

term.setBackgroundColor( colors.orange )
term.setCursorPos( 1, 1 )
term.write( string.rep( " ", 8 ) )
term.setCursorPos( 1, 2 )
term.write( string.rep( " ", 8 ) )
term.setCursorPos( 1, 3 )
term.write( string.rep( " ", 8 ) )
term.setTextColor( colors.blue )
term.setCursorPos( 3, 2 )
term.write( "Button" )
while true do
  local event = {os.pullEvent()}
  if event[ 1 ] == "mouse_click" and event[ 3 ] >= 1 and event[ 3 ] <= 8 and event[ 4 ] >= 1 and event[ 4 ] <= 3 then
	break
	print( "Button was clicked!" )
  end
end

I am still confused making buttons. But how do I use the API? Should I learn the function os.pullEvent()?

oxygencraft, on 02 December 2015 - 07:05 AM said:

-Snip-

I am still confused making buttons. But how do I use the API? Should I learn the function os.pullEvent()?

In order to make buttons, yes, you need os.pullEvent().

local event, button, xpos, ypos = os.pullEvent("mouse_click")

That will pull a click event and give you what the event was, which button on the mouse was clicked, the x coordinate, and the y coordinate. Then, check against the position of where you want the button to be, and if it's within the region, done.
So lets say you have a button at x of 5, y of 2, and it goes until x:6 and y:3

local event, button, x, y = os.pullEvent("mouse_click") -- pull clicks
if x >= 5 and x <= 6 and y >= 2 and y <=3 then --This checks if x is within a box of x5 to x6, and if y is no higher than 3, but no lower than 2.
print("You Clicked The Button!")
end

That's some example code.

os.pullEvent() basically pauses the program until an event occurs.
You can pass it an event name as a string so it will only listen, or let the program continue, when this specific event occurs.

This piece of code, for example, would loop forever and report any event message:

while true do
  local sEvent = os.pullEvent()

  print("event " .. sEventname .. " occured")
end

This next piece of code would only listen for "mouse_click" events:

while true do
  local sEvent = os.pullEvent("mouse_click")

  print("event " .. sEventname .. " occured")
end

CloudNinja, on 02 December 2015 - 11:37 AM said:

Snip

local event, button, x, y = os.pullEvent("mouse_click") -- pull clicks
if x >= 5 and x <= 6 and y >= 2 and y <=3 then --This checks if x is within a box of x5 to x6, and if y is no higher than 3, but no lower than 2.
print("You Clicked The Button!")
end

That's some example code.

I am still confused with the code. I need an easier way to do it.

have you looked at touchpoint?

oxygencraft, on 03 December 2015 - 04:39 AM said:

CloudNinja, on 02 December 2015 - 11:37 AM said:

Snip

local event, button, x, y = os.pullEvent("mouse_click") -- pull clicks
if x >= 5 and x <= 6 and y >= 2 and y <=3 then --This checks if x is within a box of x5 to x6, and if y is no higher than 3, but no lower than 2.
print("You Clicked The Button!")
end

That's some example code.

I am still confused with the code. I need an easier way to do it.

If you learn how to pull events yourself, you'll be able to do much more.
os.pullEvent() waits until ANYTHING happens on the computer. calling: event, button, x, y = os.pullEvent("mouse_click") waits until you click on the screen. the event, button, x, and y are now variables after you click the screen and can be manipulated and compared against other variables.

So lets say i wanted the player to click in the top left corner:

local myButton = {1,1}  -- That created a table with the coordinates of the button, 1,1 being the first column and the first row.
local event, button, x, y = os.pullEvent("mouse_click")
--That waits until a click on the screen happens.
if x == myButton[1] and y == myButton[2] then  --Checks to see if x is equal to the first cell in the table and if y is the second cell in the table.
print("You clicked the button")   --prints a message when the button is clicked
end  -- ends the if statement

You seem to want to know how to create a button object, as many people do. Since an object is just a table, this is easy:

local button = {}
button.x = 1
button.y = 1
button.maxx = 8
button.maxy = 8
button.text = "Button"
button.bColor = colors.blue
button.tColor = colors.red

function drawButton( b )
  term.setBackgroundColor( button.bColor )
  term.setTextColor( button.tColor )
  for i = b.y, b.maxy do
    term.setCursorPos( b.x, i )
    term.write( string.rep( " ", b.maxx - b.x + 1 ) )
  end
  term.setCursorPos( b.x + (b.maxx - b.x - #b.text)/2, (b.y + b.maxy)/2 )
  term.write( b.text )
end

function isClicked( b, x, y )
  return b.x <= x and b.maxx >= x and b.y <= y and b.maxy >= y
end

drawButton( button )

while true do
  local event = {os.pullEvent()}
  if event[ 1 ] == "mouse_click" then
    if isClicked( button, event[ 3 ], event[ 4 ] ) then
      print( "Button was Clicked!" )
      break
    end
  end
end

I am not that confused now. All I am confused about is the x and y. Should I just play around with the y and x? And also can I paint the button colors in paint?

You can change x and y to your liking, but I would first experiment with maxx and maxy. Those values affect how wide and tall the button are, but (in my example) are not relative to the button.

To change the background color, simply change button.bColor. You could rig something up to use a paint-formatted image, but it wouldn't be easy.