Forums » Help » cocoon ig.input.bindTouch('#id','string'); issues?

So I have 4 divs:

<div id="left_ctrl"></div>
<div id="right_ctrl"></div>
<div id="top_ctrl"></div>
<div id="down_ctrl"></div>

and I have four binding calls:

ig.input.bindTouch( '#left_ctrl', 'l' );
ig.input.bindTouch( '#right_ctrl', 'r' );
ig.input.bindTouch( '#top_ctrl', 'u' );
ig.input.bindTouch( '#down_ctrl', 'd' );

and I keep getting "not found getElementById: left_ctrl every time I try to run the game in the cocoonjs launcher on android.

i have tried adding these divs through javascript in the main.js when defining my canvas and I still get the same problem:

var leftDiv = document.createElement('div');
leftDiv.id='left_ctrl';
leftDiv.style.width="80px";
leftDiv.style.height="80px";
leftDiv.style.position='absolute';
leftDiv.style.top='200px';
leftDiv.style.backgroundImage="url('touch_left.png')";
leftDiv.style.opacity=.1;
document.body.appendChild(leftDiv);

var rightDiv = document.createElement('div');
rightDiv.id='right_ctrl';
rightDiv.style.width="80px";
rightDiv.style.height="80px";
rightDiv.style.position='absolute';
rightDiv.style.top='200px';
rightDiv.style.left='400px';
rightDiv.style.backgroundImage="url('touch_right.png')";
rightDiv.style.opacity=.1;
document.body.appendChild(rightDiv);

var topDiv = document.createElement('div');
topDiv.id='top_ctrl';
topDiv.style.width="80px";
topDiv.style.height="80px";
topDiv.style.position='absolute';
topDiv.style.left='200px';
topDiv.style.top='0px';
topDiv.style.backgroundImage="url('touch_up.png')";
topDiv.style.opacity=.1;
document.body.appendChild(topDiv);

var BottomDiv = document.createElement('div');
BottomDiv.id='down_ctrl';
BottomDiv.style.width="80px";
BottomDiv.style.height="80px";
BottomDiv.style.position='absolute';
BottomDiv.style.left='200px';
BottomDiv.style.top='400px';
BottomDiv.style.backgroundImage="url('touch_down.png')";
BottomDiv.style.opacity=.1;
document.body.appendChild(BottomDiv);

I'm not well versed in CocoonJS, so I may be wrong, but I think it's that you are making DOM elements for UI not using Ludei's syntax.

They have some webview demos here: http://cocoonjsservice.ludei.com/cocoonjslaunchersvr/demo-list/ that may explain it better, but I was trying to rip one apart to paste how to do it in this thread and couldn't figure it out or find documentation on it. I hope that helps a little.

*edit:

It looks like they have a complete separate HTML file in a folder called "webview". I think that's where you need to put your DOM elements and use their syntax

onclick="ext.IDTK_APP.makeCall('show');"

on elements to pass down functions. But again, I'm sort of guessing :/

Thanks Tyler I'll get this working tonight do or die and write an update here about what I did or didn't do.

Here is what I have found to be "the holy grail" of getting touch events inside impact without messing with webviews using cocoonjs

var c = document.createElement('canvas');
c.id = 'canvas';
document.body.appendChild(c);
ig.main( '#canvas', MyGame, 60, window.innerWidth/2, window.innerHeight/2, 2 );
var d = document.createElement('img');
d.id= 'menu';
d.src='menu_btn.png';
d.style.position='absolute';
d.style.bottom="0"
d.style.right="0";
d.addEventListener("touchstart", function()
{
    //IMPACT FUN TIMES YEAH YEAH HOLLAR
});
var btn_lft = document.createElement('img');
btn_lft.src="touch_left.png";
btn_lft.style.position='absolute';
btn_lft.style.left='0';
btn_lft.style.top=window.innerHeight/2;//(window.innerHeight/4)-(btn_lft.height/2);
btn_lft.addEventListener("touchstart", function(){
	ig.music.play(); //IMPACT CODE HERE
});
document.body.appendChild(d);
document.body.appendChild(btn_lft);

Hi,
i' spent a lot of time in order to figure out how i make this touch events with cocoonjs working. i looked after snippets and examples here in the forum and elsewhere but couldnt make it work.

