Chapter 2 Draw and Mac/MAMP

Akira71 · #1 (**permalink**) November 22nd, 2011, 08:57 AM

Hello,

I have been working through this book and it has caused me some issues. I was hoping to get a little help. First, I am on a MacBook Pro and for reasons beyond me I spent the last week trying to get nginx to actually install and work correctly. It has been a lot of trouble, but in the end it never worked right so I went with the easier MAMP setup.

So far so good and all the examples were working just fine up until Chapter 2. The Draw-Tracer app works very well, but the initial Draw app does not. The ontouchestart/ontouchmove events never get called so nothing draws. I even tried this in Chrome and used the excellent debug tools in Chrome to set break points and everything. I thought it was perhaps something in my typing, but that was not the case. I downloaded chapter 2 source and tried it there and the same problem. On FireFox 8, Chrome and Safari, the draw app shows nothing and looks like it isn't working. Lo and behold on the phone it works great and I see my drawing.

I don't know if this was because of something in MAMP? If so why does it work on the phone? I don't fully understand what is happening here, but without being able to test in the browsers and only seeing it work on the phone it makes debugging these apps very hard. Even my break points are not hit on the browser, but they get called on the phone.

Any ideas?

jhrobbin · #2 (**permalink**) November 22nd, 2011, 10:01 PM

I'm just learning this too but I think the desktop browser doesn't support touch events. Not related to MAMP.

Check out this SO post.

Akira71 · #3 (**permalink**) November 22nd, 2011, 10:36 PM

Quite possibly, but the book seemed to read as though it would be possible to test this in Safari at the least. It sure doesn't seem like it and since the events never get called, what you linked to makes perfect sense.

I would like to know if there is a better way to do this then. Suspect there isn't quite one.

WilliamDoane · #4 (**permalink**) April 14th, 2013, 12:50 AM

Quote:

Originally Posted by Akira71

Quite possibly, but the book seemed to read as though it would be possible to test this in Safari at the least. It sure doesn't seem like it and since the events never get called, what you linked to makes perfect sense.

I would like to know if there is a better way to do this then. Suspect there isn't quite one.

As was noted, desktop Safari doesn't generate touch events, so the existing code sample's events never fire.

You're right that the author is vague in some places (and seems to be misleading in others [chapter 4 node installation]) about whether a given example should work on the desktop only, mobile only, sim only, or some combination there of.

Of course, this is meant to be a mobil web app book, so it's understandable that example code is best run in the sim or on a mobile device.

Regardless (and regardless that it's been over a year since you posted your missive.... sorry it took me so long to find this book!), here's one possible solution that hooks mouse events into the existing touch events:

Code:

    // included just to be able to orient oneself
    canvas.ontouchmove = function(event) {
        event.preventDefault();
        var newx = event.touches[0].clientX;
        var newy = event.touches[0].clientY - canvastop;
        line(lastx, lasty, newx, newy);
        lastx = newx;
        lasty = newy;
    }

    // new code here
    var mouseDown = 0;
    canvas.onmousedown = function(event) {
        ++mouseDown;
        event.preventDefault();
        event.touches = [ {} ];
        event.touches[0].clientX = event.clientX;
        event.touches[0].clientY = event.clientY;
        canvas.ontouchstart(event)
    }
    
    canvas.onmouseup = function(event) {
        --mouseDown;
    }
    
    canvas.onmousemove = function(event) {
        if (mouseDown) {
            event.preventDefault();
            event.touches = [ {} ];
            event.touches[0].clientX = event.clientX;
            event.touches[0].clientY = event.clientY;
            canvas.ontouchmove(event)
        }
    }
        
    var clearButton = document.getElementById('clear');

WilliamDoane · #5 (**permalink**) April 14th, 2013, 12:52 AM

Quote:

Originally Posted by Akira71

Quite possibly, but the book seemed to read as though it would be possible to test this in Safari at the least. It sure doesn't seem like it and since the events never get called, what you linked to makes perfect sense.

I would like to know if there is a better way to do this then. Suspect there isn't quite one.

As was noted, desktop Safari doesn't generate touch events, so the existing code sample's events never fire.

You're right that the author is vague in some places (and seems to be misleading in others [chapter 4 node installation]) about whether a given example should work on the desktop only, mobile only, sim only, or some combination there of.

Of course, this is meant to be a mobil web app book, so it's understandable that example code is best run in the sim or on a mobile device.

Regardless (and regardless that it's been over a year since you posted your missive.... sorry it took me so long to find this book!), here's one possible solution that hooks mouse events into the existing touch events:

Code:

    // included just to be able to orient oneself
    canvas.ontouchmove = function(event) {
        event.preventDefault();
        var newx = event.touches[0].clientX;
        var newy = event.touches[0].clientY - canvastop;
        line(lastx, lasty, newx, newy);
        lastx = newx;
        lasty = newy;
    }

    // new code here
    var mouseDown = 0;
    canvas.onmousedown = function(event) {
        ++mouseDown;
        event.preventDefault();
        event.touches = [ {} ];
        event.touches[0].clientX = event.clientX;
        event.touches[0].clientY = event.clientY;
        canvas.ontouchstart(event)
    }
    
    canvas.onmouseup = function(event) {
        --mouseDown;
    }
    
    canvas.onmousemove = function(event) {
        if (mouseDown) {
            event.preventDefault();
            event.touches = [ {} ];
            event.touches[0].clientX = event.clientX;
            event.touches[0].clientY = event.clientY;
            canvas.ontouchmove(event)
        }
    }
        
    var clearButton = document.getElementById('clear');

Need to download code?

Navigation