Archive for the 'Uncategorized' category

Raspberry Pi Mail Checker

May 21 2013 Published by under Physical Computing, Uncategorized


I was looking for some Raspberry Pi project to do that not only used external hardware (even if that means only an LED for now), but also reached out into the net to deal with some kind of real time data. I ran into this tutorial on adafruit about checking your gmail with a Pi and lighting up an LED based on whether or not you have new mail. This was along the lines of what I wanted to do, but had two drawbacks. One, I don’t use gmail anymore, and two, it uses a python library called feedparser, which is actually an RSS parser. It only works because apparently you can access your gmail as an RSS feed or something. I wanted to do the same thing, but with any email service that supports, say, IMAP4.

A bit of digging around and I found that Python has an imaplib library that can directly access any IMAP4 based 12mail account. This is included by default in the Python distro that comes with Raspbian. So no further setup there. It took a bit of fiddling around with the docs, both of the library itself and the IMAP4 specs, but I figured out the basic sequence.

The library docs are here:

And the IMAP4 spec is here:

First, you create an IMAP object with one of the following lines, depending whether you need SSL or not. My server does need it.

[php lang=”python”]imap = imaplib.IMAP4(server, port)[/php]


[php lang=”python”]imap = imaplib.IMAP4_SSL(server, port)[/php]

Then, you log in:

[php lang=”python”]imap.login(user, password)[/php]

You then need to go into select mode to select IMAP folders and messages.

[php lang=”python”][/php]

Then you can do a search. By default, you’ll be searching in your inbox, but there are methods to change folders as well. Search criteria are pretty powerful, but I just wanted to see how many unread messages I have. This does that:

[php lang=”python”]type, data =, “UNSEEN”)[/php]

The first parameter is the encoding. Using None will return messages with any encoding. Second param is the search criteria. See the IMAP4 spec linked above for a comprehensive list on what you can search for.

This will return a type, data tuple of strings. The type will be “OK” or “NO” depending on success of the call. Note, even if it returns no unread messages, you’ll still get “OK” here, with an empty string in the data.

The data will be an list of strings. Actually, it seems to generally be an list containing a single string. This string is a space delimited list of numbers. These numbers are ids of the messages returned by the search. It’ll be something like this: “1 2 3 4 5″.

You can split this into a list of individual ids like so:

[php lang=”python”]messages = data[0].split()[/php]

And the length of this list tells you how many messages the search returned. Zero means no new mail. One or more and you have new mail! Fire up an LED!

Here’s the full program I wrote:

[php lang=”python”]#! /usr/bin/python

import imaplib, time
import RPi.GPIO as GPIO

RED_PIN = 24

class MailChecker:
def __init__(self, server, port):

self.m = imaplib.IMAP4_SSL(server, port)
self.do_error(“Unable to contact server”)

def do_error(self, error):
# maybe flash another error LED

def log_in(self, user, password):
self.m.login(user, password)
self.do_error(“Unable to log in”)

def check_mail(self):
type, data = 0, 0
type, data =, “UNSEEN”)
self.do_error(“Unable to check messages”)

if type == “NO”:
self.do_error(“Problem checking messages”)

def start_checking(self, interval):
while True:

