GUI Arch 101707

1

© 2007 Microchip Technology Incorporated. All Rights Reserved. Microchip Graphics Library Architecture Slide 1

Microchip Graphics Library Architecture

Welcome to this segment of Microchip Web Seminar series.My name is Paolo A. Tamayo, an Application Engineer supporting the Graphics Library and Graphics Applications for PIC24 devices. In this session, I will be introducing the Microchip Graphics Library Architecture as well as give a basic example on its usage.

2


Agenda

The main focus of this presentation is to introduce you to the different components of the library and give you a first hand look on how to use the library.

3


Agenda

Library Overview

First we will take a brief look at the Microchip Library Architecture and give an overview of each layer.

4


Agenda

Library OverviewGraphics Object LayerAdvanced Graphics Objects

Next we take a look at the Graphics Object Layer which covers the Advanced Graphics Objects or commonly known as widgets. These will probably be the most commonly used items in the library and I would like to give you a brief summary on the different Objects that the library supports.

5


Agenda

Library OverviewGraphics Object LayerAdvanced Graphics ObjectsMessage Interface

Next we will take a look at the Message Interface that the library provides. This will introduce how messaging simplifies integration of application, user interface modules and library components.

6


Agenda

Library OverviewGraphics Object LayerAdvanced Graphics ObjectsMessage InterfaceGraphics Library Usage

We will also take a look at a basic example to give you a jump start on how to use the library. This will assist you to easily navigate through the documentation and get you up and running with your application using Microchip’s graphic system solution.

7


Library Overview

Graphics Display

Device Driver Layer

The Microchip solution starts at the Device Driver Layer.

8


Library Overview

Graphics Display

Display Device Driver (DDD)(i.e. PutPixel, GetPixel)

Device Driver Layer

A single C file implements the most basic functions (ex: PutPixel, GetPixel Set Color) needed to initialize and use the display device. This is usually through the display device controller.

9


Library Overview

Graphics Display


Graphical Accelerator(Optional)

Device Driver Layer

In some cases, a Graphical Accelerator is implemented in the display controller which performs a basic rendering function efficiently. This may be enabled by writing to some special registers in the device controller. This comprises the Device Driver Layer.

10


Library Overview

Graphics Display



Device Driver Layer

Graphics Primitives Layer

Above the Device Driver Layer is the Graphics Primitive Layer.

11


Library Overview

Graphics Display



Device Driver Layer

Graphics Primitive Functions(Non-accelerated Line, Circle, Bar, OutText etc)


This layer calls the basic functions in the Device Driver Layer to render primitive shapes. For example, a Line function in the Graphics Primitive Layer will call a PutPixel function of the Device Driver Layer repeatedly with the controlled changes to the x and y positions. Each pixels identified by the x and y positions will be set to the color chosen for the line.

12


Library Overview

Graphics Display



Device Driver Layer



Graphics Objects Layer

The next layer is the Graphics Object Layer.

13


Library Overview

Graphics Display



Draw Function 1(i.e. 3D Button)

Draw Function 2(i.e. Progress Bar)

Draw Function N

Message Interface

Device Driver Layer




……

In this layer, advanced objects such as Widgets are implemented. This layer also automatically handles management of objects from creation to destruction. Throughout this session, we will refer to widgets as Objects.

14


Library Overview

Graphics Display





Draw Function N

Application Layer

Message Interface

Device Driver Layer




…

Key Pad Touch ScreenMouse

The library assumes the application layer to contain the modules that initializes and controls the user interface modules (ex: keypad, touchscreen).

15


Library Overview

Graphics Display





Draw Function N

Application Layer

Message Interface

Device Driver Layer




…


A user interface is provided by the Graphics Object Layer to facilitate easy integration of user interface modules. This allows the library to be portable to systems with different user interface modules.

16


Library Overview

Graphics Display





Draw Function N

Application Layer

Message Interface

Device Driver Layer




……


Through the message interface, the application can communicate with the Objects. Together with the Graphics Object Layer API, applications can now fully integrate the Objects into the application functions.

17


Library Overview

Graphics Display





Draw Function N

Application Layer

Message Interface

Device Driver Layer




Generic Modules

Device Specific

Application Specific

……


We see the three layers of the system. The library integrates some Device Specific and Application Specific modules and create a solution that is easy to use, and portable.

18


Library Overview

Graphics Display



