The goal of this project is to automatically generate a website from a scene folder that is produced by the MobileLighting app. Once the program is successfully executed, several HTML files will be generated, with the main page named home.html.All the related images will be converted and stored in the folder src. Right now, this program has only been tested on Middlebury College basin and macOS.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You should have Python running on your computer in order to execute this program.
The Python program uses yattag(http://www.yattag.org/) to make it easier to generate HTML files. In order to install yattag on your computer, it is suggested that you use pip to do so with this command:
pip install yattag
More details about installing yattag can be found here:http://www.yattag.org/download-install. This includes a way to install yattag without using pip.
You should also have ImageMagick(http://www.imagemagick.org/script/index.php) installed on your computer before you try to run the program since it uses ImageMagick to resize images and convert formats. Here is a link to the instructions to download ImageMagick onto your own computer: http://www.imagemagick.org/script/download.php. If you are not familiar with ImageMagick, here is a brief guide to what it can do and how to use it: http://www.imagemagick.org/Usage/. However, this is not necessary for this project since all ImageMagick commands are already written.
Finally, before we can have the everything running, this program uses the the pfm2png, imginfo, and pfmquantiles cpp programs from Professor Scharstein's utils folder. Copy that folder from basin, and remake it locally.
To have the program running on local environments, simply clone this GitHub repository to a local folder. Then in the same folder, run the following command:
python3 generate-web.py init
This command will create the necessary directory structure in order for the program to run. A "src" folder will be generated in the local directory. Under src, there will be a folder named scenes, where you should put the directories of scenes you wish to be displayed on the webpage. You could also open the program and change the global variable SCENE_DIRECTORY to the directory where you store all the scenes. NOTE: The scene folders MUST be generated by the MobileLighting app and strictly follow the folder structures for this program to work.
Before running, open the program generate-web.py and change the global variable UTILSPATH to the one where you have your utils folder is. Now you are ready to run the program.
The program can be executed from the command line like this:
python3 generate-web.py
The program might take a while to complete, since it is converting a lot of images stored in the folders. After the program is completed, open the generated home.html in your folder. This webpage is the home page and includes links to all other generated webpages.
-
The program goes through the whole folder, finds all relevant pfms, and for each pfm, six pngs are generated: name-jet.png, name-spiral.png, name-jet-400.jpg, name-jet-600.jpg, name-spiral-400.jpg and name-spiral-600.jpg. All images are stored in the exact same folder structure under ./src/pngs/scenename. Different disparity ranges are used to convert each pfm:
a. For unmerged decoded images, the program uses the disparity range from unrectified refined images for all. Each projector position has a disparity range that all images under it use. The program goes through all unrectified refined images under the same projector position, records the minimum and maximum disparity of each image, and finally uses the minimum of the minimum and maximum of the maximum as the communal disparity range for all images under this projector position. This range is written into a text file stored under each proj folder.
b. For merged images, a similar process is carried out. However, this time, not all images under the same projector position share the same disparity range. Instead, each image pair, e.g. pos01 and pos10, share the same disparity range. The program finds the minimum and maximum disparity for both images. Then, for the second position, it swaps and minimum and maximum and changes their signs. Then the program uses the minimum of the minimum and maximum of the maximum as the communal disparity range for these two positions. This range is written into a text file stored under each pos folder except for the last one since there are one fewer pair than positions.
-
The program creates an HTML file named home.html, which contains a table of all scenes. This is the one you should visit after the program is completed.
-
The program loops through all scene folders and adds one row for each scene. It also creates the following webpages for each scene: scenename-description.html, scenename-ambient.html, scenename-decoded.html, scenename-calib.html, scenename-xdisparity.html and scenename-ydisparity.html. There are links to all of them on the home page.
-
There are previews of images from all camera positions under each main image, and the user can mouse over them to change the main images displayed.
-
For the decoded pages, there are previews of images from all projector positions on the left of the row that has different projector positions, and the user can mouse over them to change the main images displayed.
-
For the rectified images, the user can mouse over them to flip to the other view.
-
For the unrectified ambient images, the user can mouse over them to flip to the ambient ball images.
-
In each detailed scene page(ambient, decoded, xdisparity, ydisparity), the user can choose to view only the rectified images or only the unrectified ones. The user can also switch between viewing images in 400 width and 600 width. Finally, the user can also switch between spiral and jet pngs.
- Roger Dai
- Guanghan Pan
- Thanks to Professor Daniel Scharstein from Middlebury College for overseeing this project.