3D Floating Cursor: Update 9th May 2023

[Hopki]

float_cursor.gif (445.58 KiB) Viewed 29022 times

Features:
• Works with Polygon Hotspots
• Tooltip
• When the cursor moves above the horizon it will hide and the system mouse cursor shows
• Hide/Show when required
• Fully Customisable using the Skin Editor

There is a webinar recording covering this component which can be found here: 3D Floating Cursor


To add the 3D Floating Cursor Component to Pano2VR simply download the component for your build.

3d_floating_cursor_v6.ggskc

(121.43 KiB) Downloaded 631 times

3d_floating_cursor_v7.ggskc

(121.34 KiB) Downloaded 627 times

Please note the Pano2VR 6 version will work in both Pano2VR 6 and Pano2VR 7.
But the Pano2VR 7 version uses the new code element so is not backwards compatible.


Double Click the 3d_floating_cursor.ggskc file, Pano2VR opens if not already open, and will ask in which category it should be saved.

1.png (22.36 KiB) Viewed 29022 times

By default, it will use the User-Defined category, but you may choose your own.


To use the component open the skin editor and open the components toolbox.
Select the category and select the component, 3D Floating Cursor, double click to add to your skin.

Make sure all the elements stay in order and are at the bottom of the skin's tree.

2.png (20.33 KiB) Viewed 29022 times

To change nodes use Polygon Hotspots, with type Tour Node and it must have a Title, that's important to see the interactivity.
How it works is there are colour and visible logic blocks that have the logic:

3.png (29.58 KiB) Viewed 29022 times

When the 3D Floating Cursor moves over a Polygon Hotspot that has a title the condition becomes true, so for the tooltip, it will show and the ring has a colour logic block that will change the colour to green.
Note the logic, when the Hotspot title is NOT empty set the condition to true.

It may be necessary to hide the 3D Floating Cursor to avoid it showing on raised objects or walls in the panorama.
To do this add a Polygon Hotspot in the area it should be hidden and give the Polygon the title, "hide".
There is a visible logic block that will hide the 3D Floating Cursor when the Polygon title is "hide".

4.png (36.04 KiB) Viewed 29022 times

When the 3D Floating Cursor is hidden the normal mouse cursor will show.
If Polygon hotspots will be used to hide the 3D Floating Cursor then it will be better to deselect the Hand Cursor under the Hotspot tab in the HTML5 output settings, otherwise, the Mose pointer will turn into a hand.

The ring is a rectangle element with a wide border, you can add the background to turn the ring into a disk.
Using the Skin editor you can change the colours of the tooltip text and the rectangle.


And there's more...


Please find attached complete projects using the 3D Floating Cursor.

3DFloatingCursorProjects.zip

(6.1 MiB) Downloaded 569 times

There are four projects
Float Arrows,
Float Cursor this is the component
Float Ring
Float Spinner

Looking at the Float Ring, this is the component modified with two more copies of the rectangle with the ID ring,

5.png (64.42 KiB) Viewed 29022 times

This is achieved by stacking the rectangles on top of each other with the middle rectangle change to black.
In each of the ring elements, there is CSS in the CSS Styles text field.
The top ring has:

Code: Select all

transform:translate3d(0px,0px,2px);

Note the 2px

The black ring has:

Code: Select all

transform:translate3d(0px,0px,0px);

This could actually be removed.

The last ring, ring_white_bottom, has:

Code: Select all

transform:translate3d(0px,0px,-2px);

Note -2px

This represents the height of the rings in the 3D spade, so 2px is on top, 0px in the middle and -2px below.

The next project of interest is the Float Spinner.
This uses CSS to rotate the spinner_0 (Over State) and spinner_ds (Drop Shadow)SVGs.

6.png (46.65 KiB) Viewed 29022 times

The top SVG, spinner also has CSS in its CSS Styles text field:

Code: Select all

transform:translate3d(0px,0px,0px);

This could be deleted if required, but it is left in to help make sense of the stacking order.
The next two are what is shown on Mouseover a Polygon Hotspot with a title.

Again these use visible logic blocks that are detecting if the Polygon hotspot has a title.
If it does, the element spinner hides, and the elements spinner_o and spinner_ds will show.

The element spinner_0 has the CSS set to:

Code: Select all

transform:translate3d(0px,0px,10px);

