I just spent the entire afternoon debugging a problem I couldn’t find elsewhere, so I’m documenting it in the off chance someone else runs into the evil thing.

I’m composing some images on the fly using ImageMagick via RMagic. It grabs one file, floods the image with a given color, and layers another on top of it. Locally, it works great, and gives me “body parts” like this one:

Unfortunately, when I push the code to Heroku, it starts going through a goth phase and filling everything in with BLACK LIKE SOUL:
I spent a very, very long time trying to suss this one out, checking out everything from opacity to gem versions. Finally, I checked the ImageMagick version (Magick::Magick_version).
Local: “ImageMagick 6.6.7-1 2011-02-08 Q8 http://www.imagemagick.org”
Heroku: “ImageMagick 6.6.0-4 2010-06-01 Q16 http://www.imagemagick.org”

Ok, so Heroku’s is a bit older. But that’s not the critical issue. The bigger problem is the Q16, which is reporting the quantum depth. I don’t understand nearly enough about image processing to talk about what that really means. But long story short, it means my images had different default bit depths and it was causing everything to blow up. Or something.

I was able to fix it by changing how I instantiated the Pixel for the fill. Before, I was using

fill_image.colorize(1,1,1,Magick::Pixel.new(r,g,b))

where r, g, and b are integers between 0 and 255.

Conveniently, RMagick has added a from_color method to Pixel, which lets you define a pixel based on a color name. I passed in a hex value, and everything magic(k)ally works normally again:

color = '#ababab'
fill_color = Magick::Pixel.from_color(color.upcase)
fill_image = fill_image.colorize(1,1,1,fill_color)

I wish I understood a few more of the particulars about what is really going on here. But for the time being I need to move on to finishing this up. Any insight is welcome in the comments.

You may remember the “Legoizer” script I’ve been working on for Blender. It uses an existing script and one I’ve created to generate “layers” of LEGO patterns for building.

I got a lot of great suggestions on my last entry for how to automate the process of taking a screenshot, but sadly when it came down to implementing them things didn’t go so well. Luckily Angelo from Abandon Hope Games was kind enough to take the time to help me get the environmentals in Blender set up just right for rendering a “pattern slice.”

Step 0: Start with an object made of objects
The AddCells script uses DupliVerts to create an object made of references to another object. We’ll get to that in a minute, but first, let’s assume you have an object:

Step 1: Set up the camera
We want the camera to be facing down and rendering orthographic(all lines parallel) rather than perspective.

Make sure you’re in Object Mode and select the camera.
Press Alt+G and then Alt+R (confirming the dialogs) to return it to the origin.
Hit F9 to get into the Editing panel
Click the button labeled Orthographic in the Camera tab

Press 1 on your number pad to get a side view of the scene. Click the blue transform handle of your camera and move it up along the Z axis so it is well above your object.
Press 0 on your number pad and you should see a rectangular bounding box around your object (or perhaps around nothing) which represents the are which the camera sees.
Scroll the “lens” option right above the Orthographic button to zoom in/out so your

If you do a test render now with F12, you’ll probably see a badly lit (perhaps almost all black) render of your object from the top down.

Step 2: Set up the lighting

Select the existing light in your scene and press x on your keyboard to delete it.
Press space bar to bring up a dialog, and go to Add > Lamp > Sun
It doesn’t matter where the lamp is, as long as it’s facing down (which it is by default).

Step 3: Configure your materials

I mentioned earlier that our object was made up of DupliVerts.
These aren’t “real” objects, which is why I had such trouble applying materials to them. You need to apply the material to the reference object, which is generally somewhere in the middle of it. I usually do this by switching to the Outliner menu and finding the source cube manually.

Once we have our source object selected, hit F5 to bring up the Shading panel and click Add New under Links and Pipeline.
Pick a new color for your object. This will be the color of the lines in your final rendered image, so pick something that contrasts with your background color (which defaults to blue).
Click the Wire button under Links and Pipeline

Your object in the viewport should take on the color you’ve selected. If if doesn’t, you probably didn’t select the correct source object.

Hit F12 to render. Viola!

