How to DIY a GUI
how to render point, link and surface (QPainterDevice)
- 2D path (or some lib)
- which graphic card it is(MGA/CGA/VGA)
- interrupt to initialized it with all parameters(resoluton, color depth, refresh rate)
- (x,y) => point represent in framebuffer
- set color of that point
- 3D path and windows manager and X
give putpixels, then I could have drawLine, drawRect… after that how to render text from font.(Unicode!!!)
and then render img to BMP(JPG need to unzip it..)
Jungle of class
with the basic tool to render stuff(QPainter), the next step is create all kinds of class that staticly render
render classes
- button
- Form
- Picture
- …
layout
- rowlayout
- columnlayout
- gridlayout
- …
How to interact(Message Mechanism)
aka callback or signal/slot via MOC
init(){
...//create some buttons
GUI->setCallback(&callback);
}
...
void callback(int gui_id){
switch(gui_id){
case ID_BUTTON1: button1.click();
case ID_SLIDER:
value = getSlider(ID_SLIDER).getValue;
Label1.setValue(value);
...
}
Make a manager
class GUIMgr
{
private:
Array<Widget*> Widget;
NotifyEvent CallbackEvent;
public:
void create(...);
void addWidget(Control* cont) { Widget(cont); }
void setCallback(NotifyEvent event) { CallbackEvent = event; }
void render() { foreach control in Controls control->Render(); }
void handleMsg(Message msg)
{
Widget* w = SelectWidget(msg);
w->HandleMsg(msg);//bubble up
CallbackEvent->Invoke(w);
//go back to event-loop for next event
}
};
class Slider : public Widget
{
private:
float Min;
float Max;
float Val;
public:
//each class need to have override the interface
void create(...);
void render() const;
float getValue() const { return Val; }
bool handleMsg(Message msg){//like paintEvent
//something changed? np,
//let me change me state and re-render
}
};
HTML’s way (QML)
yep, after set up all those things, using a xml/json to configure it. but Widget can’t handle all possible control logic. and it is heavy weight to carry all tools(functions) with you by default.
next step, componet that have minimal property, and glue them using javascript
Written on March 23, 2015