def report(self, data):
message_count = len(data[0].split())
if message_count > 0:
print(“You’ve got %i new messages” %
for i in range(1, 100):
print(“No new mail right now”)

if __name__ == “__main__”:
user = “your_user_name”
password = “your_password”
server = “your_email_server_url”
port = 993
# or whatever port you need to use

checker = MailChecker(server, port)
checker.log_in(user, password)

This creates the IMAP object and logs in. Then the start_checking method sets up an infinite loop that searches once every minute. If it finds there are unread messages, it blinks a green LED a bunch of times then leaves it on. No new mail, red LED. The rest is basic GPIO code.

You can change the behavior however you want, maybe remove all the non-error print lines. Then move it to your Pi, do a chmod +x on it to make it executable and run it as root:

[php lang=”python”]sudo ./ &[/php]

The trailing & character will fork the process and allow you to close the terminal session while keeping the program running – especially useful if you’re sshing into your Pi.

Comments are off for this post

My Kindle Authoring Setup

May 13 2012 Published by under Kindle, Uncategorized

As mentioned previously, I have started working on self-publishing my Playing With Chaos book on the Amazon Kindle self publishing service. I quickly got the outline, first chapter, part of the second, some code and images done. Then last weekend I decided I better check into the whole publishing process in a bit more detail. I went through all the material on Amazon’s site, as well as several other tutorials. I even downloaded a free ebook on Kindle publishing and paid for another 99 cent book on the subject. I learned a lot, but none of it made me very happy to begin with. Here’s why:

Pretty much every reference starts out telling you to write your book in Microsoft Word. Now don’t get me wrong – I think Word is a great tool as long as you are writing in word and then printing your documents out, or sending them to someone else who will view them in Word. It’s a super powerful application with every tool you could possibly imagine for writing almost anything. But where Word gets really ugly is its export functionality. I’ve done some professional work trying to convert exported Word docs into other formats. It was one long, horrible headache.

Workflow #1

The simplest possible workflow is:

1. Write your book in Word.
2. Upload to Kindle and let Amazon turn it into a Kindle ebook.

I suggest you try this. When you’re done looking at the results and wiping up your own vomit, we can move on.

Workflow #2

The next workflow, which is what most resources will recommend is:

1. Write your book in Word.
2. Save it as a filtered web page.
2a. Optionally clean up the HTML.
3. Zip and upload the HTML and other files to Amazon.
3a. Alternately, run it through another program to create a .mobi file and upload that to Amazon.

Doing steps 1, 2 and 3, without the optional/alternate steps will essentially give you the result of the first workflow. But I also suggest you do steps 1 and 2 and look at the results. This will give you an idea of why it’s such a mess. For my 1.5 chapter book in progress, the resulting HTML file was composed of 50% CSS, 50% HTML. All kinds of custom styles going on there. 99% of which will be ignored.

For step 2a, several pages I found offered advice on the various things to clean up and delete or change from the HTML/CSS. Nobody offered an automated solution. This gives you a workflow like this:

A. Write some of your book.
B. Export it to HTML.
C. Go through a lengthy, manual, painful process of cleaning up the HTML by hand.
D. Convert it to .mobi or upload it to Amazon.
E. Preview it.
F. Write some more of your book.
G. Do B-E again.

No thanks.

Now let’s move on to step 3a. There are three main tools used for converting HTML to .mobi.

– kindlegen

This is Amazon’s command line tool, so it must be good, right? Wrong. It’s known to be buggy and its output is just incorrect. It was my first choice, despite the warnings I’d read on various sites. There are Windows, Mac and Linux versions. And it’s command line! How could I not try it. But I soon found myself agreeing with the warnings and abandoned it.

– Mobipocket Creator

This is a Windows-only tool that will take documents of various types and convert them into ebooks. I tried this, but didn’t like it too much. It has a very consumery feel to it. Seems like it tries to over-automate the process for you, making all the decisions for you. Probably with a bit more investment of time, I could learn to control it more, but I was also not thrilled about the Windows-only part. And the fact that it’s a graphic interface tool, which I’ll discuss more in depth shortly.

– Calibre

The third choice is mentioned by a few, but seems to scare away most people. It’s triple platform – a big plus. In fact, I think it began as a linux tool. It also exposes just about every possible option you could ever want to tweak on your import/convert/output workflow. A bit overwhelming at first, but I liked that. While the main program is a graphical tool, I soon found out that it all just sits over a suite of command line tools that expose all those possible options. I was onto something big here!

Workflow #3

I quickly abandoned the whole idea of writing in Word. For one, it means jumping back and forth in a VM. Most Kindle books do not actually have so much formatting that you’re really getting that much benefit out of working in a word processor program like Word anyway. But more importantly, Word was just making me crazy with all that extra markup and styling. Furthermore, it was destroying my code formatting. I’d have a line of code with 4 spaces of indenting. It would sometimes do 3 spaces, sometimes 4, sometimes 5! No lie. True story. Trust me, I spent a couple of hours trying to just get a consistent 4 spaces = 4 spaces conversion. No go.

So I decided to just write my book in Sublime Text 2. Plain text baby!

OK, to be honest, it’s not plain text, but plain HTML. Yes, I’m writing my book with HTML markup. Before you start groaning, let me re-iterate that there is very little formatting that needs to go on in a Kindle book. Really all I’m doing is putting p tags around my paragraphs, and h tags around headings. And the occasional bold/italic/code/pre tag here and there. And images, yeah. But honestly, 95% of it is p’s and h’s.

I’d like to figure out some way to make that a bit cleaner eventually. Maybe some kind of markdown to HTML conversion. Something to research…

See my update on using markdown and pandoc here:

Anyway, I’m writing the code for the book in Sublime, so it’s nice to have the text and the code in one project so I can just copy and paste.

Now, the workflow in most of the examples I read was something like this:

1. Write.
2. Open MobiPocket Creator.
3. Import your files.
4. Tweak the following settings…
5. Export your book.
6. Close MobiPocket Creator.
7. Open an ebook previewer.
8. Load your exported book into the previewer.

Here’s the workflow I wanted to have:

1. Write.
2. Press F7.

And I have achieved exactly that! Yes, from within Sublime Text 2, I can change some text, hit F7, sit back, and in within a few seconds, I have an ebook reader open with my published .mobi format book loaded up.

The Setup

In the root project folder I have the following:

– book
– code
– images

book is a folder containing the chapter HTML files, plus a header and footer.
code is a folder with HTML and .js files that are the example code files I’m building throughout the book.
images is a folder. Guess what’s in it.
build.xml is an ant build file. What? You hate ant? Sorry to hear that. You lose. 🙂

Anyway, if you really don’t like ant, what I have is not rocket science. Should be easy enough to convert into your superior build system. But let’s look at what it does.

[php lang=”xml”]


We start out with some various properties that will get used throughout the build targets. The default target is preview while I’m writing the book, or code while I’m writing code. The preview target depends on publish, which depends on concat. The concat file takes all the chapters, wrapping them in an HTML header and footer, creating one large HTML file with the whole book. The header.html looks like this:

[php lang=”html”]

Playing with Chaos


And the footer just closes things up:

[php lang=”html”]


All the chapter files just go in the body section. Chapter 1 looks like this:

[php lang=”html”]

Chapter 1: Introduction

Fractals, Strange Attractors and Chaos Theory

Blah blah blah

and blah.

Another Section

more blah

Here’s some code:

function foo() {


The <a name=”start”></a> is a special tag that Kindle will use to indicate the start of the book. If a user navigates “Go to… Beginning”, this is where they will wind up. So that’s only in Chapter 1. Chapter titles are h1. Sections are h3. Paragraphs are in p’s. Code blocks in pre’s. Note that any < or > in code (or anywhere for that matter) will need to be converted to HTML entities. Pain in the neck there, but whatever. To be honest, it’s less work than I had to manually do to format this blog post. Finally, there’s a custom Kindle tag that inserts a page break, useful for end of chapters.

Again, see the update at No manual HTML needed at this point with markdown.

OK, back to the build. After concat, publish runs. Let’s look at that again…

[php lang=”xml”]


This calls up the Calibre command line tool, ebook-convert. The command line tools should be automatically installed when you install Calibre on Windows or Linux. Apparently there is one extra step to install them on Mac. The first two args are the input HTML file, and the output .mobi file. Then there are a whole bunch of options.

I’m saying chapters are h1’s and should get a page break. I’m not sure how that differs from the custom pagebreak tag I added manually, but doing both doesn’t seem to hurt anything. The table of contents should be built from h1’s and h3’s.

I’m setting metadata for the author name and cover image. The metadata for the book title will come from the HTML title tag.

I’m setting the output profile as Kindle. Not sure exactly what this does. Seems to work fine without it, but seems sensible to set it.

The last arg is –smarten-punctuation. This turns regular apostrophes, single quotes, and double quotes to their curly equivalents. So I can simply type


and get


in the output. Also converts single dashes to en dashes and double dashes to em dashes. Brilliantly, this option ignores anything in pre tags!

Once the book is published, the preview target will run. This runs another Calibre command line tool, ebook-viewer, passing in the name of the .mobi file that was just created. This pops open an ebook reader with your book preloaded. This is NOT a Kindle simulator by any means, but it will let you verify that your cover is set, your text looks like what it should, images show up, TOC works, etc.

So again, write something, throw some tags around it, hit F7 and there it is in ebook form. Couldn’t be better. You can then take this compiled .mobi and upload it to Amazon for publishing.

Additional testing. If I’m doing something that I want to make sure looks just right, I have a VM open with Windows running in it. There is a Kindle preview tool that you can download from Amazon that lets you preview how your .mobi will look in a regular Kindle, Kindle DX, Kindle Fire, iPad, iPhone, etc. On Windows and Mac you can also install the Kindle Desktop Reader and make sure your book looks OK there too.

Finally, nothing beats dragging the .mobi into right into a real live Kindle and seeing how it looks on the real live device. There’s actually a Calibre command line tool for transferring a file to a device as well. But with the Kindle, it needs to be plugged in and mounted for transfer, then unmounted to actually read the book. And I don’t test on device every time I build, so I did not make that part of my process.

Here’s the book as seen on a real device:

Oh, and there’s also the code target, which simply launches the specified HTML file in the browser. I just change the default target to code while I’m coding up an example, and back to preview when I’m writing the book.


Overall, I’m super happy with how this is working out. The big things I’d like to improve are 1. as mentioned, figuring out some possible markdown conversion to simplify formatting and 2. something to possibly automate replacing angle brackets in pre code tags.

Here’s a link to the Calibre command line tools:

And all the possible options for publishing HTML -> MOBI:

I’ve pored over that last link, but I’m sure there’s still some things I could use in there that I haven’t investigated.

10 responses so far

CSS Roadblock

Jan 16 2012 Published by under JavaScript, Uncategorized

Generally I like to use my blog for dispensing knowledge, advice, opinions, thoughts, musings, and of course, FACTS. But occasionally I get stuck on a point and all my research leads me to a dead end, and I’ll write a post that asks for help. I figure the answers just might help someone else down the line anyway, so it’s not purely selfish.

OK, so I’ve learned to stop worrying and love JavaScript. HTML I can tolerate. But CSS is gonna kick my ass.

Here’s what I want:

Two divs, floated side by side, varying amounts of text in them, but that text needs to be bottom aligned. Here’s what I came up with after a few Google searches:

[php lang=”HTML”]

Some content that will wrap lorem ipsum and all that crap just to make a long lon long div
other stuff


And here’s what it looks like:

But I have one more need. I’m hard coding the height of the header class to be 100px. I want it to be the exact height of the tallest content. So that it looks like this:

The thing is, that because the header-content div is absolute positioned, then the header div’s height will be 0 unless explicitly set. So the bottom of header is the same as the top of header and header-content goes off the top of the page.

The only way I’ve managed to do this is via JavaScript something like this:

[php lang=”JavaScript”]var contents = document.getElementsByClassName( “header-content” );
var h = 0;
for( var i = 0; i < contents.length; i++ ) { var content = contents[ i ]; h = Math.max( h, content.offsetHeight ); } var headers = document.getElementsByClassName( "header" ); for( var i = 0; i < headers.length; i++ ) { var header = headers[ i ]; = h + "px"; }[/php] This loops through the header-content divs, finding the tallest one. Then with that value, sets the height of both header divs. Works just fine. In Flash, I'd have no problem using code for layout. But I'd love to know if there is some pure CSS way to accomplish this.

20 responses so far

JavaScript Classes

Jan 11 2012 Published by under JavaScript, Uncategorized


Fact: JavaScript is an object oriented language.

Fact: JavaScript does not have classes.

Fact: JavaScript is dynamic and expressive enough to create structures that emulate classes.

Beyond those three facts, everything else here will be theory or opinion.

Expansion of facts:

JavaScript is an object oriented language but it does not have classes. Some people see these two statements as conflicting, but object oriented does not necessarily equal classes. Classes are only one paradigm used in object oriented systems, one of the more common ones, yes, but not the only one. Object oriented merely means that you have objects which contain both data and behavior – or properties and methods if you like.

You can create structures in JavaScript that emulate classes. Yes, but should you? That’s today’s topic.

First of all, why do people try to create class-like structures in JavaScript? I think mainly because they are coming from some other class-based language and that’s what they are used to. It makes them feel at home and transforms JS into something they think they can understand better. But there are many drawbacks to such an approach. Read a couple of in-depth articles or books on the subject. It starts out simple. You create a constructor function and add methods to the prototype. No real problem there. But then you want to implement inheritance and things begin to get tricky. Every fix has various drawbacks which have more fixes. The code ends up being quite complex, especially when you think that the main benefit is to make the programmer more comfortable with the language by making it seem like another language. Complexity has various potential side effects, including code brittleness, learning curve, file size, performance, and memory use, to name a few.

But beyond the idea of programmer comfort, there are some valid problems that people are trying to solve using classes. In most languages, classes offer 3 main benefits:

1. Code re-use via inheritance.

2. Information hiding / encapsulation.

3. Data typing and polymorphism.

These are all very fine things to strive for in programming anything. Let’s look at how they apply.

1. Code re-use.

This means you’re not typing the same code more than once. The DRY principle. Say you have a sprite system where each sprite has an image it draws to a canvas in a draw method:

[php lang=”js”]
function render() {
this.canvas.draw( this.image, this.x, this.y );

And you have a player object that has certain behavior and an enemy object that has certain behavior, but both need to render to the canvas. It would be a poor decision for each of them to have a duplicate render function. You would somehow want to define that function once and have both of them share it. Then, if you ever needed to change it, you’d only need to change it once, they’d never get out of sync, you wouldn’t find errors creep into one, but not another, etc. And futures sprite types could also share the same render method.

In a class based system, you’d have a base class where any common code would live. Say a sprite class, with the render method. Then both player and enemy could inherit from sprite and both get the single render method. This is what everyone is taught in week one of most computer courses that venture into OOP. But remember, the problem we are trying to solve is code re-use. Class-based inheritance is not the only way, or even necessarily the best way to reuse code. In fact, another key principle often espoused in software design is “favor composition over inheritance”.

2. Information hiding and encapsulation.

This is all about setting up a public interface or api for an object that other objects can use, and having an internal implementation that other objects cannot (or should not) use. This means that you should be able to change the internal implementation without breaking any code that is using the public facing api. In class base languages, this is usually done with access modifiers such as public, private, protected, etc. Some languages have additional modifiers such as internal, friend, etc. and the actual rights that these modifiers bestow or block can vary slightly from language to language.

JavaScript does not have any native access modifiers, but there are ways of using closures to create functions and properties that are only accessible by methods of an object and not by outside code, thus accomplishing information and encapsulation. Interestingly, though, many pseudo-class systems in JavaScript do not even attempt to implement privacy, whereas other non-class based systems, such as modules, do this as a matter of course.

3. Data typing and polymorphism.

This says that if I create a class called Dog in a strictly typed system, I can make a variable that only accepts instances of the Dog class. And I can make a function that only accepts an argument of the Dog class. Furthermore, I can make a class called Animal and classes Dog and Cat that extend Animal. Now I can have a variable or method parameter that states it only accepts Animal objects, to which I can pass either Dogs or Cats.

Since JavaScript is not a strictly typed language, this concept is almost completely useless. I cannot specify what type my variables should be, nor can I state what kind of object a method parameter can accept. Yes, I could code all my methods with checks to typeof or instanceof and throw runtime errors if the wrong type was passed, but … nah.


So, what it comes down to in most cases of people creating these complex class emulation systems, is code reuse. A valid concern, but not one that I am convinced has pseudo-class-based inheritance as its best answer. In future posts, I’ll cover some of the different ways to accomplish code re-use as well as encapsulation in JavaScript.

26 responses so far

Linescapes Iteration 9

Sep 07 2011 Published by under Uncategorized

A different gety function:

[php lang=”JavaScript”]$(function() {
var canvas, linescape, hills;

canvas = $(“#canvas”).get(0);
linescape = new LineScape(canvas);
linescape.xres = 1;
linescape.zres = 0.5;

hills = [];
for(var i = 0; i < 100; i += 1) { hills[i] = {x:Math.random() * 1000 - 500, z: Math.random() * 2000, force:Math.random() * 2000 + 1000}; } linescape.gety = function(x, z) { var y = 600; for(var i = 0; i < 100; i += 1) { var hill = hills[i]; var dx = hill.x - x; var dz = hill.z - z; var dist = Math.sqrt(dx * dx + dz * dz); y -= Math.sin(1 / dist * 1000) * 10; } return this.ycenter + y; } linescape.draw(); });[/php] Result.

3 responses so far

PaceCalc for Windows Phone 7

Nov 25 2010 Published by under Silverlight, Uncategorized, Windows Phone 7

As many of you know, I’ve been running for the last year and few months, and completed a few races here and there. One of the first things you start to focus on when you sign up for your first race is your pace and predicted finish time. It’s a simple calculation of pace = time / distance. You might be thinking, “wait, speed is distance / time”, but runners usually measure pace in minutes per mile or kilometer, rather than kilometers or miles per hour. So if you know the length of your race and how fast you can run, you can predict when you’ll come in. Or if you have a goal for when you want to come in, you can calculate how fast you need run to meet that goal. Last, and probably least, if you know how fast you’ll be going and how long you’ll be running, you can predict how far you will go.

There are pace calculators all over the web, but none yet for Windows Phone 7. So I figured it would be a fun project to create one. It would give me a real world reason to use some of what I’ve been learning about Silverlight too. On the outset, it looked really simple. Three text boxes for time, distance, and pace, and three buttons. The toughest part was all the time conversion and formatting. I decided to break up the text boxes for time into separate ones for hours minutes and seconds. I added some preset distance buttons and a toggle for miles or kilometers. Here’s the final result:

I’m really impressed with Silverlight. I’ve done enough Flex work so that this was quite simple. Flex has never really grown on me, but I find I’m actually starting to like Silverlight. It feels much more robust and mature and well thought out than Flex.

Anyway, the whole app took just a few hours to code. I started it when I got home from work on Tuesday and it was done before I went to bed. Wednesday morning I made up a crappy icon, took a screenshot and submitted it to the WP7 marketplace. Wednesday evening I got an email saying it was approved and the next morning (today) it was live and available for download. After having waits of up to 3 weeks for iOS app store approval, this blew my mind. Of course, the MS marketplace is young and lower traffic and will feel its own stress points as it grows. But I’m willing to bet that it remains a much more streamlined experience. Developers, developers, developers! Right?

I think this app will continue to be a great way for me to learn more about Silverlight and tweak things. I already worked a bit on input validation. When you enter an input field, a keyboard comes up just like on other devices. I had made it so that a telephone numeric keyboard comes up since you only enter numbers there. But there are still invalid characters that one could enter, such as “,+=#”, space, or “.” in the time fields. So I just did an update that restricts those characters and limits the number fields to two digits. I also started working on better layout using a few grids in key spots. I may even experiment with changing it to a panorama control, adding another page for maybe calculating splits (where you’d have to be at each mile or kilometer to be on track for your goal time), or other useful info.

Long and short of it, I’m having fun. The app is free by the way, so it’s totally for fun and learning, and of course because I find it a useful app personally. I’m also forming an idea for another game. Having fun is fun!

10 responses so far

Drawing Primitives in XNA Game Studio 4.0

Sep 25 2010 Published by under Uncategorized, Windows Phone 7

So I’m working on porting Falling Balls over to Windows Phone 7. I have the animated stick figure, the motion code, the blood spatter, and sound effects all working. I’ll eventually need a real device to get the accelerometer stuff working, but in the meantime, I moved onto drawing the balls. In the game, I need to be able to make circles of arbitrary, random sizes. I looked into doing this with textures, starting with a circle bitmap and scaling it up or down, but we all know what happens when you start scaling bitmaps. Although it was a worthy experiment, it came out about as crappy as I expected it would. What I really needed was a way to dynamically draw a primitive circle.

In Flash, we all know how easy it is to draw a circle:

[as3]graphics.drawCircle(c, y, radius)[/as3]

In Objective-C, I had to use some Core Graphics stuff, which, while a bit verbose (like all Objective-C), was eventually pretty straightforward. XNA, on the other hand, was really designed more for drawing textures, i.e. bitmaps. Once you get into drawing primitives like lines and circles, you need to code a lot closer to the metal. It took digging through a bunch of samples and forum and blog posts, but I think I finally distilled the core actions necessary to draw primitives.

On a side note, I think one of the reasons that people (at least seem to) like my tutorials, books, etc. is that I do distil things down to that base level needed to understand it. I personally find it difficult to find a lot of tutorials on the web that do that. For example, the primitive drawing sample code I learned most of this from gives you a class with hundreds of lines of code wrapping all the primitive drawing functions, and tells you to use this class. It’s great, I guess, if you just want some code that you can drag into your project and use, but it doesn’t explain much at all about what’s happening and why, other than a few one line comments. And there’s a whole lot of extra stuff going on there to make it flexible and reusable – good code, but it adds to the complexity if all you’re trying to do is learn what’s going on.

Drawing a Line

First let’s just draw a line. The first and most important concept you need to grasp is that all the primitive drawing stuff is really working with DirectX 3D drawing code. So even if you just want to draw a 2D line, you’re actually drawing a 3D line where all the points are at 0 in the z dimension. This also means we have to set up a viewport into our 3D scene, but we’ll want to do this so that it winds up just being a 2D scene and everything rendered at a z position of 0 will have a 1 to 1 ratio with the pixels of the screen when it is rendered. In other words, if I draw a line from 0, 0, 0, to 100, 100, 0 in the 3D space, it will draw that line from 0, 0 to 100, 100 on my screen.

We’ll also need to define vertex and pixel shaders on the graphics device. Scared yet? Yeah, so was I, until I realized that there are shortcuts for all this stuff. You still have to do it all, but it just takes a few lines of code that you don’t really need to fully understand. Of course, if  you want to understand it, by all means, dig in and learn more. But most of that is really only important when you start doing more complex 3D rendering. For drawing primitives in 2D, you really just need to know what to tell the system to make it work.

OK, first of all, create a new project in VS 2010 Express for Windows Phone. You can make it a WP7 project, Windows desktop, or XBox project, it doesn’t really matter, but I’ll be going with WP7.

This should give you your standard base class with Initialize, LoadContent, UnloadContent, Update, and Draw methods. We’ll need two class properties here, so add these in right away:

[csharp]BasicEffect basicEffect;
VertexPositionColor[] vertices;[/csharp]

The basicEffect is where we set up our drawing properties – the viewport, how things are rendered, the shaders, etc. The vertices is an array of points. Actually, we’ll use the VertexPositionColor data type, which enapsulates a 3D vertex with a color.

Now, jump down to the Initialize method. Here’s where we set up the basicEffect and create a couple of points to draw a line.

[csharp]protected override void Initialize()
basicEffect = new BasicEffect(graphics.GraphicsDevice);
basicEffect.VertexColorEnabled = true;
basicEffect.Projection = Matrix.CreateOrthographicOffCenter
(0, graphics.GraphicsDevice.Viewport.Width, // left, right
graphics.GraphicsDevice.Viewport.Height, 0, // bottom, top
0, 1); // near, far plane

vertices = new VertexPositionColor[2];
vertices[0].Position = new Vector3(100, 100, 0);
vertices[0].Color = Color.Black;
vertices[1].Position = new Vector3(200, 200, 0);
vertices[1].Color = Color.Black;


First we create a new BasicEffect, passing in the graphics device. We tell it that we want to use colored vertices, so each point can have its own color assigned. Then we create our projection. This is what I was talking about making the 3D world look like a simple 2D plane. The Matrix.CreateOrthographicOffCenter function takes care of this for us. We pass it in the left, right, top and bottom coordinates of the area we want to look at, and a near and far plane. For this we use the coords of our physical screen, and 0 and 1 for the planes. Whew! That part is done. See, not so scary.

Then we create two colored vertices. One is at 100, 100 on x, y and the other at 200, 200. Both have a z index of 0 and a color of black. And that’s all we have to do to initialize. Now onto the Draw method.

Despite how scary I may have made it sound, you only need to write two lines of code to draw a line between these two points.

[csharp]protected override void Draw(GameTime gameTime)

graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.LineList, vertices, 0, 1);


The first line (after clearing the screen) tells the basicEffect to apply whatever techniques it already has set up for drawing. This sets up the vertex and pixel shaders, etc. Do I have any idea what’s really going on there? Only vaguely. But if you leave that line out, You’ll get a run time error telling you that you need to define vertex and pixel shaders. So you better do it.

The next line is where the drawing happens. We call the DrawUserPrimitives method, telling it first what type of vertices we are using: VertexPositionColor. We pass this in the type of primitive we are are drawing. This can be a line list, line strip, triangle strip, or triangle fan. These should be familiar to you if you’ve dabbled at all in OpenGL or DirectX or even AS3’s advanced drawing API stuff in Flash Player 10. A line list is just that, a list of lines. The data in the vertices array is interpreted as pairs of points. It will draw a line between each pair. Then we pass the array of vertices itself, where to start drawing (0 means the first element in the array), and how many primitives to draw. Here we say 1, since we are drawing 1 line. A common mistake might be to pass in 2, thinking there are two poitns, but it’s the number of primitives, not the number of vertices.

Anyway, if you have that all right, you should be able to run this in the simulator and see a line on the screen. Yippee! An interesting point is that because each vertex has a color, you can get an automatic line gradient just by changing the color of one of the vertices. Try it:

[csharp]vertices = new VertexPositionColor[2];
vertices[0].Position = new Vector3(100, 100, 0);
vertices[0].Color = Color.Black;
vertices[1].Position = new Vector3(200, 200, 0);
vertices[1].Color = Color.Red;

Neat, eh?

Drawing Multiple Lines

Now what about drawing more than one line? First, lets add a couple more vertices…

[csharp]vertices = new VertexPositionColor[4];
vertices[0].Position = new Vector3(100, 100, 0);
vertices[0].Color = Color.Black;
vertices[1].Position = new Vector3(200, 100, 0);
vertices[1].Color = Color.Red;
vertices[2].Position = new Vector3(200, 200, 0);
vertices[2].Color = Color.Black;
vertices[3].Position = new Vector3(100, 200, 0);
vertices[3].Color = Color.Red;[/csharp]

Note that in the first line we specify that the array will have four elements.

Now in the Draw method, lets tell it we are drawing 2 primitives this time:

[csharp]graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.LineList, vertices, 0, 2);[/csharp]

Again, this is the tricky part. Remember that a line list takes the vertex array as a list of pairs of elements. So it looks at the first two vertices and draws a line between them. Then it takes the next two and draws a line between them. We have four vertices, so that’s two lines.

If we want to draw a continuous line between all the points, we should use a LineStrip. This takes the first vertex as the starting point, much like a moveTo in AS3, and each additional vertex will function as a lineTo. In this case, your number of primitives will be one less than the total number of points. We have four points, so that’s three lines.

[csharp]graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.LineStrip, vertices, 0, 3);[/csharp]

If you want to draw a line back to the starting point, you’d have add another point to the array, with the same coords as the first one, and add one more primitive.

Drawing a Circle

There is no built in circle drawing function, so we have to roll our own. Luckily circles roll pretty well. (oh…..)

I’m not going to explain the trig here. If you don’t get it, go out and buy a few copies of my book. 😉 First we make the points:

[csharp]vertices = new VertexPositionColor[100];
for (int i = 0; i < 99; i++) { float angle = (float)(i / 100.0 * Math.PI * 2); vertices[i].Position = new Vector3(200 + (float)Math.Cos(angle) * 100, 200 + (float)Math.Sin(angle) * 100, 0); vertices[i].Color = Color.Black; } vertices[99] = vertices[0];[/csharp] Our circle will have 100 points. Its center will be 200, 200, and its radius will be 100. We use some trig to go around from 0 to just under PI * 2 and create 99 vertices around (0 to 98). Vertex 99 will be the same as the starting point so that the circle is closed. In Draw, we just need to up the number of primitives to 99. Remember, with LineStrip, the number of primitives is one less than the number of vertices. [csharp]graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.LineStrip, vertices, 0, 99);[/csharp]

