Chat UI with the gui system

Scripting Issues
1

Hi, I am trying to achieve a chat interface right now, but I am having quite some trouble.

Since I needed to display a list of text I tried using DirectScrolledList in a canvas area, managed by DirectScrolledFrame. But this is all getting very confusing.

The first problem is the position system, as it is a 2d, I assumed that the coord system would be -1…1, but I am not getting it right. For example, I created a canvas of size 4, what would be it top, left corner? It should be (-1, 1), right?

Second thing, how do I get a transparent effect in the frame? I am setting the Alpha value to 0, still no result.

I am adding an item and it is being displayed in the middle of the frame, shouldn’t the default value of the range be 0-1? I scroll a lot to get to the text, and still it is out of the bounds of the screen…

Here is what I am trying:


from direct.gui.DirectGui import *
from direct.showbase.ShowBase import ShowBase
import direct.directbase.DirectStart
from direct.gui.OnscreenText import OnscreenText 

class ChatInterface:
	def __init__(self):
		self.scrolledFrame = DirectScrolledFrame(
			canvasSize = (-.33,.406,-2,2), 
			frameSize = (-.33,.5,-1,-.5),
			frameColor = (0.6, 0.6, 0.6, 0),
			autoHideScrollBars = True, 
			scrollBarWidth = 0.04, 
			relief = None,
			color = (0.5, 0.5, 0.5, 1)
			
		)
		self.scrolledFrame.setPos(-1, -1, 0) 
		
		self.textArea = DirectScrolledList(
			frameSize = (-2, 2, -2, 2),
			color = (0.5, 0.5, 0.5, 0.7),
			itemFrame_frameSize = (-.33,.5,-2,2),
			itemFrame_color = (1, 0, 0, 0.7),
			relief = None 
		)
		self.textArea.reparentTo(self.scrolledFrame.getCanvas())
		l = DirectLabel(text = "The quick brow fox jumps over the lazy dog", text_scale=0.05)
		self.textArea.addItem(l)
		
		
chat = ChatInterface()

run()

Finally, is there any other easy way to achieve a chat inteface?

Thanks in advance.

2

A frame is created by specifying it’s left, right, bottom and top sizes. That means, if you make a frame like this: (-2, 2, -2, 2), then it’s top left corner would be: Vec3(-2, 0, 2).

A couple of examples:

frameSize = [-2, 2, -2, 2] # Top left corner is (-2, 2)
frameSize = [0, 1.5, -10, 0] # Top left corner is (0, 0)
frameSize = [-0.7, 0, -1, 0.3] # Top left corner is (-0.7, 0.3)

Obviously, these “corner values” are affected by scales.

It takes a moment to get used to how DirectGUI works.

Transparency isn’t enabled by default. You need to enable it.

myNodePath.setTransparency(TransparencyAttrib.MAlpha)
3

You don’t need to enable transparency that way for DirectGUI. I think the problem is in the fact that you have both frameColor and color keywords. Try omitting the color keyword and see if that solves your transparency problem. Basically, I think the alpha of 1 in the color keyword is overriding the alpha of 0 in the frameColor keyword.

4

Thanks for the replies, I managed to get the frame transparent and the frame position corrected, still no luck with the text position, will keep trying as time allows.