AssortedWidgets is an easy to use and lightweight ui library developed in C++11 and OpenGL ES 2. AssortedWidgets can be built into WebAssembly to run on the web. Try the live demo on this page!
1. Install WebAssembly.
2. Under the emsdk folder, run
source ./emsdk_env.sh
3. Under the AssortedWidgets folder, run
mkdir build
cd build
cmake .. -DCMAKE_TOOLCHAIN_FILE=~/AssortedWidgets/cmake/Modules/Emscripten.cmake
make
4. Once finished, run the following. You should be able to see AssortedWidgets in browser at http://localhost:8080
emrun --no_browser --port 8080 .
1. Install SDL2 and SDL2_image:
sudo apt-get install libsdl2-dev ibsdl2-image-dev
2. 2. Under AssortedWidgets folder, run
mkdir build
cd build
cmake ..
make
3. Once done, run
./AssortedWidgets
1. Install SDL2 and SDL2_image via homebrew:
brew install sdl2 sdl2_image
2. 2. Under AssortedWidgets folder, run
mkdir build
cd build
cmake ..
make
3. Once done, run
./AssortedWidgets
To use AssortedWidgets, first define a class inherits AssortedWidgets::Widgets::Dialog:
class DemoDialog: public AssortedWidgets::Widgets::Dialog
{
public:
DemoDialog(void);
~DemoDialog(void);
};
Then, add desired UI elements and layouts to the dialog as private members:
class DemoDialog: public AssortedWidgets::Widgets::Dialog //subclass the common base for all dialogs.
{
private:
Widgets::Button *m_closeButton; //add a button
Widgets::Label *m_label; //add a text label
Widgets::ScrollPanel *m_panel; //add a scroll panel
Layout::GridLayout *m_gridLayout; //a layout is a container of UI elements.
public:
DemoDialog(void);
public:
~DemoDialog(void);
};
Initialize the dialog in its constructor:
DemoDialog::DemoDialog(void)
:Dialog("Scroll Panel Test:",400,400,320,240) //provide dialog title and size.
{
m_gridLayout=new Layout::GridLayout(2,1); //initialize the grid layout, set its margin
m_gridLayout->setRight(16);
m_gridLayout->setLeft(16);
m_gridLayout->setTop(8);
m_gridLayout->setBottom(8);
m_gridLayout->setSpacer(4);
m_gridLayout->setHorizontalAlignment(1,0,Layout::GridLayout::HRight);
m_closeButton=new Widgets::Button("Close"); //initialize the UI elements on this dialog
m_label=new Widgets::Label("I am a very very big Label in a Scroll Panel.");
m_label->m_size.m_height=m_label->m_size.m_width=500;
m_panel=new Widgets::ScrollPanel();
m_panel->setContent(m_label); //add the label to the scroll panel
setLayout(m_gridLayout); //let this dialog to use this layout
add(m_panel); //add both the scroll panel and the close button to the dialog
add(m_closeButton);
pack(); //this function update the sizes and locations of internal UI elements
}
Go back to the class definition, add a onClose() function to handle the mouse release event of the close button:
class DemoDialog: public AssortedWidgets::Widgets::Dialog
{
private:
Widgets::Button *m_closeButton;
Widgets::Label *m_label;
Widgets::ScrollPanel *m_panel;
Layout::GridLayout *m_gridLayout;
public:
void onClose(const Event::MouseEvent &e);
DemoDialog(void);
~DemoDialog(void);
};
Register the onClose() function as the handle of the mouse release event of the close button:
DemoDialog::DemoDialog(void):Dialog("Scroll Panel Test:",400,400,320,240)
{
...
//register the onClose function as the event handler of the close button's mouse release event
m_closeButton->mouseReleasedHandlerList.push_back(MOUSE_DELEGATE(DemoDialog::onClose));
}
void DemoDialog::onClose(const Event::MouseEvent &)
{
//this is the event handler, it calls a predefined function Close() to shut the dialog
Close();
}