Now that we have our environment set up the way we want, rendering via script is easy. I’ve updated the script source (now on gist) to call Render when it’s done slicing and save the file to my hard drive.

This all works great, but of course there’s a new problem. Since we want to iterate over the entire object, I need to “reset” it back to being whole again. While I’ve saved an undo point I don’t think you can call that point via the API. In the current iteration of the script I save the vectors of each vertex before deleting it and then call verts.extend to add them back. This works great except…

The vectors for the verticies are transformed to be in the selected object’s local space, which is necessary for “layer 1″ to be the first layer of the object and so forth. Unfortunately I haven’t yet figured out how to transform those verticies back. So when I run the script it dutifully reassembles my sphere originating from the center of the object. So there’s still some work to be done there.

I’m rebuilding indiecraftshows.com in RoR, but the blog will stay on WordPress. The rails app will be hosted on Heroku, and the blog will stay where it is at NearlyFreeSpeech.net. There’s one catch: I want the latest blog post to appear on the home page, which is part of the rails app.

To do this I’m using ruby’s included XMLRPC library to grab the latest post from WordPress and shove it into a YAML file named with the date and post ID. This happens in a cron job run daily. Since I only care about showing the most recent post, I don’t bother to check to see if there are other posts I don’t have.

I created a really simple object called (creatively) BlogPost, and chucked it in with the rest of my models in app/models. Note that BlogPost doesn’t inherit from ActiveRecord.

require 'xmlrpc/client'
 
class BlogPost
  def self.latest
    Dir.chdir(Rails.root.join('blog'))
    post_files = Dir["*.yaml"]
    most_recent_file = post_files.sort.last
    YAML::load(File.open(most_recent_file))
  end
 
  def self.fetch
    server = XMLRPC::Client.new2('http://www.kellbot.com/xmlrpc.php')
 
 
    blog_post = result = server.call("metaWeblog.getRecentPosts",1,YOUR USERNAME HERE,YOUR PASSWORD HERE,1)
    File.open(Rails.root.join('blog',"#{blog_post[0]["dateCreated"].to_time.to_i}-#{blog_post[0]["postid"]}.yaml"),'w') do |io|
      #we only want the published ones
      YAML.dump(blog_post[0], io) if blog_post[0]["post_status"] == "publish"
    end
  end
end

When the home page is called, the controller grabs the most recent yaml file (by name, not by time of creation, since WordPress allows you to lie about time). I just use the XMLRPC object as-is, but if I wanted to I could get fancy and do some post-processing to make it a little more friendly.

Just a quick fix for something I couldn’t find earlier:

If you’re on shared hosting which has PHP’s safe_mode enabled, you may run into problems with uploading images. Specifically, you can upload images just fine (assuming you’ve configured uploads correctly) but can’t see uploaded files. This is the case on NearlyFreeSpeech.Net (where my sites are hosted), and probably a few other hosts as well.

WordPress MU uses some .htaccess & PHP tomfoolery to obfuscate the real file path (among other things). Because safe_mode checks to see if the UID/GUIDs match on file_exists(), the script that fetches the images will fail and return a 404. Which is to say, the owner/group of the uploaded file is web/web (or whatever your server’s web user is), but since I manually uploaded the WPMU files originally, those are me/me. Since me != web, it failed. WordPress took this to mean the file was absent and returned 404.

On NearlyFreeSpeech, adding wp-content/blogs.php to the ‘web’ group was all it needed.

In preparation to tinker with the miCoach data, I started with some better-travelled exercise bits: WiiFit body test data. Starting with Jansen Price’s excellent blog post on the subject, I slowly worked through the data and wrote a python script to interpret the binaries and save them to a CSV. By using the excellent flot javascript library, I was able to generate the nice graph above. There was a lot of trial and error, but here’s an overview of the process:

