FTC and Vuforia

If you’re reading this, chances are you’re part of an FTC robotics team and trying to figure out Vuforia.  It looks crazy intimidating, but it really isn’t that difficult to get setup and running.  Once its going, you can play around with programming it to recognize other elements of the game field to aid in autonomous navigation.

Below is a quick tutorial I put together as I worked through the entire process.  Follow this step by step and you’ll be able to get the bot’s camera to recognize elements of the field.

To implement Vuforia, you’ll need to create an account and generate a license key.  This is free to do, and quite easy.

Register and obtain a license key

  • Register for a Vuforia developer account here – https://developer.vuforia.com/user/register
  • After you’ve completed the registration, check your email and click on the link to validate your account
  • Log into the Dev Portal after its validated
  • From there, click the Develop tab which will take you to the license manager screen.  If that doesn’t work for some reason you can just click this link vuforia_develop_tabhttps://developer.vuforia.com/targetmanager/licenseManager/licenseListing
  • Create your Vuforia license key
    • Click – Add License Key
      • Choose Development
      • Name it (use your team name or bot name)
      • Device Type : Mobile
      • License Key : Develop – no charge
      • Click Next
      • check box to confirm the agreement, feel free to read it first if you have time 🙂
      • click Confirm
  • Keep this browser window opened, we’ll need it in about 5 minutes.
