I am using jQuery 1.1.0 and Phonegap 1.9.0 to develop an html5 application for Android. I have a little animation that draws a battery on the canvas and updates it. It looks like a battery that is loading. It worked perfectly on Android 4.0.4.
Yesterday I received an update for Android 4.1.1 on my Galaxy Nexus. After this change, I had problems with my animation. Now he refers to the images on the canvas, one in front and the other behind with wrong coordinates. I think this has something to do with changes in the Java Script Engine V8, possibly caching problems ?! In every browser on my computer, the animation works very well.
My html code is:
<!DOCTYPE html> <html> <head> <title>Hella App</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <style> .ui-page { background: black;} </style> </head> <body> <div data-role="page" id="dataPageBattery" data-theme="a"> <h2 align="center">Battery State</h2> <div data-role="header" data-position="fixed" data-theme="a"> <h1>Car Data</h1> </div> <div data-role="content" align="center"> <canvas id="myBatteryCanvas" width="device-width" height="device-height"> Sorry, your browser doesn't support canvas technology </canvas> </div> <h4 align="center" id="batteryProzent"></h4> <script type="text/javascript" src="battery.js"></script> <script>$(document).on("pageshow",init());</script> <div data-role="footer" data-position="fixed" data-id="persFooter"> <div data-role="navbar"> <ul> <li><a href="home.html" data-icon="home">Connect</a></li> <li><a href="carView.html" data-icon="gear">Cars</a></li> <li><a href="infoView.html" data-icon="info">Info</a></li> </ul> </div> </div> <script> $('#dataPageBattery').on('swipeleft',function(){ $.mobile.changePage("geolocation.html", { transition: "slide"}); console.log('slideLeft'); }) $('#dataPageBattery').on('swiperight',function(){ $.mobile.changePage("fuelGauge.html", { transition: "slide", reverse: 'true'}); console.log('slideLeft'); }) </script> </div> </body> </html>
My java Script code that I download:
var canvas = document.getElementById("myBatteryCanvas"); var ctx = canvas.getContext("2d"); var x = 50; var y = canvas.height - 30; var mx = 2; var my = 1; var WIDTH = canvas.width; var HEIGHT = canvas.height; var prozent = 1; function drawRect(y, farbe) { ctx.beginPath(); ctx.rect(124, y, 50, 21); ctx.fillStyle = farbe; ctx.fill(); window.setTimeout("draw()", 10); } function draw() { if (y >= 80) { y -= my; window.setTimeout("drawRect(y,'red')", 10); } else if (y >= 50) { y -= my; window.setTimeout("drawRect(y,'orange')", 10); ctx.rect(124, 50 + 50, 50, 40); ctx.fillStyle = 'orange'; ctx.fill(); } else { ctx.rect(124, 50, 50, canvas.height - 60); ctx.fillStyle = 'lightgreen'; ctx.fill(); } document.getElementById('batteryProzent').innerHTML = '> ' + prozent + ' %'; prozent++; if (prozent % 4 == 0) prozent++; } function init() { ctx.rect(122, 40, 54, 100); ctx.fillStyle = 'floralwhite'; ctx.fill(); ctx.lineWidth = 4; ctx.strokeStyle = '#303030'; ctx.stroke(); draw(); }
Another nice problem: if I use this html page as the first page that starts with Phonegap code, there is no problem. But if I use it throughout the application, I ran into problems. For this reason, I also publish my first page:
<!DOCTYPE html> <html> <head> <title> BLE App</title> <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="Logo.png" /> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"/> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.1.0.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <style> .ui-page { background: black;} </style> </head> <body> <div data-role="page" id="mainPage" data-theme="a"> <div data-role="header" data-position="fixed" data-theme="a"> <h1> BLE</h1> </div> <div data-role="content"> <label for="mainPage_textFrage">Find BLE Devices:</label> <a data-role=button id="mainPage_showAnswerButton">Search</a> </div> <div data-role="footer" data-position="fixed" data-id="persFooter"> <div data-role="navbar"> <ul> <li><a href="home.html" data-icon="home">Connect</a></li> <li><a href="carView.html" data-icon="gear">Cars</a></li> <li><a href="infoView.html" data-icon="info">Info</a></li> </ul> </div> </div> </div> <script> $('#mainPage_showAnswerButton').on('click',function(){ $.mobile.changePage("searchResult.html", { transition: "slideup"}); console.log('click'); }) </script> </body> </html>
Does anyone have the same problems? Can anyone help?
Thanks!
UPDATE: I upgraded jQuery to 1.7.2 and jQuery Mobile to 1.1.1. But still there are no changes. Animation does not work.