B4A Library [B4X] [XUI] SD SlidingPuzzleView (With source code)

Star-Dust

Expert
Licensed User
I was envious of @Johan Schoeman 's SlidingPuzzle library that you find here.
So I decided to recreate it for B4X inspired by the same library.

I have attached the source code, I entered a procedure to shuffle the cards.

upload_2018-5-26_22-19-22.png
upload_2018-5-26_22-18-38.png
1.gif


B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("Layout1")
 
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub SlidingPuzzleView1_Solved
    ToastMessageShow("Solved",True)
End Sub

Sub Button1_Click
    SlidingPuzzleView1.Solve
End Sub
 

Attachments

Last edited:

Star-Dust

Expert
Licensed User
I made an update to make it totally XUI, I realized later that a function did not use XUI methods.
I have also included the possibility of writing numbers in the cards and establishing the color of the text. I improved the mixing algorithm
 
Last edited:

Lucas Eduardo

Active Member
Licensed User
Hello, that's a great Class :D. I was testing and i found a bug, when i change the Number Grid in the designer it doesn't work. It just work if i change too the
B4X:
 Private Cateto As Int = 5
to the same value
 

Star-Dust

Expert
Licensed User
It is a knowledge imposed the maximum limit to 4, I forgot to document it. But if you need it I can increase to 5
 

Lucas Eduardo

Active Member
Licensed User
I found too when i was testing
B4X:
Sub SlidingPuzzleView1_Solved
   ToastMessageShow("Solved",True)
End Sub
This sub doesn't work, i was getting an error, so i add this parametter
B4X:
 (Move As Int)
and worked perfectly
 

Star-Dust

Expert
Licensed User
Update rel. 0.02 Fix Bug
 

Star-Dust

Expert
Licensed User
Not currently. The class creates the image grid at the time of initialization. Absorbs the image from the Background property and splits it into the various boxes.
Changing after the number of rows / columns would have no effect.

A new method should be created (eg SetBoxNumber(Cateto as int)) which redoes the subdivision operation for the new value and re-draw.

I put the code so that everyone can make the improvements he wants.
 

Star-Dust

Expert
Licensed User
Update rel 0.03
Bugs fix to improve compatibility with B4i
 

Almora

Active Member
Licensed User
hi..
pictures added to the designer. I need to create my new designer every time for different pictures.
 

Star-Dust

Expert
Licensed User
Now I'm off-site. I will try to answer in the next days
 

Star-Dust

Expert
Licensed User
To change the image, just use SetImageDrawable
B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("Layout1")
  
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub SlidingPuzzleView1_Solved(Move As Int)
    ToastMessageShow($"Solved in ${Move} movement"$,True)
End Sub

Sub ButtonDog_Click
    SlidingPuzzleView1.ImageDrawable=LoadBitmap(File.DirAssets,"dog.jpg")
End Sub

Sub ButtonCat_LongClick
    SlidingPuzzleView1.ImageDrawable=LoadBitmap(File.DirAssets,"cat.jpg")
End Sub
I enclose an example
 

Attachments

Last edited:
Top