In Progress

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


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.

Skills: JavaScript, HTML5, Vue.js, CSS

See more: 360 tour, 3ds max 360 tour, rad editor integration, php zoho editor integration, jquery 360 tour, 360 tour retouching, virtual 360 tour wordpress template, 360 tour html5, 360 tour gyro, 360 tour iphone html5, 5.0 looking for cad projects winnipeg services skilled trades electrician, 3d model 360 tour, virtual tour editor, free 360 video editor, pixie image editor integration, best 360 video editor, froala editor integration, 360 photo editor online, 360 photo editor samsung, 360 photo editor app

About the Employer:
( 11 reviews ) Thalwil, Switzerland

Project ID: #22324422

Awarded to:


Hello Dan, Placing bid just like we discussed. I've created milestones for each functionality / feature, according to what makes sense for me. Do let me know if any of these should be merged into 1 milestone or split More

$1300 USD in 45 days
(27 Reviews)

10 freelancers are bidding on average $398 for this job


Hello I am glad to bid your project. I have 14+ years of experiences in web development and 4+ years of experiences in blockchain and developed many projects. Especially, I have strong experiences in Javascript and Nod More

$1400 USD in 7 days
(40 Reviews)

Hey vw8319568vw! Thanks for sharing your project "360 Tour Editor Integration into Webapp". I'm very much interested in this project and certainly want to get involve. Please reply me to find out further details abo More

$135 USD in 5 days
(65 Reviews)

Dear Client! I am very happy to see your project detail. I think it is just my project. :) As you can see in my profile, (my review: I have much experience with your job. More

$140 USD in 7 days
(26 Reviews)

Hi sir! Contact with me then I can show you my portfolio. I am interested to work with you. I can provide you professional web design services. I can design for you according to your requirements. I will give you unl More

$222 USD in 7 days
(34 Reviews)

Hello There. How are you doing?. I have read the description, I have great experience doing similar jobs related to these skills CSS, HTML5, Javascript, Vue.js. Please start the chat so we can have detailed discussion. More

$155 USD in 9 days
(7 Reviews)

⭐Hi.⭐ I have read your job post and I am very interested in your project. I have a rich experience in the Website build using Laravel, Node.js, PHP, HTML, CSS, Bootstrap4, Javascript, React, Redux, Vue.js, Vuex, and Ex More

$100 USD in 4 days
(16 Reviews)

""We can do it" Node.Js work: [login to view URL] [login to view URL] [login to view URL] React: [login to view URL] [login to view URL] [login to view URL] More

$140 USD in 7 days
(8 Reviews)

Hello Sir/Mam, APComp is one of the best providers of software development and other professional IT services. We have over 5 years in the software development field and a long list of satisfied customers. We know tha More

$140 USD in 7 days
(10 Reviews)

Hey! I feel pleased to submit herewith our letter of interest to participate in you project. We provide a 360-degree perspective and integrating A-Z digital marketing solutions ranging from SEO, PPC, SEM, Website and A More

$250 USD in 5 days
(0 Reviews)