Increasing the clickable are of button

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
NicFlemmer123
Posts: 11
Joined: Tue Jul 28, 2020 4:35 pm

Wed Sep 16, 2020 9:36 am

Hi Hopki,

Could please assist. I would like to increase the clickable area of a button ( please see thinklabgroup.com/greenfields_vt enter the rooms hotspot and try the buttons). The user says that they need to click the button in a specific place for it to trigger.

Thanks!
User avatar
Hopki
Gnome
Posts: 10748
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Wed Sep 16, 2020 10:32 am

Hi,
You can simply use a rectangle to do this.
As an example a normal point hotspot would comprise of a Hotspot Template, then the Hotspot Image as a child element.
The Hotspot Image would be the clickable area.

What you can do is add a rectangle as a child element of the Hotspot Template, , deselect border and background and this will become the new clickable area.
To finish off you can make the Hotspot Image/s permeable.


The attached example uses the Node Hotspot Silhouette component.

How:
Once added to skin editor open the components tree so you can see all the sub-elements.
Tidy up your view by hiding the ht_node_CustomImage, tt_ht_node and hotspot_preview in the tree.

Screenshot 2020-09-16 at 09.19.56.png
Screenshot 2020-09-16 at 09.19.56.png (58.75 KiB) Viewed 226 times

Add the rectangle, click area and make it a child of the Hotspot Template, ht_node.
Centre the rectangle by select the centre anchor point and setting position to X/Y, to 0/0.
Set the size of the clickable area by changing the size of the rectangle, I'm using 64px/64px making twice as large.
Select the Hand Cursor, deselect the background and deselect the border by setting the width to 0 and finally set the Radius to 999 which makes it a circle.

Now select the Hotspot Images, ht_node_image and ht_node_visited and make them Permeable so they are not active/clickable.
That's it, done.

The click area is now the rectangle, click area which you can change the size in the skin, or...
Use a logic block to dynamically change the size depending on node or other triggers.
Regards,
Attachments
ClickArea.zip
(30.71 KiB) Downloaded 13 times
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
NicFlemmer123
Posts: 11
Joined: Tue Jul 28, 2020 4:35 pm

Wed Sep 16, 2020 10:36 am

Thanks Hopki!
Post Reply