Draw Function 1Draw Function 1(i.e. 3D Button)(i.e. 3D Button)

Draw Function 2Draw Function 2(i.e. Progress Bar)(i.e. Progress Bar)

Draw Function NDraw Function N

Application Layer

Message InterfaceMessage Interface

Device Driver Layer




Generic Modules

Device Specific


……


Furthermore, the application has the facility to directly communicate with any layer of the library.

19


Library Overview

Graphics Display



Draw Function 1Draw Function 1(i.e. 3D Button)(i.e. 3D Button)

Draw Function 2Draw Function 2(i.e. Progress Bar)(i.e. Progress Bar)

Draw Function NDraw Function N

Application Layer

Message InterfaceMessage Interface

Device Driver Layer




Generic Modules

Device Specific


……

FREEFREE


Plus the library is free to use with PIC microcontrollers.

20


Graphics Object Layer

ButtonWindowCheck BoxGroup BoxRadio ButtonStatic TextImage

Edit BoxList BoxSliderScroll BarProgress BarMeterDialand more….

Advanced Graphics Objects (Widgets)

The following are the currently supported widgets in the library.

21



Here is an example of some widgets implemented in a QVGA display.

22



Image

A Image or bitmap is used to render the Microchip Logo.

23


Rounded Button


Image

A rounded button with red color scheme is shown. The green button shows a pressed state.

24


Rounded Button


Circular Button

Image

Ten circular buttons are implemented.

25


Rounded Button


Circular Button

Scroll Bar

Image

Vertical scroll bar is also shown as well as a horizontal scroll bar

26


Rounded Button


Circular Button

Check Box

Scroll Bar

Image

Check boxes are shown on the upper right corner.

27


Rounded Button


Circular Button

Check Box

Scroll Bar Meter

Image

And Meters are shown in two modes.

28


Advanced Graphics Object

Some notable features of the Objects

29



An object can be created, managed and destroyed using its API’s.

1. API’s are provided to create, control and destroy an Object

30



An object can be created, managed and destroyed using its API’s.Object behavior are determined by its current state and user action on the object.

2. Object behavior is based on its present state and user action on the Object.

31



An object can be created, managed and destroyed using its API’s.Object behavior are determined by its current state and user action on the object.Objects can be set to inactive or active state.

3. Objects can be set to active or inactive states.

32



An object can be created, managed and destroyed using its API’s.Object behavior are determined by its current state and user action on the object.Objects can be set to inactive or active state. Objects can be grouped into linked lists. Performed during object’s creation.

4. Object management is simplified by linked lists. Each newly created object is added into an active list. Because of this list, drawing of Objects in the display is performed by the library automatically.

33



An object can be created, managed and destroyed using its API’s.Object behavior are determined by its current state and user action on the object.Objects can be set to inactive or active state. Objects can be grouped into linked lists. Performed during object’s creation.By default, all objects uses a default style scheme. The style scheme determines the font table and the color scheme to be used.

5. Style scheme can be implemented in each object. By default an object will be assigned to use the default style scheme. User can select to create a new style scheme and assign it to the Object at creation or at any time the Object is present in memory. The style scheme determines the font table and the color schemes used to render an Object.

34


Message Interface

For best user experience the user input device must work cohesively with display− Simplifies object management from the application point of

view

Message Interface



Draw Function N

Application Layer


……


The best user experience is achieved when the user input device works cohesively with the display. This is the reason why the library integrates the basic management of the Objects based on the user actions.

Benefits derived from this implementation are the following:1. This simplifies the Object management from the application point of view.

35


Message Interface


view− The Message Interface layer simplifies integration of user

input device

Message Interface



Draw Function N

Application Layer


……


2. It simplifies integration of user input devices

36


Message Interface



input device− Support for variety of input devices

Message Interface



Draw Function N

Application Layer


……


3. It can support a variety of input devices

37


Message Interface



input device− Support for variety of input devices− Seamless integration with graphics objects

Message Interface



Draw Function N

Application Layer


……


4. And provides a seamless integration of the input devices with the Objects in the screen.

38


Graphics Library Usage

How do we use the library? How easy is it to implement the Objects and use it in your application?

Let’s take a look at a simple example:

39



Initialize GraphicsInitGraph()

First InitGraph() is called to reset the display device controller, move the cursor position to (0, 0) position, and initialize the display to black.

40




Create Style SchemeGolCreateScheme()

