How to DIY a GUI

Framebuffer

  1. 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
  2. 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