1. Copy Wii save game data to the SD card. This is done from Wii Options > Data Management > Save Data > Wii
2. Find the save game data on the card. It’s in something like ‘private/wii/title/RFPE’, although different regions may have slightly different codes. RFPE is the code for WiiFit Plus. Copy the WiiFit data.bin file from the SD card to your local machine.
3. Decrypt data.bin. This is explained pretty well here. To create the keys I ended up creating text files with the hex string for each and then using “xxd -r -p sd_iv_hex sd_iv” et al to save a binary version. If you’re getting “MD5 mismatch” errors, you probably saved the keys incorrectly. If you aren’t sure, check the file size. They should be 16 bytes each.
4. Run the decrypted RPHealth.dat through a parser (I wrote one in Python for this)
5. Run the CSV through your favorite graph generation library. I use flot because Google Charts don’t handle dates very well.

Thanks to Jansen’s handy chart of which bits are where, writing the parser was pretty easy. This isn’t the most elegant code I’ve ever written, but it gets the job done:

import struct
import string
import csv
 
 
mii = 0
#we know that each record is 0x9271 bytes long
record_length = 0x9281
 
record_start = 0
 
#path to WiiFit data file
infile = 'RPHealth.dat'
 
FH = open(infile, 'rb');
 
 
## It loops through 7 profiles, because I happen to know I have 7.
## A better approach would be to go to the end of the file, of course.
while (mii < 7):
 
    #go to the start of the current record
    FH.seek(record_start)
 
    #read the first 30 bytes (header + name)
    line = FH.read(30)
 
    #for some reason names are stored as N a m e instead of Name.
    #Throw away the header any extranous spaces
    data = struct.unpack("<9xcxcxcxcxcxcxcxcxcxcxc",line)
 
    #Condense our unpacked characters into a string
    wf_name = string.join(data,'')
 
    #open a new CSV file for this person.
    #If the name is shorter than 4 characters or has whitespace, the script
    #will exit. This should probably be fixed.
    FW = open('WiiFit_'+wf_name[0:4]+'.csv', 'w')
    recordWriter = csv.writer(FW, delimiter=",", quotechar="'", quoting=csv.QUOTE_MINIMAL)
 
    #Weigh-in data starts 0x38a1 bytes into the record
    FH.seek(record_start + 0x38a1)
 
    #we'll loop through the record data until it starts coming up blank
    while(1):
        #4 byte date 
        line = FH.read(4)
        data = struct.unpack(">i",line)
        #bit shift to get the month, day, and year. Could also get time if you wanted.
        year = data[0] >> 20 & 0x7ff
        month = data[0] >> 16 & 0xf
        day = data[0] >> 11 & 0x1f
 
        #break the loop if the date comes back 0
        if(year == 0): break
 
        #format the date into something humans like to read
        date = str(int(year)) + '-' + str(int(month)+1) + '-' + str(int(day))
 
        #the next three sets of 2 byte data represent weight, BMI, and balance
        line = FH.read(17)
        data = struct.unpack(">3H",line[0:6])
 
        recordWriter.writerow([date] + [data[0]] + [data[1]] + [data[2]])
 
 
    #now that we're done with the record, advance to the start of the next one
    record_start = record_start + record_length
 
    mii = mii+1

You can download a copy of it here.

Today I gave up on Magento. It’s a powerful piece of software but it’s still pretty rough around the edges, and the UI and architecture makes it a pain to dive in and debug if something goes wrong. It’s built on Zend, so someone who has spent more time with Zend than I have would probably have an easier go of it.

Anyway, I’m moving over to PrestaShop, and don’t want to lose all my customer and order information. Since I managed to trash my Magento installation, I’m migrating the data over manually via an exciting series of MySQL queries. I’m posting them here in case anyone else needs them.

This data is then imported into PrestaShop using the built in import tool. They have a fairly easy to use interface for assigning columns in the CSV to various PrestaShop information (name, address, etc).

Getting the customer’s ID, name, and email address:

SELECT DISTINCT ce.entity_id AS b, email, 'default_password', (
 
SELECT value
FROM customer_entity_varchar
WHERE attribute_id =7
AND customer_entity_varchar.entity_id = b
) AS l_name, (
 
SELECT value
FROM customer_entity_varchar
WHERE attribute_id =5
AND customer_entity_varchar.entity_id = b
) AS f_name, 1
FROM `customer_entity` AS ce
JOIN customer_entity_varchar AS cev ON ce.entity_id = cev.entity_id
WHERE 1