I tried different things ( code below) like creating img's or div's because i thought , than i could use the "bind.Touch" method, but the div i tried to create wouldn't show up at all.

the console.logs in the images are working , when i touch it responses, but i don't have an idea which statements i need to put in , to make my player move, jump and shoot and so on.
I test on Android google nexus i9023
Any help would be highly appreciated , thanks!

var c = document.createElement('canvas');
        c.id = 'canvas';
        document.body.appendChild(c);
        ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

        var btn_right = document.createElement('div');
        btn_right.id= 'right';
        //btn_right.style.backgroundImage = 'url(media/buttonright.png)';
        btn_right.style.color ='red';
        btn_right.style.width ='80';
        btn_right.style.height ='80';
        btn_right.style.position='absolute';
        btn_right.style.bottom="ig.system.height -48;"
        btn_right.style.left="90";
        btn_right.addEventListener("touchstart", function()
        {   console.log("righty");
            ig.input.bindTouch('#right','right');

            //IMPACT FUN TIMES YEAH YEAH HOLLAR
        });
        var btn_lft = document.createElement('img');
        btn_lft.src="media/buttonleft.png";
        btn_lft.style.position='absolute';
        btn_lft.style.left='30';
        btn_lft.style.bottom= "ig.system.height -48;"//(window.innerHeight/4)-(btn_lft.height/2);
        btn_lft.addEventListener("touchstart", function(){
            //IMPACT CODE HERE
            ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
            console.log("lefty");
        });
        var btn_jump = document.createElement('img');
        btn_jump.src="media/buttonjump.png";
        btn_jump.style.position='absolute';
        btn_jump.style.left='600';
        btn_jump.style.bottom= "ig.system.height -48;"//(window.innerHeight/4)-(btn_lft.height/2);
        btn_jump.addEventListener("touchstart", function(){
            //IMPACT CODE HERE
            console.log("jumpy");
        });
        var btn_shoot = document.createElement('img');
        btn_shoot.src="media/buttonfire.png";
        btn_shoot.style.position='absolute';
        btn_shoot.style.left='660';
        btn_shoot.style.bottom= "ig.system.height -48;"//(window.innerHeight/4)-(btn_lft.height/2);
        btn_shoot.addEventListener("touchstart", function(){
            //IMPACT CODE HERE
            console.log("shoot");
        });
        document.body.appendChild(btn_right);
        document.body.appendChild(btn_lft);
        document.body.appendChild(btn_jump);
        document.body.appendChild(btn_shoot);

I'm sorry to resurrect an older thread, but I spent a fair amount of time getting this figured out yesterday and came up with a solution that seems to work very nicely. I wanted to share it in case it helps other people.

This response is in particular related to getting touch working on cocoonjs, and I've only tested on Android (Nexus 7) at the moment. I am using the touch-button plugin for mobile web and that seems to work perfectly nicely for me.

I started with the above example:

var btn_shoot = document.createElement('img');
        btn_shoot.src="media/buttonfire.png";
        btn_shoot.style.position='absolute';
        btn_shoot.style.left='660';
        btn_shoot.style.bottom= "ig.system.height -48;"//(window.innerHeight/4)-(btn_lft.height/2);
        document.body.appendChild(btn_shoot);

This solution works, but like benkz, the following was where I was running into issues:

        btn_shoot.addEventListener("touchstart", function(){
            //IMPACT CODE HERE... 
            //but what's the best way to get this wired up to my player control code?
            console.log("shoot");
        });

Taking a look at the Input source code for ImpactJS, it seemed like this would do the trick as it's setting up the touchstart and touchend events for you. I wired up the event listener like so:

ig.input.bindTouch('#buttonName', 'fire');

Now my code for setting up these touch buttons looks like so:

                var d = document.createElement('img');
                d.id = 'cjsbutton-fire';
                d.src = 'media/images/btn_fire.png';
                d.style.position = 'absolute';
                d.style.bottom = "0";
                d.style.left = 0;
                document.body.appendChild(d);
                ig.input.bindTouch('#cjsbutton-fire', 'fire');

I was able to leave everything else the same in my player class and this got touch buttons working nicely for me on cocoonjs. Again, only tested on Android.