ICONVIEW with transparent Background

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

    • ICONVIEW with transparent Background

      Hi,

      I'm using some ICONVIEW widgets as buttons. Is there a way to make their background transparent so that the objects behind them are visible in the parts marked as transparent?
      I create the ICONVIEW in a resource table:

      { ICONVIEW_CreateIndirect, "", ID_ICONVIEW_RES, 755, 165, 45, 40, 0, 0x0028002D, 0 }, /*reset button*/

      My init dialog looks like this:

      Source Code

      1. hItem = WM_GetDialogItem(pMsg->hWin, ID_ICONVIEW_RES); /*reset icon*/
      2. pData = _GetImageById(ID_IMAGE_RES, &FileSize);
      3. ICONVIEW_AddStreamedBitmapItem(hItem, pData, "");
      4. ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_BK|ICONVIEW_CI_SEL|ICONVIEW_CI_UNSEL, GUI_TRANSPARENT);
      5. ICONVIEW_SetFrame(hItem, GUI_COORD_X, 0);
      6. ICONVIEW_SetFrame(hItem, GUI_COORD_Y, 0);
      7. WM_SetHasTrans(hItem);
      I can give the background any color using ICONVIEW_SetBkColor but it never gets transparent.
      With the color code GUI_TRANSPARENT it becomes black. I have also tested GUI_BLACK which is the actual background color of the image.

      Best regards
      Jan

      The post was edited 2 times, last by JanBurg ().

    • Hello,

      you have to make sure that the ICONVIEW is a transparent window. To do this, add the WM_CF_HASTRANS flag to the widget's create flags or call WM_SetHasTrans(hIconview).

      When this is done, the call ICONVIEW_SetBkColor(hIcon, ICONVIEW_CI_BK, GUI_TRANSPARENT); makes the ICONVIEW's background transparent.

      Note that you can't OR-combine indexes such as ICONVIEW_CI_BK etc. which means you have to set the color for each index individually. OR-combination only works for flags (like WM_CF_...).

      Best regards,

      Florian
    • Thank you.
      "Note that you can't OR-combine indexes such as ICONVIEW_CI_BK etc. which means you have to set the color for each index individually."
      This was definitely one of my errors.
      I changed the create flag accordingly:
      { ICONVIEW_CreateIndirect, "", ID_ICONVIEW_RES, 755, 165, 45, 40, WM_CF_HASTRANS, 0x0028002D, 0 }, /*reset button*/

      and call:
      ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_BK, GUI_TRANSPARENT);

      Now the background area became red. What else can be wrong here?

      Update:
      With or without WM_SetHasTrans(hItem) the background becomes red with
      ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_BK, GUI_TRANSPARENT);
      ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_UNSEL, GUI_TRANSPARENT);
      and black with
      ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_SEL, GUI_TRANSPARENT);

      Regards
      Jan

      The post was edited 3 times, last by JanBurg ().

    • Thank you, Florian.
      Using your example I realized that in selected state the background of an icon cannot be transparent. It becomes black in your example if I enter ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_SEL, GUI_TRANSPARENT);.
      This is most likely the reason why I can never get it transparent because my ICONVIEW includes only one icon which is automatically always selected. Or, is there a way to unselect all icons?

      May be using ICONVIEW is the wrong approach for having one graphical button with transparent sections?

      I'm using V5.44 which was distributed by STM.


      Best regards

      Jan
    • Hi,

      the bug that items of an ICONVIEW could not have transparent backgrounds has already been fixed with emWin V6.10h.

      You could clear the selection with ICONVIEW_SetSel(hIcon, -1).

      JanBurg wrote:

      May be using ICONVIEW is the wrong approach for having one graphical button with transparent sections?
      It depends on what you want to achieve. If your goal is a button, using the BUTTON widget will make your code a lot easier. The button widget is also more flexible for custom looks. With an overwritten callback, you can freely decide how the pressed and unpressed state of the button should look like.

      With an ICONVIEW item however, you can only set one icon and one color per state.

      Best regards,

      Florian
    • I replaced all my ICONVIEW buttons by BUTTON widgets. This solved the transparency problem and saved more than 50 % of code lines as Florian wrote.
      The buttons are created with WM_CF_HASTRANS flag:

      Source Code

      1. { BUTTON_CreateIndirect, "", ID_BUTTON_CLS, 755, 0, 45, 40, WM_CF_HASTRANS, 0x0, 0}, /*close button*/
      A callback for each button draws the image.
      WM_INIT_DIALOG:

      Source Code

      1. hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_CLS); /*close button*/
      2. BUTTON_SetSkinClassic(hItem); /*no skinning*/
      3. WM_SetCallback(hItem, _cbButtonClose); /*callback for image with transparency*/
      Callback:

      Source Code

      1. /*callback for transparent close button with image*/
      2. void _cbButtonClose(WM_MESSAGE * pMsg)
      3. {
      4. switch (pMsg->MsgId)
      5. {
      6. case WM_PAINT:
      7. GUI_DrawBitmap(&bmbutton_close, 0, 0);
      8. break;
      9. default:
      10. BUTTON_Callback(pMsg); /*original callback*/
      11. break;
      12. }
      13. }
      Display All
      The bitmaps I converted with the Bitmap Converter Tool of emWin with transparent background:

      C Source Code

      1. /*********************************************************************
      2. * SEGGER Microcontroller GmbH & Co. KG *
      3. * Solutions for real time microcontroller applications *
      4. * www.segger.com *
      5. **********************************************************************
      6. * *
      7. * C-file generated by *
      8. * *
      9. * Bitmap Converter (ST) for emWin V5.44. *
      10. * Compiled Nov 10 2017, 08:52:20 *
      11. * *
      12. * (c) 1998 - 2017 Segger Microcontroller GmbH & Co. KG *
      13. * *
      14. **********************************************************************
      15. * *
      16. * Source file: button_close *
      17. * Dimensions: 45 * 40 *
      18. * NumColors: 2 *
      19. * *
      20. **********************************************************************
      21. */
      22. #include <stdlib.h>
      23. #include "GUI.h"
      24. #ifndef GUI_CONST_STORAGE
      25. #define GUI_CONST_STORAGE const
      26. #endif
      27. extern GUI_CONST_STORAGE GUI_BITMAP bmbutton_close;
      28. /*********************************************************************
      29. *
      30. * Palette
      31. *
      32. * Description
      33. * The following are the entries of the palette table.
      34. * The entries are stored as a 32-bit values of which 24 bits are
      35. * actually used according to the following bit mask: 0xBBGGRR
      36. *
      37. * The lower 8 bits represent the Red component.
      38. * The middle 8 bits represent the Green component.
      39. * The highest 8 bits represent the Blue component.
      40. */
      41. static GUI_CONST_STORAGE GUI_COLOR _Colorsbutton_close[] = {
      42. #if (GUI_USE_ARGB == 0)
      43. 0x000000, 0xFFFFFF
      44. #else
      45. 0xFF000000, 0xFFFFFFFF
      46. #endif
      47. };
      48. static GUI_CONST_STORAGE GUI_LOGPALETTE _Palbutton_close = {
      49. 2, // Number of entries
      50. 1, // Has transparency
      51. &_Colorsbutton_close[0]
      52. };
      53. static GUI_CONST_STORAGE unsigned char _acbutton_close[] = {
      54. ________, ________, ________, ________, ________, ________,
      55. ________, ________, ________, ________, ________, ________,
      56. ________, ________, ________, ________, ________, ________,
      57. ________, ________, ________, ________, ________, ________,
      58. ________, ________, ________, ________, ________, ________,
      59. ________, ________, ________, ________, ________, ________,
      60. ________, ________, ________, ________, ________, ________,
      61. ________, ________, ________, ________, ________, ________,
      62. ________, _______X, X_______, _____XX_, ________, ________,
      63. ________, ______XX, XX______, ____XXXX, ________, ________,
      64. ________, _____XXX, XXX_____, ___XXXXX, X_______, ________,
      65. ________, ____XXXX, XXXX____, __XXXXXX, XX______, ________,
      66. ________, ___XXXXX, XXXXX___, _XXXXXXX, XXX_____, ________,
      67. ________, ___XXXXX, XXXXXX__, XXXXXXXX, XXX_____, ________,
      68. ________, ____XXXX, XXXXXXXX, XXXXXXXX, XX______, ________,
      69. ________, _____XXX, XXXXXXXX, XXXXXXXX, X_______, ________,
      70. ________, ______XX, XXXXXXXX, XXXXXXXX, ________, ________,
      71. ________, _______X, XXXXXXXX, XXXXXXX_, ________, ________,
      72. ________, ________, XXXXXXXX, XXXXXX__, ________, ________,
      73. ________, ________, _XXXXXXX, XXXXX___, ________, ________,
      74. ________, ________, _XXXXXXX, XXXXX___, ________, ________,
      75. ________, ________, XXXXXXXX, XXXXXX__, ________, ________,
      76. ________, _______X, XXXXXXXX, XXXXXXX_, ________, ________,
      77. ________, ______XX, XXXXXXXX, XXXXXXXX, ________, ________,
      78. ________, _____XXX, XXXXXXXX, XXXXXXXX, X_______, ________,
      79. ________, ____XXXX, XXXXXXXX, XXXXXXXX, XX______, ________,
      80. ________, ___XXXXX, XXXXXX__, XXXXXXXX, XXX_____, ________,
      81. ________, ___XXXXX, XXXXX___, _XXXXXXX, XXX_____, ________,
      82. ________, ____XXXX, XXXX____, __XXXXXX, XX______, ________,
      83. ________, _____XXX, XXX_____, ___XXXXX, X_______, ________,
      84. ________, ______XX, XX______, ____XXXX, ________, ________,
      85. ________, _______X, X_______, _____XX_, ________, ________,
      86. ________, ________, ________, ________, ________, ________,
      87. ________, ________, ________, ________, ________, ________,
      88. ________, ________, ________, ________, ________, ________,
      89. ________, ________, ________, ________, ________, ________,
      90. ________, ________, ________, ________, ________, ________,
      91. ________, ________, ________, ________, ________, ________,
      92. ________, ________, ________, ________, ________, ________,
      93. ________, ________, ________, ________, ________, ________
      94. };
      95. GUI_CONST_STORAGE GUI_BITMAP bmbutton_close = {
      96. 45, // xSize
      97. 40, // ySize
      98. 6, // BytesPerLine
      99. 1, // BitsPerPixel
      100. _acbutton_close, // Pointer to picture data (indices)
      101. &_Palbutton_close // Pointer to palette
      102. };
      103. /*************************** End of file ****************************/
      Display All
      I just wanted to share this for others making the same mistakes.