I created a simple controller.html for my AirConsole application. The content of which are as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'>
<title>AirConsole Controller</title>
<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<!-- 3rd Party Libs -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- AIRCONSOLE -->
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
<script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>
<script>
var airConsole = null;
var viewManager = null;
var deviceId = null;
var isReady = false;
var isLoadingActive = true;
/**
* Sets up the communication to the screen.
*/
function init() {
airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } );
airConsole.onMessage = function ( from, data ) {
if ( data.action == "REMOVE_LOADING" ) {
if ( isLoadingActive ) {
isLoadingActive = false;
showScreen ( "Ready" );
}
} else if (data.action == "SHOW_READY_SCREEN") {
showScreen ( "Ready" );
} else if ( data.action == "READY_RECEIVED") {
deviceId = data.info.deviceId;
showScreen ( "DoneReady" );
} else if ( data.action == "GAME_STARTED" ) {
showScreen ( "Waiting" );
} else if ( data.action == "START_GAME" ) {
showScreen ( "Controls" );
} else if (data.action == "GAME_END") {
showScreen ( "PerformEndGame" );
} else {
alert ( "Message: " + data.info.deviceId );
}
}
airConsole.onActivePlayersChange = function ( player_number ) {
// alert ( "Active Players Change" );
}
airConsole.onReady = function () {
// alert ( "On Ready" );
viewManager = new AirConsoleViewManager ( airConsole );
}
// Listen for view changes
airConsole.onCustomDeviceStateChange = function ( deviceId, data ) {
viewManager.onViewChange ( data, function ( view_id ) {
// view has changed
alert ( "VIEW MANAGER WORKING" );
} );
};
airConsole.onConnect = function ( id ) {
//alert ( "Device ID RECEIVED: " + id );
isReady = false;
}
airConsole.onGameEnd = function () {
alert ( "On Game End" );
}
}
</script>
<style type="text/css">
*{
padding: 0px;
margin: 0px auto;
}
html, body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
height: 100%;
overflow: hidden;
}
#controller-container {
background-color: #ff0000;
text-align: center;
font-family: sans-serif;
width: 100%;
height: 100vh;
position: relative;
}
.container_div {
position: relative;
display: flex;
background-color: #ff0000;
width: calc(100% -10px);
height: calc(100% -10px);
padding: 5px;
}
.inner_div{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: calc(100vh - 10px);
background-color: green;
}
.controls_div {
padding: 5px;
display: flex;
flex-direction: row;
}
.button_div {
width: calc(50% - 5px);
float: left;
}
.right_button{
float: right;
}
.control {
flex: 1;
justify-content: center;
align-items: center;
height: calc( 100vh - 10px );
background-color: cadetblue;
float: left;
}
.hidden_initially {
display: none;
}
.btn {
position: absolute;
width: 100%;
height: 100%;
}
.btn_left {
width: 40%;
left: 2%;
}
.btn_right {
width: 40%;
right: 2%;
}
.center_align {
text-align: center;
}
</style>
</head>
<body onload="init()">
<div id="controller-container">
<!-- CREATED BY ME -->
<div id="loading_container_id_div" class="container_div">
<div class="inner_div">LOADING</div>
</div>
<div id="ready_container_id_div" class="container_div view hidden_initially" onmousedown="sendReadyMessage ( 'READY' )">
<div class="inner_div">TAP TO READY</div>
</div>
<div id="done_ready_container_id_div" class="container_div hidden_initially">
<div class="inner_div">GAME is ABOUT to START</div>
</div>
<div id="controls_container_id_div" class="container_div controls_div hidden_initially">
<div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
<div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
</div>
<div id="waiting_container_id_div" class="container_div hidden_initially" onmousedown="alert ( 'BINGO' )">
<div class="inner_div">WAITING for Game to END</div>
</div>
</div>
<script>
var controlsContainer = document.getElementById ( "controls_container_id_div" );
var doneReadyContainer = document.getElementById ( "done_ready_container_id_div" );
var loadingContainer = document.getElementById ( "loading_container_id_div" );
var readyContainer = document.getElementById ( "ready_container_id_div" );
var waitingContainer = document.getElementById ( "waiting_container_id_div" );
function sendReadyMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function sendMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function hideScreens () {
controlsContainer.style.display = "none";
doneReadyContainer.style.display = "none";
loadingContainer.style.display = "none";
readyContainer.style.display = "none";
waitingContainer.style.display = "none";
}
function showScreen ( screen ) {
hideScreens ();
switch ( screen ) {
case "Waiting":
waitingContainer.style.display = "block";
break;
case "Controls":
controlsContainer.style.display = "block";
break;
case "Ready":
readyContainer.style.display = "block";
break;
case "DoneReady":
doneReadyContainer.style.display = "block";
break;
case "PerformEndGame":
waitingContainer.style.display = "block";
break;
}
}
</script>
</body>
</html>
When I run it on any device, either Android ( both app and browsers ) or iOS ( browsers ), the part pasted below:
<div id="controls_container_id_div" class="container_div controls_div hidden_initially">
<div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
<div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
</div>
SCREENSHOT:
works fine, though the same part is unable to detect "onmousedown" event purely, when played on iOS AirConsole App. It seems like the click events are basically happening in area closer to the center of the screen and the rest of the area is unable to detect any user interaction.
Why is only iOS AirConsole app showing this abnormal behaviour? What can I do in order to make both buttons take click?
Is it some flaw in my CSS or html content. Please do guide me towards the right direction.
This is the game on AirConsole
This is the "controller.html" I created, in order to get the click on whole window for iOS AirConsole app
A little help in generating the html with AirConsole Controller Generator, did the trick and personal css manipulation helped in achieving the desired output.