3.10: Screen Drawing

Goals:

By the end of this lesson, I will be able to:

1. Clear an image from the controller’s LED screen
2. Draw lines, polygons, and points on the controller’s LED screen
3. Draw JPG and PNG images onto the controller’s LED screen

Steps to Success:

1. Drawing Lines
2. Drawing Shapes
3. Drawing Images
4. Challenge 1: Drawing Polygons
5. Challenge 2: Create a Masterpiece

The CoDrone EDU controller is equipped with an LED screen to display information about the drone. Using python we can customize the LED screen and draw anything that we want! First, we need to understand how the LED screen works in order to draw an image. The screen uses X-Y coordinates to determine what pixels will be drawn. However, the X-Y coordinates are a little different than what you may be used to. The origin of the screen is in the top left corner. As you move in the downward Y direction the Y value increases. The X value also increases as you move to the right. Let’s do a quick example to see this in action.

Whenever we want to draw a new image we need to make sure to call drone.controller_clear_screen(). If you forget to do this then your new image will be drawn over either the Link State screen or your old image. Let’s find the border of our screen.

from codrone_edu.drone import *

drone = Drone()
drone.pair()

drone.controller_clear_screen()

drone.controller_draw_line(0, 0, 126, 0)
drone.controller_draw_line(0, 0, 0, 63)

The controller_draw_line() function takes a point (x1, y1) and draws a line to the point (x2, y2). In this example we are drawing a line from the origin to make a border around the edge of the screen. From this example we can see that the LED screen is 126 x 63 pixels! Can you finish the rest of the border on your own? See if you can draw a giant square around the edges of the screen!

Solution:

from codrone_edu.drone import *

drone = Drone()
drone.pair()

drone.controller_clear_screen()

drone.controller_draw_line(0, 0, 126, 0)
drone.controller_draw_line(0, 0, 0, 63)
drone.controller_draw_line(126, 0, 126, 63)
drone.controller_draw_line(0, 63, 126, 63)

There are also functions that are helpful for drawing shapes! Let’s take a look at some examples. First, let’s learn how to display strings on the screen. Here is an example.

from codrone_edu.drone import *

drone = Drone()
drone.pair()

drone.controller_clear_screen()

drone.controller_draw_string(0, 0, "Hello, World!")

The controller_draw_string() functions starts at the X-Y point given and writes a string starting at that point. In this example we are writing “Hello, World!” starting at the origin of the screen.

We can also draw any polygon using the controller_draw_polygon() . This function takes a list of points and draws lines between the points given making any polygon! Here is an example of how to draw a square.

from codrone_edu.drone import *

drone = Drone()
drone.pair()

drone.controller_clear_screen()

drone.controller_draw_string(0, 0, "Hello, World!")

square_list = ((10, 10), (30, 10), (30, 30), (10, 30))
drone.controller_draw_polygon(square_list)

We can also draw any image that is in JPG or PNG format! Keep in mind that our screen is rather small and is only 126 x 63 pixels in size. Let’s start by drawing a simple image of a rose.

Right click the image above and save it to your computer. Name it something simple because you will need to use the image name in Python. I named mine “rose”. Once the image is saved onto your computer drag it into your Pycharm file directory. Once you have done this you should be able to click the image and see it inside of Pycharm! It should look something like this.

Now that the image is in Pycharm it can be drawn onto our controller’s screen! First we need to import the CDE library, pair our drone, and clear the controller’s screen.

from codrone_edu.drone import *

drone = Drone()
drone.pair()

drone.controller_clear_screen()

Next, we need to create an image object that will hold all of the data from our image. We do this by using the get_image_data() function on our rose image and assign that data to a variable.

image = get_image_data("rose.jpg")

The parameter given to the get_image_data() function should be exactly the same as the image name that you see in Pycharm. Now that we have the image data loaded into our image object all we need to do is draw the image onto the controller screen.

drone.controller_draw_image(image)

Full Code:

from codrone_edu.drone import *

drone = Drone()
drone.pair()

drone.controller_clear_screen()

image = get_image_data("rose.jpg")
drone.controller_draw_image(image)

1. Draw a triangle using either the controller_draw_line() or controller_draw_polygon() functions.
2. Draw a pentagon using either the controller_draw_line() or controller_draw_polygon() functions.
3. Draw a polygon of your choice using either the controller_draw_line() or controller_draw_polygon() functions.

For this challenge you can draw any image that you choose! This can be done by drawing points or lines to create your own image from scratch or you can draw a JPG or PNG from the files on your computer (or download a new one)! Black and white pixel art images tend to work best when using the controller_draw_image() function.

In this lesson, you learned how to use Python to modify the CoDrone EDU’s controller screen. You learned how to clear the screen, draw lines, shapes, and points, as well as how to draw images on the screen.