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
      Please read the forum rules before posting.

      Keep in mind, this is *not* a support forum.
      Our engineers will try to answer your questions between their projects if possible but this can be delayed by longer periods of time.
      Should you be entitled to support you can contact us via our support system: segger.com/ticket/
      Or you can contact us via e-mail.

    • 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 ().

    • Hi,

      this is strange. I attached the sample that worked for me. I assume, the background behind your iconview isn't red?

      And could you tell me, which version of emWin you are using?

      Thanks and best regards,

      Florian
      Files
      Please read the forum rules before posting.

      Keep in mind, this is *not* a support forum.
      Our engineers will try to answer your questions between their projects if possible but this can be delayed by longer periods of time.
      Should you be entitled to support you can contact us via our support system: segger.com/ticket/
      Or you can contact us via e-mail.

    • 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
      Please read the forum rules before posting.

      Keep in mind, this is *not* a support forum.
      Our engineers will try to answer your questions between their projects if possible but this can be delayed by longer periods of time.
      Should you be entitled to support you can contact us via our support system: segger.com/ticket/
      Or you can contact us via e-mail.

    • 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. */
      23. #include <stdlib.h>
      25. #include "GUI.h"
      27. #ifndef GUI_CONST_STORAGE
      28. #define GUI_CONST_STORAGE const
      29. #endif
      31. extern GUI_CONST_STORAGE GUI_BITMAP bmbutton_close;
      33. /*********************************************************************
      34. *
      35. * Palette
      36. *
      37. * Description
      38. * The following are the entries of the palette table.
      39. * The entries are stored as a 32-bit values of which 24 bits are
      40. * actually used according to the following bit mask: 0xBBGGRR
      41. *
      42. * The lower 8 bits represent the Red component.
      43. * The middle 8 bits represent the Green component.
      44. * The highest 8 bits represent the Blue component.
      45. */
      46. static GUI_CONST_STORAGE GUI_COLOR _Colorsbutton_close[] = {
      47. #if (GUI_USE_ARGB == 0)
      48. 0x000000, 0xFFFFFF
      49. #else
      50. 0xFF000000, 0xFFFFFFFF
      51. #endif
      53. };
      55. static GUI_CONST_STORAGE GUI_LOGPALETTE _Palbutton_close = {
      56. 2, // Number of entries
      57. 1, // Has transparency
      58. &_Colorsbutton_close[0]
      59. };
      61. static GUI_CONST_STORAGE unsigned char _acbutton_close[] = {
      62. ________, ________, ________, ________, ________, ________,
      63. ________, ________, ________, ________, ________, ________,
      64. ________, ________, ________, ________, ________, ________,
      65. ________, ________, ________, ________, ________, ________,
      66. ________, ________, ________, ________, ________, ________,
      67. ________, ________, ________, ________, ________, ________,
      68. ________, ________, ________, ________, ________, ________,
      69. ________, ________, ________, ________, ________, ________,
      70. ________, _______X, X_______, _____XX_, ________, ________,
      71. ________, ______XX, XX______, ____XXXX, ________, ________,
      72. ________, _____XXX, XXX_____, ___XXXXX, X_______, ________,
      73. ________, ____XXXX, XXXX____, __XXXXXX, XX______, ________,
      74. ________, ___XXXXX, XXXXX___, _XXXXXXX, XXX_____, ________,
      75. ________, ___XXXXX, XXXXXX__, XXXXXXXX, XXX_____, ________,
      76. ________, ____XXXX, XXXXXXXX, XXXXXXXX, XX______, ________,
      77. ________, _____XXX, XXXXXXXX, XXXXXXXX, X_______, ________,
      78. ________, ______XX, XXXXXXXX, XXXXXXXX, ________, ________,
      79. ________, _______X, XXXXXXXX, XXXXXXX_, ________, ________,
      80. ________, ________, XXXXXXXX, XXXXXX__, ________, ________,
      81. ________, ________, _XXXXXXX, XXXXX___, ________, ________,
      82. ________, ________, _XXXXXXX, XXXXX___, ________, ________,
      83. ________, ________, XXXXXXXX, XXXXXX__, ________, ________,
      84. ________, _______X, XXXXXXXX, XXXXXXX_, ________, ________,
      85. ________, ______XX, XXXXXXXX, XXXXXXXX, ________, ________,
      86. ________, _____XXX, XXXXXXXX, XXXXXXXX, X_______, ________,
      87. ________, ____XXXX, XXXXXXXX, XXXXXXXX, XX______, ________,
      88. ________, ___XXXXX, XXXXXX__, XXXXXXXX, XXX_____, ________,
      89. ________, ___XXXXX, XXXXX___, _XXXXXXX, XXX_____, ________,
      90. ________, ____XXXX, XXXX____, __XXXXXX, XX______, ________,
      91. ________, _____XXX, XXX_____, ___XXXXX, X_______, ________,
      92. ________, ______XX, XX______, ____XXXX, ________, ________,
      93. ________, _______X, X_______, _____XX_, ________, ________,
      94. ________, ________, ________, ________, ________, ________,
      95. ________, ________, ________, ________, ________, ________,
      96. ________, ________, ________, ________, ________, ________,
      97. ________, ________, ________, ________, ________, ________,
      98. ________, ________, ________, ________, ________, ________,
      99. ________, ________, ________, ________, ________, ________,
      100. ________, ________, ________, ________, ________, ________,
      101. ________, ________, ________, ________, ________, ________
      102. };
      104. GUI_CONST_STORAGE GUI_BITMAP bmbutton_close = {
      105. 45, // xSize
      106. 40, // ySize
      107. 6, // BytesPerLine
      108. 1, // BitsPerPixel
      109. _acbutton_close, // Pointer to picture data (indices)
      110. &_Palbutton_close // Pointer to palette
      111. };
      113. /*************************** End of file ****************************/
      Display All
      I just wanted to share this for others making the same mistakes.