This raises it up in 3d space.
The spinner_ds, drop shadow has its CSS set to:

Code: Select all

transform:translate3d(0px,0px,0px);

So this could also be deleted.

To make the SVG's spinner_o and spinner_ds rotate add the following CSS to the CSS Styles Inner Element:

Code: Select all

animation: rotation 2s infinite linear;

Then open the Skin Editors Embedded Stylesheet and add:

Code: Select all

Stylesheet:
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

So it looks like this:

7.png (52.18 KiB) Viewed 29022 times

The images can be replaced with anything you like, as an example, there is a Float Arrow project.
Regards,

[Javier B]

Hello.

Many thanks, Hopki. Very interesting the 3D effect of the cursor and very appreciated .
I wonder to ask if could this effect be applied to the navigation hotspots ?

Regards,
Javier

[Hopki]

Hi Javier,
The component is a 3D Cursor, so just replaces the mouse pointer.
It works extremely well will Polygon Hotspots as you can still click and drag the panorama with Polygon Hotspots.

You could use Point Hotspots with a Rectangle set to Alpha 0 and its raduis set to 0.
The problem with this is the rectangle will be an active element so you will not be able to click and drag the panorama if your mouse is on the Point Hotspot.
Regards,

[JNewberry]

Update: I set alpha of float_tt to 0, to hide it but not delete in case I want to use it later. Seems to be working fine.


In the video tutorial, here: https://youtu.be/afuBM3YJhc4?t=651, there is no title showing over the cursor, which is what I'd like to do. What's the best way to hide the text?

I see the float_tt element in the skin, should I delete that, or change the "visible" logic block, or ?

Thanks,

Jim

[Hopki]

Hi Jim,
You can just delete the float_tt.
Its visibility is controled by its own visivle logioc block so deleteing will not effect anything else or there will be no actions still trying to address it.
Regards,

[Caz1982]

How can I make the pointer select the controls? it doesn't select them, it hovers over them but I can't use them.

[MeinePanoramen]

How can I make the pointer select the controls? it doesn't select them, it hovers over them but I can't use them.

In the skin editor, you just need to increase the z-index. You can find this when you mark the element on the left and look for advanced in the right column. then the hotspot is in the foreground.

[JNewberry]

Hi Jim,
You can just delete the float_tt.
Its visibility is controled by its own visivle logioc block so deleteing will not effect anything else or there will be no actions still trying to address it.
Regards,

Thanks Hopki!

[DeeJay58]

Any idea how to handle this on mobile devices? I can see the (new) cursor there, but it is not possible to move it because of the touch screen.

[Hopki]

Hi,
I would set it up if the device has touch then don’t use the 3D Hotspot and show point hotspots instead.
Regards,

[DeeJay58]

Thank you! I'll try

[JNewberry]

Hi,
I would set it up if the device has touch then don’t use the 3D Hotspot and show point hotspots instead.
Regards,

Could you please elaborate on that? Does this refer to a logic block? If so, which element in tree should I select, and which property to add the logic block to?

Thanks,
Jim

[Hopki]

Hi Jim,
Pano2VR has logic block triggers, one of which is "Has Touch".
Have a look at the attached project, you will note it is using the Has Touch to show and hide the relavant Hotspot.
The point hotspot has teh action to disable the polygons, but you hav eto select the first point hotspot for thsi to work.
So in node one you will have both an active polygon and a point hotspot on a mobile.
You caould look at using Is Mobile, then use Config Loaded actions.
Regards,

[JNewberry]

Hi Jim,
Pano2VR has logic block triggers, one of which is "Has Touch".
Have a look at the attached project, you will note it is using the Has Touch to show and hide the relavant Hotspot.
The point hotspot has teh action to disable the polygons, but you hav eto select the first point hotspot for thsi to work.
So in node one you will have both an active polygon and a point hotspot on a mobile.
You caould look at using Is Mobile, then use Config Loaded actions.
Regards,

Thanks Hopki, that's helpful. I see the "has touch" logic blocks under appearance/visible.

If I go with "is mobile" then "use config loaded," which property should I add the logic block to? I can't find a property that has "is mobile" and "config loaded."

[Hopki]

Hi Jim,
Pull this project apart.
You will see in the code text box actions that use Node Changed rather than Config Loaded.
But then have action filters so the hotspots only swap when Is Mobile is detected.
Regards,