How to set image as background of TreeView widget item

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • How to set image as background of TreeView widget item

      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,

      Source Code

      1. TREEVIEW_SetImage(hItem,TREEVIEW_BI_OPEN,&bitmap200x20);
      3. 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Ş

    • 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 Source Code: Main.c

      1. #include "DIALOG.h"
      3. TREEVIEW_Handle hTreeview;
      4. TREEVIEW_ITEM_Handle hTreeItemCur, hTreeItemNew;
      5. TREEVIEW_ITEM_Handle phItem[3];
      7. // Custom drawing function for the TREEVIEW widget
      8. static int _OwnerDraw_TREEVIEW(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo) {
      9. U8 pBuffer[100];
      10. U8 Index;
      11. TREEVIEW_ITEM_INFO pInfo;
      13. switch (pDrawItemInfo->Cmd) {
      14. case WIDGET_ITEM_DRAW_TEXT:
      15. // Make sure to clear item rect instead of drawing the text
      16. GUI_SetBkColor(GUI_WHITE);
      17. GUI_Clear();
      18. break;
      19. case WIDGET_ITEM_DRAW_BITMAP:
      20. // Call default drawing function to draw the image
      21. TREEVIEW_OwnerDraw(pDrawItemInfo);
      23. // Calc the Index to get the item handler from the list. Divide y0 by the item height.
      24. Index = pDrawItemInfo->y0 / 16;
      26. // Get the item text and level in the treeview
      27. TREEVIEW_ITEM_GetText(phItem[Index], pBuffer, 100);
      28. TREEVIEW_ITEM_GetInfo(phItem[Index], &pInfo);
      30. if (TREEVIEW_GetSel(pDrawItemInfo->hWin) == phItem[Index])
      31. {
      32. // Set the text attributes, selected item
      33. GUI_SetBkColor(GUI_BLUE);
      34. GUI_SetColor(GUI_WHITE);
      35. GUI_SetTextMode(GUI_TM_NORMAL);
      36. }
      37. else
      38. {
      39. // Set the text attributes, unselected item
      40. GUI_SetColor(GUI_BLACK);
      41. GUI_SetTextMode(GUI_TM_TRANS);
      42. }
      44. // Draw the text over the image
      45. GUI_DispStringAt(pBuffer, pDrawItemInfo->x0 + 20 + pInfo.Level * 15, pDrawItemInfo->y0);
      46. break;
      47. default:
      48. return TREEVIEW_OwnerDraw(pDrawItemInfo);
      49. break;
      50. }
      52. return 0;
      53. }
      55. void MainTask(void) {
      56. GUI_Init();
      58. WM_MULTIBUF_Enable(1);
      60. GUI_SetBkColor(GUI_LIGHTGRAY);
      61. GUI_Clear();
      63. // Create a TREEVIEW widget
      64. hTreeview = TREEVIEW_CreateEx(60, 30, 200, 100, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_TREEVIEW0);
      66. // Create the root item
      67. hTreeItemCur = TREEVIEW_GetItem(hTreeview, 0, TREEVIEW_GET_LAST);
      68. hTreeItemNew = TREEVIEW_ITEM_Create(TREEVIEW_ITEM_TYPE_NODE, "Root", 0);
      69. TREEVIEW_AttachItem(hTreeview, hTreeItemNew, hTreeItemCur, TREEVIEW_INSERT_BELOW);
      71. // Add item hanlder to the list
      72. phItem[0] = hTreeItemNew;
      74. // Create another two child items and add the handlers to the list
      75. hTreeItemCur = hTreeItemNew;
      76. hTreeItemNew = TREEVIEW_ITEM_Create(TREEVIEW_ITEM_TYPE_LEAF, "Item 1", 0);
      77. TREEVIEW_AttachItem(hTreeview, hTreeItemNew, hTreeItemCur, TREEVIEW_INSERT_FIRST_CHILD);
      79. phItem[1] = hTreeItemNew;
      81. hTreeItemCur = hTreeItemNew;
      82. hTreeItemNew = TREEVIEW_ITEM_Create(TREEVIEW_ITEM_TYPE_LEAF, "Item 2", 0);
      83. TREEVIEW_AttachItem(hTreeview, hTreeItemNew, hTreeItemCur, TREEVIEW_INSERT_BELOW);
      85. phItem[2] = hTreeItemNew;
      87. // Set text indentation to 0.
      88. TREEVIEW_SetTextIndent(hTreeview, 0);
      90. // Set custom drawing function
      91. TREEVIEW_SetOwnerDraw(hTreeview, _OwnerDraw_TREEVIEW);
      93. while(1)
      94. {
      95. GUI_Delay(50);
      96. }
      97. }
      Display All
      Works in my simulation (STemWin v5.32). Some parameters (item height, font, selection colors...) may vary depending on your code.

      Alex.

      The post was edited 1 time, last by LexaGB ().

    • 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;

      Source Code

      1. #node: //root
      2. Node1
      3. Node2
      4. Node3
      5. #end
      6. #leaf:1: // first node's children -leafs
      7. Node10
      8. Node11
      9. Node12
      10. #end
      11. #node:2: // second node's children -nodes
      12. Node21
      13. Node22
      14. #end
      15. #leaf:3: // third node's children -leafs
      16. Leaf31
      17. Leaf32
      18. Leaf33
      19. #end
      Display All
      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Ş
      Images

      • customTreeview.png

        11.13 kB, 299×275, viewed 497 times

      • customTreeviewSelectionChanged.png

        10.87 kB, 312×278, viewed 461 times

    • 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.
      Files