The latest version of BANano introduces the BANanoServer.b4xlib library, which is an easy to use wrapper around jServer, the same B4J lib ABMaterial uses. One can now use BANano to make stand-alone Web sites, but also interfaces for e.g. IoT and Raspberry Pi (when using the BANanoServer lib: as this is a normal B4J app, it can use all B4J libs on the server side) and build complex Web Apps.
NOTE: BANano still works without the BANAnoServer Library as it did before in case you want to use another backend like PHP, but only having to program in one language has huge advantages and is what RAD is al about.
When you will look at the code of BANanoServer, ABM users will recognize the powerful Caching system, Root, Websocket support and HTTP/2 filters. In BANano, all that code is removed from your own projects view (but still accessible as it is an open source .b4xlib).
Some ‘easy-to-use’ methods to communicate between the browser and the server are added (to call methods from each other and to exchange files).
More info and download BANano for free here: BANano Download
But the biggest news this week must have been the BOMB Erel from Anywhere Software dropped: B4A, the tool to make native Android apps, is from now on free to use for everyone!
From his announcement a couple of weeks ago:
I’m very proud in the continuing progress of B4X tools. I’m also very proud to be part of this amazing developers community.
In the last couple of years, I have a growing feeling that B4X tools do not realize their potential. While there are all kinds of development tools, B4X offers a unique set of features: simple, powerful, mature, great community, RAD, native, cross platform and more.
B4X tools are an excellent choice for a wide range of real-world use cases.
So, the question is how to make B4X more popular? Obviously, it is not a simple nor a short-term task.
A clear growth barrier is the fact that unlike most development tools today, B4A and B4i are not free. This wasn’t the case 10 years ago.
The big announcement today is that B4A will become free in a few weeks. The framework – set of internal libraries, will be open sourced.
We will accept contributions for B4A like currently done with B4J.
We’ve also secured funds from a US investor who shares my vision of making B4X a popular development tool. These resources will allow us to further expand.
Two huge points were raised here: for one, the tool that started it all (B4A) to make native Android apps, is now 100% free (download it here)! It is clear that nowadays paying for a development platform is so 2009. Some development vendors may exist for 20+ years, but haven’t grown accordingly and seem to be stuck in overprotecting their (outdated?) technology. Clearly, Erel is not one of them and is thinking on how to expand his tools into the next decade.
But the second part may be even more exciting: a private US investor has shown interest in the potential of B4X and shares Erel view of the future. This opens a whole new world to the development tool and allows to think a lot bigger. He can expand his team not only with new developers, but even more important, surround himself with professionals to market his brand and let the world know of the big impact his technology can have on any software developer.
Just read up on the forum (100K+ members) and one quickly realizes the brought spectrum of apps that can be written with B4X. It is used by big corporations like NASA, IBM and Bosch to name a few, but also by small companies and citizen developers. I for one use it daily in my day job at OneTwo and we feel so secure with the tools we use it as the foundation of all our software. Very rarely one comes across a tool where the developers are so close to its users and actually listens to their concerns and wishes. I remember having found a bug (yeah, you really have to go deep to find one) and after reporting it to the Anywhere Software team, 10 minutes(!) later, an update was released. This has never been seen and blocked me zero time in my own development.
I am a big fan of the B4X suite. It allowed me to write ABMaterial and BANano, two libraries to make modern Websites and Webapps. Something I can’t see me do in any other tool, at least not with such ease and speed. And it is fun, really fun to work with too. 🙂
So I think Yoda would concur: ‘The future, bright it is!’
At OneTwo, we are always searching for ways to make things easier on the workfloor. For nearly a decade, we introduced barcode scanners everywhere! From architects and accountants, over carpenters and contractors, to farmers and gardeners are now using our small barcode scanners to record times, jobs and used materials.
The last couple of weeks, I’ve been investigating how we could tackle another common issue, but now on the factory shop floor. Working on a specific step in the development of a product demands the constant focus of the operator so using a barcode scanner to get the instructions is, well, just not practical if you have your hands full.
Time to get to the lab! Provided with heaps of coffee, some unhealthy snacks and an open mind we started putting some ideas together on the whiteboard. We wanted to give as much feedback to the operator as possible using monitors, beamer projections at the workstation and personal instructions on phones and tablets.
The key to deliver hyper-contextual content to the users is knowing the location of every chess piece in the game: the workstation, the machine that is going to be build and the operator(s). The underlying communication technology was going to be Bluetooth Low Energy (BLE). The Raspberry Pi has it and so does almost any phone or tablet. By attaching a cheap BLE Beacon to the machine we could understand the location of all the players.
Using B4X for this project was a no-brainer, as Erels toolbox is just made to build stuff like this! One important link in the chain was missing: the BLE reader in B4J for the Raspberry Pi. However, writing some small scripts and calling it using jShell and a couple of timers did the job just fine.
Scripts code:
Two scripts to discover BLE devices around the Raspberry Pi. Each one runs in its own jShell in B4J. First one scans for devices, second one reads whatever they broadcast.
Also, as the Raspberry Pi has to be a BLE beacon itself (so the Android Native app can discover it), I had to write another little script:
#!/bin/bash
# Beacon Scan by Alain Bailleul 2017
sudo hciconfig hci0 leadv 3
sudo hcitool -i hci0 cmd 0x08 0x0008 19 02 01 06 03 03 aa fe 11 16 aa fe 10 00 02 6f 6e 65 2d 74 77 6f 07 $1 $2 $3 00 00 00 00 00 00
sudo hciconfig
IPN=$(ip addr show eth0 | awk ‘/inet / {print $2}’ | cut -d/ -f 1)
IPW=$(ip addr show wlan0 | awk ‘/inet / {print $2}’ | cut -d/ -f 1)
MACN=$(ip link show eth0 | awk ‘/ether/ {print $2}’)
MACW=$(ip link show wlan0 | awk ‘/ether/ {print $2}’)
echo “$MACW;$IPW;$MACN;$IPN;END” > macip.txt
For anything related to presenting the instructions, we could use ABMaterial.
Alright! We’ve got everything we needed to set up a test scenario for a workstation so time to bring out the cool slide:
Although there are a lot of physical components and different OS’s in play, B4X has all the tools to make them seamlessly talk to each other using one language. For the native Android part, I wrote my own BLE discovery library based on the altbeacons library. (Note, there is a library available in B4A to discover BLE devices).
For the video demonstration, things you have to keep in mind:
INPUT:
OneTwo box + BLE beacon: represents a machine arriving on the workstation
Raspberry Pi (under the table): represents the workstation
Android Phone: represents an operator/visitor at the workstation
OUTPUT:
On the monitor, for each ‘machine’ some info is presented (e.g. a serial number, to what country it has to be shipped, etc)
On the phone: specific instructions for the operator(s) for this ‘machine’, or a greeting to a visitor.
On the workstation, projected global instructions for the operator(s) for this ‘machine’ with a beamer.
Let’s have a look how all of this plays out:
This turned out to work all very well for a first trial! For real world usage, the project will need some more work (like improving the algorithms to discover the BLE devices, setting thresholds or calculating them without calibration, etc…). But we are very excited with the possibilities this low-cost solution can already show in such a short time.
Next step will be setting this up on a real workstation on the shop floor in a real factory later this month.
Amazing news from Anywhere software: Erel is working on B4i! This development suite for cross development (Android/Mac/Windows/Linux) will be joined by iOS.
After the great success of Basic4Android (simply the best development tool for Android, by far), Erel suprised us all with Basic4Java last year. A free! tool to create cross platform software for Mac, Windows and Linux.
And now, he has an ever bigger suprise: Basic4iOS!
Just like it’s brother B4A, B4i will compile to native code (Objective C in this case). Combined with the powerful IDE (Xojo, check this one out, it’s bug free and blazing fast) with its unique debugging capabilities and features, this is a certain winner, again!
As a Windows developer, you won’t even need a Mac to compile:
…The current plan is to host a cloud of Macs for the compilation which means that developers will not need to have access to a Mac computer. There will also be an option to host the remote Mac compiler locally instead of the cloud compilers…
And the clever debugging tricks well known from B4A will also be at your fingertips:
…The rapid debugger will allow modifying the code without rebuilding the package making the “testing cycle” much quicker…
It’s simply amazing how Anywhere Software can build such powerful (and most of all stable and reliable) development tools in such a short time span. And at a price that dwarfs the competition!
Well done Erel! We are looking forward for this little beauty by the end of this year. It’s gonna be great, I’m sure of that!
Barcelona Skin
QuiQRun!, the social, fast barcode scanner and creator!
I’m very happy to release the first version of QuiQRun! for Android! In the next weeks I may do a couple of articles on the blog on how some things are done. (Basic4Android and Java).
I want to thank everyone that did test and translate the app!
I’m looking for people who can translate about 150 terms and some short sentences for my new app QuiQRun! If you can help me, send me a mail to alain.bailleul@pandora.be.
I already have English, Dutch, Italian, French, German, Spanish and Portuguese.
What can I offer?
1. The full version of QuiQRun!
2. A skin in QuiQRun! with your favorite colors
3. Full credit in the apps credits screen
4. Eternal gratitude!
How do I use it in B4A?
The translations are stored in a language file, eg. en-us.lng.
They are stored in a predefined format:
{0000};Scanned
{0001};Scan
{0002};Create
{0003};Setting new skin, one moment...
{0004};Tap to get more info!
{0005};This QRCode is expired!
...
In Basic4Android, It checks if it has a translation, if not it uses the default you put in the GetString function. Here is the snippet I use:
Sub Process_Globals
Public LangStrings As Map
Public BOM As Int = 65279 ' Byte Order Mark for Windows UTF-8 files
End Sub
Sub Activity_Create(FirstTime As Boolean)
Dim R As Reflector
R.Target = R.RunStaticMethod("java.util.Locale", "getDefault", Null, Null)
Dim tmpLang As String = R.RunMethod("getLanguage")
Select Case tmpLang
Case "nl"
LoadLanguageFile("nl-be.LNG")
Case "fr"
LoadLanguageFile("fr-fr.LNG")
Case "it"
LoadLanguageFile("it-it.LNG")
Case "es"
LoadLanguageFile("es-es.LNG")
Case "de"
LoadLanguageFile("de-de.LNG")
Case Else
LoadLanguageFile("en-us.LNG")
End Select
' using it:
ToastMessageShow(GetString("{0003}","Setting new skin, one moment..."), true)
End Sub
Public Sub LoadLanguageFile(setLanguageFile as String)
LangStrings.Initialize
If File.Exists(File.DirAssets, setLanguageFile) Then
Dim txtR As TextReader
txtR.Initialize(File.OpenInput(File.DirAssets, setLanguageFile))
Dim line As String
line = txtR.ReadLine
Do While line Null
line = line.Replace(Chr(BOM), "")
LangStrings.Put(line.SubString2(0,6), line.SubString(7))
line = txtR.ReadLine
Loop
txtR.Close
End If
End Sub
Public Sub GetString(iCode As String, iDefault As String) As String
If LangStrings.ContainsKey(iCode) Then
Return LangStrings.Get(iCode)
Else
Return iDefault
End If
End Sub
I’m currently working on my new Android app called QuiQRun and this is the first time it is presented to the public. It is currently in the testing phase so it won’t be long until I will release it to Google Play.
What is QuiQRun?
QuiQRun consists of two main parts:
1. The White side: Save – Share – Scan QR Codes
• Scan QR Codes and barcodes with our fast build in scanner
• Decrypt codes created with QuiQRun Security and read codes generated by other apps
• A human readable summary and the raw QR data
• Save codes for later use. All codes are organized in a nice list for easy retrieval.
• Share your QR Code on Facebook, Twitter, Email, Dropbox and many more…
• Use the QR Code immediately on your smartphone
2. The Black side: Make – Share – Protect QR Codes
• Make QR Codes for Websites, Wifi, Contacts, locations, coupons and many more…
• Protect your QR Code with QuiQRun Security
– Encryption
– Prevent saving the QR Code
– Password or PIN protect
– Set an expiration date
• Share your QR code on Facebook, Twitter, Email, Dropbox and many more…
• Use the QR Code immediately on your smartphone
And here are the first screenshots! QuiQrun on Android
QuiQRun is written in Basic4Android. If you are a licensed user of B4A you can download an exclusieve preview version from the B4A ‘Test my App!’ forum! I would definitely appreciate the feedback 🙂
More information and screenshots can be found at QuiQRun
The coming weeks I’ll keep you up to date. Follow me on Twitter: QuiQRun
B4A Anchors
Again, another great update of B4A! Erel has continued to improve the visual designer, this time with a great new feature you may know from typical PC languages: Anchors. (Xojo/Realbasic users may recognize them as the LockLeft, LockTop, LockRight and LockBottom properties)
Anchors allow you to define a constant distance between the view and one or more of the parent bounds. By using anchors, you can design screens and B4A will ‘stretch’ them according to the device size. This is different than scalling because it takes more relative positions into account.
Here is a short video demonstrating the anchore feature:
Important designer improvements:
* Copy & paste – work both inside the layout or between different layouts.
* Undo / redo feature.
* The views are organized in a tree for easier navigation.
* AutoScaleAll keyword now works with all variants, not just the “standard” variant.
* Colors fields can be copied and the colors values can be pasted or directly typed.
* Designer script find / replace dialog.
* The grid is saved in the layout file.
* Landscape / Portrait designer keywords to test the current orientation.
* UI Cloud threshold reduced to 10 seconds.
Other great new features and improvements:
* #AdditionalRes attribute
* Sync button in the Files tab – Syncs the project files with the Files folder.
* Modules added to the Find Sub / Module tool (Ctrl + E).
* Tabs order in the IDE is preserved.
* Modules files that were not modified will not be saved thus preserving the correct time stamp.
* DateTime.SetTimeZone now accepts a Double instead of Int.
* Shortcuts: F11 – Restart (rapid debugger), F2 in the designer connects to the device.
* JavaObject v1.00 – new RunMethodJO / GetFieldJO methods.
* Bug fixes and other minor improvements.
So head to the B4A website to check it out and if you don’t have a license yet (hard to believe because it is worth every penny), now is a great time to get one!
It has been a while since I’ve written a new article on this blog because it have been busy months both at work and in my personal life. One of the things I wanted to do was writing an easy to use Game Engine for B4A. I have written the ABPhysics engine in the past and recently Informatix pointed out I had started another engine (ABGameEngine) before that. Development on ABGameEngine was stopped early for several reasons: time was one of them, but also because several other developers were working on an engine themselves. It seemed a little bit pointless to continue.
However, the other engines were not further developed either. Until recently Erel came up with the GameView. This is an excellent View that will cover the needs of a lot of beginning programmers. I definitely would like to urge starting game developers to take a look at this. Registered users of B4A can download the GameView lib from here.
But still, I wanted something more. I looked at ABgameEngine again, as it had some great ideas like layers, animated sprites, gamepads etc. But it was also very old code and not written very well. And it crashed all the time 🙂
I decided to restart from scratch a couple of weeks ago. Some weekends and evenings later ABPlay was born! And with a lot of goodies!
Here is a small demo video of what I got so far. it demonstrates the following:
1. Layers
(Layer 1) the moving background with the Odies as animated sprites
(Layer 2) the black foreground layer with a weird dancing creature that passes now and then
2. Animated sprites, not bound to a layer
(our hero Garfield is back!)
3. A sprite can have different animations.
(like one for standing, one for walking, one for fighting, etc)
4. A sprite can have different predefined 'Walks'
(A walk can be build like you would build a path. It's a sequence of lines, bezier curves, wait periods etc. It's like a simple flash movie)
5. Gamepad controls
(the 'joystick' pad on the left)
(the 'action' pad on the right)
(the 'direction' pad as an alternative to the joystick, not shown in this video)
6. In the demo I cannot demonstrate it with a mouse, but it is completely multi touch
(You can control Garfield AND press the Action button X AND do a swipe anywhere at the same time)
But let’s have a look (beware this is running on the Emulator. On a real device it is much smoother):
I’m actually very pleased with the result. The graphics and handling is very smooth.
Above all, it’s still very easy to program. Here is the whole code for the demo app:
#Region Project Attributes
#ApplicationLabel: ABPlayTest
#VersionCode: 1
#VersionName:
'SupportedOrientations possible values: unspecified, landscape or portrait.
#SupportedOrientations: landscape
#CanInstallToExternalStorage: False
#End Region
#Region Activity Attributes
#FullScreen: true
#IncludeTitle: false
#End Region
Sub Process_Globals
End Sub
Sub Globals
Dim myPlay As ABPlay
' the panel that will hold the ABPlay
Dim myPanel As Panel
' a background and foregroud layer
Dim bgLayer As ABLayer
Dim fgLayer As ABLayer
' some colors to show the multi touch points in the demo
Dim myColors() As Int = Array As Int(Colors.Red, Colors.Green, Colors.Blue, Colors.Cyan, Colors.Yellow, Colors.Gray, Colors.White, Colors.Magenta, Colors.LightGray, Colors.DarkGray)
' our hero
Dim Hero As ABSprite
' our enemies
Dim Enemies As List
' param to set the set the speed
Dim Speed As Float = 0.2
' some variables to hold the current state of the hero
Dim currentAction As String
Dim currentDirection As String
Dim currentIsStanding As Boolean
End Sub
Sub Activity_Create(FirstTime As Boolean)
' initialize ABPlay with myPanel
myPanel.Initialize("")
Activity.AddView(myPanel, 0,0,100%x,100%y)
myPlay.Initialize(myPanel, "myPlay")
'////////////// BEGIN loading sprite sequences
' Load Sprite Sequences
myPlay.LoadSpriteSequence("GarStandingLeft",LoadBitmap(File.DirAssets, "garleftstill.png"),6, 1, 1000)
myPlay.LoadSpriteSequence("GarStandingLeft",LoadBitmap(File.DirAssets, "garleftstill.png"),6, 1, 1000)
myPlay.LoadSpriteSequence("GarStandingRight",LoadBitmap(File.DirAssets, "garrightstill.png"),6, 1, 1000)
myPlay.LoadSpriteSequence("GarWalkingLeft",LoadBitmap(File.DirAssets, "garleft.png"),8, 1, 1000)
myPlay.LoadSpriteSequence("GarWalkingRight",LoadBitmap(File.DirAssets, "garright.png"),8, 1, 1000)
myPlay.LoadSpriteSequence("GarStandingLeftFight",LoadBitmap(File.DirAssets, "garleftstillfight.png"),2, 1, 250)
myPlay.LoadSpriteSequence("GarStandingRightFight",LoadBitmap(File.DirAssets, "garrightstillfight.png"),2, 1, 250)
myPlay.LoadSpriteSequence("GarWalkingLeftFight",LoadBitmap(File.DirAssets, "garleftfight.png"),7, 1, 1000)
myPlay.LoadSpriteSequence("GarWalkingRightFight",LoadBitmap(File.DirAssets, "garrightfight.png"),7, 1, 1000)
' and the ones for Odie
myPlay.LoadSpriteSequence("OdieStandingLeft", LoadBitmap(File.DirAssets, "odieleftstill.png"),7,1,Rnd(800,1200))
myPlay.LoadSpriteSequence("OdieStandingRight", LoadBitmap(File.DirAssets, "odierightstill.png"),7,1,Rnd(800,1200))
myPlay.LoadSpriteSequence("OdieWalkingLeft", LoadBitmap(File.DirAssets, "odieleft.png"),5,1,Rnd(800,1200))
myPlay.LoadSpriteSequence("OdieWalkingRight", LoadBitmap(File.DirAssets, "odieright.png"),5,1,Rnd(800,1200))
' and the one for the creature
myPlay.LoadSpriteSequence("CreaturePassToRight", LoadBitmap(File.DirAssets, "creature.png"), 3, 4, 1200)
'////////////// END loading sprite sequences
'////////////// BEGIN building the Hero Garfield
' initialize the hero
Hero.Initialize("Hero", 50%x, 50%y)
' add sprite sequences
Hero.AddSpriteSequence("GarStandingLeft")
Hero.AddSpriteSequence("GarStandingRight")
Hero.AddSpriteSequence("GarWalkingLeft")
Hero.AddSpriteSequence("GarWalkingRight")
Hero.AddSpriteSequence("GarStandingLeftFight")
Hero.AddSpriteSequence("GarStandingRightFight")
Hero.AddSpriteSequence("GarWalkingLeftFight")
Hero.AddSpriteSequence("GarWalkingRightFight")
Hero.StartSpriteSequence("GarStandingLeft", True)
currentDirection="LEFT"
'////////////// END building the Hero Garfield
'////////////// BEGIN building the background layer with Odies
' initalize a background layer
bgLayer.Initialize("background", 0,0)
bgLayer.SetBackground(LoadBitmap(File.DirAssets, "bga.jpg"), 1.0)
myPlay.AddLayer(bgLayer)
' initialize some enemies
Enemies.Initialize
Dim a As Int
For a = 1 To 10
Dim Odie As ABSprite
' initialize an Odie with some animation sequences
Odie.Initialize("Odie" & a, Rnd(10%x,90%x), Rnd(10%y, 90%y))
' add multiple sprite sequences
Odie.AddSpriteSequences(Array As String("OdieStandingLeft","OdieStandingRight","OdieWalkingLeft","OdieWalkingRight"))
' create a random walk to the right
Dim WalkRight As ABSpriteWalk
WalkRight.Initialize("ToTheRight", True)
Dim newX As Int = Odie.x+Rnd(20%x, 80%x)
WalkRight.AddLine("OdieWalkingRight",Odie.x, Odie.y, newX, Odie.y, Rnd(90,100))
WalkRight.AddWait("OdieStandingRight",newX, Odie.y, Rnd(10,50))
WalkRight.AddLine("OdieWalkingLeft",newX, Odie.y, Odie.x, Odie.y, Rnd(90,100))
WalkRight.AddWait("OdieStandingLeft",Odie.x, Odie.y, Rnd(10,50))
Odie.AddWalk(WalkRight)
' create a random walk to the left
Dim WalkLeft As ABSpriteWalk
WalkLeft.Initialize("ToTheLeft", True)
Dim newX As Int = Odie.x-Rnd(20%x, 80%x)
WalkLeft.AddLine("OdieWalkingLeft",Odie.x, Odie.y, newX, Odie.y , Rnd(90,100))
WalkLeft.AddWait("OdieStandingLeft",newX, Odie.y, Rnd(10,50))
WalkLeft.AddLine("OdieWalkingRight",newX, Odie.y, Odie.x, Odie.y, Rnd(90,100))
WalkLeft.AddWait("OdieStandingRight",Odie.x, Odie.y, Rnd(10,50))
Odie.AddWalk(WalkLeft)
' pick random a walk, left or right
Dim GoLeft As Int = Rnd(0,2)
If GoLeft = 0 Then
Odie.StartWalk("ToTheRight")
Else
Odie.StartWalk("ToTheLeft")
End If
bgLayer.AddSprite(Odie)
Next
'////////////// END building the background layer with Odies
'////////////// BEGIN building the foreground layer with creature
' initalize a foreground layer
Dim fgLayer As ABLayer
fgLayer.Initialize("foreground", 0,0)
fgLayer.SetBackground(LoadBitmap(File.DirAssets, "fga.png"), 100%y/400)
myPlay.AddLayer(fgLayer)
' and a weird creature...
Dim creature As ABSprite
creature.Initialize("creature", -100%x, 100%y-240)
creature.AddSpriteSequence("CreaturePassToRight")
' with a walk
Dim pass As ABSpriteWalk
pass.Initialize("DanseToTheRight", True)
pass.AddLine("DansingRight",creature.x, creature.y, 200%x, creature.y, 300)
creature.AddWalk(pass)
' and start the walk
creature.StartWalk("DanseToTheRight")
' add the creature to the foreground layer
fgLayer.AddSprite(creature)
'////////////// END building the foreground layer with creature
'////////////// BEGIN Add game pads
' initialize and start a Joystick Gamepad
myPlay.InitializeJoystickPad(18, 100%y-210, 192, 192 , LoadBitmap(File.DirAssets, "joystick_bg.png"),LoadBitmap(File.DirAssets, "joystick.png"))
myPlay.ShowJoystickPad(True)
' initialize and start a Action Gamepad
myPlay.InitializeActionPad(100%x-210, 100%y-210, 192, 192 , LoadBitmap(File.DirAssets, "action_active.png"),LoadBitmap(File.DirAssets, "action_inactive.png"),LoadBitmap(File.DirAssets, "action_mask.png"),True, False, True, False)
myPlay.ShowActionPad(True)
'////////////// END Add game pads
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
' NEEDED FOR THE MOMENT TO CATCH THE HOME KEY, RESUME/PAUSE NOT YET SUPPORTED!
myPlay.StopAndRecycle
Activity.Finish
End Sub
Sub Activity_KeyPress (KeyCode As Int) As Boolean 'Return True to consume the event
Select Case KeyCode
Case KeyCodes.KEYCODE_BACK
' NEEDED: stop the drawing thread and recycle stuff
myPlay.StopAndRecycle
Activity.Finish
Return True
Case KeyCodes.KEYCODE_HOME
Return True
End Select
End Sub
Sub myPlay_Draw(c As Canvas, State As ABState)
' the actual drawing, do NOT set a debug stop in here!
'////////////// BEGIN Calculation stuff
' calculate hero stuff depending on what buttons we pressed on the gamepad
currentAction = ""
If State.UsingActionPad Then
' go into fight state
If State.ACTION_X Then
currentAction = "X"
End If
' go back to center
If State.ACTION_Y Then
Hero.SetPostition(50%x,50%y)
End If
End If
Dim XMovement As Int
Dim YMovement As Int
If State.UsingJoystickPad Then
XMovement = State.JOYSTICK_X*Speed
YMovement = State.JOYSTICK_Y*Speed
' update the hero's position and direction
If XMovement<0 Then
currentDirection = "LEFT"
Else
currentDirection = "RIGHT"
End If
Hero.SetPostition(Hero.x+XMovement, Hero.y+YMovement)
currentIsStanding = False
Else
currentIsStanding = True
End If
' set the animation type
Select Case currentDirection
Case "LEFT"
Select Case currentAction
Case "X"
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingLeftFight", False)
Else
Hero.StartSpriteSequence("GarWalkingLeftFight", False)
End If
Case Else
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingLeft", False)
Else
Hero.StartSpriteSequence("GarWalkingLeft", False)
End If
End Select
Case "RIGHT"
Select Case currentAction
Case "X"
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingRightFight", False)
Else
Hero.StartSpriteSequence("GarWalkingRightFight", False)
End If
Case Else
If currentIsStanding Then
Hero.StartSpriteSequence("GarStandingRight", False)
Else
Hero.StartSpriteSequence("GarWalkingRight", False)
End If
End Select
End Select
' update the hero animation
Hero.Update
' move our backgrounds, does not make sense but shows the possibilities
Dim newX, newY As Int
Dim newMovementX, newMovementY As Int
newMovementX=Min(Abs(XMovement),1)
newMovementY=Min(Abs(YMovement),1)
If currentIsStanding = False Then
If currentDirection = "LEFT" Then
newX = bgLayer.ViewX
newY = bgLayer.ViewY
If newX-newMovementX >= 0 Then
newX = newX-newMovementX
End If
If newY-newMovementY >= 0 Then
newY = newY-newMovementY
End If
bgLayer.SetLayerPostion(newX, newY)
Else
newX = bgLayer.ViewX
newY = bgLayer.ViewY
If newX+newMovementX <= bgLayer.OuterWidth - myPlay.Width Then
newX = newX+newMovementX
End If
If newY+newMovementY <= bgLayer.OuterHeight - myPlay.Height Then
newY = newY+newMovementY
End If
bgLayer.SetLayerPostion(newX, newY)
End If
End If
'////////////// END Calculation stuff
'////////////// BEGIN Drawing stuff
'ok, all the calulations are done, let's draw!
' draw the background layer with all its sprites on it and advance all sprite animations and walks
myPlay.DrawLayer("background", c)
Dim a As Int
' draw the multitouch points that are not on the gamepad, no action here but just to show the possibilities
For a = 0 To State.touchPoints.Size - 1
Dim tmpP As ABTouchPoint
tmpP = State.touchPoints.GetValueAt(a)
c.DrawCircle(tmpP.X, tmpP.Y, 50dip, myColors(tmpP.id), True, 1dip)
Next
' draw the hero
Hero.Draw(c)
' draw the foreground layer with all its sprites on it and advance all sprite animations and walks
myPlay.DrawLayer("foreground", c)
'////////////// END Drawing stuff
' NEEDED: very last line of the Draw event. Let ABPlay know it may process touches again!
myPlay.DrawDone()
End Sub
I’m not there yet, but it’s a good start. It needs a lot more testing and a lot of new features.
ABSYNCMenu.bas is a code module for an Actionbar with submenus completely written in Basic4Android. It’s an easy to use module you can drop into any project and with a couple of lines of code you have your own action bar with submenus!
Note: I’m aware there is an excellent actionbar library from corwin42 called AHActionBar at the B4A website, but as this ABSYNCMenu module is part of the upcoming ABSYNC Genesis tool (more on this tool in a later article!), I wanted to share this module with you.
Let’s get started!
Start a new project and import the attached module ABSYNCMenu.bas.
In the Main Activity we will add all the code needed to create and handle the action bar and menu. I’ll only cover the code needed for the actionbar in this tutorial, not the other ‘normal’ B4A code. There are some excellent tutorials in the B4A forum, check them out.
We define tree panels that are needed to build the ABSYNC Menu in the Sub Globals.
– ABS_MainMenuPanel: for the transparent background over the whole activity that makes all the rest of the program darker and unclickable.
– ABS_ActionBarPanel: for the the actionbar
– ABS_DropdownMenuPanel: for the dropdown menu
Sub Globals
Dim ABS_MainMenuPanel As Panel
Dim ABS_ActionBarPanel As Panel
Dim ABS_DropdownMenuPanel As Panel
End Sub
In the Activity_Create sub we load our initial layout file (.bal) we created in the designer. This may just be an empty form. See the project at the end of the article for more info. Then we call our BuildMenu() function where we define our action bar and menus.
Sub Activity_Create(FirstTime As Boolean)
' load the initial layout
Activity.LoadLayout("1")
' call the function to initialize our menu
BuildMenu
End Sub
Suppose we want to create the following actionbar with submenus:
Notice some menu items need to have an icon and some of them need to be disabled.
I’ll go over every major part in the code of the BuildMenu() function to explain how it works.
Important! When you add an actionbar item you can have them left our right aligned. Depending on the alignment the icons are shown in a different order.
If the alignment is LEFT then the order of the shown icons is:
first added, second added, third added, …
If the alignment is RIGHT then the order of the shown icons is:
…, third added, second added, first added
Let’s add a simple item to the taskbar. Every actionbar item has to start with ABSYNCMenu.AddActionBarItemBegin and has to end with ABSYNCMenu.AddActionBarItemEnd. The syntax for the AddActionBarItem is as follows:
Sub AddActionBarItem(ReturnValue As String, bmpEnabled As String, bmpDisabled As String, ItemWidth As Int, LeftAligned As Boolean, Visible As Boolean, Enabled As Boolean, MenuWidth As Int)
ReturnValue: the value that will be returned to the ABSYNCMenuEvent() function. This is also the text that will be shown if no icon is provided. bmpEnabled: the file name of the bmp for the Enabled icon. bmpDisabled: the file name of the bmp for the Disabled icon. ItemWidth: the width of this item. Can be bigger than the icon width. The icon will then be centered withion this width. LeftAligned: is this icon aligned to the left of your screen or the right. See note above about alignment. Visible: is this item visible. Enabled: is this item enabled. MenuWidth: the total with of the sub menu, if any.
Another example is an actionbar item with an icon and a submenu. right after you added the actionbar item, you can add the submenu with the AddMenuItem() function.
the syntax of AddMenuItem() is:
Sub AddMenuItem(ReturnValue As String, bmpEnabled As String, bmpDisabled As String, ItemHeight As Int, IconWidth As Int, Enabled As Boolean)
ReturnValue: the value that will be returned to the ABSYNCMenuEvent() function. This is also the text that will be shown next to the icon bmpEnabled: the file name of the bmp for the Enabled icon. bmpDisabled: the file name of the bmp for the Disabled icon. ItemHeight: the height of this item. IconWidth: the width of the iconspace. Enabled: is this item enabled.
Now we can write our function that will handle the menu click event. This function will be automatically called by the ABSYNCMenu module.
This function is straightforward. The comments will explain what happens:
' function that returns if someone clicked on an action bar item or on a sub menu item
' Here is where you do your stuff
Sub ABSYNCMenuEvent(ReturnValue As String, HasMenu As Boolean)
If HasMenu Then
' is an action bar item with a menu, open it and return
ABS_MainMenuPanel.SetLayout(0,0, Activity.Width, Activity.Height)
Else
' is an action bar item without a menu OR an actual menu item so we have to handle it
ABS_MainMenuPanel.SetLayout(0,0, Activity.Width, ABSYNCMenu.ActionBarHeight)
Select Case ReturnValue
Case "Home"
LoadLayoutIntoActivity("1")
Case "Register"
LoadLayoutIntoActivity("2")
Case "Connections"
LoadLayoutIntoActivity("3")
Case "Tables"
LoadLayoutIntoActivity("4")
Case "All tables"
ToastMessageShow(ReturnValue, False)
Case "Register tables"
ToastMessageShow(ReturnValue, False)
End Select
End If
' and redraw the action bar and menu
ABSYNCMenu.Draw(ABS_ActionBarPanel, ABS_DropdownMenuPanel)
End Sub
Finally we’ll have to cover the touch events on the tree panels. We’ll send the event to the ABSYNCMenu module an it will handle all the rest for you.
Sub ABS_ActionBarPanel_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
' in the touch event, let the ABSYNCMenu module handle the touch
Return ABSYNCMenu.DoActionBarTouch(Action, X, Y)
End Sub
Sub ABS_DropdownMenuPanel_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
' in the touch event, let the ABSYNCMenu module handle the touch
Return ABSYNCMenu.DoMenuTouch(Action, X, Y)
End Sub
Sub ABS_MainMenuPanel_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
' did not touch a menu or action bar item. Close it up!
ABS_MainMenuPanel.SetLayout(0,0, Activity.Width, ABSYNCMenu.ActionBarHeight)
Return True
End Sub
Finished! As you can see with some very easy coding we’ll have a fully working actionbar with dropdown menu’s!
This version includes several important new features:
– Designer scripts – this is probably the most innovative feature added to Basic4android since the first version. It will make it much easier to support different screen sizes and resolutions.
As quoted from the B4A website:
One of the most common issues that Android developers face is the need to adopt the user interface to devices with different screen sizes.
As described in the visual designer tutorial, you can create multiple layout variants to match different screens.
However it is not feasible nor recommended to create many layout variants.
Basic4android v1.9 introduces a new tool named “designer scripts” that will help you fine tune your layout and easily adjust it to different screens and resolutions.
The idea is to combine the usefulness of the visual designer with the flexibility and power of programming code.
– B4A-Bridge – now supports Bluetooth connections as well as wireless connections.
– Java 7 JDK is supported.
– The logging system was improved and all error messages should now show in the filtered logs.
– List.SortType – new method that allows sorting items of custom types based on one of the type fields.
– Bug fixes and other minor improvements.
Read more on the new exciting scripts feature here.
I’ve added the Camera object to the ABExtDrawing library for Basic4Android. This object must not be confused with the hardware camera. There are other libraries available for that. The new version 1.1 of the library can be downloaded from the B4X website.
The camera I’m talking about is a nice feature you can use to do 3D effects on the canvas without using OpenGL. The picture above is just a noral B4A canvas where we did some rotations and translations on. It simulates a scrolling list where the listitems rotate around their axe.
Additional, I shows other features of the ABExtDrawing library to do some lighting effects.
We create a new type item3D. This will hold one item in the list.
Sub Process_Globals
Type item3D (bmp As Bitmap, Top As Int, Left As Int, Width As Int, Height As Int)
End Sub
We also have to declare some variables. Note our mCamera variable which will do the 3D conversions and some constants for our lighting effects. On a Paint object we can set color filters which will affect the color values of what we draw with that Paint object. SetLightingColorFilter takes care of that. A LightingColorFilter takes two colors that are used to modify the colors that we are drawing. The first color will be multiplied with the colors we draw, while the second one will be added to the colors we draw. The multiplication will darken the color and adding will make it brighter so we can use this class to model both shadows and highlights. It would have been even better if instead of adding it would have implemented the screen blend mode, but add works OK.
To actually calculate the light we’ll use a simplified version of Phong lighting.
Sub Globals
'These global variables will be redeclared each time the activity is created.
'These variables can only be accessed from this module.
Dim items As List
Dim HalfHeight As Float
Dim SCALE_DOWN_FACTOR As Float: SCALE_DOWN_FACTOR = 0.15
Dim DEGREES_PER_SCREEN As Int: DEGREES_PER_SCREEN = 270
' Ambient light intensity
Dim AMBIENT_LIGHT As Int: AMBIENT_LIGHT = 55
' Diffuse light intensity
Dim DIFFUSE_LIGHT As Int: DIFFUSE_LIGHT = 200
' Specular light intensity
Dim SPECULAR_LIGHT As Float: SPECULAR_LIGHT = 70
' Shininess constant
Dim SHININESS As Float: SHININESS = 200
' The Max intensity of the light
Dim MAX_INTENSITY As Int: MAX_INTENSITY = 0xFF
Dim CurrentRotation As Int
Dim CurrentTop As Int
Dim MyCanvas As Canvas
Dim ScreenTop As Int: ScreenTop = 1
Dim Panel1 As Panel
Dim ExDraw As ABExtDrawing
Dim mCamera As ABCamera
Dim mMatrix As ABMatrix
Dim mPaint As ABPaint
Dim PI As Double: PI= 3.141592653589793238462643383279502884197
Dim ClearRect As Rect
Dim CurrY As Int
End Sub
In the Activity_Create sub we initialize mCamera and the other variables like mPaint which we will also need for our lighting. Also our pictures are preloaded.
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("1")
MyCanvas.Initialize(Panel1)
HalfHeight = Activity.Height / 2
Dim backbmp As Bitmap
backbmp.Initialize(File.DirAssets, "background.png")
Dim backbmp2 As Bitmap
backbmp2.Initialize(File.DirAssets, "background2.png")
Dim backbmp3 As Bitmap
backbmp3.Initialize(File.DirAssets, "background3.png")
Dim conbmp As Bitmap
conbmp.Initialize(File.DirAssets, "contact_image.png")
Dim conbmp2 As Bitmap
conbmp2.Initialize(File.DirAssets, "contact_image2.png")
Dim conbmp3 As Bitmap
conbmp3.Initialize(File.DirAssets, "contact_image3.png")
items.Initialize
Dim i As Int
Dim random As Int
For i = 0 To 19
random = Rnd(0,3)
If random = 0 Then
items.Add(CreateNewItem(backbmp, conbmp, "Colleague " & i, "Name of colleague " & i, 25, i*175, Activity.Width - 50, 120))
Else
If random = 1 Then
items.Add(CreateNewItem(backbmp2, conbmp2, "Friend " & i, "Name of friend " & i, 25, i*175, Activity.Width - 50, 120))
Else
items.Add(CreateNewItem(backbmp3, conbmp3, "Client " & i, "Name of the client " & i, 25, i*175, Activity.Width - 50, 120))
End If
End If
Next
CurrentRotation = -(DEGREES_PER_SCREEN * ScreenTop) / Activity.Height
ClearRect.Initialize(0,0,Activity.Width, Activity.Height)
mCamera.Initialize
mMatrix.Initialize
mPaint.Initialize
mPaint.SetAntiAlias(True)
mPaint.SetFilterBitmap(True)
DrawMe
End Sub
The sub CreateNewItem() is used to make one list item. Default B4A canvas drawing functions are used to show how well they work together with the ABExtDrawing functions.
Sub CreateNewItem(Background As Bitmap, icon As Bitmap, Subj As String, desc As String, Left As Int, Top As Int, Width As Int, Height As Int) As item3D
Dim item As item3D
Dim c As Canvas
item.Initialize
item.bmp.InitializeMutable(Width, Height)
c.Initialize2(item.bmp)
' background
Dim dstR As Rect
dstR.Initialize(0,0,Width,Height)
c.DrawBitmap(Background,Null, dstR)
' draw Icon
dstR.Initialize(15,15, icon.Width, icon.Height)
c.DrawBitmap(icon, Null, dstR)
c.DrawText(Subj, 100, 30,Typeface.DEFAULT_BOLD,16, Colors.White,"LEFT")
c.DrawText(desc, 100, 60, Typeface.DEFAULT,16, Colors.White,"LEFT")
item.Top = Top
item.Left = Left
item.Width = Width
item.Height = Height
Return item
End Sub
In the drawItem() sub all calculations are done for one item in the list. Each item will be a block that will rotate around its X-axis and look like it is rolling on the ground when the list stars to scroll. Each block will be as wide as the item normally is and the depth will be the same as the height. We’ll use the same bitmap for all the sides.
So what do we need to do to achieve this effect? In order to draw the blocks we need to draw the bitmap two times (since we will almost always see two sides of the block). We also need to have some kind of rotation variable to keep track of the main rotation. Since the blocks should rotate when the user scrolls the list and the blocks should have the same rotation (so that they all face up at the same time, see further).
Sub DrawItem(item As item3D)
Dim CenterX As Float
Dim CenterY As Float
' get centerX AND centerY
CenterX = item.Width / 2
CenterY = item.Height / 2
' get scale
Dim distFromCenter As Float
distFromCenter = (item.Top + CenterY - HalfHeight) / HalfHeight
Dim scale As Float
scale = (1 - SCALE_DOWN_FACTOR * (1 - Cos(distFromCenter)))
' get rotation
Dim RotationX As Float
RotationX = CurrentRotation - 20 * distFromCenter
RotationX = RotationX Mod 90
If (RotationX < 0) Then
RotationX = RotationX + 90
End If
' draw it
If (RotationX < 45) Then
drawFace(item, CenterX, CenterY, scale, RotationX - 90)
drawFace(item, CenterX, CenterY, scale, RotationX)
Else
drawFace(item, CenterX, CenterY, scale, RotationX)
drawFace(item, CenterX, CenterY, scale, RotationX - 90)
End If
End Sub
Finally, DrawFace is called and this is where the magic happens. Worth noting is that the code that will draw one face of the block is the same, it just depends on the rotation, so it’s extracted to a method. To draw a complete block we then simply draw two faces 90 degrees apart at the same place.
To draw a face we first translate the camera so that the face will be drawn closer to us. Then we rotate it and after that we translate it back so we don’t scale it. Keep in mind that the calls to the camera, just like the rotate, translate and scale methods on Canvas, needs to be written in reversed order, so to speak. In the code below, it is the last line that translates the face towards us, then we rotate it, and finally, with the first line, we translate it back.
The rest of drawFace is not that hard. It gets the matrix from the camera, pre and post translates the matrix and then draws the bitmap with the matrix.
This code will draw each item as if placed in the origin in 3D space and then we move the items to the correct place on the screen using pre and post translate on the matrix. This moves what we draw in 2D space without changing the perspective. We could apply the translation in X and Y on the camera instead, then the translation would be in 3D space and it would affect the perspective. We’re not doing that here because I want the appearance of a larger field of view than the fixed field of view of the camera. Instead, we fake it by slightly rotating and scaling the items depending on the distance from center of the screen.
We calculate the light and create a LightingColorFilter that we can set to our Paint object.
Sub drawFace(item As item3D, CenterX As Float, CenterY As Float, scale As Float, RotationX As Float)
' save the camera state
mCamera.save
' translate AND Then rotate the camera
mCamera.translate(0, 0, CenterY)
mCamera.rotateX(RotationX)
mCamera.translate(0, 0, -CenterY)
' get the matrix from the camera AND Then restore the camera
mCamera.getMatrix(mMatrix)
mCamera.restore()
' translate AND scale the matrix
mMatrix.preTranslate(-CenterX, -CenterY)
mMatrix.postScale(scale, scale)
mMatrix.postTranslate(item.left + CenterX, item.top + CenterY)
' set the light
Dim cosRotation As Double
cosRotation = Cos(PI * RotationX / 180)
Dim intensity As Int
intensity = AMBIENT_LIGHT + (DIFFUSE_LIGHT * cosRotation)
Dim highlightIntensity As Int
highlightIntensity = (SPECULAR_LIGHT * Power(cosRotation,SHININESS))
If (intensity > MAX_INTENSITY) Then
intensity = MAX_INTENSITY
End If
If (highlightIntensity > MAX_INTENSITY) Then
highlightIntensity = MAX_INTENSITY
End If
Dim light As Int
light = Colors.rgb(intensity, intensity, intensity)
Dim highlight As Int
highlight = Colors.rgb(highlightIntensity, highlightIntensity, highlightIntensity)
mPaint.SetLightingColorFilter(light, highlight)
' draw the Bitmap
ExDraw.drawBitmap4(MyCanvas, item.bmp, mMatrix, mPaint)
End Sub
The DrawMe() sub is the overall function to draw all the items.
Sub DrawMe()
Dim i As Int
ExDraw.save2(MyCanvas, ExDraw.MATRIX_SAVE_FLAG)
MyCanvas.DrawRect(ClearRect, Colors.Black, True, 1dip)
'MyCanvas.DrawBitmap(FormBack, Null, formR)
For i = 0 To items.Size - 1
DrawItem(items.Get(i))
Next
ExDraw.restore(MyCanvas)
Panel1.Invalidate
End Sub
And in the Panel1_Touch sub we’ll animate our list. Note that it is here that we make sure all boxes face the same. This is done by the lines:
Doing like this will make the blocks rotate DEGREES_PER_SCREEN degrees when the user scrolls the list an entire screen no matter the pixel-height of the screen.
Here is the full sub:
Sub Panel1_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
Dim DeltaY As Int
Select Action
Case Activity.ACTION_DOWN
CurrY = Y
'Log("down")
Case Activity.ACTION_MOVE
DeltaY = Y - CurrY
CurrY = Y
Dim i As Int
Dim it As item3D
For i = 0 To items.Size - 1
it = items.Get(i)
it.Top = it.Top + DeltaY
items.Set(i, it)
Next
ScreenTop = ScreenTop + DeltaY
CurrentRotation = -(DEGREES_PER_SCREEN * ScreenTop) / Activity.Height
DrawMe
'Log("move")
Case Activity.ACTION_UP
'Log("up")
End Select
Return True
End Sub
ABExtDrawing is a library I wrote to access more from the Android Drawing classes in B4A. It extends the B4A canvas so you can also use all Paint, Matrix, Region, ColorMatrix and Path functionalities.
Several sub objects are included: ABPaint: a wrapper for thePaint class ABMatrix: a wrapper for the Matrix class ABRegion: a wrapper for the Region class ABColorMatrix: a wrapper for the ColorMatrix class ABRgbFunctions: several functions to manipulate RGB values
Also two extended classes ABRectF: a wrapper around the RectF class. B4A contains the Rect class, but to use some of the functions of this library I needed the float version of Rect. ABPath: a full wrapper for the Path class. B4A contains the Path class but only exposes LineTo. ABPath exposes all functions (like addArc, addOval, etc…)
The main object is ABExtDrawing. You pass the B4A canvas to each function:
Sub Globals
Dim ExDraw As ABExtDrawing
Dim MyCanvas As Canvas
Dim Panel1 as Panel
end Sub
Sub Activity_Create(FirstTime As Boolean)
If FirstTime Then
Activity.LoadLayout("2")
MyCanvas.Initialize(Panel1)
End If
drawRim(MyCanvas)
End Sub
Sub drawRim(Canv As Canvas)
' first, draw the metallic body
ExDraw.drawOval(Canv, rimRect, rimPaint)
' now the outer rim circle
ExDraw.drawOval(Canv, rimRect, rimCirclePaint)
End Sub
The fun part is you can create all kind of Paints:
' the linear gradient Is a Bit skewed For realism
rimPaint.Initialize
rimPaint.SetFlags(rimPaint.flag_ANTI_ALIAS_FLAG)
rimPaint.SetLinearGradient2(1,0.40, 0.0, 0.60, 1.0, Colors.RGB(0xf0, 0xf5, 0xf0),Colors.RGB(0x30, 0x31, 0x30),rimPaint.ShaderTileMode_CLAMP)
rimPaint.DoShaderSingle(1)
rimCirclePaint.Initialize
rimCirclePaint.SetAntiAlias(True)
rimCirclePaint.SetStyle(rimCirclePaint.Style_STROKE)
rimCirclePaint.SetColor(Colors.ARGB(0x4f, 0x33, 0x36, 0x33))
rimCirclePaint.SetStrokeWidth(0.005)
You can also use the Save and Restore functions of the canvas:
Sub drawScale(Canv As Canvas)
ExDraw.drawOval(Canv, scaleRect, ScalePaint)
ExDraw.save2(Canv, ExDraw.MATRIX_SAVE_FLAG)
Dim i As Int
Dim y1 As Float
Dim y2 As Float
Dim value As Int
Dim valueString As String
For i = 0 To totalNicks
y1 = scaleRect.top
y2 = y1 - 0.020
ExDraw.drawLine(Canv, 0.5, y1, 0.5, y2, ScalePaint)
If (i Mod 5 = 0) Then
value = nickToDegree(i)
If (value >= minDegrees AND value <= maxDegrees) Then
valueString = value
ExDraw.drawText(Canv, valueString, 0.5, y2 - 0.015, ScalePaint)
End If
End If
ExDraw.rotate2(Canv, degreesPerNick, 0.5, 0.5)
Next
ExDraw.restore(Canv)
End Sub
And write filters like this GreyScale filter:
Sub GrayScale(bmp As Bitmap) As Bitmap
Dim bmpGrayscale As Bitmap
bmpGrayscale.InitializeMutable(bmp.Width, bmp.height)
Dim c As Canvas
c.Initialize2(bmpGrayscale)
Dim paint As ABPaint
paint.Initialize
Dim mat As ABColorMatrix
mat.Initialize
mat.SetSaturation(0)
paint.SetColorMatrixColorFilter2(mat)
ExDraw.drawBitmap2(c, bmp, 0, 0, paint)
Return bmpGrayscale
End Sub
Because of all the possibilities this library has, I may do some more articles on this blog.
Ice Cream Sandwich is coming and it seems there are a couple of changes for us developers. The new Android version will bring phones and tablets closer together. Google has put a tutorial online so we can start preparing us.
The Ice Cream Sandwich release will support big screens, small screens, and everything in between. This is the way Android will stay from now on: the same version runs on all screen sizes.
As for now, a Honeycomb application runs only on big screens and it didn’t need to think about smaller screens. In ICS, the developer will need to prepare for different layouts.
In the tutorial, Google gives tips on how you can make a layout that works well on both type devices.
Developers can already start to include some of the changes. ICS will be available around the beginning of November. Some say the Nexus Prime will be launched on November 3th and this device will have ICS.
Wondering how Basic4Android will cope with those changes.
After playing around with AR, I’ve decided to make a B4A library from an existing AR library: NyARToolkit (http://nyatla.jp/nyartoolkit/).
Some functions did not work properly and I had to rewrite some of them so they could fit in a B4A library. I also wanted to use the GLSurfaceView from Andrew Graham in basic4android. To do this, I had to extract everything that had to do with 3D and OpenGL. It took some fiddling around, but I think I cracked it.
With a couple of lines in b4a, I can now find the markers and put a 3D model on top of it. The speed and accuracy of the NyARToolkit is ok and it is certainly possible to make some fun projects.
Just to play around, I’ve put one of my favorite superheroes on top of the marker. Batman to the rescue!
Example of the code needed to get the markers:
Sub ABAR_MarkersFound()
Dim Vect As ABARVector2D
Dim a As Int
Dim b As Int
Dim Markers As List
Markers.Initialize
Markers = ABAR.GetMarkers()
Dim corners As List
corners.Initialize
Dim Msg As String
FoundMarkers = markers.Size - 1
For a = 0 To foundMarkers
Mark = Markers.Get(a)
conf(a) = Mark.Confidence
counter = 0
Msg = "Marker: " & Mark.ARCodeIndex & CRLF
Msg = Msg & "x:" & Mark.Center.x & " y:" & Mark.Center.y & CRLF
Msg = Msg & "Confedence:" & Mark.Confidence & CRLF
Corners = Mark.Corners
Vect = Corners.Get(0)
Msg = Msg & "Corner1=x:" & vect.x & "y:" & vect.y & CRLF
Vect = Corners.Get(1)
Msg = Msg & "Corner2=x:" & vect.x & "y:" & vect.y & CRLF
Vect = Corners.Get(2)
Msg = Msg & "Corner3=x:" & vect.x & "y:" & vect.y & CRLF
Vect = Corners.Get(3)
Msg = Msg & "Corner4=x:" & vect.x & "y:" & vect.y & CRLF
Markfound = True
For b = 0 To 15
tmpresultf(a,b) = Mark.resultf(b)
tmpcameraRHf(b) = Mark.cameraRHf(b)
Next
Msg = Msg & CRLF
useRHfp = True
drawp = True
Log(Msg)
Next
glsv.RequestRender
End Sub
One of the libraries I wrote for Basic4Android is ABPhysicsEngine. This is a full 2D Newton engine. Games like ‘Angry Birds’ and ‘Cut the rope’ are made with similar engines. This one is very easy to use within B4A.
For this tutorial you must download version 1.1 of the library from the B4A forum!
Here is a little ‘anti-stress’ game I made with the library in B4A. You have to tap very fast anywhere on the screen and all kind of balls will appear and fall down on the two running Garfields. No winning or prices, but this is for learning purposes anyway.
For the Augmented Reality project, I’ll need to grayscale the image.
There are 3 types of grayscaling available in the class but the one I’ll need will be BT709. It turns out it gives the best results for searching glyphs.
It’s a simple conversion but already we have something to take into account when we use Java: the byte type. A byte in java has a value of -128 to 127 instead of 0 to 255. Therefor we will need to do & 0xFF when we return the grayscaled bitmap.
I’ll have to remember this for future calculations on the imageData array!
Here is the class. De imageData is kept in memory as I’ll need those pixels anyway to do the next step: Edge detection!
I’m looking into Augmented reality on my Android phone and tablet. The main functions will be written in java and then used as a library in B4A. I’m looking into AForge.NET and I’ll probably will port some code from their C# library to java.
The first step I do is searching for glyphs in an image. This is an example of one of those glyphs:
For a human it is no problem to locate the glyphs, but for a computer it is quite a challenge.
These are the steps I’m planning to make:
1. Downscale the image to a smaller picture (for speed)
2. Convert the picture to an array of pixels
3. Greyscale the image using the pixel array
4. Run some Edge detection algorithm to help me find the blobs
5. examine the blobs and look which ones look quadrangular
Don’t let the name fool you! Although being very easy to use, it’s a powerful language. The syntax is very similar to the good old VB6, but when compiled its pure Java. Even more, you can write your own libraries in Java and use them in the IDE.
An excellent feature of B4A is the B4A-Bridge: simply the best way to debug your code line by line fast. Yes, I said debug line by line! You can place break points in your code and read the value of variables. I did mention it looked a lot like VB6, didn’t I 🙂
I’ve written some libraries in java for B4A and they are freely downloadable if you have a license. And why shouldn’t you? You can have B4A Enterprise for the ridiculous sum of $99 USD.