iOS Question BitmapCreator FillGradient Blending?

lucasheer

Active Member
Licensed User
Longtime User
Hello!

I am using this function to create an image-gradient effect:
B4X:
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?

snapchat-69717407-jpg.107392


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

Thank you!
 

Attachments

  • Snapchat-69717407.jpg
    Snapchat-69717407.jpg
    80.4 KB · Views: 257

lucasheer

Active Member
Licensed User
Longtime User
Nice layout.

Where is the tearing?

Thank you!

Capture.PNG

Capture1.PNG


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.
 
Upvote 0

lucasheer

Active Member
Licensed User
Longtime User
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!
 

Attachments

  • Project.zip
    356.1 KB · Views: 105
Upvote 0

lucasheer

Active Member
Licensed User
Longtime User
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
 
Upvote 0

lucasheer

Active Member
Licensed User
Longtime User
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
 
Upvote 0

Semen Matusovskiy

Well-Known Member
Licensed User
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.
 
Upvote 0

lucasheer

Active Member
Licensed User
Longtime User
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?
 
Upvote 0

lucasheer

Active Member
Licensed User
Longtime User
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.

B4X:
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.
 
Upvote 0

Semen Matusovskiy

Well-Known Member
Licensed User
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:
B4X:
setGradientBackground (ImageView1, 0xffF1EAE7, 0x01BAB8BA)
and subroutines
B4X:
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,.
 
Upvote 0

lucasheer

Active Member
Licensed User
Longtime User
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:
B4X:
setGradientBackground (ImageView1, 0xffF1EAE7, 0x01BAB8BA)
and subroutines
B4X:
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!
 
Upvote 0
Top