В приложении iOS контроллер не принимает щелчок в правой части экрана - PullRequest
Новая
       52

В приложении iOS контроллер не принимает щелчок в правой части экрана

0 голосов
/ 24 мая 2018

Я создал простое controller.html для моего AirConsole приложения.Содержание которых следующее: 

<!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>

Когда я запускаю его на любом устройстве, либо Android ( both app and browsers ), либо iOS ( browsers ), часть вставляется ниже: 

<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:

enter image description here

работает нормально, хотя та же часть не может обнаружить событие " onmousedown " чисто,при воспроизведении в iOS приложении AirConsole .Кажется, что события щелчка в основном происходят в области ближе к центру экрана, а остальная часть области не может обнаружить какое-либо взаимодействие с пользователем.

Почему только iOS AirConsole app показывает это ненормальное поведение?Что я могу сделать, чтобы обе кнопки нажали?

Это какой-то недостаток в моем CSS или html контенте.Пожалуйста, направь меня в правильном направлении.

Это игра на AirConsole

Ответы [ 2 ]

0 голосов
/ 16 июня 2018

Это "controller.html" , который я создал, чтобы получить щелчок по всему окну для приложения iOS AirConsole 

<!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'>     
        <!-- AirConsole-Controls -->
        <link rel="stylesheet" type="text/css" href="airconsole-controls/button/button.css">
        <link rel="stylesheet" type="text/css" href="airconsole-controls/dpad/dpad.css">
        <!-- Styles -->
        <link rel="stylesheet" type="text/css" href="controller/styles/styles.css">
        <link rel="stylesheet" type="text/css" href="controller/styles/controls.css">
        <!-- 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>
        <!-- AIRCONSOLE CONTROLS -->
        <script type="text/javascript" src="airconsole-controls/button/button.js"></script>
        <script type="text/javascript" src="airconsole-controls/dpad/dpad.js"></script>
        <script type="text/javascript" src="airconsole-controls/swipe-analog/swipe-analog.js"></script>
        <script type="text/javascript" src="airconsole-controls/swipe-digital/swipe-digital.js"></script>
        <!-- 3rd Party Libs -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript" src="controller/libs/handlebars-v4.0.5.js"></script>
        <!-- GENERATOR -->
        <script type="text/javascript" src="controller/js/controller_generator.js"></script>
        <script type="text/javascript" src="controller/js/main.js"></script>        
        <script>
            var airConsole = null;
            var viewManager = null;
            var deviceId = null;
            var characterName = null;            
            /**
              * 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" ) {
                        showScreen ( "Ready" );
                    } else if ( data.action == "SHOW_READY_SCREEN" ) {
                        showScreen ( "Ready" );
                    } else if ( data.action == "READY_RECEIVED" ) {
                        deviceId = data.info.deviceId;
                        characterName = data.info.characterString;
                        var imageId = document.getElementById ( "image_id" );
                        imageId.src = "images/character/" + characterName + ".png";
                        imageId.alt = characterName;                         
                        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" );
                }

                airConsole.onConnect = function ( id ) {
                    //alert ( "Device ID RECEIVED: " + id );
                }

                airConsole.onGameEnd = function () {
                    alert ( "On Game End" );
                }
            }
        </script>
        <style>
            body{margin:0px;padding:0px;}
            #controller-container {
                background-color: #00ff00;
                text-align: center;
                font-family: sans-serif;                
                width:100%;
                height: 100vh;
                position: relative;
            }

            .image_div {
                pointer-events: none;
                position: absolute;
                z-index:99;
                top:5%;
                width:50vh;
                left: 0;right: 0;margin: 0 auto;
            }
             .image_div img{width: 100%;}

            .bin_div {
                z-index:0;
            }

            .message_div {
                border: 2px outset white;
                background-color: dodgerblue;

            }

            .btn-half {
                text-align: center;
                background-color: green;
                /* background-image: url( "images/background/yellow_square.gif" );*/
                background-size: contain;
                color: #000000;
                display:inline-block;
                width:49%;
                border: 4px solid white;
                height: 98vh;
                z-index: 1;
                position: relative;
            }
        </style>
    </head>
    <body onload="init()">
        <div id="controller-container">
            <!-- REPLACE_HERE START -->
            <div id="view-0" class="view" style="display: flex;">
                <div id="view-0-section-0" class="section" style="height: 100%;">
                    <div id="loading_container_id" class="btn button-element element message_div">
                        <div class="button-text">Loading...</div>
                    </div>
                </div>
            </div>
            <div id="view-3" class="view" style="display: none;">
                <div id="view-3-section-0" class="section" style="height: 100%;">
                    <div id="ready_container_id" class="btn button-element element message_div">
                        <div class="button-text">TAP to READY</div>
                    </div>
                </div>
            </div>
            <div id="view-4" class="view" style="display: none;">
                <div id="view-4-section-0" class="section" style="height: 100%;">
                    <div id="done_ready_container_id" class="btn button-element element message_div">
                        <div class="button-text">Game will Start in few seconds, HOLD ON</div>
                    </div>
                </div>
            </div>
            <div id="view-5" class="view" style="display: none;">
                <div id="view-5-section-0" class="section horizontal" style="height: 100%;position: relative;">
                    <div id="jump_id" class="btn button-element element btn-half btn_div">
                        <div class="button-text">JUMP</div>
                    </div>
                    <div id="dash_id" class="btn button-element element btn-half btn_div">
                        <div class="button-text">DASH</div>
                    </div>
                    <div id="image_container_id" class="btn button-element element image_div">
                        <img id="image_id">
                    </div>
                </div>
            </div>
            <div id="view-6" class="view" style="display: none;">
                <div id="view-6-section-0" class="section" style="height: 100%;">
                    <div id="waiting_container_id" class="btn button-element element message_div">
                        <div class="button-text">Waiting for Game to End...</div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var ctrl_data = '{"orientation":"landscape","selected_view_id":"view-0","views":[{"id":"view-0","sections":[{"id":"view-0-section-0","elements":[{"id":"loading_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-0-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Loading...","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-3","sections":[{"id":"view-3-section-0","elements":[{"id":"ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-3-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"TAP to READY","send_onrelease":false,"message_data":[{"key":"action","value":"READY"}]}}],"classes":[]}]},{"id":"view-4","sections":[{"id":"view-4-section-0","elements":[{"id":"done_ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-4-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Game will Start in few seconds, HOLD ON","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-5","sections":[{"id":"view-5-section-0","elements":[{"id":"jump_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"JUMP","send_onrelease":false,"message_data":[{"key":"action","value":"JUMP"}]}},{"id":"dash_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-1","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"DASH","send_onrelease":false,"message_data":[{"key":"action","value":"DASH"}]}}],"classes":["horizontal"]}]},{"id":"view-6","sections":[{"id":"view-6-section-0","elements":[{"id":"waiting_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-6-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Waiting for Game to End...","send_onrelease":false,"message_data":[]}}],"classes":[]}]}]}';
            </script>
            <!-- REPLACE_HERE END -->
        </div>      
        <script>
            var controlsContainer = document.getElementById ( "view-5" );
            var doneReadyContainer = document.getElementById ( "view-4" );
            var loadingContainer = document.getElementById ( "view-0" );
            var readyContainer = document.getElementById ( "view-3" );
            var waitingContainer = document.getElementById ( "view-6" );

            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 = "flex";
                        break;
                    case "Controls":
                        controlsContainer.style.display = "flex";
                        break;
                    case "Ready":
                        readyContainer.style.display = "flex";
                        break;
                    case "DoneReady":
                        doneReadyContainer.style.display = "flex";
                        break;
                    case "PerformEndGame":
                        waitingContainer.style.display = "flex";
                        break;
                }
            }
        </script>
    </body>
</html>

Небольшая помощь в создании html с помощью Генератор контроллеров AirConsole , помогли ли трюк и манипуляции с css в достижении желаемого результата.

0 голосов
/ 06 июня 2018

У меня нет телефона iOS, чтобы проверить это, но из того, что я могу сказать, кажется довольно странным, что вы используете 

.inner_div {
    width: 100%;
}

... где .inner_div используется для кнопок «Прыжок» и «Тире», но вы также используете 

.button_div {
    width: calc(50% - 5px);
    float: left;
}

Итак, почему у вас есть два разных значения ширина для одинаковых элементов DIV?

Кроме того, я бы, возможно, сделал бы это немного по-другому, чтобы уменьшить объем кода и сделать вещи проще.Если вам интересно, я могу привести пример.

Тем не менее, я надеюсь, что это поможет вам немного.

...