Android Question Reverse colours and do mirror image of FontAwesome or Material icons

R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
For some button images I need to reverse the colours.
Also I have a button where the Material icon image needs to be flipped left to right (mirror image).
What would be the simplest way to do these things?

RBS
 
Sort by date Sort by votes

DonManfred

Expert
Licensed User
Longtime User
RB Smissaert said:
Also I have a button where the Material icon image needs to be flipped left to right (mirror image).
Click to expand...
I don´t think there is code to mirror a Font-Icon.

Best i can imagine is to draw it on a canvas and mirror that canvas.
You then can use the canvas to store the mirrored Icon as an Image.
 
Upvote 0

Sagenut

Expert
Licensed User
Longtime User
RB Smissaert said:
For some button images I need to reverse the colours.
Also I have a button where the Material icon image needs to be flipped left to right (mirror image).
What would be the simplest way to do these things?

RBS
Click to expand...
Does this buttons have a single icon/character on them?
 
Upvote 0

Sagenut

Expert
Licensed User
Longtime User

Attachments

  • MirrorButton.zip
    7.4 KB · Views: 166
Upvote 0

Sagenut

Expert
Licensed User
Longtime User
Note that the code flip the entire button by 180 degrees.
So in case of text it would appear reversed too.
The same if the button has a gradient or similar.
That's why I asked if the buttons was having just a single icon.
 
Upvote 0

Sagenut

Expert
Licensed User
Longtime User
Probably I am missing what you want to obtain, but...
 

Attachments

  • MirrorButton.zip
    7.7 KB · Views: 157
Upvote 0
R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
Sagenut said:
Probably I am missing what you want to obtain, but...
Click to expand...
Not quite.
I am dealing with this Material icon: Chr(0xE14A) 'backspace
This is a white x on a black, left pointed arrow.
I would like to make this a black x on a white, right pointed arrow.
Actually to make it the same as the default Android keyboard Del button it should be:
black x on grey background with black border.
As said making it right pointed works fine with the Java code just need to reverse the icon colours.

RBS
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
B4X? flip and color

[B4X] BitmapCreator Effects

BitmapCreatorEffects class includes all kinds of very simple to use image effects. The class is cross platform and compatible with B4J (v6.3+), B4A (v8.3+) and B4i (v5.0+). Example: 'Greyscale an image: Dim GreyImage As B4XBitmap = effects.GreyScale(ExistingBmp) 'Blur an image: Dim BlurImage As...
www.b4x.com

FontAwesome To Bitmap

Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...
www.b4x.com

 
Upvote 1

Sagenut

Expert
Licensed User
Longtime User
RB Smissaert said:
I am dealing with this Material icon: Chr(0xE14A) 'backspace
Click to expand...
That character has the internal X that is transparent.
At least to me.
If you need to have it Black with a White X and then White with a Black X I think that it would be easier to make 2 png and apply them as text with CSBuilder.
 
Upvote 0
R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
Thanks, will have a look at BitmapCreator Effects.
FontAwesome To Bitmap I am using already:

B4X: 
Sub TextToB4XBitmap(strText As String, tf As Typeface, fFontSize As Float, iFontColour As Int, bDrawCircle As Boolean) As B4XBitmap
    
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    Dim iPanelWidth As Int
    Dim cvs1 As B4XCanvas
    Dim fnt As B4XFont
    Dim tTD As tTextDimensions
    
    Select Case tf
        Case tf.DEFAULT
            fnt = xui.CreateFont(tf.DEFAULT, fFontSize)
        Case tf.FONTAWESOME
            fnt = xui.CreateFontAwesome(fFontSize)
        Case tf.MATERIALICONS
            fnt = xui.CreateMaterialIcons(fFontSize)
    End Select
    
    tTD = GetTextDimensionsSingleLine(strText, Null, fFontSize, tf, Null)
    iPanelWidth = Max(tTD.fHeight, tTD.fWidth)
        
    p.SetLayoutAnimated(0, 0, 0, iPanelWidth, iPanelWidth)

    cvs1.Initialize(p)
    cvs1.DrawText(strText, cvs1.TargetRect.CenterX, cvs1.TargetRect.CenterY + tTD.fHeight / 2, fnt, iFontColour, "CENTER")
    
    If bDrawCircle Then
        cvs1.DrawCircle(cvs1.TargetRect.CenterX, cvs1.TargetRect.CenterY, iPanelWidth / 2, Colors.Black, False, 2)
    End If
    
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    
    Return b
    
End Sub