Next GOLCreateScheme() is called to define the style scheme used for the Objects. What is a style scheme? Let’s take a closer look.

41


Style Scheme

typedef struct {WORD EmbossDkColor;WORD EmbossLtColor;WORD TextColor0;WORD TextColor1;WORD TextColorDisabled;WORD Color0;WORD Color1;WORD ColorDisabled;WORD CommonBkColor;char *pFont;

} GOL_SCHEME;

By default, all objects uses a global style scheme structure that defines the font table used and the color scheme used.

By default all objects uses a global style scheme structure that defines the font table used and the color scheme used.

42


Style Scheme


} GOL_SCHEME;


Unpressed

Pressed

Let us take the Button as an example.

43


Style Scheme


} GOL_SCHEME;


Unpressed

Pressed

EmbossDkColor

EmbossLtColor

EmbossDkColor

EmbossLtColor

To emulate 3 dimensional press effect we interchange the emboss dark and light color when the object is pressed or released.

44


Style Scheme


} GOL_SCHEME;


Unpressed

Pressed

EmbossDkColor

TextColor1

TextColor0

EmbossLtColor

EmbossDkColor

EmbossLtColor

Also the text color can be changed.

45


Style Scheme


} GOL_SCHEME;


Unpressed

Pressed

EmbossDkColor

TextColor1

TextColor0

Color1

Color0

EmbossLtColor

EmbossDkColor

EmbossLtColor

As well as the color of the object.

46


Style Scheme


} GOL_SCHEME;


Unpressed

Pressed

EmbossDkColor

TextColor1

TextColor0

Color1

Color0

pFont

EmbossLtColor

EmbossDkColor

EmbossLtColor

pFont selects the font used in the text.

47


Style Scheme


} GOL_SCHEME;


Unpressed

Pressed

EmbossDkColor

TextColor1

TextColor0

Color1

Color0

pFont

EmbossLtColor

EmbossDkColor

EmbossLtColor

Common background color is used to hide the object from the screen.TextColorDisabled and ColorDisabled is used to show that the object is in a disabled state.

48





If the no changes to the style scheme will be specified, the default style scheme is used.

49





GOL Init()

In this case, InitGraph() and GOLCreateScheme() functions can be performed by just one function call to GOL_Init().

50





Create ObjectsObjCreate(,,)

GOL Init()

Next step is to create the Objects. ObjCreate( , , ) function represents the multiple Objects that will be created. This can be a single create function call to create one Object or a series of calls to different create functions. For example to create a Button BtnCreate() function is used.

51


Button Example

BUTTON *BtnCreate(WORD ID,SHORT

left,top,right,bottom, state,

char *pBitmap,*pText,

GOL_SCHEME *pScheme)

Button

For example, to create the button, BtnCreate Function is used.

52


Button Example





Button

ID is a user defined number.

53


Button Example





Button

left, top

right, bottom

left, top, right & bottom defines the dimension of the object.

54


Button Example





Button

left, top

right, bottom

state defines the current state of the Object. For each Object type a defined state list is used.

55


Button Example

− Button state can be any of the following

#define BTN_FOCUSED 0x0001 // bit for focus state (dotted// rectangle will be drawn)

#define BTN_PRESSED 0x0002 // bit for press state (button// is pressed)

#define BTN_DISABLED 0x0010 // bit for enable state// (disabled button has separate// colors)

#define BTN_DRAW 0x4000 // bit to indicate button should// be redrawn

#define BTN_REMOVE 0x8000 // bit to indicate button should// be removed from screen

The following list shows the state definition for the button. The way the Button Object is redrawn on the screen is based on which bit states are set or reset.

BTN_DRAW and BTN_REMOVE are drawing states indicating the objects are to be refreshed in the display based on the other three state bits: BTN_FOCUSED, BTN_PRESSED and BTN_DISABLED.

56


Button Example

To create a button, the following parameters are needed:





Button

left, top

right, bottom

pBitmap and pText are set to NULL if no text or bitmap is used. Text is drawn on top of the bitmap if both are specified. Text drawn on the button face can be aligned left, right, top or bottom. In the example above we use the word “Button” as center aligned text.pScheme – can be user defined or if set to NULL will use the default style scheme.

57


Button Example

To create a button, the following parameters are needed:





Button

left, top

right, bottom

*pBitmap – Set to NULL when not using bitmaps.*pScheme – User defined or set to NULL to use default settings.