There you go, a perfect circle. I’m sure it’s very obvious to you how to turn this into a reusable function, so I’ll leave that up to you, now that you know the basics. You probably know enough to make a DrawLine, DrawCircle, DrawRect, and maybe even a DrawCurve function.

Also note that the circle looks a bit rough. There doesn’t appear to be any antialiasing on it. I’m guessing that if you dig around in BasicEffect you might find something that makes it look prettier. Also, as far as I know, there is no built in way to change the line width. If you need something a bit more visually robust, check out this post:

21 responses so far

Thoughts on eBook formats

Sep 18 2010 Published by under General, Kindle, Uncategorized

The traditional markets that have existed for hundreds or thousands of years are still struggling with this newfangled digital media stuff, trying to impose old world restrictions on it that just don’t work. I’m all for an author, musician, artist or programmer getting paid for their work. But DRM as it exists is doomed. Virtually all DRM is eventually cracked and it just becomes a race between the manufacturers creating more complex DRM and hackers breaking it, and lawyers and judges threatening jail terms and huge fines to people doing no more than they have for decades – sharing their albums and books. You know something is wrong when the word “sharing” becomes redefined to mean something synonymous with “criminality”.

The music industry has been dealing with this for a while longer than the book industry and are slowly coming around. For most of the songs on the iTunes music store, you can buy slightly more expensive DRM free versions. Many other on-line music retailers are following suit and offering DRM free songs. And it actually seems to be working. People keep buying them and the record companies and artists are making money. Removing DRM from music did not result in the total downfall of the recording industry.

