HoloDisplay

HoloDisplay is an open-source application that allows you to create the illusion of a hologram on any device using the Pepper's Ghost Effect. With HoloDisplay you can upload your own images and the app will create a structure on your screen that reflects the image to create the illusion of a hologram floating in the air. The app runs in the browser and is compatible with any device that has a screen and you can customize the size and shape of the structure to fit your needs.

This projects creates images on your display that need to be reflected, preferrably on a translucent material. How you can build this mirror is described in the section: 🧰 Building the mirror

Project Screenshots:

🧐 Features

Here're some of the project's best features:

• Easy to use: HoloDisplay is user-friendly. You can upload your images and the app takes care of the rest.
• Responsive Design: The app is designed to be responsive and compatible with any device that has a screen. That means you can create holograms on your smartphone tablet or desktop computer.
• Open-Source: Holo Display is an open-source project meaning that anyone can contribute to the development of the app. This also means that the app is free to use.
• Cross-Browser-Compatibility: You can use the app in every browser.

🛠️ How to use the software

You can find a working version of this project on my website https://hologram.kgabriel.dev/en-US/

Another option is to use the executable file found in the folder `executables`. This file starts a simple webserver and opens the correct website (localhost:5000/en-US/).

You can also download this source code and build the software yourself. Follow these steps to do so:

1. Download the source code / clone the repository.
2. Download and install NodeJS to use its package manager NPM. You can find the latest version on nodejs.org/en/download
3. Navigate into the root folder of this project and open a terminal there.
4. Run the command "npm install" to install all required packages.
5. In the angular.json file in the root folder, change the option "localize" under "projects -> HoloDisplay -> architect -> build -> options" to your desired language. Currently available are English (enter this: ["en-US"]) and German (enter this: ["de-DE"]).
6. In your terminal, run the command "ng serve". After the command finishes, the project is available as a website under localhost:4200.

🧰 Building the mirror

To make use of this project, you need a mirror that reflects the images created by the app. You can build this mirror yourself. Here's how you can build a mirror for the standard display method (called "Standard Method" in the app):

1. Get a transparent material. This can be a transparent plastic sheet or a glass pane. The material should be as transparent as possible, but also reflect some of the light.
2. Configure the settings so they match your needs. Important are the settings "Size of the polygon in the middle" and "Number of sides / images".
3. Click on the calculator icon in the bottom right of the screen. This will open a popup where you have to enter some more settings.
4. Click on the green button with the text "Generate image". This will download an image showing you the form the tiles of your mirror need to have.
5. Cut this form out of the material you chose for your mirror. You need as many tiles as you have set the number of sides/images.
6. Lay the tiles edge to edge, so they start forming a circle. The connect the edges using some tape. Then connect the outer two edges, so your mirror forms.

Here is an image of a mirror with 4 sides:

© Image licensed by Karthick98 under the Creative Commons Attribution-Share Alike 4.0 International license, uploaded on wikipedia.org.

💻 Built with

Technologies used in the project:

• Angular 15
• TailwindCSS

🛡️ License:

This project is licensed under the MIT License, you can find the full license text in the file LICENSE.