You’ll notice I select the string ‘default_password’. This is just to generate a column of dummy password data. I haven’t thought of any creative ways to migrate the password data, and instead am just resetting it. The downside is that users will have to request a new password in order to log in. You should not use default_password as the actual string, for reasons I hope are obvious.

Get the address books:

 SELECT DISTINCT 'Home', cae.entity_id AS b, 
 
(select email from customer_entity where entity_id = parent_id) as email,
 
 (
SELECT code
FROM customer_address_entity_int as mm1 join directory_country_region as mm2 on mm1.value = mm2.region_id
WHERE mm1.attribute_id =27
AND mm1.entity_id = b
) AS state,
(
SELECT value
FROM customer_address_entity_varchar 
WHERE attribute_id =25
AND entity_id = b
) AS country, 
(
SELECT value
FROM customer_address_entity_varchar 
WHERE attribute_id =24
AND entity_id = b
) AS city,
(
SELECT value
FROM customer_address_entity_varchar 
WHERE attribute_id =18
AND entity_id = b
) AS f_name,
(
SELECT value
FROM customer_address_entity_varchar 
WHERE attribute_id =20
AND entity_id = b
) AS l_name,
(SELECT value
FROM customer_address_entity_text 
WHERE attribute_id =23
AND entity_id = b
) AS addre1,
(SELECT value
FROM customer_address_entity_varchar 
WHERE attribute_id =28
AND entity_id = b
) AS postcode
 
FROM `customer_address_entity` AS cae
JOIN customer_address_entity_varchar AS caev ON cae.entity_id = caev.entity_id
WHERE 1

Getting the order data over is another beast, one which I’ll tackle another day. There’s a convenient importer for products, but unfortunately the individual order data will have to be migrated painfully via SQL.

During the last 12 hours of the hackathon I decided to write a TCP server for an old project I want to finally finish. I decided to write it in Python, mostly because my friend Adam likes Python and Adam would inevitably be the one answering my questions when I got stuck. I should mention that prior to yesterday evening I knew nothing about socket programing. And I only had a vague idea of what threading was.

Since not everyone has friends like Adam, I’m writing up my findings in a tutorial.

Note: A bug in my CSS is causing the code blocks to show up extra wide. I’ll fix it once I’m back home from the hackathon

Understanding Sockets

First, I’m going to assume you understand that this is not a tutorial about writing an HTTP server. Instead this server will take connections from clients and keep them open to pass data back and forth until one side decides to close the connection. By keeping the connection open we eliminate the need to constantly poll the server for updates.

Socket Programming HOWTO provides a broad overview of sockets and is a good starting place.

Python’s Socket Library

Luckily python has an easy to use library. Like other libraries, we import it with thusly:

from socket import *

Many of the socket methods you’ll use are pretty self explanatory:
socket.listen() – listens for incoming connections
socket.accept() – accepts an incoming connection
socket.recv() – returns incoming data as a string
socket.send() – sends data to client socket*
socket.close() – closes the socket

*in this context the ‘client socket’ can be on either the server or client side. When a client connects to a server, the server creates a new client socket on its end. The two clients, one on each end, communicate with each other while the server socket remains open for incoming connections. This becomes more clear as you work with socket connections.

Writing the server
First thing’s first, we need to establish our server socket:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

##server.py
from socket import *      #import the socket library
 
##let's set up some constants
HOST = ''    #we are the host
PORT = 29876    #arbitrary port not currently in use
ADDR = (HOST,PORT)    #we need a tuple for the address
BUFSIZE = 4096    #reasonably sized buffer for data
 
## now we create a new socket object (serv)
## see the python docs for more information on the socket types/flags
serv = socket( AF_INET,SOCK_STREAM)    
 
##bind our socket to the address
serv.bind((ADDR))    #the double parens are to create a tuple with one element
serv.listen(5)    #5 is the maximum number of queued connections we'll allow

