Handling different views

controller html — it’s a website an airconsole controller is not part of the airconsole unity or construct2 plugin it has to be seen as a normal website if you have ever written a website in html, css and javascript then you basically already know how to create a controller for an airconsole game the only difference is that your website runs on a mobile device and you have to learn how to use the airconsole javascript api use different views to improve the user experience we encourage developers to display different views or “states” instead of packing everything into one silly run valley — controller when game is loading for example, if a player starts your game and it is still loading on the screen, then show a “game is loading …” text on the controller, instead of already showing in game buttons or a game menu this way the player always knows thats going on and the game is not broken switching between different views the easiest way to switch between different controller views, is simply to have a \<div> container for each view and handle their visibility with javascript and css let’s say we have 3 different views loading (show some loading spinner) menu (could have game options, menu, character selection) in game (show your in game controller) for each view we create a \<div> container with a unique id and a class “ view ” the id helps us later to identify the view // controller html \<div id="loading view" class="view">loading \</div> \<div id="menu view" class="view">your menu\</div> \<div id="ingame view" class="view">controller \</div> the css view class helps us to define a general style for all containers in the beginning, every container is invisible // css style view { display\ none; } now, when we open the controller html we would see nothing, because every container is set to display\ none to handle views and show/hide them we will write some javascript the main procedure to show one view is hide all containers (by class view) show the container by id \<script type="text/javascript>var showview = function(id) { var view = document getelementbyid(id); var all views = document queryselectorall('view'); // hide all containers for (var i=0; i\<all views length; i++) { all views\[i] style display = 'none'; } // show container view\ style display = 'block'; };// show the view with the id 'loading view' showview('loading view');// a button to switch to the ingame view var my button = document getelementbyid('go to game'); my button addeventlistener('touchstart', function() { showview('ingame view'); });\</script> this is of course a really primitive way of handling controller views if you want to have a bit more power, i recommend you to use at least a library such as jquery, handlebars or even angularjs let the screen switch the view of course you also want to let the screen decide when a view should change on one or more devices for example when the game has ended, we want to show a ‘game end view’ on every controller to communicate between a screen and it’s controllers we use the airconsole message and airconsole onmessage methods // on your screen (or corresponding construct2 / unity methods) // code to send a message to all controllers airconsole broadcast({ view 'game end view' });// in the controller html airconsole onmessage(device id, data) = function() { // check if the data, we sent, contains view if (data view) { showview(data view); } }); in construct2 you would use the send data or broadcast data actions but because you are limited to sending just a string in construct2, you would have to send something like “ game end view ” and then check in the onmessage() method which string was sent and then call the showview accordingly if you want to know more about what we have learned about making controllers for airconsole, then check out the post airconsole dev diary smartphones as controllers