Place hotspots easily using Grid and Image as background.

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Place hotspots easily using Grid and Image as background.

Postby jtanz » Mon Mar 27, 2017 11:48 pm

Is there a way to use the media type grid with a media type image wrapped behind it as the background so I can easily figure out the transform.position theta and phi locations to place my hot spots?

Ideally, I would love to have a custom GUI with a button to create a new hotspot and drag and drop to the location on the grid to automatically calculate the transform.position theta and phi for me. This would dynamically update the json file for each new hotspot. Any suggestions or tutorials I can go through to make something like this?

User avatar
rroux
ForgeJS Team
Posts: 145
Joined: Wed Oct 26, 2016 12:19 pm

Re: Place hotspots easily using Grid and Image as background.

Postby rroux » Tue Mar 28, 2017 8:09 am

Hello jtanz,

Is there a way to use the media type grid with a media type image wrapped behind it as the background so I can easily figure out the transform.position theta and phi locations to place my hot spots?


No, there is no way to way to display a grid and a still pano at the same time. But I think this is not the best way to get positions. (I'll explain)

Ideally, I would love to have a custom GUI with a button to create a new hotspot and drag and drop to the location on the grid to automatically calculate the transform.position theta and phi for me. This would dynamically update the json file for each new hotspot.


We have plans to develop a GUI to edit hotspot but this is not in production right now.

We will release very soon a plugin that will show you your camera orientation so you will be able to easily read the positions in space. In the meantime you can get these positions in your browser console.

To open your console on Chrome please use : Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).

Then if your viewer instance is named "viewer" you can type on your console :

To get theta use:
  1. viewer.camera.yaw;


To get phi use:
  1. viewer.camera.pitch;


These two lines will get you the position at the center of your view port (where your camera is looking at). To help you, you can display a cursor at the center of your view port to easily spot it.

Hope this helps, I'll write you on the forum when more tools will be available.

Have a nice day!
- Raphaël

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Re: Place hotspots easily using Grid and Image as background.

Postby jtanz » Tue Mar 28, 2017 1:41 pm

Great suggestions, thanks.

How would I dynamically draw a center point of where the camera is currently looking?
Also, is there a way to display text on the bottom of the screen that lets me know the current .pitch and .yaw of the current camera?

I could probably create a plugin to display the text, how would I pass the active camera values into my plugin?

User avatar
rroux
ForgeJS Team
Posts: 145
Joined: Wed Oct 26, 2016 12:19 pm

Re: Place hotspots easily using Grid and Image as background.

Postby rroux » Wed Mar 29, 2017 7:49 am

Hello jtanz,

I'm working on a plugin that do exactly the same thing:

- Display editable camera values.
- Display a cross at the center of the viewport.

The plugin is currently in dev for ForgeJS 0.9.2 and will be release any time soon.
You can have a look at my code on the ForgeJS plugins github repository, the plugin is called Debug (temporary name) in the rroux-dev branch :)
My code uses the dat-gui library to display a GUI.

https://github.com/gopro/forgejs-plugins/tree/rroux-dev/Debug

Hope this helps, have a nice day!
- Raphaël

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Re: Place hotspots easily using Grid and Image as background.

Postby jtanz » Thu Apr 06, 2017 1:16 pm

It seems your link no longer works, the repository probably has changed since then. Could you link me the new location of your example?

User avatar
rroux
ForgeJS Team
Posts: 145
Joined: Wed Oct 26, 2016 12:19 pm

Re: Place hotspots easily using Grid and Image as background.

Postby rroux » Thu Apr 06, 2017 2:05 pm

Hello jtanz,

Yes it's because the link was related to a branch that has been merged into the master.
Note that the plugin called "Debug" is compatible with the HEAD of the master branch of forgejs code base that is our future 0.9.2 release :)

https://github.com/gopro/forgejs-plugins/tree/master
https://github.com/gopro/forgejs/tree/master
- Raphaël

Who is online

Users browsing this forum: No registered users and 2 guests