So now we have a server that’s listening for a connection. Or at least we did until the script reached the end and terminated, but we’ll get to that in a bit. Let’s leave our server hanging and jump to our client software.

Creating the client
Start a new python script for the client. We’ll need many of the same constants from the server, but our host will be ‘localhost’. For now we’ll be running both the server and the client on the same machine.

1
2
3
4
5
6
7
8
9
10

##client.py
from socket import *
 
HOST = 'localhost'
PORT = 29876    #our port from before
ADDR = (HOST,PORT)
BUFSIZE = 4096
 
cli = socket( AF_INET,SOCK_STREAM)
cli.connect((ADDR))

Notice that we’re creating another socket object on this end but instead of binding and listening, we’re using the connect() method to connect to our server.

So what happens if we run our server and then run our client? Well, not much. While our server starts to listen, it then hits the end of the script. We need it to instead wait until it accepts a connection and then do something with that connection.
socket.accept() does just that, and returns two things: a new client socket and the address bound to the socket on the other end. Once we have that, we can send data!

Continuing on server.py:

12
13
14
15
16
17
18
19
20
21
22
23

serv = socket( AF_INET,SOCK_STREAM)    
 
##bind our socket to the address
serv.bind((ADDR))    #the double parens are to create a tuple with one element
serv.listen(5)    #5 is the maximum number of queued connections we'll allow
print 'listening...'
 
conn,addr = serv.accept() #accept the connection
print '...connected!'
conn.send('TEST')
 
conn.close()

The last step is to jump back over to our client and tell our client to expect to receive data:

9
10
11
12
13
14
15

cli = socket( AF_INET,SOCK_STREAM)
cli.connect((ADDR))
 
data = cli.recv(BUFSIZE)
print data
 
cli.close()

Now when you run your server it will wait until a client connects. Once you run your client it will connect and receive a short message (the word “TEST” in this case) and print it to the screen. If you wanted to you could have the client send a response, using the same send() and recv() methods (but reversed).

Make sure you close() your connections when you’re done using them. If you don’t close things nicely they have a nasty habit of staying bound/connected until you forcibly kill the python process. This can be a real pain when you’re debugging.

By itself this isn’t particularly useful, especially considering we can only handle one connection at a time and exit once it’s closed. By adding a few while loops and some threading we can make this into something much more valuable. As it is, I’m pretty wiped from the hackathon, so the threading tutorial will have to wait until another day.

I’m working on a new project which uses Etsy’s API. As far as APIs go, theirs is pretty neutered. There’s no user authentication whatsoever so the only data you can get from it is what’s available to the general public. Since you can’t authenticate, you certainly can’t write any data, so things like allowing users to add Etsy items to their favorites aren’t possible.

Working with their API I found another “quirk.” If you try to getUserDetails on a username which doesn’t exist it won’t return null or false or an empty object. Instead, it responds with HTTP status code 404.

Wait, what?

This means I have no way of differentiating between an error in my URI and a simple case of a defunct username. In fact, this behavior is contrary to what Etsy’s own documentation suggests. Their sample code dies on any status besides 200, which makes sense although you’d probably want to handle the error more gracefully. Now I have to look up the status code and try to guess whether I got the 404 because of a malformed URI or because the username was wrong. That will make debugging super fun!

404 is an HTTP error. A correctly formed API query with a null result should not return a 404. Argh. In english terms, a 404 means “I don’t have the information you’re looking for.”

You could argue that Etsy simply doesn’t have the userinfo for that user, because it doesn’t exist, and therefore 404 is appropriate. But that’s a cop out. Etsy DOES know that user’s info: it’s empty. If I’m querying a database of all known users, and getting back a subset of said users based on my input, Etsy’s response should be “there aren’t any matching users” not “I don’t have that information.” A 204 error would be more appropriate.

Edit: Apparently this is becoming a common thing.  Although I haven’t seen it with any other APIs I’ve worked with. And let me state for the record that just because other people do it doesn’t make me think it’s any less of a dumb idea.

