Android Question [SOLVED] Apply red tint across entire compass app layout to create red cockpit night light effect

PhilN

Member
Licensed User
Longtime User
I'm wanting to create a red cockpit night light effect as in the image below which I did in Corel Draw. Since my compass app GUI has a lot of elements, I thought it best to try and let android draw the layout, then I need to capture the composited bitmap somehow, then apply a tint to it, then display it until android redraws the next frame, and then repeat the process. Rather than creating an entirely new set of graphics just for the red night light effect. What if I wanted a green tint or amber, I want to be able to simply change the tint color and then the result is immediate without having to create a new set of graphics for each color which would bloat my app. I also understand that this has to happen at about 30 ~ 60 fps, so its got to happen really fast.

Does anyone have any ideas of how this might be accomplished?

Edit: Ok. So after listening to the replies. I have realized a fairly simple solution which I should have thought of in the first place, but anyhow, that is to apply the selected tint through image processing to each bitmap during Activity_Create when the bitmaps are loaded from file into memory. Then it only has to be done once and not for each rendered frame. If the user changes the tint color one only really needs to reload the main activity and process the bitmaps with the new tint color.

I know that there are image processing libraries available in B4A like:
Image Processing (for Bitmaps by Jim Brown)
RSImage Processing Library
Accelerated Surface

That would help me to do the color tinting, but I first need to capture a full screen rendered layout as a bitmap. How do I do that?

red night light.png
blue night light.png
 
Last edited:

Sandman

Expert
Licensed User
Longtime User
I doubt this will help you a lot, but just in case... You need to do three things in an image editor to get this effect, in this order:
  1. Remove all saturation from image (= turning it into grayscale)
  2. Produce a new layer with the desired color
  3. Multiply the new layer on top of the desaturated image
A very quick look at your three links indicate that RSImageProcessing is the best option as it has both SaturationFilter and MultiplyBlend.

I have no idea what the best way is to grab your screen, do this and show this instead, and still expect the UI to be functional though.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
That would help me to do the color tinting, but I first need to capture a full screen rendered layout as a bitmap. How do I do that?
B4X:
Dim bmp As B4XBitmap = pnl.Snapshot 'if pnl is not B4XView then change it to be.

You can use BitmapCreator to change the colors.
Check BitmapCreatorEffects: [B4X] BitmapCreator Effects
Note that BCE creates a new BitmapCreator each time. In your case it is better to use a modified version which reuses the BitmapCreator object.

I cannot say whether it will be fast enough or not. You need to test it.
 
Upvote 0

PhilN

Member
Licensed User
Longtime User
Thank you Sandman and Erel for both of your answers. They have been very helpful indeed.
 
Upvote 0
Top