I think the key points that made it work for music are:

1. Make it very easy to buy what you want. Easier and safer than searching some seedy “warez” site filled with malware and viruses.

2. Make it cheap. 99 cent songs, 9.99 albums are affordable. As cheap or cheaper than I used to buy my vinyl LPs 30 years ago!

3. Universal formats. Download a song and play it on virtually any device.

Eventually the publishing companies will come around on this stuff. They are on their way:

1. Make eBooks easy to buy. They are doing well on this. Between Amazon, B&N, and iBooks, you can easily find pretty much any book that is available in digital format. Yes, you can also find pirated, cracked books, or crack the DRM yourself, but it’s a pain in the neck. Much easier to buy.

2. Prices probably need to come down. A book at $12.99 or more makes searching for a pirated version just that much more attractive.

3. The fact that the Kindle has its own proprietary format that no other device can read, and the fact that the Kindle cannot read ePubs, DRMed or otherwise, is perhaps its worst “feature”. Amazon gets away with this for now because they have the biggest and best selection of books and the best, most popular dedicated reading device. Very similar to iTunes a few years ago. But I think eventually Amazon is going to need to adopt the ePub standard or allow and actively encourage other ebook manufacturers and publishers to use the AZW format, making it the de facto standard. However, I think and hope that eBook DRM will go the way of music DRM.