Edit again: Someone who is less sleep deprived than myself pointed out that the body of the 404 responses does contain useful information, which I had missed earlier. So in this case I will concede to being wrong, although I am still not a fan of this approach because it means my script relies on the exact English wording of their error messages. Carry on.

One thing that’s clear about my quest for higher education is that I’m going to need some undergraduate level classes to fill in the holes of my self-taught education. I’ve been looking through course catalogs for various programs to get an idea of what I’m missing, but it’s hard to tell what would be valuable and what’s just filler.

For folks who got an undergraduate degree in computer science, what classes / topics did you actually find useful? I know I need to brush up on my math, I haven’t done anything resembling a proof in about a decade. Most of the programming I’ve done has been for the web. Lots of figuring out when to access and how to store various bits of data, but not much recursion. I’m used to speed being a factor of how often you hit the database, not how you’re manipulating the data.

I’ve found a community college locally where I can pick up some classes on the cheap, including one called “Language Independent Design Tools” which covers problem solving techniques, modular design, how to perform a proper trace, subroutines, etc. It could be either really useful or entirely too general, it’s hard to tell from the course description. It requires “Intro to C#” as a co requisite, which sounds like a lot of “this is a variable, this is a function.” Bleh.

Speaking of classes!

I’m teaching Intro to PHP at NYC Resistor in December. It covers the basics of the language, and doesn’t require any previous programming experience. Working knowledge of HTML is a big help, but not strictly required. You can sign up online, the class is taught at the NYCR Hackerspace in Brooklyn.

I’m thinking of teaching the GD image class again, because it’s fun to draw graphs and calculate resizing, shifts, etc. But the last one wasn’t very well attended so I’m not sure.

Note: This article is pretty long in the tooth, and refers to a version of Android that is at least two versions old, and likely many more. I haven’t gone back to update things to see what works and what doesn’t. A few people have posted solutions in the comments so if you’re running into issues try skimming those first.

I’ve been a little frustrated by the lack of Android tutorials. I got a Hello world going, and found that most of the few tutorials I could find were WAY more complicated than what I want to start with. GPS, map overlays, to-do lists, etc, which is great and all but I want to start simple and work up from that. So I set out to build “Hello Circle,” a program which drew a dot on the screen wherever you touched it.

After about 12 hours of beating my head against Eclipse, the Android SDK, and the frequently incorrect Android documentation I got it working. So here’s a tutorial.

Setting up the environment

I’m going to assume you already successfully completed the Hello World tutorial. Which means you’ve got yourself an IDE (probably Eclipse), the Android SDK, and the ADK (Android Development Kit) which is a plugin for Eclipse to help keep things in order. If  you haven’t done that yet follow these instructions and pray everything works as planned. I’ll see you in a few hours.

Create a project just like you did for Hello World.

Creating the ViewGroup

In order for anything to display on the screen you need to create a view. In the Hello World tutorial you created a TextView. We’re going to use the XML setup for creating our view, and rather than creating a TextView we’re going to use a FrameLayout, which is acutlaly a view group.

Open up /res/layout/main.xml and plop in this fine code (obliterating anything that may be there):

1
2
3
4
5
6

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/main_view"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#FF66FF33" />

This, when it’s called in our code, will create a FrameLayout view with an id of “main view,” a width/height that fills the screen, and a neon green background. The hex color code for the background includes the alpha channel (the first to FFs).

Setting the contentView to our XML

Head over to your main class and call setContentView on your layout. Your code should look something vaguely like this:

1
2
3
4
5
6
7
8
9
10

import android.app.Activity;
import android.os.Bundle;
 
public class RoboTown extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
}

If you run your code at this point you should get a big green background which does nothing. Hooray!

Creating the Ball class

Now we want to create a circle. Actually we want to create a lot of circles. So the first step is to create a new class called Ball. Right click on your project’s main class in the Package Explorer (on the left) and click New > Class. Give it the name Ball and click Finish.

Our ball is actually going to be another view. What? Yeah. It’s a view. All of our Ball views will eventually go into our FrameLayout, but we’ll worry about that later.

So first, modify your Ball class so that it extends View, since it’s a new type of View, and while you’re at it go ahead and import some of the things we’ll need for drawing:

