Canvas with transparent icons

  1. ‹ Older
  2. 9 weeks ago

    I prepared an example with two transparent icons:
    https://www.dropbox.com/sh/363ycgl60hntr9x/AAD19FAygjyJfV25fQ0I9GAya?dl=0

  3. Alberto D

    Jun 20 Pre-Release Testers

    Peter, your icons are transparent, the problema with Windows is that Xojo uses a pseudo-transparent method to display some controls. The objects behind other objects are not shown in most cases, only the color from the window is shown.

    You want to draw a Green square behind the canvas but with pseudo-transparent the canvas actually is taking the main window color.

    This is what I understand, I may be wrong. My experience is not at a level that can write code to try to change the Canvas color to simulate the Green square behind the Canvas.

  4. I only want a nice button with a symbol to click on. It doesn't work with a menu bar, not with a toolbar, not with buttons and not with canvas. So what else can i do?

  5. Alberto D

    Jun 20 Pre-Release Testers

    I think you can use canvas, but you need more code. Instead of using Backdrop to put your image there, use the Paint event. Then you change the canvas color and the transparent icon will show the green color (or any other color you select for the canvas). Again, no experience, maybe someone else can point to sample code.

  6. Emile S

    Jun 20 Europe (France, Strasbourg)
    Edited 9 weeks ago

    Direct link for downloads:

    https://www.dropbox.com/sh/363ycgl60hntr9x/AAD19FAygjyJfV25fQ0I9GAya?dl=1

    Peter, note the ending 1 (instead of 0).

    Works fine when running on El Capitan / Xojo 2019r1.1.
    Both images are transparent (no surrounding white).

  7. Don't work with a Mac! Work with Win10 and you will understand. It doesn't work. Very interesting is the fact, that it works on Linux and not on Win. Mostly Linux is worse.

  8. Emile S

    Jun 20 Europe (France, Strasbourg)

    What Linux flavor/version ?

  9. Alberto D

    Jun 20 Pre-Release Testers

    Mac and Linux do have transparent controls, Windows use pseudo-transparent (pick the color from the window), change the window color and test again, you will see the icon with the window color around it but not the green box behind the canvas.

  10. @Alberto D;Poo, you are right.
    I use different Linux Mint Versions and Win10

  11. Alberto D

    Jun 20 Pre-Release Testers

    I don't know if what I did is the right way to do it (I bet there is a better way), but I check if the mouse enter the canvas, then paint a green square and then the icon, if the mouse exit then invalidate the canvas and only paint the icon.

  12. The icon covers the background, it is NOT transparent on Win, only on Linux

  13. Alberto D

    Jun 20 Pre-Release Testers
    Edited 9 weeks ago

    The icon is transparent, the canvas is not transparent on Windows, that's why I paint a green box on the canvas and then the icon, that way it simulates what you are trying to do with the green square.

    Edited to make it clearer. The icons are transparent.

  14. Dave S

    Jun 20 San Diego, California USA

    an icon with a properly applied mask should be transparent on all platforms without resorting to "tricks"

  15. Alberto D

    Jun 20 Pre-Release Testers

    @Dave S an icon with a properly applied mask should be transparent on all platforms without resorting to "tricks"

    The icons are transparent on all platforms. The issue is that Peter want to create a button with a canvas that show an icon and move a green square behind the canvas to make it look like a hover icon change.

    The icons are not the issue. The canvas picking up the window color behind it instead of the green square on Windows, that's the issue.

    If you download the small project, you can see that it works different on macOS, Linux and Windows.

  16. Alberto D

    Jun 20 Pre-Release Testers
    Edited 9 weeks ago

    This is how the small app looks on mac:
    -image-

    This is the same app on windows 10:
    -image-

    The green box is bigger and behind the canvas.

    Edit: this is how it looks on Windows with my changes (paint or not the green square, then the icon on Canvas Paint Event):
    -image-
    I'm sure there is a better way to code what I did. This is my first code involving canvas, icons and paint event.

  17. Good Morning Alberto.
    That is exactly what i need!
    I don't really understand what events should fire in which case.
    Can you place that in a dropbox?

  18. Emile S

    Jun 21 Europe (France, Strasbourg)

    What about using a RGBSurface to invert the icons colors ?

  19. Alberto D

    Jun 21 Pre-Release Testers
    Edited 9 weeks ago

    @Emile S What about using a RGBSurface to invert the icons colors ?

    Thank you Emile, I didn't know there is something like that in Xojo and after reading the docs it is too advanced for me.

    @Peter M Good Morning Alberto.
    That is exactly what i need!
    I don't really understand what events should fire in which case.
    Can you place that in a dropbox?

    I think is better to comment here what I did, that way experienced programmers can comment what other ways there are to do the same thing, just better.

    Having your code as a base, what I did was:

    • remove Rectangle1
    • remove MouseMove event from each canvas
    • add MouseEnter, MouseExit, Paint events to each canvas
    • add 2 boolean properties to the Window, Canvas1active, Canvas2active default to False
    • code in MouseEnter:
    Canvas1active = True // change to Canvas2active for Canvas2
    me.Invalidate

    - code in MouseExit::

    Canvas1active = False // change to Canvas2active for Canvas2
    me.Invalidate

    - code in Paint event:

    if Canvas1active Then // change to Canvas2active for Canvas2
      // paint the green square if mouse entered Canvas
      g.ForeColor = &c80fe80
      g.FillRect(0,0,me.Width,me.Height)
    End if
    // Draw the icon
    g.DrawPicture(icons8suche48,0,0) // change to (icons8obenrechts48,0,0) for Canvas2

    Hope this helps and hope others can point to better ways to do it.

  20. Emile S

    Jun 21 Europe (France, Strasbourg)

    http://docs.xojo.com/RGBSurface have cde to invert the image.

    A simple use can be to put the code in MouseEnter and MouseExit.

  21. 8 weeks ago

    @Alberto D;Poo
    Great it works!
    Honestly, i worked nearly one week to solve the problem with menu bar or tool bar. Now i solved the problems with the icons (in Win).
    It is really complex to make a nice icon with Xojo without a Mac.
    I will need years until my project is ready and i hope to get a lot of good help like this!

or Sign Up to reply!