Add Features to the Renderer

00:00 Adding Features to the Renderer. While the renderer has some of the features that are needed, it’s not yet complete. To get the arrow marker and the background tags, you call these two top-level functions defined at the bottom of the module.

00:29 The <defs> and <marker> elements define an arrow shape that you’ll reference later in the SVG document.

01:17 The other function uses your Rect primitive to draw a white rectangle stretched across the entire image. Before drawing one of the maze’s squares, you need to establish where it should go by transforming its row and column into pixel coordinates.

02:07 You scale and translate the square’s coordinates using the desired square size and offset. The resulting point is the top-left corner of your square in the SVG pixel space.

02:52 Next, you can start drawing your square, which will involve drawing a border around it, filling it with a color depending on the square type, and putting an optional label icon inside.

03:04 Each of these elements will become a separate SVG tag that you’ll append to a Python list before joining together. After transforming the coordinates, you’ll call the function that you defined in the previous section to decompose a border pattern into a drawable primitive.

03:23 You draw the border around the given square in the specified pixel location by getting its geometric representation first. This is where the null object pattern shows its strength by letting you treat all border patterns in the same way, even when they don’t have any visual representation.

03:40 Note that you created a list of tags that you’ll fill with other elements associated with the same square. Apart from the border, the walls and exterior can have a background, while squares with special roles will have an extra icon inside them.

04:15 Here, you define a mapping of a subset of Role members to emoji icons expressed with Unicode name aliases. These lines call one of the helper functions defined later in the file to draw the square’s background or an icon depending on the square’s role.

05:27 Here, you define functions that draw a rectangle with either a white or light gray background.

06:14 And here, you define a function that draws the specified emoji icon in the middle of the square. In the next section of the course, you’ll add something that’s definitely needed for a maze solving program, and that’s drawing the solution.