Roof thermographer

Written By Luke Doyle

Summary

Thermographer is a web application for mapping saturation areas on thermograms taken from roofs in order to provide an analytic table of water damage. Users upload images of the roof with a thermograph, outline saturation areas and generate a pdf report using their company logo and building location for clientele.

The app is designed as a frontend web app and organized into modular JavaScript files under the `static/` directory:

  • `draw-js/`: Drawing tools and sketch logic (`line.js`, `rectangle.js`, `sketch.js`)

  • `file-handling-js/`: Image upload and PDF report generation (`imageHandler.js`, `downloadHandler.js`)

P5.js

Building and saturation indentification is achieved using the drawing library p5.js. This JavaScript library is meant for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else. p5.js is free and open-source because they believe software, and the tools to learn it, should be accessible to everyone.

Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

See the [p5js.org](https://p5js.org/) for more details, reference docs, and community links

JSPDF

PDF report file generation leverages the JsPDF library for creating and downloading a pdf file from the html page after javascript has been rendered.

Flask Server

A lightweight Python Flask server is included for local testing and serving the HTML page with all JavaScript enabled. The app is designed to be easily embedded in platforms like Squarespace by including the necessary scripts and assets. Simple web server that opens on http://localhost and port=5000. There are 2 routes configured:

1. Serves the basic html page with drawn graph space and file handling buttons

2. Display Image route is the redirect once an image has been uploaded during the session

Author's Notes

1. There were issues with properly tracking feature changes across multiple machines so feature branches were created using the format `feature/f{feature#}-{authorinitials}-{feature-desc}`

2. Feature branches were merged via github to maintain history

3. Tags were added to master branch once a release was ready

Luke Doyle