XMLHTTPrequest and CrossWalk Android ( edit ..after i found a solution !)

Question

original post: ( before fix ).. I develop an application (transformer.html) with XDK (ThreeJS and WebGL ) to control another application. The communication is established via a WebService (VB ASP.Net). The first version of this transformer.html had NO WebGL neither crosswalk. In debug and emulator-mode all is fine. Also compiled as a legacy hybrid mobile APK and published to my Samsung Galaxy Tab 3 without any problems. The problems pop up when I implement CrossWalk AND XMLHTTPRequest in my app.

The same origin policy seems not to be a problem. I placed this on web server side (in web.config).

<webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
 </webServices>

As said - the constellation Transformer-APP on Tablet -- WebService --- TargetWebApplication is running perfectly in my local network!

The Problem:

The problem I run into came up with implementing a simple WebGL graphic. Everything is running perfectly in simulation and debug, and when I just run this in a Firefox browser. But when I build an APK this combination (CrossWalk & XMLHTTPRequest) fails!

*kristina/14.03.15: it´s working now. i consequently used this XDK-example: https://github.com/gomobile/sample-webgl-threejs

i took my httprequest in and it was working fine!*

Before: XMLHTTPRequest (or even the POST via jQuery!) work fine under Android Legacy build. I could make the APK running but there was no Crosswalk WebGL graphic visible on my app. So HTTP Post was OK, but not Crosswalk. I´m wondering if it is possible to build a legacy App with Crosswalk. Even with the XDK's own Crosswalk demo, I was not able to build as a hybrid Legacy APK.

CrossWalk was OK on my app when I build with CrossWalk for Android, but, in this case, XMLHTTPRequest seems not possible. My connection to the WebService fails; I got a 404. But, as I said, all communication should be there, as in other modes (legacy, emulation, browser, whatever...), its working.

kristina/14.03.15: XDK recomment to build it in Android/Crosswalk. This is working NOW. The trick is to set specific host parameters in the build section!

<access origin="*"/>

( handle with care. e.g. reduce this to limited hosts! my setup only is working in my smal local environment. This way it´s ok for me )

those info was very helpful during the errorTracking:

*https://software.intel.com/en-us/xdk/docs/adding-special-build-options-to-your-xdk-cordova-app-with-the-intelxdk-config-additions-xml-file https://software.intel.com/en-us/xdk/docs/using-the-cordova-for-android-ios-etc-build-option http://www.ilinsky.com/articles/XMLHttpRequest/#usage

This was NOT very helpful - as in XDK/cordova/Crosswalk the manifest.json seem not effect anything(!?):

https://crosswalk-project.org/documentation/manifest/content_security_policy.html

As so soften it was the same-origine topic i struggled..

Many Thanks to Paul (Intel) who gave me the final hint :-)

Now the construction
CrossWalk - WebGL - XMLHttpRequest - Webservice is working perfect

*

My Setup:

• XDK1826 (latest release I got automatically!)
• Samsung Galaxy Tab 3

If you need more info please let me know.

THIS code is running after the fixes:

main.js::

    /*jslint browser:true, devel:true, white:true, vars:true, eqeq:true */
/*global THREE:false, requestAnimationFrame:false*/

/*
 * Based on http://threejs.org/examples/canvas_geometry_cube.html
 */
