0

JQuery Mobile / Touch Events

Is anyone using JQuery Mobile to quickly implement touch interactions with touch screens and the XD line of players? How about using javascript touch events (touchstart, touchmove, touchend).

Are these techniques supported?

8 comments

  • 0
    Avatar
    Fred Lochner

    ... I've given this a go on my own and here's what I've discovered. It does work, however, page loading and reaction time seems really slow. I'm working off a local HTML5 zone. When I touch a button, the app seems to act rather sluggishly, when loading a new page, for example. Transitions are even worse. I am using the latest official release of the firmware v4.7.151

    Any ideas on better performance?

  • 0
    Avatar
    Fred Lochner

    ... added the Ion Sound javascript plugin, to add buttons sounds. Sometimes sounds are doubled, sometimes they don't play at all. I'm playing the sounds by binding them to the tap handler of JQuery mobiles button events. Also, JQuery Mobile's buttons high light before loading a page that I have indicated in the <a> tag. All of this works flawlessly in Chrome and Safari. However, when I move it to a Brightsign player HTML5 zone, and use in conjunction with a Planar PCT2785 Touch monitor, the behavior is as follows: As mentioned above, the buttons sounds fire twice or not at all. Performance is sluggish to non-functioning, meaning, a button will play sound, will high light, but then just stick there without loading the page.

    Any help?

  • 0
    Avatar
    Alex

    Our general advice to improve the performance:

    1. Try newer firmware (4.8.108 beta).

    2. Make sure that your animated divs are decorated with appropriate styling to force AC on, e.g. -webkit-transform: translate3d(0,0,0);

    3. Do your animations using CSS, not javascript. For example, use jQuery.Transit rather than $(...).animate.

  • 0
    Avatar
    Fred Lochner

    Thanks very much for the reply. I have tried the new beta to no avail. However, I suspect there may be animations and such buried in these plug ins not following your advice...

    Could you please explain "appropriate styling to force AC"? Your HTML USER GUIDE.pdf does not seem to mention anything about this. 

  • 0
    Avatar
    Fred Lochner

    AC = hardware acceleration. Got it. JQuery.Transit looks really cool, BTW. Thanks for the tip.

  • 0
    Avatar
    Fred Lochner

    Though I didn't see any immediate improvement using JQuery.Transit, I did see a marked improvement adding -webkit-transform: translate3d(0,0,0); to my div elements being animated. However, it's worth noting that once you run a transition such as: $( ... ).transition({x: "+=10", y: "+=10"}, 200, "ease") ... the div element you are animating will acquire an element level transition style (transform: translate(0px, 0px);) which nullifies your originally assigned -webkit-transform: translate3d(0,0,0); style. This causes new animations to this element to revert back to very sluggish performance.

    I fixed this by adding a "on complete" function to the .transition call. In this function, I remove the acquired element styles so that the originally assigned -webkit-transform: translate3d(0,0,0); style remains active. This is done in that function by using: .css('transform', ''); on the div that was just animated.

    The animations are still choppy, but much improved. I am now with button sounds audio. I'll start a new thread for that.

  • 0
    Avatar
    Roni Starc

    jQuery does the animations by manipulating the CSS attributes, so you won't get any hardware acceleration. For that you need to use the CSS transformations, which are hardware accelerated. So the best way is to forget about jQuery's animations and build your own from scratch. Even better, drop jQuery completely and do everything in vanilla javascript, as you don't really need one of jQuery's most strong points - cross browser compatibility. You have a webkit browser, so you can code everything for it. Sure it is some more work at the beginning, but the performance improvements are substantial (escpecially in the memory and execution fields).

  • 0
    Avatar
    Lou Swing

    Adding to this. I've noticed slow load times for remotely hosted jQuery widgets such as clocks, weather, and sport tickers. I'm loading three at once right now, but it's a bit disappointing that it takes 4-5 seconds to load up. I'm running it on an XD232 which should be decent speed wise. This is content that loads up quickly in a browser on most computers, new or old. It just seems this is a processor or network communication speed/power issue with this version of the player. I would just like to see it be a bit more robust for the cost of $450 I suppose.

Please sign in to leave a comment.