Sub GetTextDimensionsSingleLine(strText As String, CSB As CSBuilder, fTextSize2 As Float, tf As Typeface, arrPadding() As Int) As tTextDimensions
    
    Dim cvs2 As Canvas
    Dim bmp2 As Bitmap
    Dim tTD As tTextDimensions
    
    If CSB.IsInitialized Then
        strText = CSB.ToString
    End If
    
    bmp2.InitializeMutable(2dip, 2dip)
    cvs2.Initialize2(bmp2)
    tTD.Initialize
    
    If IsArray(arrPadding) Then
        tTD.fWidth = cvs2.MeasureStringWidth(strText, tf, fTextSize2) + arrPadding(0) + arrPadding(2)
        tTD.fHeight = cvs2.MeasureStringHeight(strText, tf, fTextSize2) + arrPadding(1) + arrPadding(3)
    Else
        tTD.fWidth = cvs2.MeasureStringWidth(strText, tf, fTextSize2)
        tTD.fHeight = cvs2.MeasureStringHeight(strText, tf, fTextSize2)
    End If
    
    Return tTD

End Sub

RBS
 
Upvote 0
R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
I probably will need something like this:

B4X: 
'Replaces OldColor with NewColor.
'KeepAlphaLevel - If true then the alpha level of the source color is kept.
Sub ReplaceColor(bmp2 As B4XBitmap, OldColor As Int, NewColor As Int, KeepAlphaLevel As Boolean) As B4XBitmap
    
    Dim x As Int
    Dim y As Int
    Dim BMC As BitmapCreator = CreateBC(bmp2)
    Dim oldargb As ARGBColor
    Dim newargb As ARGBColor
    Dim a As ARGBColor
    
    BMC.ColorToARGB(OldColor, oldargb)
    BMC.ColorToARGB(NewColor, newargb)
    
    If KeepAlphaLevel Then
        For x = 0 To BMC.mWidth - 1
            For y = 0 To BMC.mHeight - 1
                BMC.GetARGB(x, y, a)
                If a.r = oldargb.r And a.g = oldargb.g And a.b = oldargb.b Then
                    newargb.a = a.a
                    BMC.SetARGB(x, y, newargb)
                End If
            Next
        Next
    Else
        For x = 0 To BMC.mWidth - 1
            For y = 0 To BMC.mHeight - 1
                BMC.GetARGB(x, y, a)
                If a.a = oldargb.a And a.r = oldargb.r And a.g = oldargb.g And a.b = oldargb.b Then
                    newargb.a = a.a
                    BMC.SetARGB(x, y, newargb)
                End If
            Next
        Next
    End If
    
    Return BMC.Bitmap
    
End Sub

RBS
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
It is more complex to change the internal color of a font converted to a bitmap, since it has alpha color in its internal outlines.
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
helper.

B4X: 
Dim Bmp As B4XBitmap = FontToBitmap(Chr(0xE14A), xui.CreateMaterialIcons(100), 100, xui.Color_Black)
Dim NewBmp As B4XBitmap = ChangeColorBasedOnAlphaLevel(Bmp, xui.Color_Red)

B4XImageView1.Bitmap = NewBmp
B4XImageView1.mBackgroundColor = xui.Color_Transparent
B4XImageView1.Update

B4X: 
Public Sub FontToBitmap (Text As String, FontType As B4XFont, FontSize As Float, Color As Int) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, FontSize, FontSize)
    Dim cvs1 As B4XCanvas
    cvs1.Initialize(p)
    Dim r As B4XRect = cvs1.MeasureText(Text, FontType)
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(Text, cvs1.TargetRect.CenterX, BaseLine, FontType, Color, "CENTER")
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub

B4X: 
Public Sub ChangeColorBasedOnAlphaLevel(bmp As B4XBitmap, NewColor As Int) As B4XBitmap
    Dim bc As BitmapCreator
    bc.Initialize(bmp.Width, bmp.Height)
    bc.CopyPixelsFromBitmap(bmp)
    Dim a1, a2 As ARGBColor
    bc.ColorToARGB(NewColor, a1)
    For y = 0 To bc.mHeight - 1
        For x = 0 To bc.mWidth - 1
            bc.GetARGB(x, y, a2)
            If a2.a > 0 Then
                a2.r = a1.r
                a2.g = a1.g
                a2.b = a1.b
                bc.SetARGB(x, y, a2)
            End If
        Next
    Next
    Return bc.Bitmap
End Sub

 
Upvote 0
R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
TILogistic said:
I'm looking for a routine that I have that changes the internal color of a font converted to bitmap.
View attachment 157046
Click to expand...
I solved this now with an icon file that has the right colours (file attached).
This seems simpler than altering colours and works fine now.
Still flipping the image with the Java code.

B4X: 
'Sets the rotation angle around the Y or X axis of the given view
'v = view
'Angle = rotation angle in degrees
Sub setRotationY(v As View, angle As Float)
    Dim jo = v As JavaObject
    jo.RunMethod("setRotationY", Array As Object(angle))
End Sub

Sub setRotationX(v As View, angle As Float)
    Dim jo = v As JavaObject
    jo.RunMethod("setRotationX", Array As Object(angle))
End Sub

'Sets the X pivot point of the given view
'v = view
'X = X coordinate of the pivot in pixels
'reference upper left corner, default pivot middle of the view
Sub setPivotX(v As View, X As Float)
    Dim jo = v As JavaObject
    jo.RunMethod("setPivotX", Array As Object(X))