document.addEventListener ('DOMContentLoaded', function () {
    var camera, scene, renderer;

    var cube, plane;

    var targetRotation = 0;
    var targetRotationOnMouseDown = 0;

    var mouseX = 0;
    var mouseXOnMouseDown = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    var auto_timer = 0;

    init();
    animate();

    function init() {
        renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true, devicePixelRatio: 1 } );
        renderer.setSize (window.innerWidth, window.innerHeight);
        document.body.appendChild (renderer.domElement);

        camera = new THREE.PerspectiveCamera (
            70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.y = 150;
        camera.position.z = 500;

        scene = new THREE.Scene();

        // Cube
        var geometry_cube = new THREE.CubeGeometry (200, 200, 200);

        var texture = THREE.ImageUtils.loadTexture ('textures/crosswalk.png');//Works on mobile Android NOT in Browser or Intel XDK
        texture.anisotropy = renderer.getMaxAnisotropy ();

        var material_cube = new THREE.MeshBasicMaterial ( { map: texture } );

        cube = new THREE.Mesh (geometry_cube, material_cube);
        cube.position.y = 150;
        scene.add( cube );

        // Plane
        var geometry_plane = new THREE.PlaneGeometry (180, 180);
        geometry_plane.applyMatrix (new THREE.Matrix4 ().makeRotationX (-Math.PI / 2));

        var material_plane = new THREE.MeshBasicMaterial ( { color: 0xde613e } );

        plane = new THREE.Mesh (geometry_plane, material_plane);
        scene.add (plane);

        document.addEventListener ('mousedown', onDocumentMouseDown, false);
        document.addEventListener ('touchstart', onDocumentTouchStart, false);
        document.addEventListener ('touchmove', onDocumentTouchMove, false);

        // Generic setup

        window.addEventListener ('resize', onWindowResize, false);
    }

    function onWindowResize () {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix ();
        renderer.setSize (window.innerWidth, window.innerHeight);
    }

    function stopAutoRotate () {
        if (auto_timer)
            window.clearTimeout (auto_timer);
        auto_timer = window.setTimeout (startAutoRotate, 1000);
    }

    function startAutoRotate () {
        auto_timer = 0;
    }

    function animate () {
        requestAnimationFrame (animate);
        plane.rotation.y = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
        if (auto_timer === 0) {
            targetRotation += 0.025;
        }
        renderer.render (scene, camera);
    }

    function onDocumentMouseDown (e) {
        e.preventDefault();
        document.addEventListener ('mousemove', onDocumentMouseMove, false);
        document.addEventListener ('mouseup', onDocumentMouseUp, false);
        document.addEventListener ('mouseout', onDocumentMouseOut, false);
        mouseXOnMouseDown = e.clientX - windowHalfX;
        targetRotationOnMouseDown = targetRotation;
        stopAutoRotate ();
    }

    function onDocumentMouseMove (e) {
        mouseX = e.clientX - windowHalfX;
        targetRotation = targetRotationOnMouseDown +
            (mouseX - mouseXOnMouseDown) * 0.02;
        stopAutoRotate ();
    }

    function onDocumentMouseUp (e) {
        document.removeEventListener ('mousemove', onDocumentMouseMove, false);
        document.removeEventListener ('mouseup', onDocumentMouseUp, false);
        document.removeEventListener ( 'mouseout', onDocumentMouseOut, false);
        stopAutoRotate ();
    }

    function onDocumentMouseOut (e) {
        document.removeEventListener ('mousemove', onDocumentMouseMove, false);
        document.removeEventListener ('mouseup', onDocumentMouseUp, false);
        document.removeEventListener ('mouseout', onDocumentMouseOut, false);
        stopAutoRotate ();
    }

    function onDocumentTouchStart (e) {
        if (e.touches.length === 1) {
            e.preventDefault ();

            miniHttpTest();
            getSphereParametersWSxhr();

            mouseXOnMouseDown = e.touches[ 0 ].pageX - windowHalfX;
            targetRotationOnMouseDown = targetRotation;
            stopAutoRotate ();
        }
    }

    function onDocumentTouchMove (e) {
        if (e.touches.length === 1) {
            e.preventDefault ();
            mouseX = e.touches[0].pageX - windowHalfX;
            targetRotation = targetRotationOnMouseDown +
                (mouseX - mouseXOnMouseDown) * 0.05;
            stopAutoRotate ();
        }
    }
});

function XHRObject() {
    var xhr;

    xhr = new XMLHttpRequest();

    xhr.onerror = function () {};
    xhr.onstart = function () {};
    xhr.success = function () {};

    return xhr;
}


function getSphereParametersWSxhr() {
    var url = "http://192.444.2.444/transporter.asmx/getVideoCubeParameters";
    xhr = new XMLHttpRequest();
    var params = "";

    console.log(xhr);
    alert("-----------------------------   getSphereParametersWSxhr - before open POST : " + xhr);
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // forbidden xhr.setRequestHeader("Content-length", params.length);
    alert("after open POST : " + xhr);

    try {
        xhr.onreadystatechange = function () {

            alert("xhr.readyState == " + xhr.readyState + " xhr.status == " + xhr.status + " xhr.statusText: " + xhr.statusText + " xhr.responseText" + xhr.responseText);

            if (xhr.readyState == 2 && xhr.status == 404) {
                console.log("404 page not found: " + xhr);
                alert("404 page not found: " + xhr);
            }
            if (xhr.readyState == 3) {
                console.log("ready state 3: " + xhr.statusText + " " + xhr.status);
                alert("ready state 3: " + xhr.statusText + " " + xhr.status);
            }
            if (xhr.readyState == 4) { //&& xhr.status == 200
                console.log("ready state 4: " + xhr.statusText + " " + xhr.responseText);
                alert("ready state 4: " + xhr.statusText + " " + xhr.responseText);

                var erg1 = xhr.responseXML.getElementsByTagName("videoCubeSizeX")[0].textContent;
                var stringList = erg1.split(";");
                console.log(erg1);
                alert("videoCubeSizeX: " + erg1);
                alert(xhr.responseText);

            }

        }
        xhr.send(params);
    } catch (e) {
        console.log("XHR Post : " + e);
        alert("XHR Post : " + e);
    }
}

function miniHttpTest() {
    alert("miniHttpTest: mit GET ");

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://crosswalk-project.org/", true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
           alert("ready state 4: " + xhr.statusText + " " + xhr.responseText);
        }
    }
    xhr.send();
}