Saving a PNG with alpha?

  1. last week

    I'm allowing the user to choose a color from the color wheel and using that in a canvas to save a Picture which is used as a background for text and both are saved as a PNG file.

    I'd like to also make that colored Picture user-controlled for transparency, so i'm wondering how i might save the background PNG with an alpha channel if i give the user some kind of slider control for transparency. My code for the background Picture:

    color = editorWin.TextArea1.BackColor  // &h00A42F13 for example
    p.graphics.ForeColor = color
    p.graphics.fillRect(0,0,app.backgroundWidth,app.backgroundHeight)

    In the LR I see I can add alpha using RGB...

    Dim red As Color = Color.RGBA(255, 0, 0, 255)

    Do I need to convert the color to RGB first somehow?

    Hi,
    Why are you doing it so awkwardly?

    Also note the light + dark mode
    the background color becomes when transparent
    mixed with light or dark

    Rem Old XOJO API 1.0
    Dim c As Color
    Dim b as Boolean
    c=Textarea1.Backcolor
    b=SelectColor(c,"Select a Color")
    if b then
    Textarea1.BackColor = RGB(c.red,c.green,c.blue,slider1.value)
    end if

    Rem New XOJO AP!2.1
    Var c As Color
    Var b As Boolean
    c= textarea1.BackgroundColor
    b = Color.SelectedFromDialog(c, "Select a Color")
    textarea1.BackgroundColor = RGB(c.red,c.green,c.blue,slider1.value)
    // Slider1.minimum = 0
    // Slider1.maximum = 255

  2. Emile S

    Nov 30 Europe (France, Strasbourg)

    http://docs.xojo.com/Color.RGBA

    Both the ForeColor and BackColor uses RGBA, so…

  3. Sorry, not following. How do I assign the alpha to the BackColor or ForeColor from the color wheel?

    Dim c  As Color
    Dim b As Boolean
    c = CMY(0.35, 0.9, 0.6) // choose the default color shown in color picker
    b = SelectColor(c, "Select a Color")
    editorWin.textArea1.BackColor = c
  4. Emile S

    Nov 30 Europe (France, Strasbourg)

    READ:
    http://docs.xojo.com/CMY

    There is an Alpha channel too (as well as in RGBA)…

    Also (from the above link):
    This item was deprecated in version 2019r2.
    Please use Color.CMY as a replacement

  5. I can see how this makes it translucent. I hard-coded the default color c with a translucent decimal value ...
    [code]
    Dim c As Color
    Dim b As Boolean
    c = CMY(0.35, 0.9, 0.6,255 * 0.65) // choose the default color shown in color picker
    //b = SelectColor(c, "Select a Color")
    //backgroundColorRect.FillColor = c
    //app.backColor = c
    editorWin.textArea1.backColor = c
    /code]
    ...temporarily bypassing the colorpicker, but when someone chooses a color, how do I add that trasnclucency to the color they pick?
    For example the string returned for the color might be "&h00110053" that but would lose that transparency setting for the default color. Is there some way to add that to the color again? I could pick up the decimal value from a slider when they choose the color, but don't know how to add it to that color definition.

  6. Emile S

    Dec 1 Europe (France, Strasbourg)

    Have you searched on the net for Color transparency ?

    I found an entry where it talks about setting the transparency in a "slider". It is unclear for the setting (it uses Excel, and I do not have it since… the 80s) and for saving… testings have to be done.

    My feeling (in Xojo):
    a. Set a color,
    b. Set a transparency,
    c. Save to disk.

    And check the result in GIMP (for example, or Photoshop if you have it).

    Have a look there (for example):
    https://helpx.adobe.com/indesign/using/adding-transparency-effects.html

    The description tlks about a two pass (as I wrote earlier: one for the color, one for the translucy).

    HTH.

  7. I found the "&C" in the LR and thought i could just append a value for the color's string then change it back to a color again, with

    hexColor = str(c)
    hexColor = hexColor + "7f"
    dim intColor As Int32 = hexColor.Val
    dim c2 As Color = Color(intColor)
    editorWin.textArea1.backColor = c2

    but i got weird results. No transparency, but a different color altogether. So adding 7f to the string I thought should make it 50% transparency, but instead of a transparent blue I might get a solid green from the picker.

  8. Emile Schwarz,
    Thanks, but I still just don't know how to set its transparency even after setting the color.

  9. Tim P

    Dec 1 Pre-Release Testers Rochester, NY
    Edited last week

    API 2.0 sensationalism aside, you can re-create the color with alpha.
    I haven't dug too deep into API 2.0; so I'm not sure how the SelectColor example works there. This code picks up after the user has selected a color.

    dim cSelect as Color
    // User selects cSelect
    
    dim cTranslucent as Color = rgb(cSelect.Red, cSelect.Green, cSelect.Blue, 220)
    // cTranslucent should be translucent.

    I wrote my own RGBA function that flips the value the correct way because Xojo is the only one who does it backwards (with full value meaning fully transparent).

    It should be noted that on macOS the color panel can allow users to select transparency. You'll probably need MBS.

  10. Edited last week

    Thanks Tim. I'll give that a try. I did get it to work for the final PNG by converting the hex code to RGB values and adding the transparency with color.RGBA. But for some reason this doesn't show as transparent when I add it to the TextArea.
    Here's my code:
    Dim c As Color Dim b As Boolean c = CMY(0.35, 0.9, 0.6,255 * 0.65) // choose the default color shown in color picker b = SelectColor(c, "Select a Color") dim hexColor as string hexColor = str(c) // get rid of "&h00"... hexColor = hexColor.replace("&h00","") //separate each set of 2 values... dim r as string = Left(hexColor,2) dim g as string = hexColor.Mid(3,2) dim b2 as string = right(hexColor,2) dim hexR as integer hexR = Integer.FromHex(r.toText) dim hexG as integer hexG = Integer.FromHex(g.toText) dim hexB as integer hexB = Integer.FromHex(b2.toText) dim c2 As Color = Color.RGBA(hexR,hexG,hexB,100) editorWin.textArea1.backColor = c2

    I wonder why it works for the PNG image, but not on the TextArea? do TextAreas not support RGBA? instead of getting a translucent color I just get a lighter color for the TextArea.

  11. Emile S

    Dec 2 Europe (France, Strasbourg)
    Edited last week

    Sorry Patrick, I do not had 19r2.1 downloaded (previously): I successfully downloaded it this morning.

    The code below does not works on a TextArea (not the original question):

    Var blue As Color = &c0000FF10 // mostly transparent
    
    Me.BackgroundColor = blue

    I get two entries from the LR for the code.

    I suggest a bug / you filled a Feedback report.

    Nota: TextArea.BackgroundColor is a 19R2 addition.

    WARNING:

    Me.BackgroundColor = &c0000FFF0

    This (alone) works as intended !

    So max transparency is $FF, max opacity is $00. Is the doc wrong ?

    Tested on El Capitan with Xojo 2019r2.1 (today’s download).

  12. unfortunatley I can't seem to Run my project in 19r2. I'm getting about 9 different errors on what used to run fined in 18r2. must have been some changes to some common things that i'll have to sort out. is that the API 2.0 stuff?

    I think before the opacity values XOJO were backwards from what you'd expect them to be too.

  13. Emile S

    Dec 2 Europe (France, Strasbourg)
    Edited last week

    @Emile S Nota: TextArea.BackgroundColor is a 19R2 addition.

    @Patrick B unfortunatley I can't seem to Run my project in 19r2

    Use 19r2.1.

    All in all, you cannot use TextArea.BackgroundColor in 18r2 because it does not existed then.

    Try to put a Canvas below the TextArea and set its color.
    TextArea HAVE to be FRONTMOST (or the Canvas will hide it).

    BTW: are these errors or deprecated warnings (are-you able to compile/build the project ?

  14. Tim P

    Dec 2 Pre-Release Testers Rochester, NY

    @Patrick B But for some reason this doesn't show as transparent when I add it to the TextArea.

    It could be that TextArea does not support transparency in Xojo. I stumbled across this example in MBS last night while looking for something else, /MacControls/Textarea Transparency

  15. Rudolf J

    Dec 2 Answer

    Hi,
    Why are you doing it so awkwardly?

    Also note the light + dark mode
    the background color becomes when transparent
    mixed with light or dark

    Rem Old XOJO API 1.0
    Dim c As Color
    Dim b as Boolean
    c=Textarea1.Backcolor
    b=SelectColor(c,"Select a Color")
    if b then
    Textarea1.BackColor = RGB(c.red,c.green,c.blue,slider1.value)
    end if

    Rem New XOJO AP!2.1
    Var c As Color
    Var b As Boolean
    c= textarea1.BackgroundColor
    b = Color.SelectedFromDialog(c, "Select a Color")
    textarea1.BackgroundColor = RGB(c.red,c.green,c.blue,slider1.value)
    // Slider1.minimum = 0
    // Slider1.maximum = 255

  16. Thanks, Tim and Rudolph. I'll take a look.

    I'm doing it so awkwardly because I have no clue what I'm doing (as usual). hey, i was an art major. :-D

  17. Craig H

    Dec 2 Black Hills, SD, USA

    I agree with Rudolf that your approach seems "awkward".

    To an extent, perhaps the Language Reference is not a clear as it could be. See the LR "Notes" section where it states: "Colors are often used to assign colors to properties of type Color. Use the RGB, HSV, or CMY functions to assign a color to an object or use the format:
    &cRRGGBB "

    I would suggest stop reading in the middle of the last sentence:
    "Use the RGB, HSV, or CMY functions to assign a color" . This is what Rudolf suggested. Building up a string to express a color literal or hex color is "awkward". For my part, I believe I have always used R,G,B's to express color and rarely if ever used Hex colors or color literals.

    See the RGB, HSV, or CMY entries under "Shared Methods". Note that there are also RGBA and HSVA methods listed, though by my reading, these are exact equivalents... both of these (and CMY) will take a 4th parameter "a" as Integer to handle the Alpha

    I would also suggest a few changes to Rudolf's code:
    Rem New XOJO AP12.1
    Var c As Color
    Var b As Boolean
    c= textarea1.BackgroundColor
    b = Color.SelectedFromDialog(c, "Select a Color")

    // textarea1.BackgroundColor = RGB(c.red,c.green,c.blue,slider1.value)
    // note that the RGB() function has been deprecated in 2019R2 in preference the the following:
    textarea1.BackgroundColor = color.rgb(c.red,c.green,c.blue,slider1.value)
    // R2.1 will not complain, but you may get warnings in the future
    // note that I've left off the 4th parameter for transparency to be handled in the valueChanged event
    // of Slider1

    // Slider1.minimum = 0
    // Slider1.maximum = 255
    =======

    As noted above, I assume that one would want to change the alpha color component in the
    ValueChanged event of Slider1:
    Var c As Color
    c= textarea1.BackgroundColor
    textarea1.BackgroundColor = RGB(c.red,c.green,c.blue,slider1.value)
    // Slider1.minimum = 0
    // Slider1.maximum = 255

  18. I was able to try the Rem Old XOJO API 1.0 version and it did not result in a translucent textArea. Same issue. I think as Tim suggested, the TextArea does not even support transparency.

    I did find the MBS example Tim suggested and it does create a transparent TextArea. it choked on "setBackgroundFilters" no matter which version of XOJO I tried to open it in but when I commented that line out it ran. I would have to figure out how their NSColorMBS works to see if I can add some color to the transparency. right now it's either white or clear. color is hard-coded.

    I can't try Rem New XOJO AP12.1 yet. My app seems to crash as soon as it opens since I created it in 2018r2 even after fixing the API 2.0 stuff (I thought). I might have to just do a bare bones dummy app just to see if it works. Wondering though if the last version didn't support TextArea transparency, the new one won't either. I kind of doubt it when Rect.Transparency says "Determines whether the control is transparent on Windows. The default is False. Has no effect on macOS or Linux."

    Might have to do it with a canvas instead of a textArea. Maybe use a label as the text?

or Sign Up to reply!