End Sub

Sub setPivotY(v As View, X As Float)
    Dim jo = v As JavaObject
    jo.RunMethod("setPivotY", Array As Object(X))
End Sub

Sub FlipViewImage(v As View, bHorizontal As Boolean)
    
    If bHorizontal Then
        setPivotX(v, v.Width / 2)
        setRotationY(v, 180)
    Else
        setPivotY(v, v.Height / 2)
        setRotationX(v, 180)
    End If
    
End Sub

Sub BitMapFromFile(strFolder As String, strFile As String, iOldColour As Int, iNewColour As Int, _
                   bKeepAlphaLevel As Boolean, iWidth As Int, iHeight As Int) As Bitmap
    
    Dim bmp As Bitmap
    
    bmp = LoadBitmapResize(strFolder, strFile, (iWidth / fActivityWidthRatio) / fTextRatio, (iHeight / fActivityHeightRatio) / fTextRatio, True)
    
    If iOldColour <> iNewColour Then
        bmp = ReplaceColor(bmp, iOldColour, iNewColour, bKeepAlphaLevel)
    End If
    
    Return bmp
    
End Sub

Sub ReplaceColor(bmp2 As B4XBitmap, OldColor As Int, NewColor As Int, KeepAlphaLevel As Boolean) As B4XBitmap
    
    Dim x As Int
    Dim y As Int
    Dim BMC As BitmapCreator = CreateBC(bmp2)
    Dim oldargb As ARGBColor
    Dim newargb As ARGBColor
    Dim a As ARGBColor
    
    BMC.ColorToARGB(OldColor, oldargb)
    BMC.ColorToARGB(NewColor, newargb)
    
    If KeepAlphaLevel Then
        For x = 0 To BMC.mWidth - 1
            For y = 0 To BMC.mHeight - 1
                BMC.GetARGB(x, y, a)
                If a.r = oldargb.r And a.g = oldargb.g And a.b = oldargb.b Then
                    newargb.a = a.a
                    BMC.SetARGB(x, y, newargb)
                End If
            Next
        Next
    Else
        For x = 0 To BMC.mWidth - 1
            For y = 0 To BMC.mHeight - 1
                BMC.GetARGB(x, y, a)
                If a.a = oldargb.a And a.r = oldargb.r And a.g = oldargb.g And a.b = oldargb.b Then
                    newargb.a = a.a
                    BMC.SetARGB(x, y, newargb)
                End If
            Next
        Next
    End If
    
    Return BMC.Bitmap
    
End Sub

'All this has to do with a custom keyboard and in the class clsKeyboard:
'flipping the image won't take place here as it is not the default to do a forwards delete,
'but just added this here as an example

    'Del button at the right side of the fourth row
    '----------------------------------------------
    dLeft = pnlKeys.Width - (42dip + 6dip)
    
    Dim b As Button
    b.Initialize("KeyboardButton")
    b.TextColor = Colors.Black
    b.TextSize = fButtonTextSize
    b.SingleLine = True
    'b.Typeface = Typeface.MATERIALICONS
    b.Typeface = Typeface.DEFAULT
    b.Tag = 38
    'b.Text = Chr(0xE14A) 'backspace
    b.Gravity = Gravity.CENTER
    b.Padding = Array As Int(0,0,0,0)
    
    Dim CD As ColorDrawable
    CD.Initialize(0xFFC8C8C8, 6dip) 'GREY, rounded corners
    b.Background = CD
    
    Dim bmp As Bitmap = cMP.BitMapFromFile(File.DirAssets, "back_delete.png", 0, 0, True, 35dip, 30dip)
    
    Dim cs As CSBuilder
    cs.Initialize.Image(bmp, 35dip, 30dip,False)
    b.Text = cs

    pnlKeys.AddView(b, dLeft, dTop, 42dip, 36dip)
    
    '----------------------------------------------------------------------------------
    'To mirror flip the button image (do this after the button was added to the panel!)
    FlipViewImage(b, True)
    '----------------------------------------------------------------------------------

    arrKeyboardButtons(38) = b

RBS
 
Upvote 0
R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
Forgot to attach the icon file.
Attached now.

RBS
 

Attachments

  • 4879862_backspace_close_delete_remove_icon.zip
    9.5 KB · Views: 115
Upvote 0

Sagenut

Expert
Licensed User
Longtime User
For sure your solution and @TILogistic solution are more elegant and correct and will work with any characters.
I post even my idea, simpler but for sure limited in case you need to make the same thing with many many buttons.
 

Attachments

  • MirrorButton.zip
    13 KB · Views: 127
Upvote 0
You must log in or register to reply here.

Similar Threads

R
  • Question
Android Question How to make image based on high unix char look disabled
Replies
3
Views
1K
RB Smissaert
R
  • Article
B4A Library Johan's Overview
2
Replies
36
Views
37K
malvin garabha
M
  • Article
B4A Library RSImageProcessing Library
3 4 5
Replies
82
Views
55K
MitchBu
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…