Sketchfab Forum

Annotations and html


(Miekeroth) #1

Hi all,

I'm a bit rusty regarding html and javascript, and regarding what I am making I just need a small push I think.

I am working on an app that enables people to go through a model via buttons that are linked to annotations.

Right now I got the scripting right, but I don't seem to get the link to a button right. Here the code, what am I doing wrong? I tried several referrals, so this one could be completely wrong :wink:

I think I forgot to define the click function. Am I right?

Incorporating html gives a bit of a hassle :wink:. So I try to add a txt file

Here a link to the txt: http://miekeroth.com/app.txt


Questions about the annotations sync example
#2

Hi Mieke,

Ok, several things going on here.

1) You're using jQuery functions $( '#Atlas' ), but didn't include jQuery in the page. You need to add:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Or whatever version of jQuery you want to use, preferably 1.6 or higher. I would just go for the most recent, which can always be found hosted by Google.

2) You included the # in the id of the button. id="#Atlas" should just be id="Atlas" so that the jQuery selector $( '#Atlas' ) works correctly. # means id in CSS/jQuery.

3) I would declare the api object globally and define it during client.init success. That way you can access it anywhere. You could also move your button click event handlers outside the viewerready callback if you wanted to.

<script type="text/javascript">
    var iframe = document.getElementById( 'api-frame' );
    var version = '1.0.0';
    var urlid = 'a75da20b3e894418aa15d026fe9534a5';
    var client = new Sketchfab( version, iframe );
    var api;

    client.init( urlid, {
        success: function onSuccess( api_object ){
            api = api_object;
            api.start();
            api.addEventListener( 'viewerready', function() {
            // API is ready to use
            // Insert your code here
                console.log( 'Viewer is ready' );
                $( '#Atlas' ).click( function() {
                    api.gotoAnnotation( 1 );
                });
                            
                $( '#Axis' ).click( function() {
                    api.gotoAnnotation( 2 );
                });  
                
                $( '#Cerv' ).click( function() {
                    api.gotoAnnotation( 3 );
                } );
            });
        },
        error: function onError() {
            console.log( 'Viewer error' );
        }
    } );

    </script>

4) I suppose this doesn't really matter, but I would move all your buttons above the script. AFAIK it's generally good practice to put your non hot-linked scripts at the end of the body, especially if it's manipulating the DOM. I'm sure someone with more coding experience can correct me here if I'm wrong.

<iframe height="300" width="500" src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<button type="button" class="btn btn-sm btn-default" id="Atlas">Atlas</button>
<button type="button" class="btn btn-sm btn-default" id="Axis">Axis</button>
<button type="button" class="btn btn-sm btn-default" id="Cerv">Cerv</button>

    <!-- Initialize the viewer -->
    <script type="text/javascript">
...
...

You can get my working version here: http://puu.sh/lhGJc/dec098e249.html


(Miekeroth) #3

Thanks James! I used to do a lot of coding, but that is one of the skills you need to maintain if you don't want it to fade away. You really helped me a lot with this, I will show you later on where is it for :wink:


#4

Looking forward to it :smiley: