cancel
Showing results for 
Search instead for 
Did you mean: 

TFT LCD touch screen mapping by external keypad

Tran Minh Cong
Associate II
Posted on July 12, 2018 at 07:02

Dear every body,

I'm doing project about lcd tft 7inch 800x480 and stm32f746.

Currently, i want use external keypad (or external button), not use touch screen pannel.

Example: 

http://hshop.vn/products/ban-phim-ma-tran-mem-4x4

 

I have 1 button on LCD:

// { BUTTON_CreateIndirect, 'Browse', ID_BUTTON_0, 13, 8, 100, 20, 0, 0x0, 0 },

(x,y) =  (13,8).

width = 100.

height = 20.

=> (x,y) center = (13+100/2 = 63,8+20/2=18).

When 1 keypad or button pressed, i checked that ok.

How to mapping 1 key pressed to WM_NOTIFICATION_CLICKED event of 

ID_BUTTON_0 (ID_BUTTON_0 is displayed on LCD)? After that, emwin will do something: show dialog...

Can you tell me solutions, please?

Thank you so much!

#tft-lcd-touch-screen-mapping-by-external-keypad
39 REPLIES 39
Posted on July 13, 2018 at 14:26

event from evternal button must generate coordinate of button square - examlpe:

pState.x = 200;

pState.y = 120;

pState.Pressed = 1;
Tran Minh Cong
Associate II
Posted on July 13, 2018 at 19:06

Dear you,

I want design 1 dialog like that:

0690X0000060M8GQAU.png

When mapping external button to ''UP'', ''DOWN'' touch button,image will be marked or hight light.

Image 1-8 are .png files, not is button.

How to do that?

Set image to button? Or convert image to stream data .dta, ''iconviewer'' will control these image?

Can you send for me examples with 2 image random?

Thanks.

Posted on July 13, 2018 at 19:12

Dear you,

I have just update circle.png, rectangle.png , .dta to link:

https://drive.google.com/drive/folders/1dHgIe4uFZUElhIBmTC-IFxvM4C0D2oIs?ogsrc=32

 

You can get image files to do small examples for me?

Thanks.

Posted on July 13, 2018 at 23:39

WindowDLG with triangle & round button

/*********************************************************************

* *

* SEGGER Microcontroller GmbH & Co. KG *

* Solutions for real time microcontroller applications *

* *

**********************************************************************

* *

* C-file generated by: *

* *

* GUI_Builder for emWin version 5.40 *

* Compiled Jun 22 2017, 10:13:26 *

* (c) 2017 Segger Microcontroller GmbH & Co. KG *

* *

**********************************************************************

* *

* Internet: www.segger.com Support:

mailto:support@segger.com

*

* *

**********************************************************************

*/

// USER START (Optionally insert additional includes)

// USER END

#include 'DIALOG.h'

/*********************************************************************

*

* Defines

*

**********************************************************************

*/

#define ID_WINDOW_0 (GUI_ID_USER + 0x00)

#define ID_BUTTON_0 (GUI_ID_USER + 0x01)

#define ID_BUTTON_1 (GUI_ID_USER + 0x02)

// USER START (Optionally insert additional defines)

// USER END

/*********************************************************************

*

* Static data

*

**********************************************************************

*/

// USER START (Optionally insert additional static data)

static int ***,yyy,x0,y0;

// USER END

/*********************************************************************

*

* _aDialogCreate

*/

static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {

{ WINDOW_CreateIndirect, 'Window', ID_WINDOW_0, 0, 0, 480, 272, 0, 0x0, 0 },

{ BUTTON_CreateIndirect, 'Button', ID_BUTTON_0, 92, 72, 127, 124, 0, 0x0, 0 },

{ BUTTON_CreateIndirect, 'Button', ID_BUTTON_1, 279, 75, 134, 122, 0, 0x0, 0 },

// USER START (Optionally insert additional widgets)

// USER END

};

/*********************************************************************

*

* Static code

*

**********************************************************************

*/

// USER START (Optionally insert additional static code)

static int _CustomSkin(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo) {

int Id;

*** = ((pDrawItemInfo->x0)+(pDrawItemInfo->x1))/2;

x0 = pDrawItemInfo->x0;

yyy = ((pDrawItemInfo->y0)+(pDrawItemInfo->y1))/2;

y0 = pDrawItemInfo->y0;

GUI_POINT aPoints[] = {

{***-12,yyy-10},

{***+12,yyy-10},

{***,yyy+12}

};

switch (pDrawItemInfo->Cmd) {

case WIDGET_ITEM_DRAW_BACKGROUND:

Id = WM_GetId(pDrawItemInfo->hWin);

switch (Id) {

case ID_BUTTON_0:

GUI_SetColor(GUI_MAKE_COLOR(0x00E5CC00));

GUI_FillPolygon(aPoints, GUI_COUNTOF(aPoints), x0, y0);

break;

case ID_BUTTON_1:

GUI_SetColor(GUI_MAKE_COLOR(0x00E5CC00));

GUI_AA_DrawArc(***, yyy, 35, 35, 0, 360);

break;

}

return 0;

default:

return BUTTON_DrawSkinFlex(pDrawItemInfo);

}

}

