Painter – My First App

Painter was my first project that got me into application development and is currently available in Blackberry World for all BB10 devices (as of the latest release). The application lets users load a picture onto a canvas and then draw on it with any color they wish (basically it’s like MSPaint). Conceptually, Painter is very simple – You load a picture and layered on top of that picture is a webpage with a transparent background. However, I did face several challenges and I wouldn’t have even released the application if it wasn’t for the support I received from another developer.
Prior to playing with mobile application development, I had worked with webpages for many years – they were essentially my introduction to programming (if you want to call it that). In 2010, HTML5 went mainstream and I was amazed at the new concepts it introduced and their potential. . One thing in particular stood out: the canvas element which allows you to create images in your browser. It reminded me of an Intro to Programming course I took in high school where we learned how to make UI elements in Java. I thought it was very boring at the time, but now that I look back, I wish I had paid more attention.

Basically you draw shapes (polygons, circles, lines, whatever) based on a coordinate system. So in a canvas you can draw lines that follow your mouse’s movements. Something like: grab the coordinates of the mouse then draw lines between the coordinates. Depending on how fast this is processed, you can get some very smooth lines.
Now this HTML5 stuff was cool when it was introduced, but for a long time, it wasn’t supported. Fast forward a couple years, to 2013 and BlackBerry finally released their BB10 series. I preordered my Z10 so I would get the device as soon as it was avaliable in the US. These devices boasted superior web browsing capabilities, and I could hardly believe the things that it could do. The devices ran a webkit browser, the same engine under the hood of Google Chrome, Chromium, and Safari. Not only that, BlackBerry had signed a deal with Adobe to include Flash baked into the browser. This sucker was FAST and its specifications blew away modern desktop browsers! And it’s only gets better.

This amazing web support wasn’t just limited to web browsing, it also allowed developers to use HTML5 as a platform for coding – BlackBerry had also tied it into their QT platform, Cascades. Cascades uses a fusion of C++ and Javascript, and contains a handy little thing called a webview which acts like an iframe. So what this boils down to is an amazingly versatile platform that lets you do just about anything you can imagine while making it easy to get things looking good.

This information was the only developing knowledge I had when I started working on Painter. Painter started as an example I made for a developer on Crackberry, Nemory. He was diligently working on setting up a native Snap2Chat app for BlackBerry users. I’ve seen a couple friends using the app on their non-BlackBerry phones and thought that it had some pretty cool features, one of which was the ability to draw on the images they took prior to sending them.

Nemory had posted his packaged app for people to test and provide feedback. I got hold of a copy and was curious how it worked. I opened it up and saw that he had a pretty basic HTML file tucked away in it that would let you draw on a canvas. I assumed he started on a different approach in implementing the drawing feature as he had some weird thing that would draw squares in a line that followed your finger (imagine lining up a deck of cards in a diagonally). I thought that an alternative method using a canvas to draw on top of a picture would be smoother. Follow that by taking a screen shot and saving it and the idea should work fine. Turns out I was right.

I started building an example to send to Nemory. What I ended up with was a picture with a canvas on top of it, the program had a basic color-picker and would let you save the drawing. Excitedly, I sent Nemory an email of my discovery. He responded quickly with gratitude and encouraged me to start making apps.

I thought to myself that it would be cool to have something like the Snap2Chat coloring thing for editing pictures. I added a file picker and spruced things up a bit, tossed in some optimized code Nemory helped me write and submitted it to BlackBerry World. One of the more complicated things I included was some C++ code I found in the examples BlackBerry provides to its developers and another chunk of C++ Nemory sent me to help with rotated images.

The complicated C++ code I included allowed Painter be invoked contextually by images and to rotate images when they were loaded. This introduction to C++ was very difficult for me. Don’t get me wrong, I’ve played with C++ before, but nothing on this level. My only experience with C++ was some basic math and printing strings. Applying C++ to something functional is completely different. I was so confused at the errors I kept getting, but I finally discovered the issue. I needed to tell the program beforehand what I was going to be doing in something called a ‘header’. I know what you’re thinking, computers aren’t supposed to question programs, right? Wrong! If I didn’t tell the compiler what I was going to do it would complain and spit an error in my face, C++ is bratty that way. Eventually I got it pinned down after hours of researching Google on how I can get C++ to obey me in Cascades.

Working with C++ code was the most challenging part for me in developing Painter. Luckily, BlackBerry has great reference materials and a great community full of supportive developers to help out the new guys (and girls).