How to set image as background of TreeView widget item

Emin · February 4, 2019 at 12:05 PM

Hi,
I create an TreeView widget with nodes. I want to change TreeView Item images and set Text indent zero.
When I use following code,

Code

TREEVIEW_SetImage(hItem,TREEVIEW_BI_OPEN,&bitmap200x20);


TREEVIEW_SetTextIndent(hItem,0);

TreeView item text disappears. So How can I bring TreeView item's text front of the TreeView item's bitmap ?

P.S: I have reviewed all emWin User&Reference Guide. Document: UM03001. If I have miss related part of document. You can point document.

Thanks in advance...

Best Regards
Emin ATEŞ

LexaGB · February 4, 2019 at 11:43 PM

Hello,

in case you set indentation of item text to 0 then text is covered by item images. I think it is because default drawing function first draws item text and after that it draws images.

To change the order I think custom drawing function can be set where you should "do nothing" when handling text drawing command (WIDGET_ITEM_DRAW_TEXT) and sort of "repeat" text drawing after drawing item image when handling image drawing command (WIDGET_ITEM_DRAW_BITMAP). I think treeview items can be distinguished, say, by the y0 parameter of WIDGET_ITEM_DRAW_INFO structure passed to the custom drawing function.

I'd do something like this:

C: Main.c

#include "DIALOG.h"


TREEVIEW_Handle hTreeview;
TREEVIEW_ITEM_Handle hTreeItemCur, hTreeItemNew;
TREEVIEW_ITEM_Handle phItem[3];


// Custom drawing function for the TREEVIEW widget
static int _OwnerDraw_TREEVIEW(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo) {
	U8 pBuffer[100];
	U8 Index;
	TREEVIEW_ITEM_INFO pInfo;


	switch (pDrawItemInfo->Cmd) {
	case WIDGET_ITEM_DRAW_TEXT:
		// Make sure to clear item rect instead of drawing the text
		GUI_SetBkColor(GUI_WHITE);
		GUI_Clear();
		break;
	case WIDGET_ITEM_DRAW_BITMAP:
		// Call default drawing function to draw the image
		TREEVIEW_OwnerDraw(pDrawItemInfo);


		// Calc the Index to get the item handler from the list. Divide y0 by the item height.
		Index = pDrawItemInfo->y0 / 16;


		// Get the item text and level in the treeview
		TREEVIEW_ITEM_GetText(phItem[Index], pBuffer, 100);
		TREEVIEW_ITEM_GetInfo(phItem[Index], &pInfo);


		if (TREEVIEW_GetSel(pDrawItemInfo->hWin) == phItem[Index])
		{
			// Set the text attributes, selected item
			GUI_SetBkColor(GUI_BLUE);
			GUI_SetColor(GUI_WHITE);
			GUI_SetTextMode(GUI_TM_NORMAL);
		}
		else
		{
			// Set the text attributes, unselected item
			GUI_SetColor(GUI_BLACK);
			GUI_SetTextMode(GUI_TM_TRANS);
		}


		// Draw the text over the image
		GUI_DispStringAt(pBuffer, pDrawItemInfo->x0 + 20 + pInfo.Level * 15, pDrawItemInfo->y0);
		break;
	default:
		return TREEVIEW_OwnerDraw(pDrawItemInfo);
		break;
	}


	return 0;
}