pBitmap and pText are set to NULL if no text or bitmap is used. Text is drawn on top of the bitmap if both are specified. Text drawn on the button face can be aligned left, right, top or bottom. In the example above we use the word “Button” as center aligned text.pScheme – can be user defined or if set to NULL will use the default style scheme.

58






GOL Init()

After the Objects are created, they are drawn by calling the GOLDraw() function.

59






Draw ObjectsGOLDraw()

GOL Init()

This function parses the active Object’s link list and checks the drawing state of each of the Objects. If an Object has a pending drawing state set, the Object will be redrawn. After GOLDraw() renders the Object, it resets the pending drawing state.

60


Button Example

To render the Button on the screen call BtnDraw(pB). Where pB is the pointer to the Button Object to be rendered.

To render the Button on the screen, BtnDraw(pb) is called where pB is the pointer to the button object rendered.

61


Button Example

To render the Button on the screen call BtnDraw(pB). Where pB is the pointer to the Button Object to be rendered.To manage the state of the Button

To manage the state of the Button:

62


Button Example

To render the Button on the screen call BtnDraw(pB). Where pB is the pointer to the Button Object to be rendered.To manage the state of the ButtonSetState(pB, stateBits)ClrState(pB, stateBits)GetState(pB, stateBits)

SetState() ClrState() and GetState() are used

63


Button Example

To render the Button on the screen call BtnDraw(pB). Where pB is the pointer to the Button Object to be rendered.To manage the state of the ButtonSetState(pB, stateBits)ClrState(pB, stateBits)GetState(pB, stateBits)Where stateBits are bits of the state

variable of the Button Object.

where stateBits are the bits of the state variable of the Button object described earlier.

64


Button Example

Other support APIs

Other API used to manage the Button are available.

65


Button Example

Other support APIsText management:− BtnGetText(pB) & BtnSetText(pB,*)

1. Text written over the Object can be modified

66


Button Example


Bitmap management:− BtnGetBitmap(pB) & BtnSetBitmap(pB, *)

2. Bitmap used can be modified as well.

67


Button Example


Bitmap management:− BtnGetBitmap(pB) & BtnSetBitmap(pB, *)

Style Scheme management: − GetScheme() & SetScheme()

3. Style schemes can be assigned to individual objects. Even objects of the same type can be assigned different style schemes.

68







GOL Init()

The next step is to get the user inputs.

69







Get User InputsMessage Struct

GOL Init()

Assume that a user interface module is implemented in the application that sends messages to the library through the message interface. These messages contain the user action on the objects in the screen.

70


Messaging

The library implements the messaging interface

71


Messaging

Message Structuretypedef struct { BYTE type;BYTE event; SHORT param1; SHORT param2;} GOL_MSG;

using the defined message structure.

72


Messaging


type is used to determine keypad, touch screen or pointing device. This also determines how param(n) are interpreted.

type – defines the device type used. Examples are keypad, touch screen or pointing devices.

73


Messaging


type is used to determine keypad, touch screen or pointing device. This also determines how param(n) are interpreted. − Example: Message from touch screen:

− param1 : x position − param2 : y position

param1 and param2 – are interpreted based on the type. For the touch screen, parameters 1 and 2 are defined as the x and y coordinate position respectively.

74


Messaging


type is used to determine keypad, touch screen or pointing device. This also determines how param(n) are interpreted. − Example: Message from touch screen:

− param1 : x position − param2 : y position

− For keypad: parameters can be a key code

For a keypad, key codes are embedded in the parameters.event – determines the user action

75


Messaging

event is a generic message of input device

Events is also interpreted as the messages specific to the input devices, more precisely the user action. They are pre-defined and all devices of the same type should use these messages.

76


Messaging

event is a generic message of input device− event definition for touch screen

− EVENT_PRESS− EVENT_RELEASE− EVENT_MOVE

Events in a touch screen module are defined as:1. EVENT_PRESS2. EVENT_RELEASE3. EVENT_MOVE

77


Messaging

event is a generic message of input device− event definition for touch screen

− EVENT_PRESS− EVENT_RELEASE− EVENT_MOVE

− event definition for key board can be− EVENT_PRESS− EVENT_RELEASE

For a keyboard:• EVENT_PRESS• EVENT_RELEASE

78


Messaging

Whenever a message is received by the Object, the Object evaluates if the message is valid or not.

79


Messaging

