How to integrate Help and Full-screen options with a custom UI

s there a method to integrate the help or full-screen features with my icons? For instance, if I incorporate two icons using the IDs ‘help’ and ‘full-screen,’ how would I go about invoking these functions?

Furthermore, how can I customize elements like the mouse image or color of the help popup to match my theme? I have attached a screenshot for reference."

Scene Link

1 Like

Hi @Vivek_Trivedi

You can’t invoke functions bound to those buttons via API.
However:

Fullscreen switch is possible via browsers API, it is unrelated to the Shapespark Viewer API. You can call it using “document.body.requestFullScreen()”, here is more detailed snippet:

var element = document.body;
var requestFullScreenFn =
 element.mozRequestFullScreen ||
 element.webkitRequestFullscreen ||
 element.msRequestFullscreen ||
 element.requestFullscreen;
requestFullScreenFn.call(element);

As for the help, you can hide and unhide it by applying or removing “display: none”
For example:

var help = document.getElementById("desktop-help")
help.style = ""    // show help
help.style = "display: none" // hide help

To customise image elements you would need to apply custom css and js, and change image source programatically. Unfortunately those images don’t have any class or id applied so retrieving them will be cumbersome.

Best

1 Like

I like your menu. :blush:

Nice idea to combine all this together.

How do you export 4K images? It’s not generated from the screen?

1 Like

not getting your point.