Back to the Shapespark home page

Trigger Extensions via Javascript

Is it possible to trigger extensions via Javascript, rather than a direct click? I sometimes want to programmatically trigger the html viewer to open. I know I could make my own objects and watch them for Node clicks, but I’d like them to match clicked extensions I have, and rather not reinvent the wheel…

You can add clickable anchors like this:

<script>
var viewer = WALK.getViewer();
function anchorClicked() {
   window.alert('clicked');
}
function sceneReadyToDisplay() {
    var anchorConfig = {
      position: [1.0, 2.0, 2.5],
      type: 'sphere',
      radius: 0.07,
      text: 'foobar'
    };
    var anchor = viewer.addAnchor(anchorConfig, anchorClicked);
}
viewer.onSceneReadyToDisplay(sceneReadyToDisplay);
</script>

For a content of the anchorConfig variable, please take a look at the cover.json file in your Documents\Shapespark\SCENE_NAME\ folder. If you pass the same config as the ones in this file, the anchor added via the API call will look the same as the one added from the editor.

2 Likes

Hi, can I change the anchor icon, let say I want simple 2d yellow color circle or any png instead of default icon

The same suggestion is given in this post


I like every improvement of Shapespark.

Most flexibility is possible with object type triggers, for which you can select any object with any texture from the scene. The limitation is that such triggers won’t automatically rotate to face the camera.

Thank you for your reply @Vladan and @jan object type will work for some client,
Another thing is can we override the shortcut default function of shapespark (M and F ) as client wants to add other function to these two keywords and also we create a get detail form which slide through right when and when client filling up the form and they type F or M it performs the shapespark functionality.
Sorry if i sound stupid I am not a senior dev guy
Please help if possible thank u

Please see this post for an explanation how to capture key events and do not propagate them to the 3D viewer: Hide some controls or all controlls temporary (M has key code 77, F 70).

The viewer has logic that should disable special key handling when some input form is in focus, if you have a scene for which this isn’t working, please share a link with us and we will take a look.

hi @jan ,
i tried this method and it works but it did not work if i put my form into shapespark editor “html-label” and then bundle it (iam using input tag for textfields).

I’m not sure if someone tried using input form in the HTML Label so far. Could you share a link here or via support@shapespark.com so we can take a look why it is failing?

@jan http://creative.opusvisual.com/360/demo/coolidge_place_a2/index.html here is the link please provide some solution
also is it possible to connect these form to our database through php
(you can check form by clicking on anchors of door , sofa , kitchen cabinet and then inquiry tab )

@Naushad_Alam Very nice UI customization!

The problem is that the code tries to add keyDown event listeners for input elements after document is loaded, but these elements do not exist yet. HTML Label creates and destroys the label dynamically after a trigger is clicked. Lookups like:

let txt = document.getElementById('main_fullName');

won’t find the elements when the label is closed. If you registered key down handlers on the top level document, the code should work.

You seem to be using an older version of webwalk JavaScript library included in Shapespark that didn’t yet disabled special keys when input element were in focus. Is this because you don’t have the newest Shapespark or decided to freeze the library version to avoid potential compatibility problems with your customizations?

Submitting the form to your server should be possible in the same way that normal forms are submitted and with the same limitations (for example, if the server that accepts the form uses a different domain, it should be configured to accept cross origin requests.

I wonder if in case of such complex HTML Label, it wouldn’t be easier to develop the form as a separate page hosted on your server and include it as an iframe in the label, instead of including the whole form code within the HTML Label.

thank you @jan
ok got it , i’ll try that soon .
yes we are using older version and we want to move to newer version as soon as our client get what he wants, so for that right now we are just making demo tours.
Actually what our client want is both the exterior and interior scene for more than two houses which will take too much time to load so i am thinking of using i-frame and them connect them all in one .
suggest me if there is a better way for this .
i have few queries also :

  1. can we add a video or slide on loading screen ,so that user wont lose interest and stick to that link(i try and jpg works fine but i want a video without circle progress bar -like image below )

2.can we add an interaction to the 3d model like we tag some model as interactive in editor and when user hover to that object/model it shows outline to that object and let say we give like button to those object ,we can get the data if user hit that like button or not . (i know i read in forum that right now event to model isn’t possible but to material still if you have any suggestion it will be helpful).

  1. I’m not 100% sure if all current browser will allow for video to start playing automatically without any user interaction, but from Shapespark perspective this should be doable. You could try hiding the progress circle in CSS (it has id primary-progress), or put the video above the progress circle by assigning to it a large ‘z-index’ CSS property.

  2. Current Shapespark version allow any object click (but not object hover) to trigger an action, your older version may not have this feature yet. This allows to for example open a HTML label when an object is clicked.

  1. i tried that and able to add video but the problem is that the video wont stop its not visible after load complete but i can hear the audio of that video still playing even after loading is finished .i want progress bar as a straight line below the video but that’s not the issue , i can add svg right? the issue is with this video even if i remove the audio how can i now that video is still not playing after loading .
  2. OK that’s really great
    thank you @jan for your help and time really appreciate …
    thank you

You could use Viewer.onSceneReadyToDisplay: https://github.com/shapespark/shapespark-viewer-api This callback is executed when the user can start interacting with a 3D scene, so you can hide the video from the callback.

So this will work with the newer versions. Thanks again