Developing for the AGENT smartwatch: Part 2

This entry is part 2 of 3 in the series Developing for the AGENT smartwatch
Tweet about this on TwitterShare on FacebookShare on RedditShare on Google+Email this to someonePin on Pinterest

 

Welcome to Part 2! In this part we will go over everything there is to know about using text in an AGENT smartwatch app (or watchface), including using custom fonts.

image

You can use the project you created in Part 1, or create a new project using the AGENT Watch Application template.

The default code

Before writing code, let’s go over what each of the default lines of code actually does.

These are the Using statements and allow the code in this file to reference code in other places.

This is the namespace of this file. Generally your namespace will be the same as the name of your project. Code files within folders will have the folder name added to the namespace automatically – for example, a class within a folder called Helpers would have a namespace of AgentWatchApplication1.Helpers by default.

The name of the class. Try keep one class per .cs file, and keep the name of the class the same as the name of the file.

You will find this in every AGENT project. It is the object that you draw to when you want to put stuff on the watch screen.

This is the method that will be run when the app or watchface is started. All your initialization and setup code goes here.

The first line is a comment (because of the double forward slash), and the second creates a new Bitmap object and assigns it to the display. When creating it, the code also specifies how big it should be, and in this case is set to be the full size of the screen. It is important to realize that you can have many Bitmap objects to store various images, but only this one is used to draw to the screen.

This will clear the display. Usually you will clear the screen before drawing anything else you will just be drawing over what was on the screen already.

Just now we will look at how to add a font to the project resources. This line creates a new Font object and loads the default font (called NinaB) into it.

With the display and font loaded up, the code writes Hello World to the screen.

After drawing to the screen, call Flush to tell the screen to refresh and display the new information.

This line tells the watch to go into a dormant state. In this state the last thing drawn to the screen will stay there, and the watch can still be told to wait for buttons to be pressed or for a timer to run some code every X milliseconds.

Drawing text

[Unless otherwise stated, the code in the following sections goes after the Clear call, and before the Flush call.]

OK, so we’ve seen how to draw text, but how do we position it? The fourth and fifth parameter in the DrawText method are the X and Y positions that the text must be drawn at.

The AGENT screen is 128 pixels wide, by 128 pixels high. The X axis is horizontal (left right) and the Y axis is vertical (up and down).

watchcoords

The position we specify is where the top left of the text should be. So to make some text display at the very top left of the screen:

image

If we want to draw some text right at the bottom of the screen it is slightly more complicated. Remember that the positions we specify are the top left of the text, so drawing text at 0,128 (the bottom left of the screen) would draw the text off the screen. So to make the text fit on screen the Y would be: (ScreenHeight – heightOfText). With some trial and error we can work out that this particular font is about 13 pixels high, so the code would be:

image

What if we wanted to draw a few separate pieces of text? Just call the DrawText method multiple times:

image

Colors

No-doubt you have noticed the Color.White in the call to DrawText. The AGENT screen is 1bit, meaning each pixel is on of off, so is white or black. If we were to make the text black right now we would see nothing because the background is black. In the next part we will go over how to change the background.

Fonts

By default two fonts are included in the AGENT project templates. The first one is called NinaB (the one we’ve been using), and the second is simply called small. To use the small font we need to load it up into memory. Do this by adding a line almost the same as the line that loads up the NinaB font (both lines shown for clarity):

We can then use that font:

image

The code draws the heading in NinaB, and the rest in small. However, notice the weird character after the numbers? Not every font includes every character (in this case small doesn’t include the degree symbol). So if you see strange results, it could be that you are using an unsupported character.

We can also use custom fonts that are not included in the template, but we need to generate a file the the watch can understand. Head over to this website and download the app (link near the bottom) developed by Jan Kučera.

image

It is a pretty simple-to-use app that will generate a font file for us from a bunch of settings.

In the first section you can choose what font, style, and size you want. Unlike using a font in Notepad (etc), you cannot change the font size at will in the AGENT code, so you must specify what size you need in the app.

image

As mentioned earlier, not all characters are included in a font file. At the bottom left you can choose what characters you want to be included in the font. Only select the ones you need so you don’t waste resources on the watch. If you only need a few, you can even deselect all of the checkboxes and specify the characters in the These text box to the right.

image

The font will be previewed at the bottom right. I’ve used a rather hideous font to make it easy to recognize on the watch.

image

Press Convert at the bottom then choose a directory to save it. This will output a .tinyfnt file.

Returning to Visual Studio, open up Resources.resx, which is where all our resources are stored.

image

Press the Add Resource button to open up a dialog. Change the file type to All Files (*.*), then find the font you exported and hit Open.

image

A new file will be added. For the rest of our code to be able to see this new file we need to build the project. Press F6 on your keyboard to Build.

image

Going back to Program.cs, add another line declaring the font. Replace oldenglish with the exact name of the file you just added.

And now we can change the drawing code to use this new font for the header (or any of the other lines of course).

image

NOTE: Fonts have various usage restrictions around them. Make sure you are legally allowed to use a font before using it in an app.

Over and out

That is pretty much everything you need to know about fonts. Up next we draw shapes and images!

Series Navigation<< Developing for the AGENT smartwatch: Part 1Developing for the AGENT smartwatch: Part 3 >>
Tweet about this on TwitterShare on FacebookShare on RedditShare on Google+Email this to someonePin on Pinterest