Search code examples
javascripthtmlairconsole

Is there way to switch the HTML controller on the Airconsole object?


Issue: I want to changed the controller.html to, let says myNewController.html, when I switch to a different scene.unity file.

Example: I have 2 mini games in the same project. I'm playing GAME_1 with controller.html and I have completed the goal for GAME_1 and its switches me to GAME_2, which will require me to use a different controller layout hence myNewController.html.

What I Know: When the scene switched it immediately throws the GAME_1's Airconsole object into GAME_2 and keeps using GAME_1's controller.html file.

Snippets of Code: This script is attached the AirConsole Object that I created

public class What_Level : MonoBehaviour { AirConsole console;

// Use this for initialization
void Start () {
    console = GetComponent<AirConsole> ();

}

// Update is called once per frame
void Update () {
    whatScene (Application.loadedLevel);
}

void whatScene(int levelNumber){
    if (levelNumber == 1) {
        Debug.Log ("Were in the GAME_1);
        //use some code to change the HTML file for GAME_1
    } else if (levelNumber == 2) {
        Debug.Log("We're in GAME_2");
        //use some code to change the HTML file for GAME_2
    }
} 

}

The only function that the variable "console" that makes any sense is console.controllerHtml. The description it gives in "public Object controllerHtml"

Any tips or hints would be greatly appreciated and/or a reference page to the options I have for using on the AirConsole variable "console" would be greatly appreciated.

Thanks!


Solution

  • Concerning changing the controller layout. Instead of changing the file, just change the displayed content in the controller.html

    E.g. you can make a container element for each gamepad you want to show. And then broadcast a message to all controllers when they should change the visibility of the containers.

    For example in your controller.html:

    <div id="gamepad-1">Controller 1 stuff here ...</div>
    <div id="gamepad-2">Controller 2 stuff here ...</div>
    

    In javascript (also controller.html)

    var container_1 = document.getElementById('gamepad-1');
    var container_2 = document.getElementById('gamepad-2');
    // Show or hide containers like (general function would be better :)
    container_2.style.display = 'none';
    container_1.style.display = 'block';
    

    Now you just need to let your controllers know when to show/hide which container. You can do this by listening to onDeviceStateChange events.