iOS Question BitmapCreator FillGradient Blending?

[lucasheer]

Hello!

I am using this function to create an image-gradient effect:

public Sub SetGradientBackground(pnl As B4XView, Clrs() As Int, Orientation As String)
    Dim bc As BitmapCreator
    bc.Initialize(pnl.Width / xui.Scale, pnl.Height / xui.Scale)
    bc.FillGradient(Clrs, bc.TargetRect, Orientation)
    Dim iv As ImageView
    iv.Initialize("")
    Dim xiv As B4XView = iv
    pnl.AddView(xiv, 0, 0, pnl.Width, pnl.Height)
    xiv.SendToBack
    bc.SetBitmapToImageView(bc.Bitmap, xiv)
End Sub

However, I end up getting this tearing effect on the gradient. I noticed that it doesn't use blending, is there any way to fix that?

This is the call:
CPF.SetGradientBackground(overlayPanel, Array As Int(0xddF1EAE7, 0x00BAB8BA), "TOP_BOTTOM")

Thank you!

 

[Erel]

Nice layout.

Where is the tearing?

 

[lucasheer]

Nice layout.

Where is the tearing?

Thank you!

It's more noticeable on the phone display, but it's ripping a bit from top to bottom. If you are looking at an LCD monitor, you can see it if you look from below the monitor.

 

[Erel]

Sorry but I still don't see it. Try to reproduce it in a small project.

 

[lucasheer]

Try adjusting your contract, brightness.

I have an iPhone X with brightness around 30%

It shows up on my computer monitors, but I keep that brightness at 0%

Thank you again!

 

[lucasheer]

Sorry but I still don't see it. Try to reproduce it in a small project.

It's completely gone on my expensive HP monitor, but super visible on my cheap LCD HP display

Pretty visible on iPhone X and Pixel 3a

 

[Erel]

Looks perfect on iPhone 11.

It is not related to blending. The blending is handled by the OS because you have two different stacked views.

 

[lucasheer]

Looks perfect on iPhone 11.

It is not related to blending. The blending is handled by the OS because you have two different stacked views.

That is very odd!

I'll leave it for now, might mess with it later. I had the same issue with the simulator, but might be iOS version

 

[Semen Matusovskiy]

I don't see a place, where do you stretch a bitmap from a jpg file. Meanwhile this is important.
Imagine that a panel has aspect ratio 2 : 1. A picture - 1,5 : 1. In this case will be 'white' zones from top and bottom.
If possible, try to set a background color for ImageView the same as a background color in jpg.

 

[lucasheer]

I don't see a place, where do you stretch a bitmap from a jpg file. Meanwhile this is important.
Imagine that a panel has aspect ratio 2 : 1. A picture - 1,5 : 1. In this case will be 'white' zones from top and bottom.
If possible, try to set a background color for ImageView the same as a background color in jpg.

That makes sense, I will try that. Thank you!

You see the lines though?

 

[lucasheer]

I don't see a place, where do you stretch a bitmap from a jpg file. Meanwhile this is important.
Imagine that a panel has aspect ratio 2 : 1. A picture - 1,5 : 1. In this case will be 'white' zones from top and bottom.
If possible, try to set a background color for ImageView the same as a background color in jpg.

Oh!! The clear parts of the image are the parts that expose the issue.

The lines are even there when the image isn't present.

CPF.SetGradientBackground(overlayPanel, Array As Int(0xffF1EAE7, 0x01BAB8BA), "TOP_BOTTOM")

This isn't enough of a jump to create a smooth transition I think. So it looks like it's ripping.

 

[Semen Matusovskiy]

I tried your sample in iPhone 12 Simulator and did not notice serious troubles.

Like experiment, you can compare with native gradient. For example, create a new project. Add ImageView1 with your picture (set resize mode - Fill or make transparent png).
After Loadlayout add following call:

setGradientBackground (ImageView1, 0xffF1EAE7, 0x01BAB8BA)

and subroutines

Sub setGradientBackground (view As View, Color1 As Int, Color2 As Int)
    Dim no As NativeObject = Me
    no.RunMethod ("setGradientBackground:::", Array (view, no.ColorToUIColor (Color1), no.ColorToUIColor (Color2)))  
End Sub

#If OBJC
- (void) setGradientBackground: (UIView*) view :(UIColor *) UIColor1 :(UIColor *) UIColor2
{    
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = @[(id) UIColor1.CGColor, (id) UIColor2.CGColor];
    [view.layer insertSublayer:gradient atIndex: 0];
}
#End If

I don't see a big difference from CPF.SetGradientBackground,.

 

[lucasheer]

I tried your sample in iPhone 12 Simulator and did not notice serious troubles.

Like experiment, you can compare with native gradient. For example, create a new project. Add ImageView1 with your picture (set resize mode - Fill or make transparent png).
After Loadlayout add following call:

setGradientBackground (ImageView1, 0xffF1EAE7, 0x01BAB8BA)

and subroutines

Sub setGradientBackground (view As View, Color1 As Int, Color2 As Int)
    Dim no As NativeObject = Me
    no.RunMethod ("setGradientBackground:::", Array (view, no.ColorToUIColor (Color1), no.ColorToUIColor (Color2))) 
End Sub

#If OBJC
- (void) setGradientBackground: (UIView*) view :(UIColor *) UIColor1 :(UIColor *) UIColor2
{   
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = @[(id) UIColor1.CGColor, (id) UIColor2.CGColor];
    [view.layer insertSublayer:gradient atIndex: 0];
}
#End If

I don't see a big difference from CPF.SetGradientBackground,.

YOU ARE THE MAN!

That fixed it! Thank you so much!! If there's anything I can ever do for you, I am here. Thank you!