How to DIY a GUI


  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


  • rowlayout
  • columnlayout
  • gridlayout

How to interact(Message Mechanism)

aka callback or signal/slot via MOC

  ...//create some buttons
void callback(int gui_id){
    case ID_BUTTON1:;
    case ID_SLIDER: 
      value = getSlider(ID_SLIDER).getValue;

Make a manager

class GUIMgr
	Array<Widget*> Widget;
	NotifyEvent CallbackEvent;
	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
		//go back to event-loop for next event
class Slider : public Widget
	float Min; 
	float Max;
	float Val;

	//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