// USER END

/*********************************************************************

*

* _cbDialog

*/

static void _cbDialog(WM_MESSAGE * pMsg) {

WM_HWIN hItem;

int NCode;

int Id;

// USER START (Optionally insert additional variables)

// USER END

switch (pMsg->MsgId) {

case WM_INIT_DIALOG:

//

// Initialization of 'Window'

//

hItem = pMsg->hWin;

WINDOW_SetBkColor(hItem, GUI_MAKE_COLOR(0x00FF0000));

// USER START (Optionally insert additional code for further widget initialization)

hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0); //Button Menu

BUTTON_SetSkin(hItem, _CustomSkin);

hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1); //Button 10 %

BUTTON_SetSkin(hItem, _CustomSkin);

// USER END

break;

case WM_NOTIFY_PARENT:

Id = WM_GetId(pMsg->hWinSrc);

NCode = pMsg->Data.v;

switch(Id) {

case ID_BUTTON_0: // Notifications sent by 'Button'

switch(NCode) {

case WM_NOTIFICATION_CLICKED:

// USER START (Optionally insert code for reacting on notification message)

// USER END

break;

case WM_NOTIFICATION_RELEASED:

// USER START (Optionally insert code for reacting on notification message)

// USER END

break;

// USER START (Optionally insert additional code for further notification handling)

// USER END

}

break;

case ID_BUTTON_1: // Notifications sent by 'Button'

switch(NCode) {

case WM_NOTIFICATION_CLICKED:

// USER START (Optionally insert code for reacting on notification message)

// USER END

break;

case WM_NOTIFICATION_RELEASED:

// USER START (Optionally insert code for reacting on notification message)

// USER END

break;

// USER START (Optionally insert additional code for further notification handling)

// USER END

}

break;

// USER START (Optionally insert additional code for further Ids)

// USER END

}

break;

// USER START (Optionally insert additional message handling)

// USER END

default:

WM_DefaultProc(pMsg);

break;

}

}

/*********************************************************************

*

* Public code

*

**********************************************************************

*/

/*********************************************************************

*

* CreateWindow

*/

WM_HWIN CreateWindow(void);

WM_HWIN CreateWindow(void) {

WM_HWIN hWin;

hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);

return hWin;

}

// USER START (Optionally insert additional public code)

// USER END

/*************************** End of file ****************************/

________________

Attachments :

WindowDLG.c.zip : https://st--c.eu10.content.force.com/sfc/dist/version/download/?oid=00Db0000000YtG6&ids=0680X000006HxQI&d=%2Fa%2F0X0000000axq%2Fsusu26.yyUkdwfTP_MPf5oiblDWYvZN110vBLdpmz3k&asPdf=false
Posted on July 14, 2018 at 03:54

Dear Vitaliy Chernobay,

Thanks for your code.

I'm sorry! I said not clearly.

My idea like that, I have some icon image. Example circle and rectangle is image .png file (.dta files).

''I have just update circle.png, rectangle.png , .dta, .c to link:

https://drive.google.com/drive/folders/1dHgIe4uFZUElhIBmTC-IFxvM4C0D2oIs?ogsrc=32

 

''

It is picture that i sent for you!

0690X0000060MCVQA2.png

Below:

rectangle icon as 'image viewer'.

circle icon as 'Audio Players' or ''camera'...

up/down external button to go 'image viewer', 'audio player', 'camera'...

ok 

external button to choice/select icon to next funtion/dialog.

Can you create example for me again, please?

Thank you!

0690X0000060MCQQA2.png0690X0000060M8PQAU.png
Posted on July 14, 2018 at 03:59

Dear you,

Here is picture with many icon image, 'Browser' is selecting.

http://emwin.ir/wp-content/uploads/2017/02/emWin_Widget_Iconview_1.gif

Posted on July 14, 2018 at 05:16

Dear you,

Here is file DemoIcon.c.

I insert 2 icon .png files, 4 button up/down/ok/cancel.

https://drive.google.com/drive/folders/1dHgIe4uFZUElhIBmTC-IFxvM4C0D2oIs?ogsrc=32

 

File DemoIcon.zip.

You can insert code to it.

Thanks.

Tran Minh Cong
Associate II

Dear Vitaliy Chernobay,

Currently, i'm doing about iconview withc 2 icon images.

I can show icon by icon view well.

I want when i pressed up/down, selected icon will be highlight or mark.

Can you tell me to do that, please?

Below is file dialog original.

Thanks!

Tran Minh Cong
Associate II

Dear Vitaliy Chernobay,

Below is file dialog original.

phuocnguyenhuu96
Associate III

Cho tui h�?i cái ông.

Ông dùng con F746 đó với thư viện nào vậy? HAL hay STD. Tui cũng mới nghiên cứu v�? F746 nhưng không down được thư viện STD v�?. Nếu ông có thư viện STD có thể share tui được ko? Cảm ơn.