In this article, we will create a web page to visualize the output of BitLocker Recovery. This sample web page creation assumes you already have your scripts saved. We will be utilizing the Virtual Studio Code which is a a powerful and versatile code editor. Please see how to Install HTML Web Client for Microsoft RDS, How to Migrate Azure Web Apps, and “RDS client access licenses: How to install a new Per User Remote Desktop Services license“.

Visual Studio Code provides some basic support for HTML programming out of the box. With the syntax highlighting, smart completions with IntelliSense, and customizable formatting. VS Code also includes great Emmet support. Install as many extensions that you think are relevant to you.

This approach assumes that all images and scripts are in the root directory as you index filesand we will be using HTML for this. In this report, we do not care about Cascading Style Sheets (CSS) as I do not care about enhancing the style of the BitLocker status web page, and and JavaScript.

Also, see how to “Disable Developer Tools in Microsoft Edge using Registry or Group Policy in Windows‘, how to Query and display Windows information via WMI Explorer, and Query and display Windows information via WMI Explorer.

What is HTML?

HyperText Markup Language (HTML) is the standard markup language used to create and design web pages. It defines the structure and content of a web page by using a series of elements and tags.

HTML consists of elements which include text, images, links, and other multimedia content, which are interpreted by web browsers to display the page to users as we will see very shortly. That is, it instructs the browser how to display the content

Note: HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

Here is a similar example: Visualize MBAM Recovery Audit Report with Python. You may want to see How to create Bitbucket Repository, and how to Fix unable to start the Application Identity Service.

Install Visual Studio Code Extensions

As described above, I will be utilizing Virtual Studio Code as my text editor/integrated development environment (IDE) due to its basic support for HTML programming out of the box.

Please see Python Automation in Windows with Visual Studio Code, How to Deploy Azure Resources Using Azure Bicep, and how to Deploy a Static Website to Azure Storage from VSCode.

I will proceed and have some of these “VSCode Extention” installed. HTML CSS Support (not needed for this article though etc.), HTML Format.

I have gone ahead to install some extensions that I need as shown below. You can learn more from HTML in Visual Studio Code.

With HTML, you can create your own Website. If you wish to learn more about HTML please see this link. Also, if you do not have the environment to learn or run your code, you could also use this link.

HTML Terms Explained

All HTML documents must start with a document type declaration: <!DOCTYPE html>. The document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page. HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading:
The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

Below is a visualization of an HTML page structure

Note: You can use either .htm or .html as file extension. There is no difference; it is up to you. That is, an HTML element is defined by a start tag, some content, and an end tag. In a nutshell, an HTML tag is everything enclosed from the start tag to the end tag.

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

HyperText Markup Language code for displaying reports

Below is a very simple HTML code. This code includes the basic HTML structure, the title, header, and a pre-tag for displaying the output of the text file.

<!DOCTYPE html>
<html>
<head>
    <title>Recovery Audit Report</title>
</head>
<body>
    <h1>Enter a new report (1) heading here</h1>
    <p>place your policy text here <a href="place your link here">topic Policy</a>
    <h2>Enter a new report (2) heading here</h2>
    <p>place your policy text here</p>
    <ul>
        <li><a href="your.txt file here">description of your txt</a></li>
    <h2>Enter a new report (3) heading here</h2>
    <ul>
        <li><a href="Device-Recovering-rate-in-the-last-two-weeks.txt">Recovery in the last 2 weeks</a></li>
        <li><a href="Device-Recovering-rate-in-the-last-six-months.txt">Recovery in the last 6 months</a></li>
    </ul>
    <h2>BitLocker Event Recovery Representation</h2>
    <p>This section displays various recovery events in the last three, six months and one year.</p>
    <h2>BitLocker Event Recovery in the last six months</h2>
    <p>Download the PDF file <a href="BitLocker_Key_Recovery_Events.pdf" download>here</a>.</p>
</body>
</html>

When you are done writing (creating your HTML) page, you should ensure that it is saved in the following format “.html”.

Name the file “index.html” and set the encoding to UTF-8 (which is the preferred encoding for HTML files). You have to ensure that the files are available index root folder.

To do this, save this file and if move it to the index root folder. At this point, you are ready to open your HTML file in your browser so that you can view your web page.

Now you should be able to access this report via the URL with the FQDN/mbamreports/index.html for example.

Note: If you are using any additional CSS or JavaScript files, you can create subdirectories like css and js within the MBAM directory and save those files there.

Note: In order to ensure these files do not display same information over time. I have created a script to replace these file based on my requirements. For example, every two weeks, weeks and months etc.

I also created some task scheduled to ensure these processes are automated.

An example of this is saving the bar graph as a PNG and TXT file to the root index folder as shown below. I did the same for all other files. Please note that these are not the complete script but showing you only that the files are being saved to the index root folder.

plt.savefig(“//techdirectarchive.com//www//MBAMReports//BitLockerRecoveryEvents_Lastthreemonths.png”)

# Save the output to a text file
with open("//techdirectarchive.com//www//MBAMReports//Devices-Recovered-rate-in-the-last-two-weeks.txt", 'w') as file:
    file.write("Rate of BitLocker key recovery success by computer in the last two weeks:\n")
    for computer_name, rate in rates.items():
        file.write("{}: {:.2f}%\n".format(computer_name, rate * 100))

To learn more about these errors: Task Scheduler Errors and Success Codes: What does the Error Code 0x41301 Mean, how to fix Windows Task Scheduler 0x2 Error, and how to Fix Windows Task Scheduler Error 0x1.

View Web Result

To do this, we will leverage any of the web browsers. The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

Note: A browser does not display the HTML tags, but uses them to determine how to display the document.

I hope you found this article very useful in learning the steps to create a web page to visualize the output of BitLocker Recovery. Please feel free to leave a comment below.