Developing for the AGENT smartwatch: Part 3

This entry is part 3 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

 

So far we have just drawn some text to the screen, so in this part we will be drawing images, lines, blocks, and rectangles!

image

Open up your previous project or create a new one. Delete all the code between the Clear and Flush calls. All the code below goes between these two lines.

Lines

Drawing lines is pretty easy, you just need to know the start and end position of the line you want to draw.

The parameters for the DrawLine call are: Color, line thickness, start X, start Y, end X, end Y.

image

Drawing multiple lines is the same as drawing text in multiple places – just call DrawLine a few times.

image

The thickness parameter can be used to beef up the lines a bit, but note that the result is probably not what you want as it rounds off the edges. If you want a thick line with sharp edges then you may want to draw multiple thin lines or a rectangle (discussed later).

image

Circles

To draw a circle, we just call the DrawEllipse method with the following parameters: Outline color, center X, center Y, radius X, radius Y.

image

The center X and Y positions are where the center of the circle will sit, so half the circle will be cut off if you make one of them 0.

image

The radius specifies the distance between the center point and the edge. So a radius of 10 X would mean a width of 20. The X and Y can have different radiuses to squash the circle.

image

If we were to draw multiple circles on top of each other, you can see that the inner of the circles are filled with black.

image

We can fix this by using a method called MakeTransparent. This method just a color as a parameter and will change any pixels of that color to transparent. Using this will make our code quite a bit more complicated though. We need to create a new small Bitmap object (of a random size), draw the circle to that bitmap (we draw it in the center), then call MakeTransparent on that bitmap, and finally draw that bitmap to the main _display  bitmap. We will discuss the DrawImage method soon.

image

Another option is to use a more complicated overload to the DrawEllipse method. It allows you to choose both the thickness of the outline, the color of the inner fill, plus the whether the inner should be transparent.

The parameters are: Outline color, line thickness, center X, center Y, radius X, radius Y, inner color, ignore, ignore, inner color, ignore, ignore, opacity.

.NET MF has some support for things like gradients, but due to the AGENT only having a 1bit screen, we can just ignore that. So both inner color parameters should be the same, and you can just set the ignore parameters to 0. The opacity value should be 0 (for invisible) or 255 (for visible), and determines whether the inner color is drawn. If the opacity is set to 0 then the inner color parameters don’t matter.

image

If we set the inner color to black and opacity  to 255 then we can no longer see the circle beneath because the center of the top circle is now being drawn. Another thing to note is that draw commands are done in order, so the first line is drawn first, and the second line is drawn on top of the first.

image

We could also fill the back circle, and then switch the outline and inner colors of the front circle.

image

Rectangles

As with everything else so far, drawing rectangles is simple, and is similar to the more complicated overload for circles.

The parameters are Outline color, line thickness, top left X, top left Y, width, height, radius X, radius Y, inner color, ignore, ignore, inner color, ignore, ignore, opacity.

image

The X and Y radius define how rounded the corners are on each axis.

image

If the X and Y radiuses are equal then the curve of the corners will be symmetrical.

image

And of course, we can set the inner fill to draw by setting the opacity  to 255 – however this will only work when both radiuses are set to 0.

image

Helpers

Although drawing  shapes is easy, there are a lot of parameters that we can just ignore. So you should write some helper methods to make it really easy to draw stuff.

Here is an example of a method that we can use to simplify the drawing of a rectangle.

Using that helper method will make it a bit easier to draw rectangles.

 

Spacey

One last example is to show how we can draw slightly more complicated things quite easily using just rectangles (or lines/circles). Here is a little helper method that will allow us to draw rectangles to the screen like it is a grid (of a few pixels per block).

And in the Main method between the Clear and Draw calls we use that method.

image

Images

So while being quite versatile and easy to use, drawing simple shapes can only get you so far. Luckily drawing images is easy too.

We can include pre-made images in the watch project and draw them on screen – but first we need to convert the image we want to use into a 1bit gif. Head on over to this post where you will download an app and use it to convert your image. Remember that the max width and height of an image should be 128×128.

Once you have an image, in Visual Studio open up Resources.resx. Press the little arrow on the right of the Add Resource button, then press Add Existing File.

image

In the dialog (you may need to change the type filter at the bottom right to images) select the 1bit gif file.

image

Save and close the Resources.resx, then build the project.

In Program.cs, remove all the lines we added earlier (between Clear and Flush) and add a line which will load our image into memory.

To draw the image we use the DrawImage method. The parameters are: X draw pos, Y draw pos, the bitmap, X source pos, Y source pos, width, height.

Here is the most basic draw call.

image

The last four parameters might be a little hard to understand. The width and height will not stretch the image as you might expect, but rather it defines how much of the image is actually drawn. If we set those values to lower than the actual width/height of the image then it will be cropped.

image

The X and Y source position parameters determine at what point in the image the drawing will start – but notice that these are different to the X and Y draw position parameters which determine where on the screen the final image will be drawn.

image

Although these allow you to only draw a specific part of the image, in most cases you should just pre-crop the image and only import the part of the image that you need instead of wasting device resources.

That’s it

This was pretty long, so congrats for getting all the way to the bottom! That is everything you need to get started with drawing!

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