User Action ID− List of defined actions (or state change) that

an object has accepted.

When the receiving Object evaluated the message to be valid it replies with one of the defined action ID. The Action ID is a list of defined actions that an object will accept.

80


Messaging


an object has accepted.− Each object type has a predefined list.

Each object will have its own list of action IDs.

81


Messaging



−Button Example:− BTN_MSG_PRESSED− BTN_MSG_RELEASED

For the Button example, the two predefined action ID are BTN_MSG_PRESSED and BTN_MSG_RELEASED.

82


Messaging



−Button Example:− BTN_MSG_PRESSED− BTN_MSG_RELEASED

− If object is not affected by the user action it returns MSG_INVALID.

If the message is deemed to be invalid, the Object replies with MSG_INVALID. An example of a returned MSG_INVALID is when an object is set to be inactive. Any messages to that object will automatically be replied with MSG_INVALID.

83








GOL Init()

The library uses

84








Process User MessagesGOLMsg()

GOL Init()

GOLMsg() to process these messages and checks the active Object’s link list to determine which Object will be affected by the message. An optional way to modify object behavior is also provided. One way is through the message call back.

85


Message Callback Example

Here is an example on how messaging is further utilized to customize object behavior.

86


Message Callback ExampleWORD GOLMsgCallback(WORD objMsg, OBJ_HEADER* pObj, GOL_MSG* pMsg) {

WORD objectID;objectID = GetObjID(pObj);

return 1; // Process message by default}

The GOLMsgCallback() is a function created by the user to add or remove object control. If no additional controls are to be added it must return 1.

87




switch(objectID) {case ID_WINDOW1: // If x,y in client area draw red pixel

case ID_BUTTON1: // if button 1 is pressed

case ID_BUTTON2:

}return 1; // Process message by default

}

In this example: there are three objects: WINDOW, BUTTON1 and BUTTON2.

88





if(objMsg == WND_MSG_CLIENT) {SetColor(RED);PutPixel(pMsg->param1,pMsg->param2);

}return 0; // Don’t process by default


case ID_BUTTON2:


}

For WINDOW: when touch screen touches the CLIENT area indicated by the WND_MSG_CLIENT action ID, the pixel on the x,y location is set to red.

89








case ID_BUTTON2:


}

After drawing the red pixel, it returns 0 indicating that no further default action will be processed on the message and the message is discarded.

90







case ID_BUTTON1: // if button 1 is pressedif(objMsg == BTN_MSG_PRESSED) {

BtnSetBitmap(pObj, &duckPressed); }if(objMsg == BTN_MSG_RELEASED) {

BtnSetBitmap(pObj, &duckReleased);}break;

case ID_BUTTON2:


}

For BUTTON1: If the touch screen presses this object as indicated by the BTN_MSG_PRESSED action ID, the bitmap drawn on the object is changed to duckPressed.

91










case ID_BUTTON2:


}

When released indicated by the BTN_MSG_RELEASED action ID, the bitmap drawn is changed to duckReleased.

92










case ID_BUTTON2:


}

To complete the object’s press and release effect we must return 1 and let the library manage the press and effect rendering of the button.

93










case ID_BUTTON2:break; // Do nothing process by default


}

For BUTTON2: there is no action change so we just return 1.

94











}

In fact if there is no action change needed we can remove this case in the switch. Library will manage BUTTON2 for you.

95









GOL Init()

After the messages are processed

96









GOL Init()

GOLDraw() is again called to redraw the Objects. Thus completing the cycle.

97


Summary

To summarize we have seen that

98


Summary

Structure of Microchip’s Graphics Library

The Microchip Graphics Library structure allows easy integration of user interface devices, and display devices.

99


Summary

Structure of Microchip’s Graphics LibraryModular solution allows easy application migration to different display hardware

The modular solution allows easy migration from one display platform to another.

100


Summary

Structure of Microchip’s Graphics LibraryModular solution allows easy application migration to different display hardwareHow to use the library

You have seen the simple usage of the library and with a small code integrate it into your application.

101


Summary

Structure of Microchip’s Graphics LibraryModular solution allows easy application migration to different display hardwareHow to use the libraryMicrochip Graphic Library Source code and API Manual is freely downloadable from www.microchip.com/graphics

This is a free graphics library solution for PIC microcontrollers. For source code and API manual please go to www.microchip.com/graphics

102


THANK YOU

Documents

GUI Arch 101707