Is it possible to add IDs to the SVGs in the help menu folder?

Customization
1

Hi there,

I have been substituting some of the images from the UI with versions that fit our branding and colour scheme using the JS API. For most I can just grab them with getElementById. However, the images in the help menu don’t have unique IDs, so I’ve had to replace them with some slightly more specific code, shown here:

Screenshot 2022-08-25 155250
Screenshot 2022-08-25 1552501088×172 18 KB

The problem is the folder highlighted seems to change with every hotfix or update, which breaks the code. Is it possible to add IDs to the images in the help menu folder? I’m hesitant to overwrite the whole index.html, but I can if that’s the only option.

2

We can add such ids, but also the selector that you are using could include only file names. Library version changes with each release, but file names do not. So for example:

img[src*="mouse-controls.svg"]

should work

1 Like
3

That works perfectly, thanks!

4

Hi @jan,

I’m having a similar issue with adding an ID to the button created by the ‘Hide Triggers’ extension in the editor. The button does not come with a unique ID, as seen in the HTML here:

HTML
HTML895×267 18.1 KB

I have tried retrieving it with getElementsByClassName like this:

JS

But the console only prints out the buttons on either side of it (help-button, minimap-button, and tour-button):

Console
Console1385×46 3.72 KB

… but not the new ‘Hide Triggers’ button. I’m not entirely sure what is causing this, as they all share the menu-button class name. I got similar results trying:

document.querySelectorAll('.menu-button:not(#help-button):not(#minimap-button-toggle):not(#tour-button):not(#vr-button):not(#fullscreen-button)');

… with no luck.

Is there a way to add an ID to this button? If not, is there a way we can add IDs through the Shapespark editor?

5

The problem can be due to the fact that extensions are not started immediately, but only after some key resources are loaded. So the button added by Hide triggers is not be yet present if you try to find it from the top level of your body-end.html file. Try searching for the button when sceneReadyToDisplay is run: WALK.getViewer.onSceneReadyToDisplay(function() { })

1 Like