GUI Framework

GUI Framework

Menu Interfacing

The menu will have features as modular as possible to let the development less complex and annoying and more maintenanceable.

These features will be the ability to :

• Create tabs and have some data in it
  • These data will be templated as a grid style to let the possibility to make the most customizable and best performing UI menu (see the Bootstrap Grid System)
• Make fluid animations between tabs transitions
  • Each transition will execute a previously created callback function when needed (aka. when tab changed)
• Set a picture, a video or even a game demo in the background
  • It will be possible by the Engine and Scene systems to generate a real-time demo

Stand-alone and Universal Menu Tools

We want to make tools that can be useful for anyone and with fast access and usable not only in the menu but also i.e. in the Game HUD for exemple.

To do this then we gonna make basic tools such as :

• Push buttons
  • Disable / enable states
  • Custom label
• Checkboxes
  • Unchecked, partial, and checked states
  • Custom label
• Spin boxes
  • Increment and decrement buttons
  • Custom label
• Combo boxes
  • List of items selectables
  • Custom label
• Scroll bars
  • Thickness
  • Border color
  • Background color
• Lines edit
  • Editable text
  • Placeholder text
  • Background color
  • Border color
  • Text color
  • Text size
• Texts
  • Basic text
  • Text from files
  • Horizontal and vertical scrolling
• Progress bars
  • Background color
  • Border color
  • Display pourcentage as a text
  • Text color
  • Text size
  • Completed color
• Ranged slider bars*
  • Min / Max values
  • Starting current value
  • Background color
  • Border color
  • Filled color
  • Orientation
  • Cursor element
    • Background color
    • Border color

Where all GUI elements are inherited by a GUIElement which has these following properties :

• Width and height element
• Enter, leave and click methods

Methods interfacing

Here will be explained how will looks like the code structure for GUIElements and other classes related to this :

GUIElement.hpp

    #ifndef GUIELEMENT_HPP_
    # define GUIELEMENT_HPP_
    
    class GUIElement
    {
        int _width;
        int _height;
	    
      public:
        GUIElement(int const width, int const height) :
          _width(width), _height(height)
        {}
        ~GUIElement() {}

        virtual void onEnter() {}
        virtual void onLeave() {}
        virtual void onClick() {}

        virtual int getWidth() const
        {
            return (this->_width);
        }
        virtual int getHeight() const
        {
            return (this->_height);
        }
    }
    #endif /* GUIELEMENT_HPP_ */

GUIHandler.hpp

    #ifndef GUIHANDLER_HPP_
    # define GUIHANDLER_HPP_
    
    # include <vector>
    # include <memory>
    # include "GUIElement.hpp"
    
    class GUIHandler
    {
        std::vector<std::shared_ptr<GUIElement>> _guiElements;

      public:
        GUIHandler() {}
        ~GUIHandler() {}

        void addGUIElement(std::shared_ptr<GUIElement> elem)
        {
            this->_guiElements.push_back(elem);
        }
        std::vector<std::shared_ptr<GUIElement>> getGUIElements() const
        {
            return (this->_guiElements);
        }
    }
    #endif /* GUIHANDLER_HPP_ */

For the PushButton's case, we can make a class structured as below :

PushButton.hpp

    #ifndef PUSHBUTTON_HPP_
    # define PUSHBUTTON_HPP_
    
    # include <string>
    # include "GUIElement.hpp"
    
    class PushButton : public GUIElement
    {
        bool        _state;
        std::string _label;
		
      public:
        PushButton(int const width, int const height, std::string const& label) :
          GUIElement(width, height), _state(false), _label(label)
        {}
        ~PushButton() {}

        virtual void onEnter()
        {
            //Will be called when mouse is entering into the element
        }
        virtual void onLeave()
        {
            //Will be called when mouse is leaving the element
        }
        virtual void onClick()
        {
            //Will be called when the element has been clicked
            this->_state = !this->_state;
        }

        // Specific functions for this element
        void onStateChanged()
        {
            //Will be called when the push button's state has been changed
        }
        bool getState() const
        {
            return (this->_state);
        }
        std::string getLabel() const
        {
            return (this->_label);
        }
    }
    #endif /* PUSHBUTTON_HPP_ */