void MainTask(void) {
  GUI_Init();


  WM_MULTIBUF_Enable(1);


  GUI_SetBkColor(GUI_LIGHTGRAY);
  GUI_Clear();


  // Create a TREEVIEW widget
  hTreeview = TREEVIEW_CreateEx(60, 30, 200, 100, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_TREEVIEW0);


  // Create the root item
  hTreeItemCur = TREEVIEW_GetItem(hTreeview, 0, TREEVIEW_GET_LAST);
  hTreeItemNew = TREEVIEW_ITEM_Create(TREEVIEW_ITEM_TYPE_NODE, "Root", 0);
  TREEVIEW_AttachItem(hTreeview, hTreeItemNew, hTreeItemCur, TREEVIEW_INSERT_BELOW);


  // Add item hanlder to the list
  phItem[0] = hTreeItemNew;


  // Create another two child items and add the handlers to the list
  hTreeItemCur = hTreeItemNew;
  hTreeItemNew = TREEVIEW_ITEM_Create(TREEVIEW_ITEM_TYPE_LEAF, "Item 1", 0);
  TREEVIEW_AttachItem(hTreeview, hTreeItemNew, hTreeItemCur, TREEVIEW_INSERT_FIRST_CHILD);


  phItem[1] = hTreeItemNew;


  hTreeItemCur = hTreeItemNew;
  hTreeItemNew = TREEVIEW_ITEM_Create(TREEVIEW_ITEM_TYPE_LEAF, "Item 2", 0);
  TREEVIEW_AttachItem(hTreeview, hTreeItemNew, hTreeItemCur, TREEVIEW_INSERT_BELOW);


  phItem[2] = hTreeItemNew;


  // Set text indentation to 0.
  TREEVIEW_SetTextIndent(hTreeview, 0);


  // Set custom drawing function
  TREEVIEW_SetOwnerDraw(hTreeview, _OwnerDraw_TREEVIEW);


  while(1)
  {
	  GUI_Delay(50);
  }
}

Display More

Works in my simulation (STemWin v5.32). Some parameters (item height, font, selection colors...) may vary depending on your code.

Alex.

Emin · February 5, 2019 at 8:53 AM

Hi Alex,

Thank you for your effort. It is working perfectly.

Best Regards
Emin ATEŞ

Emin · February 18, 2019 at 9:15 PM

Hi Alex,
I had tried to implement your code to my treeview but i could not succeed. I have a few questions. I will be appreciate if you answer me kindly. Before the questions i will inform you about my application;
I use key reaction to control widget behavior.
Treeview widget created in a dialogbox with a window by GuiBuilder.exe
The treeview nodes and leafs create by file which located in sd card.
Example file format in sd card is below;

Code

#node:   //root
Node1
Node2
Node3
#end
#leaf:1: // first node's children -leafs
Node10
Node11
Node12
#end
#node:2: // second node's children -nodes
Node21
Node22
#end
#leaf:3: // third node's children -leafs
Leaf31
Leaf32
Leaf33
#end

Display More

So According to the file item count ends with "#end" command. When I call create dialog function the treeview items created according to the file. After Treeview widged created, I want to add new leaf below selected leaf. It is easy to add sibling leaf. The new leaf must give some information about prev leaf(selected). But selected leaf and new leaf looks separate from each other. So I want to add frame images to them which looks like upper(selected item's background) part of frame and lower(new created item's background) part of frame. It will be more clear if you review "customTreeview.png" from attachments. So if user change selection, old selected item should seems normal and created item should deleted before creating new item and changing frame. It can be a bit confusing up here because my English is may not clear.

It is possible to create treeview like attachments?
if it is possible, how do I add a custom draw to the treeview created under dialog?
Can you suggest more effective way to do this?

If you want additional info please submit.

Thanks in advance...

Best Regards
Emin ATEŞ

LexaGB · February 19, 2019 at 3:00 PM

Hello,

you can add new leaf below selected but its going to be a big difficult code to handle "main" leaf and its "info" leaf in conjunction.

Instead of this I'd change the size of selected leaf then draw upper (for item) and lower (for info) rects and then add the info text in the lower rect. I attached the code and this code is also not to say simple. It works around with item coordinates, item hadlers array and makes up user data to pass when handling commands. Initial code created in GUIBulder and only for one node. If you add another nodes in GUIBuilder then you have to watch for item handlers to copy it to the list correctly.

Alex.

How to set image as background of TreeView widget item

Participate now!

Tags

Users Viewing This Thread