Not only can Play communicate with web APIs, but it can also communicate with the page that it’s embedded within. These HTML buttons are a simple example. The car model was designed by [Grant Holmberg-Baugher] using Fusion360 (https://gallery.autodesk.com/fusion360/projects/427-cobra-kart){:target=”_blank”}.

Use this template with Import ID 15251321 (How to import a project with it’s ID)


Front Spoiler Back Spoiler


fusion

HTML:

    <div id="all">
    <input id="seatA" class="seats" type="image" src="../images/seatRed.jpg" alt="Submit" >
    <input id="seatB" class="seats" type="image" src="../images/seatBucket.jpg" alt="Submit" >
    <input id="seatC" class="seats" type="image" src="../images/seatBelt.jpg" alt="Submit" >
    <img id="color-wheel" src="../images/colorWheel.png">

    <div class='real-checkbox'>
        <input id='front-spoiler'  type='checkbox' />
        <span data-for='input-id'>Front Spoiler</span>
        <input id='back-spoiler'  type='checkbox' />
        <span  data-for='input-id'>Back Spoiler</span>
        
        </div>
    </div>

    <div id="goCart-div">
    <iframe id="goCart" src="https://play.autodesk.com/pub/GoCart8"  allowfullscreen="true"></iframe>
    <p id="final-specs"></p>
    </div>

Javascript:


 var sendMessage = function(msg){
    $('#goCart')[0].contentWindow.postMessage(msg, '*')
}

var buttons={
    "seatA": 0,
    "seatB": 0,
    "seatC": 0

}
$(document).ready(function(e){
    $('#seatA').click(function(e){
        sendMessage({name: "seatA", messsage: "off"});
        buttons.seatA = 'Coated Red Seat';
        buttons.seatB = 0;
        buttons.seatC = 0;
        updateSpecs();

    })
    $('#seatB').click(function(e){
        sendMessage({name: "seatB", messsage: "off"})
        buttons.seatA = 0;
        buttons.seatB = 'Bucket Seat';
        buttons.seatC = 0;
        updateSpecs();


    });

    $('#seatC').click(function(e){
        sendMessage({name: "seatC", messsage: "off"})
        buttons.seatA = 0;
        buttons.seatB = 0;
        buttons.seatC = 'Seatbelted seat';
        updateSpecs();

    })

     $('#front-spoiler').click(function(e){
        sendMessage({name: "spoiler-front", messsage: "off"})
        updateSpecs();

    })

      $('#back-spoiler').click(function(e){
        sendMessage({name: "spoiler-back", messsage: "off"})
        updateSpecs();

    })

      $('#color-wheel').click(function(e){
        sendMessage({name: "colorWheel", messsage: "toggle"});
        updateSpecs();

    })

})

function updateSpecs() {
   
    var featureList = [] ,
        backSpoiler = $('#back-spoiler').is(':checked'),
        frontSpoiler = $('#front-spoiler').is(':checked');
        for (var key in buttons){
            if (buttons[key]){
                featureList.push(buttons[key])
            }
        }
        if (backSpoiler){
            featureList.push('Back Spoiler');
        }
        if (frontSpoiler){
            featureList.push('Front Spoiler');
        }
        
        $('#final-specs').html('Final Specs: ' + featureList.join(', '))
        

    
}