Adding Buttons?

Customization
1

Hi guys

Im wondering if it is possible to add Buttons to a scene that would open a panel with more Information about the scene?

1 Like
2

Hello. The easiest way to add additional information is to use HTML Label extension from the Viewer tab. Such label places a clickable text or icon in the 3D scene.

If you know HTML and CSS and have ‘Standard’ or ‘Plus’ subscription plans or a perpetual license, you can also customize the viewer interface. To do it you can place body-end.html and/or head-end.html files in the Documents\Shapespark\SCENE_NAME\ folder. The content of these files is inserted into the scene main index.html file, which allows for the viewer customization.

3

Is there any other updated information regarding this topic? I am very comfortable and love working in shapespark, but I’m not too familiar with html ( I can get by using a wysiwyg webpage creator like webflow ). I really need the ability to simply add some buttons to the UI that link to other URL’s. All my half baked attempts have not been very successful and adding buttons within the scene doesn’t work as well for my purposes.

4

This topic explains how to add a custom button to the menu: Button to Share in scene
Could you try this and we will try to help if you encounter problems?

1 Like
5

Ok thank you for this! I will see how far I can get, much appreciated Jan

6

That does work, thank you! The only other question I have is how do I adjust the html to make it open in the same tab? I don’t want it to open a new tab.

7

The second argument of the openUrl method is a true/false value telling if the URL is to be opened in a new window. So, change it from true to false.

1 Like
8

Thanks wojtek! :smiley:

9

Is there any way to open these links as an iframe instead of a new tab/window?

10

The easiest way to show an iframe is HTML label extension (added from the editor ‘Viewer’ tab). HTML label can show an iframe when a trigger in the 3D scene is clicked.

If instead you would like to open an iframe when a menu button is clicked, you could modify this code. Before the opening <script> tag place HTML and CSS code for your iframe and make it hidden. Then, change a function passed button.addEventListener('click', function() {}); to show the iframe instead of opening a URL.

3 Likes
11

Is there any way to apply the above mentioned settings in FREE TRIAL VERSION…or it’s a must to have a STANDARD or PLUS subscription to have the HTML LABEL EXTENSION in viewer tab

12

HTML Label Extension is available in the trial. Customizations with body-end.html files are available starting from the Standard plan.

13

Hey guys, I would like to add a button in the lower right hand corner that plays a looping youtube video embedded in an iframe in the scene. I’m having issues figuring out how to get the code correct. Could you post a generic sample code that I could copy and modify in the body-end.html ? It would help me a ton. Thank you

14

Can the button-triggered pop-up look and work exactly the same was as the HTML label pop-up?

15

Yes, thank you. I just need it to be a button on the UI instead of a button in the scene.

16

Here you go:

<script>
  const viewer = WALK.getViewer();

  viewer.onSceneReadyToDisplay(function() {
    const button = viewer.addMenuButton('<BUTTON-ICON-URL>');
    const container = document.getElementById('ext-html-label');
    const content = document.getElementById('ext-html-label-content');
    const close = document.getElementById('ext-html-label-close');

    button.onclick = function() {
      container.style.display = '';
      container.dataset.id = 'menu-button';
      content.innerHTML = '<iframe src="https://www.youtube.com/embed/<VIDEO-ID>?autoplay=1&loop=1&rel=0&playlist=<VIDEO-ID>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

      close.onclick = function() {
        container.style.display = 'none';
        container.dataset.id = undefined;
        content.innerHTML = '';
      };
    }
  });
</script>
17

thank you, do I just add this whole thing to the body-end.html?

18

Yes, and you need to edit the button-icon-url field, and ‘iframe src=’ Field as per your requirement.

1 Like
19

Thanks! this all works pretty well. Only a couple of weird things… Any way of getting the playlist to not show up? I put in the &loop=1 but the playlist comes on at the end. Also when I close the window of the video the sound still plays all the way through to the end even though the video window is closed. Thank you guys for all the support.

20

Try to host the video on your website without Youtube and test it again