16 responses so far

Kindle 3: Under the microscope!

Sep 03 2010 Published by under General, Kindle, Technology, Uncategorized

Yeah, this took a while, but I finally got around to sticking my new toy under the ‘scope. To be honest, the differences between the Kindle 2 and the new version are amazingly apparent the first time you turn the thing on. The contrast is supposedly 50% better, but my eyes say it is many times better. When I look at my Kindle 2 now, it does indeed look like “wet newspaper” as one of my dear commenters said in my last Kindle post. 😉

Anyway, here are the closeups. In each case, the low res shots are approximately 25-26x and the high res ones are around 400x. I concentrated taking the same shots on the same images / words at the same size on both models. Note that all the images are links to full size images.

First, an image, a close up from one of the screensavers.

Kindle 2:

Kindle 3:

Pretty easy to see that the K3 is darker and crisper. But to the naked eye, I feel the effect is even more stunning. The screensaver photos themselves are rendered beautifully. I’d still like some new ones, but even as bored as I am with the, the first few times I saw them, I had to stare a while.

Now let’s zoom in on that eye, to 400x.

Kindle 2:

Kindle 3:

What you are seeing here are some gradient bands of gray values. What I notice here is that the various shades are noticeably different in the K3, and kind of muddled in the K2. Also, what seems to be happening in the K2 is that the microcapsules of E Ink are either spaced a bit further apart or somehow have some kind of dark border. They are very distinct from each other, whereas the K3 capsules seem closer together with less of a noticeable border. Thus, in the K2, the “white” areas still have so much dark border around them that the areas appear more gray than white, whereas in the K3, the white areas are more uniformly light. This is evident in several of the following pictures as well.

