The AirConsole controller — handling views

Image for post
Image for post

A quick guide about how to make and switch between different views on your AirConsole controller.

Controller.html — It’s a website

Image for post
Image for post

Use different views to improve the user experience

Image for post
Image for post
Silly Run Valley — Controller when game is loading

Switching between different views

// 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>
// CSS style
.view {
display:none;
}
<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>

Let the screen switch the view

// 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);
}
});
Image for post
Image for post

Technical Product Manager and Software Engineer working for AirConsole.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store