Code Monkey home page Code Monkey logo

vision-website's Introduction

Automatic Website Creation

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. There will also be a new folder named as the scene and contain all images displayed on the website. Right now, this program is designed for macOS and only works on macOS.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

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 instrunctions 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 and imginfo cpp programs from Professor Scharstein's utils folder. Copy that folder from basin, and remake it locally.

Installing

To have the program running on local environments, simply clone this GitHub repository to a local folder. Then in the same folder, create a "src" folder to store the original pfms generated from MobileLighting, as well as the converted png files. Under src, create a folder that contains all the scenes for which you wish to generate a website. 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.

Running the Program

The program can be executed from the command line like this:

python3 generate-web.py [path of scene folder]

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.

Understanding what the program does

  1. 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.

  2. 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.

  3. The program loops through all scene folders and adds one row for each scene. It also creates the following webpages for each scene: scenename-decoded.html, scenename-calib.html, scenename-xdisparity.html and scenename-ydisparity.html. There are links to all of them on the home page.

Important functions of the website

  1. 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.

  2. 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.

  3. In each detailed scene page(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.

Potential Improvements:

As the summer approaches an end, I have to leave the program as it is. However, the following improvements could be made to the program, either by myself after summer, or by another student who keeps working on the project. Once a improvement is completed, it will be marked italics.

  1. Update the text descriptions on the website to fit the new dataset.

  2. Display the disparity range used to convert each pfm below each file name.

  3. Some of the ydisparity images appear oddly blue. This might have something to do with the minimum and maximum values used to convert them from pfms to pngs.

  4. The formatting of the webpage changes a bit after toggling between different buttons. It needs to stay the same.s

Author

  • Roger Dai

Acknowledgments

  • Thanks to Professor Daniel Scharstein from Middlebury College for overseeing this project.

vision-website's People

Contributors

roger-dai avatar

Forkers

guanghanp

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.