360 Tour + Editor Integration into Webapp

0) Organizing and refactoring already existing code.

1) 360 Editor into Dashboard

========================

We'll start off by implementing into the Dashboard for Admins Only (!) the Virtual Tour Editor. This will be a button at an apartment because we always create a tour for a specific apartment. We will have to talk about where exactly to place it but important for right now: it is connected to an apartment.

The style / front-end of the editor doesn't have to be the same as in the demo / prototype I sent to you. You can use Dashboard components. So from an Apartment I should be able to launch this editor, upload a floor plan and images, connect the images, add tags and explanations etc. Basically all the functionalities that are already there. Then I need to be able to load the tour and test, go back to the editor as many times as necessary.

When done with editing / constructing the tour, I can either download the tour locally to my computer (folder with floor plan and images + json object with the complete tour describing all images, their positions and tags + texts) and I can also "Upload Tour" which will do a POST request to the Node.js Server (dev-sam-node) to save the whole tour to MongoDB. We'll have to talk about this new Schema but basically it is a new one that we'll probably call VirtualTour. A 2nd Schema will be for images.

2) Backend integration into Node.js Server

===================================

Then on the Node.js server I need to start the tour and load it into a full screen HTML Div. The route will be something like /virtual-tour/apartment_id ==> this way we know which tour to load.

Now here it's important that I have a class VirtualTour that I can use and construct the tour. Because I need full control over this tour. Before I start, remember that all these functions are somewhere already existing in the code.

a) constructor takes apartment_id and a boolean has_control (true or false) as input arguments

b) it constructs the object with a post request (using apartment_id), loading all the images and the whole tour into a full screen html div (using Pannellum library). The floor plan is also loaded and is clickable.

c) I can start the tour with either has_control == true. This is the guide who controls the tour. That means: Transitioning from point to point (here a point means a 360 image / sphere), jumping to any point anywhere on the floor plan by clicking directly on the floor plan and of course just looking around (drag-drop or arrow keys) (yaw angle / pitch angle).

OR

has_control == false ==> this is the viewer. If one doesn't have any control (has_control == false) then you can't move or look around anywhere.

There needs to be a function that can be called on the virtual tour object that gives / takes away the control to the viewer.

d) at the same time I need functions like transitionTo(...) ==> because if guide transitions to any other point / 360 image of the tour I will then send that signal to the viewer's end and use transitionTo(...) in order to load that point / image.

e) I need to have a function getPosition(...) that returns point on map and viewing angles (yaw & pitch).

f) I also need lookAt(yaw, pitch) that moves the view into that direction.

g) I need to be able to point with mouse onto the image and get these x, y coordinates + a function that takes x, y coordinates and draws a dot on the screen. This way guide can show to viewer something and vice-versa. Here we could use an HTML Canvas if this works well.

h) Smooth Transitioning Effect with Zooming In.

3) Tracking & Tagging

==================

a) we track where on the floor plan viewers spend time the most.

b) viewer can tag stuff in the tour and we can save that newly created tour (with the new tags) as a document in DB such that e.g. an owner can later on load that specific tour and see what the viewer tagged and commented.

JavaScript HTML5 Vue.js CSS

Project ID: #22324422

About the project