A feedback case I got from one of the users of ABMaterial, Herbert, was the question how ABMaterial for B4X coped with SEO-optimization. To be perfectly honest, I hadn’t really though about it. I had a couple of things already, like headers, bold text, a page title and description.
As any good programmer, if it looks nice, is user friendly and works as expected, my work is done and users will find and like it. No?
And it kept me thinking. So this morning, lying awake at 4 o’clock (sleeping is highly overrated IMHO and an invention of the Bed Consortium, but I’m sidetracking), I decided to learn more about SEO and how it could be implemented in ABMaterial for B4X.
Herbert gave me some links, so I started reading up.
Looked like I had some things right already, but ABMaterial could use some polishing.
For starters, I added some extra properties to the ABMaterial page object that will be saved in the generated html file:
pageTitle: very important, pick good keywords pageDescription: keep it around 140 to 160 chars pageKeywords: a comma delimited string containing your page keywords pageHTMLName: it is always index.html in ABMaterial, but it’s better to give it some name using keywords, like ‘abmaterial-custom-component.html’, use hyphens (-) between words to improve readability pageSiteMapPriority: a value between 0.00 and 1.00, see further pageSiteMapFrequency: how frequently the page is updated (never, none, always, hourly, weekly, yearly, …), see further
Headers:
Covered! ABMaterials labels can have headers like <h1>, <h2> so we’re ok. Tip: create only one <h1>!
<h1>Most Important</h1> <h2>Second Most Important</h2> <h3>Third Most Important</h3>
Bold:
Got it: You can use markers like {B}{/B} in labels to set text in bold/strong.
Use tag in a image:
Ah, needed some changes. I misused it. Thinking ‘who the #?@! can’t show images anymore these days‘, I used it as an image toggle property. Changed it now so it can be used properly.
Hyperlinks:
Added some extra markers {AS}{/AS} in the ABMLabel Component so you can add a title.
The Sitemaps protocol allows a webmaster to inform search engines about URLs on a website that are available for crawling. ABMaterial has the possibility to generate a sitemap.xml file and a robots.txt file (for sites like Ask.com).
What does it look like Alwaysbusy, I hear you ask. Well, something like this:
To generate this is easy in ABMaterial, and needs just a couple of things:
In ABMShared, add a property public AppPublishedStartUrl as String = “http://yoururl.com”.
In the initalize() method of ABMApplication, add ‘ABM.AppPublishedStartUrl=ABMShared.AppPublishedStartUrl.
In the BuildPage() method of each page, set page.PageHTMLName=”your-good-keywords.html”
Also in BuildPage(), add page.PageSiteMapPriority = “0.50” (number between 0.00 and 1.00, and don’t set them all to 1.00, that makes them equally important)
Also add page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_MONTHLY (use one of the contstants)
If you use a ABMNavigationBar, update the url of each sidebar item in ABMShared, e.g. page.NavigationBar.AddSideBarItem(“Contacten”, “Contacten”, “mdi-action-dashboard”, “../StartPage/your-good-keywords.html”)
In ABMApplication, also change your InitialPage=”your-good-keywords.html”
In ABMApplication, change ‘index.html’ in the AddPage() method to Page.PageHTMLName
When you start your app, the sitemap.xml and robots.txt files will be generated next to your apps html file. After publishing it to your final site, you let the search engines know you want to submit your site.
You should be able to use these sitemap-submission URLS. Put the full URL to your sitemap, including http://, after the = sign:
So, you’re already one step ahead of many other tools when you use B4J and ABMaterial!
Of course, your content will be the most important part to atract users and get high rankings in the search engines, but it never hurts giving them some help.
If any SEO expert reading this article has some other ideas, please post them.
ABMaterial 1.05, supporting all this, will be send to the donators early next week. Quite some goodies included in this release!
You all know me as a Xojo fanatic, but lately I lost a bit of interest because the focus of the last year was so much about Apple, and Windows/Linux was a bit forgotten.
So I got back to my other favorite, B4X. And what a pleasant ride it has been so far! It truly is a far to little known gem with so much power under the hood. Creating apps for Android, iOS, Desktop and Server apps is a blast.
Being able to share code between devices, having a simple but powerful (free) IDE, a very active community and a developer that really listens was quite refreshing.
My next project was writing a Material Design framework for Web Apps, without having to write a single line of HTML, CSS or JavaScript. And quickly, it became obvious B4J was the one tool that could do it. ABMaterial was born.
Using very little code, you’re able to write beautiful (based on Material CSS) and powerful (B4J really stands out here) WebApps. The enthusiastic crowd at the forum has pushed me through several nights continuing to write on the framework and has made me, although some polishing is still needed, a very happy camper.
It will be very useful to write WebApps (automatically adapting to the screen size of your device), and I even see it to be great to write nice interfaces for your Raspberry Pi projects. It consists of 25+ ‘themeable’ controls and some easy-to-use helpers to design your layouts.
To prove B4J is really on edge with the latest technologies, Erels latest release 4.0 for Christmas now supports HTTP/2. Benchmarks showed a big difference in speed and will undoubtedly be very useful for mobile devices.
I’ve set up a live demo of ABMaterial on my modest media center computer here. So, be gentle with her…
Or if you want to try it out yourself, head to the B4X website, download your free copy of B4J and go to the forum to download the ABMaterial framework. The current ‘public’ version is 1.03. Donators get updates (1.04 as at time of writing) about 2 to 3 weeks beforehand so I’m able to better control questions/feature requests or bugs (aaarrhh!).
I wish you all some very happy Holidays and I hope I’ll see you all next year for some more fun programming projects!
This weekend I’ve found some time to setup my testing environment for B4i, the latest brainchild of Anywhere Software. I must say, being a novice Mac user, setting everything up went very smooth.
The only parts I got into some trouble was my own fault, as I went though the setup tutorials, videos and Beginners Guide just a little bit to fast. Eager to get started, I skimmed through them and forgot some important steps.
First I paid my obligatory taxes to Apple: $99/year. (Programming for Android only sets you back with a one time fee of $25). Only a couple of minutes later, my account was activated.
One part that may have gone a bit to fast for a first time Apple developer was the creation of an App ID. As Erel had his system already setup when he made the video and could just pick an App ID, he did not show us how to create it in the first place. It is mentioned further in the post you can create a single wildcard App ID if you put a .* at the end, but this was not very clear from the tutorial. So, this is how I did it:
Click to enlarge
Another RTFM moment was when I wanted to install the B4i-Bridge app on the device. I started watching the video and forgot to read the bold sentence above it:
Before you install B4i-Bridge you must install the B4I certificate. This step is not shown in the video. Open Safari (device browser) and navigate to: www.b4x.com/ca.pem
Clearly stated, but hey, I was in a hurry…
I first tried the Hosted Builder option to compile the app. Very smooth and a excellent alternative for Windows developers who do not own a Mac. And for $26 a year, a bargain.
But, as I want to experiment with creating libraries myself in Objective-C, I wanted to install the local MacBuildServer. Again, following the tutorial, everything went very well. Downloading XCode took most of the time.
One note: Make sure your Mac is in the same IP range as the rest of your development environment. At first, the Mac had IP 192.168.40.116 while the rest was in the 192.168.1.x range. So it didn’t work.
The rest was pure cosmetic. I added an shortcut on the Mac to start the MacBuildServer, and one on the PC side to shut it down.
Creating the shortcut on the Mac side went like this:
Open up a terminal
go to the folder where you unzipped the macserver-aa (in my case, it’s on the desktop, so it looked like this:
$ cd desktop
$ cd macbuilder-aa
create a text file
$ shout start.command
add the following lines (adjust the cd to the path where your MacBuildServer is)
#!/bin/sh
cd /Users/Alwaysbusy/Desktop/macserver-aa
java -jar B4iBuildServer.jar
save and in the terminal type:
$ chmod -x start.command
Right click on start.command, pic ‘Get Info’ in the menu and rename it to something like ‘B4i Build Server Start.command’.
Click ‘Hide extension’
And change the icon to a nice B4i one. I’ve ripped the B4i icon from the exe (sorry Erel) and saved it as a .png. In case you need it, here it is:
Open the png on the Mac in preview and copy it (Edit – Copy). In the ‘Info Panel’ of the command file, click on the icon until it gets a blue rectangle. Then you can do ‘Edit – Past’.
In my case, it looked like this:
Coming from Windows and being used to creating .bat files, this is all rather complicated on a Mac I must say.
On the PC side I created also the icon to shut the MacBuildServer down. Enter http://:51041/kill in your favorite browser. Create a bookmark and drag it to your desktop. Rename it to something like ‘B4i Build Server Kill’. You can also change the icon:
Right click on the shortcut and pick ‘Properties’
Press ‘change icon’
Browse to where you have installed B4i
Pick B4i.exe and select the icon
So (besides my shortcut creation problems on a Mac), setting up B4i is a breeze! I’m ready to add some serious iOS programming experience to my portfolio.
Great news from Anywhere Software! B4i (a development tool for native iOS applications) is released today.
I had good hopes we would have an early Christmas this year from Erel, but it looks like he has outdone himself (again!).
From its beta release only a couple of weeks ago, B4i looked very stable and already feature rich. Knowing how the B4A (Basic4Android) community quickly has grown very solid, with many contributors creating all kind of great libraries, I have no doubt B4i will be any different. Congratulations Erel with another state-of-the-art development tool!
But let’s give the master himself the stand now (from the official site):
Erel: B4i follows the same concepts of B4A and B4J and provides a simple yet powerful rapid application development tool for iOS applications.
Requirements
– Apple developer account (costs $99 per year).
– An iOS device running iOS 7+.
The compilation process requires a Mac computer. You can either use a local Mac computer or use our Hosted Mac Builder service (currently costs $25 per year).
Documentation
– Tutorials: http://www.basic4ppc.com/android/forum/forums/ios-tutorials.63/
You should start with the following three tutorials:
Creating a certificate and provisioning profile
Installing B4i-Bridge and debugging first app
Developers who use a local Mac: Local Mac Builder Installation
B4i can be purchased from the Anywhere Software Store for just $59!
B4i includes two years of free upgrades.
Hosted Mac Builder
The builder service allows you to develop iOS applications without a Mac computer.
All of the development steps can be done with the builder service except of the final step which is uploading the application to Apple App Store. This step requires a Mac or a service such as MacInCloud.
Note that the builder is currently limited to projects of up to 15mb.
Breaking News! Erel has put up the first B4i app on the Apple App Store. I have a feeling we won’t have to wait much longer until we can build iOS apps in this wonderful tool.
While Xojo keeps saying ‘it’s ready when it’s ready’ (it’s getting old Xojo…), B4i is going to take the world by storm! Tools by Anywhere Software have proven to be very stable and production ready by its first releases, so you better start thinking what your first app written in B4i will be like. I know I am…
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!
Flappy Bird has been massively popular. But one key thing about it, and one reason why its so popular is its simplicity. Based on that fact, I’m going to run a short series of videos and blog entries showing my efforts to write a Flappy Bird clone, both for PC and Android.
I will be using Blitz Plus for the PC version. I’ve mentioned this language before as it’s a brilliant tool for writing which simple idea for games to see how they’ll work in practice. You can then either wrote your whole game using Blitz Plus or in another language if you’re requiring fancy graphics effects or writing for a different platform like Android. Blitz Plus can be downloaded for free at http://www.blitzbasic.com go to the products page and follow the instructions there.
For the Android version we’ll be using Basic4Android . As it’s an easy language to use…
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 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.
2013. When I was a teenager this looked like a magic number. It was the eighties and a golden age for science fiction. We were born at the exact right time. The 21st century was just around the corner and we would get a glimpse of all the marvel that was going to unfold in front of us. I remember my brother and I making some sandwiches just before six o’clock so we wouldn’t miss a thing of our favorite show: Star Trek! When the opening sequence came on, we left planet Earth for 45 exciting minutes. Our heroes were solving an interstellar mystery every week: a PADD in one hand, a Tricorder in the other. Violence was wrong and only used as a last resort. Phasers to stun! We loved the stories and fantasied about the new technology exposed to us. And when dad gave us our first x86, the world was at our fingertips…
And it looked very promising all through the nineties. HAL spoke to us (with a much friendlier voice) and the internet became our realm. Every geek in the technology business had some sort of Star Trek memorabilia in their office. The stories of the writers/visionaries were coming alive! Part of our gadgets today came from the imagination of someone holding a pen in their hand. The PADDs became iPads and our smartphones became the new Tricorders. After TNG we continued our journey with DS9, Voyager and Enterprise. (If you come across the DVD boxes of any of those series, don’t hesitate. Buy them and you’re in for a real treat!)
And then it stopped… almost at the same time the final episodes of this great show rolled out on our TVs…
The first decade of the 21st century was nothing like what we were dreaming of. Yes, we got some of the gadgets our heroes used to save the galaxy, but at a price. Literally. How did the Ferengi ever come up with the Rules of Acquisition? I think they found the book on earth. Every ‘new’ thing is just like the old one. I don’t care for thinner or more lightweight. (I know your wet dream is to let us buy just air someday!)
Don’t get me wrong: I’m not a synic. I just do miss my shows. I do not need another ultra-violent, incomprehensible and randomly twisted serie that is cancelled way too early. I want a good story with a wealth of imagination that makes me wonder when I’m lying in bed. Images that let me play around with new ideas and make me want to ponder on great inventions. Reaching for the stars at warp 9.7!
So this is a cry out to all science fiction writers. Please, please let us dream again. Humanity needs a new Star Trek. Desperately…
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.
Some people asked me what the output of 12Scan looks like. Well, it’s a plain TXT file with the matrix in it. A zero if it is not checked, A one if the user checked it. Any other program can then use this data how they want.
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