Lets Get To Work!
Now that you have your key copied we’ll work in Android Studio and create your new class.
Create a new class for your project
    • open Android Studio
    • Navigate to FtcRobotController > java > org.firstinspires.ftc.robotcontroller > external.samplesandroid_studio_project_class
    • find the ConceptVuforiaNavigation class
    • right click on it copy the class
    • Navigate to TeamCode > java > org.firstinspires.ftc.teamcode  (you can see two of our other opcodes listed below, you won’t have those.android_studio_team_code
    • Right click on org.firstinspires.ftc.teamcode
    • Choose Paste to create a new class here
    • A dialog box will pop up asking you to give your new class a name ( I chose SciTechVuforia )
    • If the class didn’t open when it pasted, double click on it to open it.

    Enable the opcode

    • The new SDK allows you to easily include opcodes from the actual class itself, instead of having to register it in a separate file like last year.  To enable your new class, scroll down find and comment out or remove the @Disabled line by either deleting it or adding // in front
      for example comment it out like this :    //@Disabled
    • You can also set the name and group for your new opcode with the following line
      @Autonomous(name=“Concept: Vuforia Navigation”, group =“Concept”)
      We’ll just leave this as is, so on our Driver Station, when we get there shorty, you’ll see “Concept: Vuforia Navigation” listed.
  • Now lets add your Vuforia License Key
    Scroll down  a bit and find the line that reads:
    parameters.vuforiaLicenseKey = “”
  • vuforia_license_keyCopy your license key
    • Flip back to your browser where you have Viewforia opened on the License Manager Screen.  If its not there, log in and click the Develop tab.
      • click the name of the key you created and it will display a screen like the image on the right (I’ve smudged out mine for security reasons)
      • select and copy the entire key
  • Flip back to Android Studio
  • Paste your key between the quotes leave the default concept code as is, this will use the back facing camera (NOT the selfie camera)save your changes
That’s all the code and setup you need to do.
Lets Test your set up
  • plug in your robot controller phone to the computer
  • From the Android Sudio menu bar choose Run > Run ‘Team Code’ and compile the app to your phone
  • android_sudio_run
  • When the build is successful, and like normal you see the app open on the phone, disconnect it and hook it up on our bot
  • On the driver station phone :
    • choose autonomous
    • pick Concept: Vuforia Navigation  (or if you named it something different above)
    • tap init
    • a rectangle for the camera image will display, this is a good thing
    • tap start
    • a camera image should display on the robot controller screen, using the back camera (not the “Selfie” one)
    • telemetry data should appear on the driver station phone
  • If this is working, Congratulations, your code is all good, no typos.
Test the image recognition
stones_chips_locationThere are images you can use to test this located in the FTC App SDK you’ve downloaded.  Open up Explorer (or Finder on Mac) and find the directory  /ftc_app/docs/media.   In here there will be two images, stones.jpg and chips.jpg.  For now, just choose to open one of them on your computer screen (we’ll save some paper and won’t print these).
Now the fun part.  Turn your camera so it points to the image on your screen, and if you look on the robot controller phone screen, you’ll see the image with a superimposed blue,red and yellow axis.  The phone recognizes the image and displays the X,Y,Z axis over it.
Look at the telemetry data on your driver station, and you should see one of the targets is visible, along with telemetry data about the camera position in relation to the image, and “the field”.
The SDK comes with a target database that contains the real Vortex images, so you don’t need to train the app to recognize those.  You do need to make some changes to your code, but I’ll keep that for the next tutorial.
Good luck!



Code it right

Part 1 – The Idea : Adding Machine Learning to RT (Request Tracker)

We use RT, or Request Tracker from Best Practical, and it works very well.  The issues we have all stem from the people using it.  To give you some background, our department (Computing Services / ITS) is made up of 4 individual units I guess you could say and they make up our large dysfunctional family.

I’ll be very general from now on, as to not point fingers and call any one particular group or person out.  There are a few issues with the interaction of these groups when working “together” with RT.  These seem pretty petty on one level, and could be solved with a “How we use RT” document (cough *policy*), however they’re as real as this blog post.

When we first started using RT, there was some basic training on its features, how tickets moved through the system as a whole, how to pass off and steal tickets if needed, etc.  We never had a document effectively telling us how to use it institutionally.  There was no RT Strategy or grand vision, it was installed to be a ticket system and possibly knowledge base.  Due to this oversight, each group uses RT differently, and to be honest, some people within each group use it differently depending on what they support

There is a culture that each group works autonomously, meaning groups rarely work together on things.  Granted, if there’s a database issue, and the DBA finds an underlying network problem, sure, those two will work together to get it fixed, but in general there are chasms between us which leads to the next issue.  People in group B don’t appreciate being told by group A (aka phone calls, emails, personal visits) to go look at RT because there is a ticket out there that may (or may not) apply to their expertise. Wait, I know what you’re going to say, they should monitor RT more so they can jump on the ticket and not get nagged.  The problem here is RT monitoring can’t be a full time job, and if you’re working on something, you probably can’t be looking at RT at the same time.  This issue caused such a rift that it changed how group A contacts group B, and the way A process tickets for B. Craziness.

Another issue is that tickets coming into group A were being assigned to people in group B, when A has no idea what B does, and often times mis-assigned tickets.  Again, sounds petty, just removed yourself from the ticket, or reassign it yourself.  The heart of this issue is that typically not enough information was in the ticket and a quick assumption of who does that job was made and the ticket was assigned to the wrong person.  That not only inconveniences the new owner of the ticket, it also delays the resolution because it gets passed around until it lands on the right one.  In this scenario, who’s job is it to request more information?  The assigner, or the assignee? People in general don’t appreciate getting work handed to them by people that aren’t they’re boss, and for the record the boss didn’t like his people being assigned things either.

To sum it up, everyone seems to use it a bit differently, we don’t like to be nagged by another group and especially don’t like getting work added to our plate by just anyone.

Wow, right?  What a mess.  Again, kind of petty, yet a bit serious.

How do you deal with personal, and personnel issues like this?  Create policy, rules and regulations, a SOP manual for RT and have more people pissed because they’re being forced to change how they do their job? (which most everyone does well btw).

Enter Machine Learning.

I was out splitting wood a couple weeks ago and thought about all of the above issues and how to change RT to deal with them.  Lets forget the policy discussion because that still has to happen and even after it does if all of the above procedures are taken care of, there are still going to be issues monitoring and mis-assigning tickets, and everyone will still have the job of assigning and taking ticket from the various queues to deal with.

What if something could be built to analyze a ticket when it came in and determine the best person to assign it to.  That simple sentence, eliminates the two major issues above, monitoring and (mis)assigning.  Sounds like a job for some machine learning, or keyword relevance, or context analysis, or a mixture of all three.  How difficult would it be to build a plugin for RT, or bolt on something to analyze and route tickets properly.

I bounced this off of a few other people here, including a couple professors, one of which I took an Artificial Intelligence course from.  They loved the idea and both wished their summers were free to help built it 🙂  I do have their support to hit up for help.

RT is the perfect application to try this with too, because it can operate using email.  Here’s the concept –

Anytime a new ticket comes into RT, an email with all the ticket information is sent to a special address setup for this.  The analysis system monitors that mailbox and pulls in new emails, analyzes them and determines whom the ticket should go to.  Currently this analysis is a black box, and could contain any set of rules, logic, Natural Language Processes, etc.  Email goes in – best match(es) come out.

At first this system, we’ll call Sherlock (because he’s awesome), will analyze a ticket and come up with the person or persons it thinks is a good match.  It will email those people on its own, not using RT, to alert them to the new ticket it thinks falls within their expertise.  The email contains a link to the ticket, a couple response links, and a “Pandora – why did I get this” section that shows the rules it used to determine why it thinks this is for them.

For example, lets say a ticket came in and Sherlock deduced that Bob and Jon may be potential owners. Bob and Jon both get emails with a link to the ticket.  They click the link and view the ticket in RT.  If this indeed is correct and they should be the owner, they click the “yes this is correct” link/button in the email message and that is used to reinforce the rules Sherlock used.  If this has nothing to do with them, they click the “no, this is not correct” link and conversely this downgrades the rules used.  The no link can also (if desired by the user) ask 2 more questions –

  1. who should this ticket be assigned to
  2. what keywords or phrases can help me process this better in the future

Often times we as humans can read into text, get the idea of what the person means, realize that they called one system something else.  Maybe two or more systems are integrated and I can tell which one they’re accessing by the description of what they were doing, or by the URL or error message.  So asking #2 above will be helpful in teaching Sherlock those nuances.

Sherlock can be extended to actually request more information from the user before anyone ever sees the ticket (unless you’re one of the RT hawks that constantly lives in RT).  For example, a ticket comes in and someone says generically, I received an error when I was filling out the vehicle request form. We know that error could be anything, literally.  Sherlock could determine there is no error message in the ticket, nor a url and email the user back and request they paste in the error message and url.  This can be expanded and we can have Sherlock ask for a multitude of information we may need to fix the issue, when this information is also necessary to figure out who to route the ticket to.

Notice NONE of the above is not affecting RT at all. Its removed the nagging from group A, because now its a bot that is gently asking if this is yours, and if not you can help it learn why.  It alerts the “proper” people of new tickets, eliminating the constant monitoring of RT and reading many, many tickets that have nothing to do with you.

After a period of time, its accuracy should be pretty good, and with RT’s email interface, can generate an email back to RT and assign the ticket.  When doing anything to a ticket in RT, Sherlock will always add a comment to the ticket with its Pandora disclaimer, so you know why you were assigned.  That comment will also contain the yes/no links allowing Sherlock to be continually trained.

As I move forward with this project, I’ll use this blog to track my progress, and you can all view my successes and failures, and watch me learn all about NLP and content analysis, and who knows, maybe the system will make us one big happy family again.


Code it right

Whoa. Its been a while

How are you doing?  It looks like its been quite some time since I’ve posted and people have asked me multiple times what I’m up to.

Here’s a quick rundown

I started the Jadu Developers Network, specifically for, well, um, Jadu CMS developers, yea I know, not really a creative title : http://jadudev.net

I’ve created a new product called conferenSpy, a type of concierge app for conference planners easing the mundane collection and maintenance of venue information, tracks, track leaders, presenters, presentation information, etc.   You can see a live session list for a past conference here Below is a screen shot of the main dashboard.

conferenSpy Dashboard


The best part is that its fully integrated into a mobile app for attendees to use throughout the conference.  Works offline and/or can sync automatically to update itself or on demand if necessary.

PABUG Home Screen PABUG Home Screen PABUG Slide Menu PABUG Floorplans PABUG About Screen

I’m also involved with SciTech High School in Harrisburg’s after school robotics program teaching kids to program using robotics.  The class is also involved in FIRST Robotics Competitions, and below is a picture of one of our bots climbing up “the mountain” and from one of the state qualifier competitions. You can see the mountain the bots have to climb.

robot climb  competition field Staging area




As a side project, I’ve built a home arcade system.  I LOVE classic arcade games, and now I can play anytime I want.

original cabinet side original cabinet control panel before buttonscontrol panel wiring  control panel buttons installed control panel installed

I had some guys over to play and realized that you couldn’t see the screen unless you were hovering over a shoulder.  For a couple people this isn’t a problem, but when you have 5 or 6 guys over to play, its fun to talk trash about whomever is playing at the time.  So I installed a 2nd monitor card and cloned the display 🙂

spectator monitor

I guess that’s about it for now.


Code it right

PASFAA 2014 Conference App

pasfaa_01_splashI’ve completed work on this year’s version of a conference app for PASFAA.org‘s annual conference. This time around, I completely started over, built from the ground up to be a nice looking, functional and helpful app.

The focus this year was more on the attendee user, and exposing functions they would need to enhance their conference experience.  One of these key features with this release is a Up Next section on the home screen. This little gem is a rolling list of sessions happening at this moment and upcoming in the next hour.  If you happened to have bookmarked sessions you’re interested in, these are highlighted in this list, so you can always know where you need to be.  And along those lines, I’ve integrated floor plans as well.  From Session Details, you can tap and view the floor your session is located on.

The Conference Contacts is a cool new feature.  How many times you have you met someone at a conference, swapped business cards only to find out you lost it, or left it in the hotel room. The app solves this problem.  When you want to remember an attendee, you can find them in the Attendees list and add them to your Conference Contacts.  You can even send them a text or email message from within the app to arrange a lunch meeting.

As most conferences are, this one is highly sponsored, so PASFAA wanted banner ads for those sponsors at the bottom of a handful of screens.  This was fun to build actually because they continue to cycle all throughout the app.

So I mentioned this was built from the ground up.  since I was starting over, I wanted some new “hip” features like the slide menu, toast notifications, etc.  I decided to use Titanium Appcelerator’s MVC framework Alloy.  You can see from my past post in March, I was just starting out with Alloy, and in six months time, I learned enough to produce a complete app.  Actually, truth be told, it was a somewhat painful 6 months, even thought there is a lot if information on the web, it seems there are many proof of concept type apps, widgets and modules that aren’t really supported anymore.  So even if you found exactly what you wanted to add to your app, if it didn’t work, you were kind of on your own.

I also built this to sync with my server, so PASFAA admins can log in, add/edit sessions, attendees, notifications, and partners and they’ll get pulled down to the device.  More importantly- it also works offline because we have all experienced sucky / terrible / non-existent internet at most venues, so it was important for it to work under various conditions.

I’m pretty proud of this app and its functionality.  Its currently waiting at the App Store, and I’m struggling to get the Android environment setup and then I’ll push it to Google Play as well.

UPDATE:  They’re both live and available to use

Here’s my fun “little” app description :

Main Features:

Next Up!
Lets face it, you need to know where you’re going, before the next session starts. At a quick glance at the Home screen, you can view the sessions happening now, as well as the sessions coming up in the next hour. Your bookmarked session are highlighted so you can easily see where you’re headed, and change your mind if you get there and its not what you were expecting. This feature is priceless.

Works Offline!
We all know the internet connection at many venus isn’t the best, so this app works offline until you have a connection. All aspects of the app – sessions, attendees and notifications will all sit patiently until you’re connected. The next visit to that screen will connect and pull down any updates that may have happened. Chances are, there weren’t any, but if there were, we’ll grab ’em and update your lists.

Complete session Information
You want to know details about the session you’re headed to, and we want you to be well informed as well. Each session displays a plethora of information for you to consume including the date and time of the session, presenter information, a full session description, and a link to the proper floor plan. Pretty convenient. You don’t have to remember if Royal III was on the first or third floor, just tap the link and the app will show you.

Bookmark your sessions to build your own schedule
Its always nice to have your days setup, and you can do this with the app. Just view the session details, and tap Bookmark Session and it’ll be added to the My Sessions screen, and will also be highlighted in the Up Next section on the Home screen.

Which Floor?
Each session details screen links up to the proper floor plan to help you find where your next session is. Floor Plans can be paned and zoomed to quickly scan for your room.

Attendees and Contacts
– Have you ever met someone at a conference, exchanged cards only to lose it later? Just find the attendee in the app, and add them to your Conference Contacts. From here you can send them an SMS during the conference to meet up for lunch, or send them an email.

This app was built with you, the conference attendee in mind, and will aid in your enjoyment help you get the most out of the conference.

Available In the App Store google-play-logo

In the meantime, you can drool over the screenshots that I’ve prepared for the stores.

To report bugs or support needs please : contact me

pasfaa_01_splash pasfaa_02_home pasfaa_03_slidemenu pasfaa_04_floorplans pasfaa_05_about

And of course – an app is not complete unless it has a Quick Tour to explain how it works, so I’ve included one of those as well.

step1 step2 step3

Code it right

Titanium Alloy Newbie –

I’ve started playing with Titanium Alloy from Appcelerator.  There are some things that most tutorials don’t cover, and as I struggle through learning this I’ll post what I’ve learned.  Yes, these may seem silly once you know what you’re doing, but hopefully it may help someone learn this a bit more quickly.

Once I installed Studio and upgraded to the latest SDK (3.x), from the Getting Started panel, you can scroll down and perform a one click install of some sample apps.  I chose the ToDo list to play around with.  If you do this, be sure to choose the one for Alloy because there is also a ToDo list for commonJS (standard Titanium I call it)

I ran the app to see what it does, and then started looking at the code. At first I thought it was multiple screens and saw the header block in index.xml and thought that was pretty inefficient. After looking at the other files, I realized I was wrong and just has some slide up views.  If it did have multiple screens, I may want to include the same header on each screen.

Why would you want to do this?  I had, in the past, built an app that had the client’s logo in the header of each screen.  That was built long ago with Rhomobile, and it did not allow you to modularize things like this, so I had a pile of duplicated code across the app, which is problematic if you had to alter it at all.

There wasn’t anything I found easily to tell me how to include other code, because I’m new and had no idea what to search/look for and didn’t know the terminology. I had no choice but to start messing around, examining other example apps, and snips of code.

What I found was the <Require> statement, which is a little further down in index.xml.  When I first tried this, I copied that line, changed it to header, and it didn’t work, go figure.  I’ve since found an example in the docs (I know, right?) that nudged me in the right direction.  That page is here ( http://docs.appcelerator.com/titanium/3.0/#!/guide/Views_without_Controllers ) if you’re interested.  I know I actually ended up needing a controller, but more on that in a bit.

What I ended up with was this :

<Require id='index_header' src='header' type='view' />

The id name is arbitrary, I named it index_header since it’s located in index.xml.  What is important is the src, and type.

I commented out the entire header view in index.xml and added the line above.  I copied that header view block into a new file, header.xml and placed that in the views directory. Now in my mind my index.xml is including my header.xml file – perfect.

Not so much.  You would hope this is enough, and typically it would be if it were a simple header, but this block of code allows you to click the + icon to add a ToDo item.  That icon you can see in the new header.xml file contains an onClick event.  Ends up I need a controller after all to deal with this onClick.  A controller is just a javascript file that has functions you’ll call.  These may be simple ones like the addToDoITem, or something more complex like syncing changes t a remote database.

To create the controller I needed, in the controllers directory, I created a file called header.js (to match the .xml file).  I opened the index.js file and copied the addToDoItem() function and I renamed the original one in index.js just to be sure there were no collisions.  At this point in my learning, I’m not sure if you need to do this, I’m guessing its safe to remove from index.js.

I ran it. I was closer but it didn’t look right. Ahh, the styles.

Screens are styled with a .tss file, so I also need to copy the classes that this header view references into a new header.tss file (again same name as my .xml file). I created a new file in the styles directory and move the various items to this file : #header, #title, .divider,#addImage,#addView and saved it.

I ran it and it ran with the header area now modularized.

The require statement is pretty useful, and if used properly can allow you to create some pretty modular code.


Code it right

Mavericks, XAMPP and Sendmail Oh My!

I develop web applications on my MacBook Pro.  I’ve recently upgraded to Mavericks and changed over from MAMP to XAMPP.  One thing that we all have to do at some point is create email notifications.  Whether that takes the form of a forgot password link, a verify email address link, or some other activity notification, typically a local development server install like XAMPP (on Mac) does’t do email out of the box.

If you search around, you’ll find a lot of differing ways to get XAMPP to do this.  I messed around with this for quite sometime, and was able to get a configuration that worked for me.

One caveat – you need to have a real live SMPT server somewhere.  I happen to be located on a college campus, and all email leaving the campus must run through that, so I’ve set up my machine to use that host.  The problem with this is – if I’m off campus, I actually have to VPN in, to send email.  So, this still isn’t perfect but its working for me at this point in time.  I’ll post back, when I have an independent solution setup, or if you have one, please feel free to leave a link in the comments, or even better, spell it out in the comments.

I got my start on this quest here – http://stackoverflow.com/questions/15965376/how-to-configure-xampp-to-send-mail-from-localhost The kicker with this first solution is that XAMPP for OSX doesn’t come with sendmail, so the part about editing sendmail.ini was useless, which essentially makes the post mostly useless to me and other mac users.

After digging around I managed to set up something that was crazy simple.

First back up the file we’ll edit –

cp /etc/postfix/main.cf  /etc/postfix/main_orig.cf

then edit it –

sudo vi /etc/postfix/main.cf

and set

relayhost = [smtp.theserver.edu]

you may be tempted to edit myhostname, or mydomain but just leave them commented out.

save the file

Back up your php.ini file –

cp /Applications/XAMPP/etc/php.ini  /Applications/XAMPP/etc/php_orig.ini

then edit it –

sudo vi /Applications/XAMPP/etc/php.ini

search for SMTP, it may be commented out, but change it to this –




then change

sendmail_path = /usr/sbin/sendmail -t -i

save the file

restart apache

and you should be able to send email.

I realized as I typed this that if the smtp server you’re using requires you to authenticate, you’ll need to do more postfix configuration.  Here is a link that walks you through setting up sendmail / postfix using Google’s smtp servers and authenticating with your gmail credentials


This would allow me to run my webapps locally and not have to VPN in to send email, which is preferable, so if I know me, and I do, I’ll probably go through this when I have some more time.

Whatever you decide, good luck.


Code it right

Cooking with Laravel

Laravel Application Developer CookbookI’ve recently added a new Laravel 4 book Laravel Application Development Cookbook written by Terry Matula and available from PacktPub to my library.  I would consider myself a very good PHP developer, and have been searching for a framework to help me excel the development process.  I’ve tried a couple in the past (Yii, CodeIgniter) but always felt constrained, like if I wanted to do something it didn’t support ‘out of the box’ it was a headache and required a lot of hacking. Granted this could simply be my impression and not fact, but not having time to really sit down and figure out if this was reality, I just passed over them.  For the record, I do have 2 live apps using Yii, so I didn’t completely give up.  Back to Laravel.

At a conference in Buffalo NY, I sat in a session by Zac Vineyard and he talked about Laravel and it really piqued my interest.  The session was really about Composer and autoloading, but what he had said about Laravel impressed me and it sounded like something I really wanted to  learn and utilize.

To frame this properly, I would consider myself a Laravel beginner, because I still have to look up how to do things, I’m hardly proficient, and am always looking for tutorials, tips, tricks and other material to help me along my quest to achieve an equivalent level I am with “normal” PHP development.  I can’t wait until I can just sit down and let the Laravel code pour out of my brain.  With my obsession to learn this framework, this is now the 2nd book I’ve read about Laravel 4 and I definitely recommend it to anyone that wants to learn.

As you would expect by the name, this is a cookbook.  Tasks are broken down into recipes (think mini-tutorials) that help you cook up the functionality you’re looking for.  Since this is the 2nd book I’ve read, I came in with some (albeit limited) Laravel experience.  I actually performed the first set of chapters so I could solidify the basics in my brain.

The recipes are concise and all follow the same pattern : Getting Started, How To Do It, How It Works, There’s More, and finally sometimes a See Also section. Getting Started sections run through setup steps necessary for the recipe, sometimes building on other recipes, or are prerequisites for other recipes.  The How to do it is a concise tutorial with no fluff.  Numbered steps walk you through exactly what to do, sometimes with code and/or screenshots.  This is followed by a How it Works section that explains what each step does, written in a nice conversational way, almost as if Terry’s there helping you along.  If those weren’t enough, there is a There’s More section of the recipe that may explain some way to extend the recipe, take in another direction or explore an alternate method or change it in some way to really solidify the concept.  The See Also section typically points to related recipes, or recipes that could be cooked together to produce a more robust solution.

The book starts out like most do – obtaining and installing the software and progresses though how Laravel works, learning syntax along the way.  This book is not a Programming Guide to Laravel or a newbie guide for that matter.  Now before you take that the wrong way, a beginner can learn a lot with this book, and I would even recommend it to one.   What I mean is that it does not go step by step explaining how variables work, and ramble through chapters and chapters on language grammar, etc.  This book flat out teaches you how to build an application with blocks of functionality you can easily alter (if you have to) and drop into your projects.  Concepts from recipes can be easily extracted and used however you need them.  That said, if you need (or want) the specific Laravel grammar and methodology, probably the best place to get that is the actual Laravel Documentation.

If you learn and develop like I do (by example) then you have to add this book to your library.  It encompasses so many things you’d be building in your app its not worth the trouble to not have the book (did you follow that?)  I mean, if you need to add authentication to your apps, there is an entire chapter on that.  Along those lines, there is a chapter on Security and Sessions with some great recipes that help you understand the complexities of these types of things, including recipes for setting up a secure API server.  This chapter was gold to me, because I develop mobile apps with PHP services and this really shed a light on how to configure an API with keys and security, covering everything from database table creation through testing it in the end.

No matter what you’re developing with Laravel, I’m certain you’ll find useful bits in this book.  Its a great addition to my new (still small) Laravel library.

Go get it now!

Code it right

Goodbye Save Button

No Floppy Disk, slashed circle with blue 3.5" floppy diskI’ve always been amazed at web applications such as Asana, where in this case, you’re creating a project in a notepad fashion, not really viewing all the ugly squares on an underlying rigidly structured form.  You click, or press a shortcut key and you’re presented with a box in which to type, press enter, and that one magically goes away and another appears, leaving your text in its place.  Clicking intuitively somewhere else reveals a text area for a longer description, or clicking the sub-tasks icon, presents you with a fill-as-you go checklist.

Its nothing short of brilliant, and the best thing – there is no SAVE button.

I want this functionality for some longer forms I’m working on, think college undergrad and graduate applications.

Currently, you have to click save to save whatever you’ve entered and that feels sloppy, yes, its typical and expected, but I’d like something better and different, I like my apps to stand out. Plus, some of these pages have a lot of fields (for a reason) and if anything happens to your connection, the browser or your session, you’ll lose  that data.  If that happens, even if its not your application / server’s fault, you still leave a bad taste in the user’s mouth, and they may not be willing to fill it out again.

I set out on what I figured would be an R&D quest to figure this out, it ended up taking me less than 30 minutes to get a proof of concept working using my favorite interactive framework,  jQuery, and that included creating a MySQL database to save data to 🙂  I used plain old jQuery – if you can call it that.  I didn’t add in any extensions of modules to give me this ability.

Looking at my solution, it is so incredibly simple, its almost stupid.  I liken it to figuring out a magic trick, and thinking, really that’s all there is to it?  That impressed me?  I’m sure there are many other ways to do this, possibly even better, there might even be a module or extension available, but this is how I went about it.

I created a form with both a hidden and an input field that looked like this :

<input type='hidden' id='r_id' value='' />
<input type="text" class='blursave' placeholder="Type something…" 
  id='field_label' d_name='field_label' d_mod='z_test' />


The r_id field will hold the database record’s primary key (if we’re editing a record), and will be empty if this is a new / first time view.

The real key here is the blursave class – this can be called anything, I made that up, the name is arbitrary, but having a unique class name assigned to your fields is very important.  I’m also using Bootstrap which is not required to do this and is completely optional. I used it because I like my stuff to look nice even when I’m just “playing around”, so you’ll notice the placeholder attribute here as well, if you’re not using bootstrap – you can remove this.

Of almost equal importance is the d_name, and d_mod attributes.  The d_name is the field_name in the database where this value needs to be… or came from.  With my prototype (I don’t necessarily recommend this for production) I also added d_mod – the table this value belongs to.  For obvious reasons you don’t want to expose this to the world.  You could easily encrypt these values to make them a little less hackable, and I will do that when this ends up in production, but for my prototype, I didn’t want to spend the time doing that.  Having the table name with the data element makes is easier for a complex form that may be joined in the database schema.  You could add other attributes if you wanted to keep track of the record’s foreign key.  You could also combine all of these important bits into one field, encrypt it and just send one bit of data, decrypt and process it on the server.  Maybe my next post will have all that in there, we’ll see.

Continuing on,  the data we have represented in our field’s attributes consist of :

  • primary key of the record (or not)
  • database field name
  • database table name
  • the value going into the database

Here’s where the magic comes in.  Using jQuery, I can add a blur action to the .blursave class, so anytime someone blurs (moves focus) off of a field, this function is called.  It’ll look a lot like this –

$('.blursave').blur(function() {

So now what?  When this gets called because someone moved away from our field, we need to get those bits of information, then assemble arguments to post to a page that will save that information for us.  We’ll use the traditional div selector (#) as well as the .attr() method to grab our custom attributes like this –

$('.blursave').blur(function() {
   var r_id = $('#r_id').val();
   var d_val = $(this).val();
   var d_name = $(this).attr('d_name');
   var d_eid = $(this).attr('d_eid');
   var d_mod = $(this).attr('d_mod');
  $.post( "update.php", { r_id:r_id, d_val:d_val, d_name:d_name, d_mod:d_mod })
     .done(function( data ) {
         obj = JSON.parse(data);
         console.log( obj.sql);
         console.log( obj.rid);
         var rid = obj.rid;

You can see that I’ve accessed the record id (r_id) directly.  If this is a new form, this is empty.  If someone were coming back to edit data, this would have a value set (more on that in a second).  I then get the value typed into our field – .val() , and then use the attribute selector to snag the various other bits of data we’ll need to make our database call.

Once I have that data, I use the .post method to send this data to my update.php page.  The parameter section may look confusing, but those are key:value pairs, I just happened to name my keys the same as my variables.  This is probably bad practice, but whatever, its a prototype.

Over to update.php

In our update.php script, I set my php variables (again not a best practice, you’ll want to strip bad characters, and prevent hacking, yada, yada, yada)

$rid = $_POST['r_id'];               # record id to update (if exists)
 $dval = $_POST['d_val'];            # value to insert/update
 $dname = $_POST['d_name'];          # database field name to update
 $dmod = $_POST['d_mod'];            # tablename to update

I need to determine if this is a new record, meaning its the first data point entered on the form, in which case I need to run an insert, or if this is the 2nd+ data point, which then requires an update.  In the first situation – $rid would be empty, right?  Yep –

if (empty($rid)) {
   $sql = "insert into " . $dmod . "(".$dname.") VALUES ('".$dval."')";
   $res = $db->query($sql);
   $rid = $db->insert_id;
} else {
   $sql = "update " . $dmod . " set " . $dname . " = '" . $dval . "' where id = " . $rid;
   $res = $db->query($sql);

Agreed, this is not the best way to deal with checking $rid, but will work for us now.  If that is empty – which it would be on the first field used on the form, we’ll construct an insert statement, execute the query, and get the incremented primary key ($db->insert_id).  If it is not empty, we know which record to update, and we’ll construct an update statement as above and execute that.

SIDENOTE: depending on the database you’re using, you could probably use REPLACE INTO or UPSERT or whatever your database may support.  This method is guaranteed to work for any database that supports insert and update 🙂

After one of the above statements executes we have an $rid set, whether its the original we came to the party with, or one we picked up with our insert.

Again, since this was a prototype (no flames please), I wanted to see what the database was doing, so I included the SQL statement  in my return JSON string <G>.   I set up an array, and then json_encoded it to return back to my jQuery on my form page

$return_array = array ('sql'=>$sql,'rid'=>$rid);
print json_encode($return_array);


To the Form Code Batman

In our .post we have a status called .done – that executes … well… after the post is done, makes sense. The json string we created in our PHP file is returned to us and a callback function is executed, and the response (our json string) is stored in a javascript variable called data (you can name this anything), and it looks like this :

{"sql":"insert into z_test(field_name) VALUES ('this')","rid":175}

in order to use the json data, we need to parse it

obj = JSON.parse(data);

now we can access the elements of the data like this :  obj.sql  and obj.rid

I log these to the console so I can see what it going on (again for production, or on a live server even for testing,  you probably wouldn’t send the SQL statement, and wouldn’t log to the console).  Since this is running on my laptop, I don’t care.


then I set a javascript variable called rid to the record id we just touched in update.php (“rid” from the json string), and update the hidden r_id on our form.

var rid = obj.rid;

If this were a new form, next time a field is blurred, we have the record id of the first inserted record in our database and our update.php file will update and that data will be added to that record.  If we’re already editing a record, and this r_id was set before our update.php was run, eh, the code updates #r_id value anyway.  If you wanted you could check to see if its empty first then updated it, its up to you.

So there you have it, it took me longer to write this up than to actually build this save-on-blur prototype.

Quickly thinking about it, you’ll need some other code to deal with radio and checkboxes, but its still the same concept.

If anyone has a better way to do this please share, I’d love to hear about it.


Code it right

PHP and Word’s special characters

Sick of users copying and pasting Word content into your web forms?  We all know you end up with all their special characters ending up as ? in your text.  This recently happened to me and I had to fix it, see these were college essays on the undergraduate application.

This is what I used to convert them to html friendly characters :

function convert_raw_utf8_smart_quotes($string)
    $search = array(chr(0xe2) . chr(0x80) . chr(0x98),
	chr(0xe2) . chr(0x80) . chr(0x99),
	chr(0xe2) . chr(0x80) . chr(0x9c),
	chr(0xe2) . chr(0x80) . chr(0x9d),
	chr(0xe2) . chr(0x80) . chr(0x93),
	chr(0xe2) . chr(0x80) . chr(0x94));

    $replace = array('&lsquo;',
    return str_replace($search, $replace, $string);


This worked great until I had to pump out a PDF file for admissions using this content, and the above & codes don’t look so pretty. So I played a little music chairs with the code and ended up calling this when I had to display the code in the PDF file –

function convert_smart_quotes_for_PDF ($string) 
    #this reverses the process for the PDF rendering
    $search = array('&lsquo;',

    $replace= array("'", 

    return str_replace($search, $replace, $string); 



Code it right

Best Mobile Development Tool … EVER

testflightlogoI read about this gem called TestFlight (http://www.testflightapp.com) earlier this year, and never really gave it much thought.  I’m pretty busy and a ‘lone wolf’ developer, so typically send out screenshots during development to the client and sometimes do a face-to-face demo.  Recently, more people here at the college wanted to proof and test the app before it was submitted, so we all gathered in a conference room, and I projected the iPhone Simulator on the big screen and gave a demo to the group.

After that meeting, I had one of the designers come to my office, hooked up her iPhone to my laptop, and went through the process of setting it up as a development phone with a provisioning profile and all that goodness.  If you’ve done this you know its a bit of a pain even for just your own phone.  Once it was set up, I deployed the app to her phone and sent her on her way.

I received an email a few days later with changes and new features.  I made them (took about 3 weeks), she came back up – and in the span of those three weeks – she had a phone issue and had to restore, essentially wiped out the setup I had done.  I don’t remember why, but the repeated setup didn’t work, or we didn’t have time to set it up again, so she used my phone to test the app.  The app finally was approved by the college, submitted to Apple, and released to the app store.

A couple bugs were discovered after it was launched, and I fixed them. Not wanting to have to have a meeting, demo or deploy the app again to other phones, but wanting them to view the changes I made, I remembered TestFlight and figured I’d give it a whirl.  I know the headache involved when manually setting up and deploying and app, so I buckled up ready to generate certificates, profiles, and playing with the developer portal at Apple.

I was completely amazed at how easy it was to create an account, set up a team, invite testers, and upload and install the app.  I had it installed on the designer’s phone within an hour of creating the account, and alot of that time was compiling, building and uploading the app.  Once your team mate(s) add their device, you’ll get an email with a “device-export.txt” file.

  • Save this file to  your desktop
  • Access Apple’s Portal and click Devices | All | click the + sign at the top to add a new device
  • Upload this file

You’ll now see your teammate’s device listed (just a quick note – you can set up 100 devices total – Apple’s limit).

Now you need to update TestFlight with the new devices via the provisioning profile. To do that –

  • click Development under Provisioning Profiles
  • download a new provisioning profile.
  • Back in TestFlight (after you’ve uploaded your app) – go to Apps
  • click your app name
  • click a version of your app
  • then permissions on the left
  • upload that new profile you downloaded from your portal

Now that the new profile is uploaded, you’ll see the new people you’ve added listed in TestFlight with empty checkboxes.  Check them off, and click Notify via email – and they’ll get an email with a button to install the new profile and a button to install the app.  That’s sounds confusing, but its pretty straightforward and makes sense once you’ve done it.

Getting your App Uploaded to TestFlight

One thing I didn’t know was how to create an .ipa file (which you can read about here btw – ( http://help.testflightapp.com/customer/portal/articles/494413-how-to-create-an-ipa-xcode-4-3- ) once you have an .ipa file, you can drag it to this TestFlight desktop app, and it’ll upload it for you.  Alternatively you can log into your TestFlight account, and upload it old school.

HOWEVER, you don’t have to do all of that if you install the desktop app ( https://testflightapp.com/desktop ) which is in beta, but freaking brilliant !

Screen Shot 2013-08-15 at 2.36.32 PMIt watches Xcode for new Archive builds and will ask if you want to Upload the new build to your TestFlight Account (be aware TestFlight must be running for this to happen).  If you miss that growl-like pop-up which goes away after a minute-ish, you can simply click the pilot icon in your status bar, and choose an archive.  TestFlight takes over, converts your archive to an .ipa and uploads it for you, which is fantastic and one less thing I had to do!

While it uploads, it’ll ask you for release notes, so you can list all the bugs, fixes and features you have added for this version, and when its complete you can choose what members (or all) on your team you want to notify of the new version.  These team members will get an email they can open on their device and immediately install the new app.

This saves so much time and hassle, and gives your client and/or app testers ‘beta’ access to your app – hassle free, which is the most important part.  Today alone its saved me a few hours because I’ve pushed 2 versions, and added multiple people to the team.  If you have questions about what it can do, if its free, how it works, etc check out their FAQ  (TestFLight is free btw)

I can’t tell you how awesome this is, you have to try it yourself.


Code it right
Powered by Wordpress and MySQL. Theme by Shlomi Noach, openark.org