0
\$\begingroup\$

I'm working on GUI system and I want to implement tooltips and dialogs.

Base components hierarchy looks like this:
Base hierarchy

So every panel extend ComponentContainer class, and other controls like button extend Component class

This is my current component hierarchy:
Component hierarchy

My main idea to add layers. For example first for components, second for tooltips, third for different dialogs, but I can't realize where they should be in this structure... and if dialog will contain some fields with tooltips, how should it work?

Any ideas?

UPD: The question about layers and class structure with layers. How they should be organized considering the fact that they will be used to hold dialogs and tooltips.

Event handling already implemented and it will not be so complicated to add it for layers.

\$\endgroup\$
1
\$\begingroup\$

I have all my UI nodes in a tree, I then walk the tree and add the visible nodes to there respective draw queues, as I'm adding nodes to queues I also check if the mouse is over the current node and then add that node to the mouse courser\tooltip layer.

I have a queue for each blend type, a queue for the mouse layer and then a queue for each font type.

The ui tree node walking happens in the update method, where all the click and change events happen.

Each node also has a depth value for draw order within the queue, I have the back layer set as 1.0 and the front as 0.0 then if I draw a window with other controls on it as children I have there depth set as parent.depth - 0.01 and the windows depth set to some value based on where i want it to be.

enter image description here

In the image the window has a depth of 0.85 and all of the controls on in the window have a depth of 0.84, the health bar container and the item slots have a depth of 0.95 while the health bars have a depth of 0.94.

The tooltip in the left corner has a depth of 1 for the back ground a depth of 0.99 for the text.

The tooltip can have a depth of 1 because its layer is drawn after everything else so it will be the front most anyway.

\$\endgroup\$
0
0
\$\begingroup\$

I have build basic GUI, its almost the same as the one in picture , my main class is GUIManager witch own everything and deals with drawing , keyboard , mouse events .

class GUIManager 
{
public:
    GUIManager();
    ~GUIManager();
    // Add Methods
    std::shared_ptr<GUITextInput> AddTextInput(std::string name, int x, int y, int width, int height,int zindex=0, std::wstring fontfamily = L"Minion Pro");
    std::shared_ptr<GUIButton>  AddButton(std::string name, std::string title, std::string path, int x, int y, std::string value = "", int zindex=0 ,std::wstring font = L"Minion Pro", float fontsize = 15, bool textbold = true);
    std::shared_ptr<GUIPanel> AddPanel(std::string name, std::string path, int x, int y, int zindex = 0);
    std::shared_ptr<GUITextArea> AddTextArea(std::string name, int x, int y, int width, int height, std::string value = "", int zindex = 0, std::wstring fontfamily = L"Minion Pro", float fontsize = 14, bool bold = true);
    std::shared_ptr<GUITextBox> AddTextBox(std::string name, std::string text, int x, int y, int width, int height, int zindex = 0, std::wstring fontfamily = L"Minion Pro", float fontsize= 14, bool bold = true);
    std::shared_ptr<GUICheckBox> AddCheckBox(std::string name, std::string value, std::string path, int x, int y, int width = 0, int height = 0, int zindex = 0);
    std::shared_ptr<GUIList> AddList(std::string name, std::string topic, std::string dvalue, int x, int y, int width, int height, int zindex=0, std::wstring fontfamily = L"Minion Pro", bool bold=true);
    //Handling methods
    void Draw(Graphics& gfx);
    void Update(Mouse& mouse,Keyboard& kbd);
    void SortByZIndex();
    void ClearGUI();
    //Getters 
    std::shared_ptr<GUIElement> GetElement(std::string name);
private:
    void MouseHandler(Mouse& mouse);
    void KeyboardHandler(Keyboard& kbd);
private:
    std::vector<std::shared_ptr<GUIElement>> Elements;
};

all my elements are stored inside std::vector<std::shared_ptr<GUIElement>> Elements; GUIElement class is parent class of all element each element have child class who overrides GUIElement some of methods depends on needs. Also GUIElement , have some futures like border , label , and ect . i can enable that for each element is part of GUIElement .GUIManager have have funtions to add element to element vector and return pointer to it so you wont need to cast them later , there is also Funtion GetElement(std::strin elementname); but this function returns GUIElements witch means only parent class funtions will by available unless they are overrided by child class , so in that case it will be called child class functions instead of parent

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.