1
2
3
4
5
6
7
8

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;
 
public class Ball extends View {
 
}

In order to draw a ball we need a handful of things: a Canvas to draw them on, x and y coordinates to place the center of the ball, the radius, and Paint to give it color. So we’ll start by establishing those (I hid the imports for the sake of clarity, you should leave yours there):

6
7
8
9
10
11

public class Ball extends View {
    private final float x;
    private final float y;
    private final int r;
    private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}

In the last line we create a new Paint object, creatively called mPaint. A Paint contains information like colors, text sizes, etc, which affect the appearance of the drawing. So far we haven’t assigned any of those things to the Paint, we’ve just created it.

Now we need to write the Ball constructor, which is the method to be called whenever we create a new ball:

9
10
11
12
13
14
15
16
17
18
19

    private final int r;
    private final Paint mPaint = new    Paint(Paint.ANTI_ALIAS_FLAG);
 
    public Ball(Context context, float x, float y, int r) {
        super(context);
        mPaint.setColor(0xFFFF0000);
        this.x = x;
        this.y = y;
        this.r = r;
    }
}

Our constructor takes a Context, x, y, and radius r. We pass these arguments in when we instantiate the object and assign them to the object properties.

And lastly, the method which actually draws the circle, onDraw:

12
13
14
15
16
17
18
19
20
21
22
23
24

public Ball(Context context, float x, float y, int r) {
    super(context);
    mPaint.setColor(0xFFFF0000);
    this.x = x;
    this.y = y;
    this.r = r;
}
 
 @Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(x, y, r, mPaint);
}

Ok, our Ball class is done. Save it and head back over to the main class.

Drawing a Ball on the screen

At this point we haven’t actually drawn anything. We’ve just created Ball which we *could* draw if we so desired. In order to draw it on the screen we first have to get a hold of our FrameLayout. Since we created it via XML we’ll need to find it again using findViewById():

9
10
11

  setContentView(R.layout.main);
 
   FrameLayout main = (FrameLayout) findViewById(R.id.main_view);

Now we can use the addView method to attach a new Ball to our main view:

11
12

    FrameLayout main = (FrameLayout) findViewById(R.id.main_view);
    main.addView(new Ball(this,50,50,25));

Run your code now and, if all goes well, you’ll have a circle with a radius of 25 pixels in the upper left corner of the screen. Yay! Take some time to play around with Paint options, positioning, etc with the various methods outlined in the documentation.

Now all we have to do is add a touch listener to react when the screen is touched. Which is thankfully pretty easy.
We’re going to create a new touch listener and attach it to our main view all in one fell swoop:

12
13
14
15
16
17
18

main.addView(new Ball(this,50,50,25));
 
main.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent e) {
 
    }
});

The onTouch() method is a callback function which will be hit whenever you touch the screen. Android will send it a View (v) and a MotionEvent (e). We already know what a view is, and a MotionEvent is an object containing information about the touch. All we care about are the X and Y coordinates, which are accessible via the getX() and getY() methods.

12
13
14
15
16
17
18
19

main.addView(new Ball(this,50,50,25));
 
main.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent e) {
        float x = e.getX();
	float y = e.getY();
    }
});

The last thing we have to do before we can start drawing is to cast the view we were sent as a FrameLayout, so we can use the addView() method with it. Then we can instantiate a new Ball at the coordinates sent in the Motion Event:

12
13
14
15
16
17
18
19
20
21

main.addView(new Ball(this,50,50,25));
 
main.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent e) {
        float x = e.getX();
	float y = e.getY();
        FrameLayout flView = (FrameLayout) v;
	flView.addView(new Ball(getParent(), x,y,25));
    }
});

The getParent() call sets the context for the Ball to the main Activity. I only vaguely understand why it has to be done this way.

So now, the moment of truth! You should have all the code you need to run the app in your emulator or even on a real phone. Touching the screen will place a dot where you touched. Amazing!

Hopefully you now have enough of an idea of how all this stuff plays together that you can forge your way to making something vaguely useful (which this isn’t).