Here’s a closeup of one of the branches in the birds screensaver.


Kindle 3:

It also seems like in the K3, there is a bigger mix of smaller and larger capsules, resulting in what could be called a higher resolution.

Now, onto the important stuff, TEXT!
Kindle 2:

Kindle 3:

Mmm…. rich and dark.

Let’s zoom in on the rightmost vertical stroke of the letter “m”.

Kindle 2:

Kindle 3:

Now we’re talking! Here you can really see just how dark the black is, as well as how much whiter the white is.

And now the curve of the letter “e”.

Kindle 2:

Kindle 3:

Again, you can see the darkness and the uniformity of the blacks and whites. What’s interesting here is that the fuzziness of the K2 actually seems to result in some crude antialiasing, smoothing out the stairstep of the curve. I’m not sure what’s going on here. It’s obvious that the microcapsules themselves would be capable of a higher resolution. They are not what’s causing the “jaggies”. I guess it’s the underlying grid of charge-producing elements that is giving you that pixelation. See the below image and link:

Anyway, that’s all I have for now. Notice that I did not mention any products beginning with an “i”. Hopefully this will help avoid World War 4 starting on this blog, but unfortunately will also mean fewer hits. Controversy sells. 🙂

Oh, and in case you want to pick up one of those nifty USB microscopes, they ROCK! And only $60ish.

