Generate cube image panorama

NM Thang — Wed, 17 Jul 2024 04:41:19 +0000

Introduction

In today's digital age, high-quality panorama images are becoming increasingly popular in fields like tourism, real estate, and interior design. However, the manual process of cropping cube panorama images can be time-consuming and prone to errors, which may affect the image quality when uploaded to the web. To address this challenge, an automatic cube panorama cropping tool is an optimal solution. This tool not only saves time but also ensures image optimization, leading to faster load times and a better user experience. In this blog post, we will explore how to use this tool to quickly and efficiently crop cube panorama images.

How to Install and Set Up the Tool

In this section, I will provide a step-by-step guide on how to install and set up the automatic cubemap image cutting tool. This may include downloading the software, installing dependencies, and configuring the tool for optimal performance. Be sure to include screenshots or snippets of code to help illustrate the process.

I also want to introduce that I am working on displaying tile panorama images using the photo-sphere-viewer.js library (https://photo-sphere-viewer.js.org/guide/adapters/cubemap-tiles.html#panorama-options).

Requirements

Before you begin, make sure you have installed ImageMagick, a powerful tool for image processing.
Node

Clone the Repository

To get started, clone the repository to your machine by running the following command:

$ git clone https://github.com/nmthangdn2000/panorama-app.git

Installation

After cloning, you need to install the necessary dependencies. Just run the following command::

$ cd panorama-app
$ yarn

This will quickly set up your working environment.

Build the Project

Build your project with:

$ yarn build

Run the Project

Start your project with:

$ yarn start

How to Use the Tool

In this section, I will guide you through the process of using the automatic cubemap image cutting tool. This includes uploading your panorama images, configuring the settings for optimal results, and viewing the final output.

The first step is to select the storage location for the entire project.

Create project

Add image panorama

The tool has the following features:

Preview: Preview the panorama, select marker points, choose the initial view, and also has a function to create a mini map (this feature is not yet fully refined).
Render: Choose the size of each tile image, then start cropping the panorama image and reformat the entire data structure.
Export: Export all project data and compress it into a zip file.

Conclusion

By following the steps outlined in this guide, you can efficiently use the automatic cubemap image cutting tool to process and display high-quality panorama images. The tool's features, including preview, render, and export functionalities, streamline the workflow, saving you time and ensuring optimal image quality for your projects. Whether you are working in tourism, real estate, interior design, or any other field that benefits from panoramic images, this tool will enhance your productivity and improve the user experience.

Explore the possibilities and elevate your projects with this powerful and easy-to-use cubemap image cutting tool.

You can find the complete project on GitHub.

Thank you for reading! If you found this tool helpful, please give the repository a star. 🌟

Setup typeorm in project structure monorepo nestjs

NM Thang — Fri, 03 Mar 2023 03:42:49 +0000

Starting from the initial steps of creating a monorepo project structure in NestJS, you need to install TypeORM and necessary dependencies to use it in your project.

Next, you need to create the necessary directories and files to share code between packages in your project.

Then, you can start configuring TypeORM to use it in your project. You can use commander and inquirer to create a command-line interface (CLI) similar to the NestJS CLI to perform migration-related commands in TypeORM.

In this video, we will guide you on how to use commander and inquirer to create a CLI like NestJS, while configuring TypeORM to use it in your project. We will explain in detail how to use TypeORM to create migrations, create tables in the database, perform CRUD operations, and more.

This video has no sound, so we will try to present all information clearly for you to understand.

We hope this video will help you in configuring TypeORM and creating a CLI like NestJS for your project. If you have any questions or contributions, please leave a comment below.

Thank you for watching our video!

Part 1: https://www.youtube.com/watch?v=XBBgWS8GnfM
Part 2: https://www.youtube.com/watch?v=mMDcBqeipds

Github: https://github.com/nmthangdn2000/demo-setup-typeorm-in-monorepo-nestjs

DEV Community: NM Thang