Preview the Rendered Maze and Its Solution

Mazes in Python: Build, Visualize, Store, and Solve Darren Jones 04:56

00:00 Preview the Rendered Maze and Its Solution. Modern web browsers support scalable vector graphics out of the box, making them ideal SVG viewers. Websites embed SVG elements within their HTML content, style them using CSS, and even animate and interact with them dynamically through JavaScript.

00:21 You’ll leverage some of these features to show your rendered SVG image using Python. Head back to the renderer module and add an .html_content property in the SVG class.

00:50 This property returns a minimal HTML5 website with your rendered SVG image in its body. You use textwrap.dedent() to remove the leading whitespace from each line of your HTML template and replace the {0} placeholder with the object’s .xml_content attribute.

01:11 Note that, in this case, using the str.format() method is preferable over an f-string literal, which would affect the indentation of the lines in an undesirable way.

01:24 On-screen, you can see what the output would look like when you print it against a sample SVG instance.

01:49 If you save this piece of HTML in a file and open it in your web browser, you’ll see a small red rectangle in the top-left corner. However, you can automate these steps using a few modules in Python’s standard library.

02:04 Define the .preview() method in your class, which will save the HTML to a temporary file and open it using your web browser.

02:34 You create a named temporary file with the .html suffix so that your web browser can recognize it correctly. Note that you set the delete flag to False to prevent Python from automatically deleting the file before you’ve had a chance to load it. Next, you display the rendered SVG image in the default web browser using the webbrowser module.

02:56 Make sure to put the last line of code in the .preview() method outside of the with statement block.

03:06 Because temporary files are always buffered in the text mode, calling .write() may not immediately flush pending data onto the physical disk.

03:14 Only when you manually close the file or have the with statement do it for you at the end of the block will a temporary file be written to disk.

03:24 Next, try the code seen on-screen in your REPL, once again making use of the saved mini_maze to avoid a lot of repeated typing.

04:11 This is much more convenient than manually writing the rendered solution each time and trying to find the resulting file with the file manager. Notice how the .preview() method lets you choose between showing the solution or not.

04:27 The maze with its solution rendered in the web browser should look as seen on-screen. Having the means to quickly visualize your work is an invaluable step when you build the maze manually or when you are debugging a maze-solving algorithm.

04:44 And that’s something that will be covered in the second installment of this course. In the next section, you’ll take a look back at what you’ve learned in part one of this two-part course.

RKS on Jan. 29, 2024

Hello,

I must’ve missed something.

solution = Solution(squares=tuple(mini_maze[i] for i in (8, 11, 7, 6, 2)))

How were the integers in the tuple (8, 11, 7, 6, 2) chosen for mini_maze?

Bartosz Zaczyński RP Team on Jan. 29, 2024

@RKS These are the indices of the individual “squares” in the sample maze, which follow the so-called row-major order:

0  1  2  3
4  5  6  7
8  9 10 11

When you connect them, then you’ll end up with a path representing the solution of this particular maze:

     2
     │
     6 ── 7
          │
8 ────── 11

RKS on Jan. 29, 2024

Gotcha. Thanks for getting back so quickly.

Become a Member to join the conversation.