Veho VMS004 DELUXE USB Powered Microscope

19 responses so far

Kindle and iPad Displays: Up close and personal.

Aug 12 2010 Published by under General, iPhone, Kindle, Uncategorized

This really isn’t meant to be a contentious post. It really only came about because I got a new toy, something I’ve been wanting to get for a while – a USB microsope! Here’s the model I got:

Veho VMS004 DELUXE USB Powered Microscope

The family had great fun playing with it tonight – looking at everyone’s skin and hair and dirty fingernails and bug bites, and paper and money and cloth and salt and sugar, etc. I could barely pry my daughter away from it. The software allows you to capture images and videos and even notate them with actual measurements, etc. based on the level of magnification.

While playing a bit more with it, I held it up to my computer screen and my Nexus One screen and could clearly see the pixels. Neat. Then I wondered what the Kindle’s screen looks like close up. Quite different! I then compared the Kindle’s screen at roughly 26x and 400x with the iPad’s screen at approximately the same resolution. Wow! No wonder the Kindle is so much easier to read!

First at about 26x.



And now at about 400x for the Kindle and 375x for the iPad.



The Kindle’s screen looks almost organic at high magnification. I need to learn more about eInk now. I will hopefully be getting my Kindle 3 in a couple of weeks (should ship August 27). I’m interested to see how that shows up – supposedly the contrast is much better. And now I need to get my hands on a iPhone 4 with that retina display. I’d love to see what that looks like close up. Not buying one though. Maybe someone at FiTC San Francisco will have one they can lend me for a photo.

[Update 8/13/10]

As requested, here are some additional photos at 26x and 400x, of print media.

First, newsprint, then a magazine, then a paperback book at 26x.




And now the same three, in the same order, at 400x:




Again, I leave it to you to make your conclusions.

[Edit #2]
I changed the post title to remove the “vs.”, replacing it with “and”. This is not a battle, people. Just some interesting photos. Relax. It’s all going to be OK.

428 responses so far

Older posts »