Android Question Drowing diamond

[yaniv hanya]

holle
I'm new to graphics and I need to make a diamond shape that will be transparent both on the outside and on the inside.
And fill it with the change of temperature,
so that it sometimes has to look like this

and sometimes like this

(the top is gradient)
with all the situations on the way.
What's the best way to do that
(I thought I'd place a picture below the picture of the diamond and omve it accordingly,
but the outside of the diamond should be transparent so that the activity background will bevisible)

 

[Devv]

I think you should make an animated gif and control it with gif library

 

[ilan]

holle
I'm new to graphics and I need to make a diamond shape that will be transparent both on the outside and on the inside.
And fill it with the change of temperature,
so that it sometimes has to look like this
View attachment 94037
and sometimes like this
View attachment 94038
(the top is gradient)
with all the situations on the way.
What's the best way to do that
(I thought I'd place a picture below the picture of the diamond and omve it accordingly,
but the outside of the diamond should be transparent so that the activity background will bevisible)

there are a lot of ways to do that. i would say doing it with canvas would be the simplest and dynamic way.
here is a simple example on how to do that (i am using b4j because its simpler for such stuff but its 99% the same for b4a):

#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private img1 As ImageView
    Private vpW, vpH As Float
    Private xui As XUI
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
    
    vpW = MainForm.RootPane.Width
    vpH = MainForm.RootPane.Height
    
    img1.Initialize("")
    MainForm.RootPane.AddNode(img1,vpW*0.4,vpH*0.4,vpW*0.2, vpH*0.2)
    CSSUtils.SetBackgroundColor(MainForm.RootPane, fx.Colors.Yellow)
    
    For i = 0 To 75
        img1.SetImage(drawdiamond(i,vpW*0.2,vpH*0.2,xui.Color_Cyan))
        Sleep(25)
    Next
    
    For i = 75 To 0 Step -1
        img1.SetImage(drawdiamond(i,vpW*0.2,vpH*0.2,xui.Color_Cyan))
        Sleep(25)
    Next
End Sub

Sub drawdiamond(percent As Int, width As Float, height As Float, color As Int) As B4XBitmap
    Dim cnv As B4XCanvas
    Dim myimage As B4XView = xui.CreatePanel("")
    myimage.SetLayoutAnimated(0,0,0,width,height)
    cnv.Initialize(myimage)
    Dim path As B4XPath
    path.Initialize(width/2,0)
    path.LineTo(width,height/2)
    path.LineTo(width/2,height)
    path.LineTo(0,height/2)
    path.LineTo(width/2,0)
    cnv.DrawPath(path,color,True,1)
    cnv.ClipPath(path)
    Dim linheight As Float = height/100 '100 lines
    For i = 0 To percent-1
        cnv.DrawLine(0,i*linheight,width,(i*linheight)+linheight,xui.Color_ARGB(255,255,255,255),2)
    Next
    cnv.RemoveClip
    Dim bmp As B4XBitmap = cnv.CreateBitmap
    cnv.Release
    Return bmp
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

as you can see i am creating a bitmap and returning it to an imageview. i have changed the color of the background so you can see that the diamond is transparent in the background.

you can also create a nice glowing effect if you want. the sky is the limit

good luck, ilan

 

[ilan]

and if you want some gradient at the top and transparent background inside the diamond you can try something like this:

#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private img1 As ImageView
    Private vpW, vpH As Float
    Private xui As XUI
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
   
    vpW = MainForm.RootPane.Width
    vpH = MainForm.RootPane.Height
   
    img1.Initialize("")
    MainForm.RootPane.AddNode(img1,vpW*0.3,vpH*0.3,vpW*0.4, vpH*0.4)
    CSSUtils.SetBackgroundColor(MainForm.RootPane, fx.Colors.Yellow)
   
    img1.SetImage(drawdiamond(25,vpW*0.2,vpH*0.2,xui.Color_Cyan))
End Sub

Sub drawdiamond(percent As Int, width As Float, height As Float, color As Int) As B4XBitmap 'ignore
     Dim cnv As B4XCanvas
    Dim myimage As B4XView = xui.CreatePanel("")
    myimage.SetLayoutAnimated(0,0,0,width,height)
    cnv.Initialize(myimage)
    Dim path As B4XPath
    path.Initialize(width/2,0)
    path.LineTo(width,height/2)
    path.LineTo(width/2,height)
    path.LineTo(0,height/2)
    path.LineTo(width/2,0)
    'cnv.DrawPath(path,color,True,1)
    cnv.ClipPath(path)
    Dim numberoflines As Int = 100
    Dim linheight As Float = height/numberoflines '100 lines
    Dim alphastep As Int
    Dim counter As Int = 0
    Dim fadeoutstep As Int = 255/((numberoflines-percent)*0.2)
    For i = numberoflines To percent-1 Step -1
        If counter > ((numberoflines-percent)*0.8) Then alphastep = Max(0,alphastep-fadeoutstep)Else alphastep = 255
        Log(alphastep)
        cnv.DrawLine(0,(i*linheight),width,((i*linheight)+linheight),xui.Color_ARGB(alphastep,0,255,255),2)
        counter = counter + 1
    Next
    cnv.RemoveClip
    Dim bmp As B4XBitmap = cnv.CreateBitmap
    cnv.Release
    Return bmp
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

 

[yaniv hanya]

Wow! Great,
Exactly what I needed
I didn't think it would be that simple
Thenk you so much