I've been trying to play around with deviceorientation and tried to do a simple "rotate phone - move image" script. I am controlling the image via the event alpha angle.
This angle is uniform on all devices, it goes from 0-360, both on iOS and android phones. I have tested my script on a whole bunch of phones and after some tweaking everywhere it works quite fine.
HOWEVER, on this specific version of Samsung "Galaxy S4 mini", when i turn the phone to the right, the alpha does not decrease, but increase instead instead. normally, when i move phones to the right (no matter if it's turned 90 or 270 degrees), it the alpha decreases. This happens both on native android browser and google chrome.
Now i could try to detect this specific model of samsung phone and flip signs, but i am afraid that this will be issue on much more devices on future.
What would be a good way to detect the whether alpha changes positively or negatively in respect to phone rotation?
Related
I have an app written with Konva.js, and it works really smoothly on both my 13-year-old PC and my wife's iPhone XR - it's just perfect. But whenever I run it on my Xiaomi Redmi 9 Pro and also my older one, Xiaomi Redmi Note 4X in many different browsers including Chrome, Opera and Firefox, it is really slow. I have animations using Konva.Tween and also some draggable nodes, and both of them work unbelievably slowly, FPS seems to be close to zero.
The strangest part is, I tried moving draggable nodes to a separate layer right before the dragging starts, and it doesn't speed up dragging at all, not one bit, at least visually, I didn't measure the actual FPS. So to me it seems like I am facing a limitation of my phone's performance here or there's something else which I do not see.
What is it that might cause the issue?
First, you should run the performance profile on your phone and take a look at what exactly is slow. Konva code execution? Native 2d canvas rendering? Browser layout work?
Also try to experiment with Konva.pixelRatio property https://konvajs.org/docs/performance/All_Performance_Tips.html.
Konva.pixelRatio = 1;
The image may be blurry on HPDI device, but probably it will be good enough. Probably default pixel ratio is too high. You can try different values like 1 or 1.5.
I was trying to understand about screen.width when viewing e.g. New York Times on my Android and iOS devices. Here are what I found (all viewed at portrait orientation):
screen.width returned 320 when I remote-debugged my iPod touch, which is supposed to have a 640x1136 resolution.
screen.width returned 384 when viewed on my Nexus 4, which is supposed to have a 768x1280 resolution.
Shouldn't screen.width return the resolution of the device? If not, what JavaScript object could I use to reliably get the resolution info?
What seems to be getting me the correct coordinates is window.innerWidth and window.innerHeight. I can guarantee they'll work, but they probably will. If they don't, make sure that the website isn't zoomed in (some mobile browsers zoom automatically)
What's basically going on here is that, to make sure that older sites render properly on these devices, Apple made the decision to report the original sizes when they moved to the retina display on the iPhone. Because of this precedence, Google made the same decision. If you are at your PC and it has a resolution of 1024x768, it will likely be a 10+ inch display. This would not translate well to a device that is only 4 or 5 inches diagonally, at least that's the rationale.
For a more in-depth look at this idea, I suggest you check out quirks mode's blog post about it, which you can find here
I have this tetris game I programmed with the intention of learning a bit more on javascript: elcodedocle.github.io/tetrominos
I can play it in most tablet/smartphone browsers, but on my Android 2.3.6 stock browser (Samsung Galaxy Ace ST5830) it has two problems:
Zoom events are not exactly canceled by user-scalable=no viewport property: double click and two-finger zooming still work. Sometimes.
The canvas freezes, also sometimes (I'm going mad trying to determine the cause: How the heck you debug a web app running on an android browser??). I'm guessing because of a swipe or drag event triggered that shouldn't be, so it's somehow related to the above. Tapping out of the canvas makes it work again.
I'm using Kineticjs to manipulate the canvas and bind the touch events, on top of jquery-ui for the dialogs and jQuery (not jQuery mobile).
Any suggestions/ideas?
the problem is with the device's processing speed.. evrery device has its own processing speed. canvas animations are based on javascript's setInterval and setTimeout methods..which performs as per the device's processing speed..thats why canvas games are sometimes laggy on handhelds.
I am developing a Game using JavaScript and HTML5 .While using the concept of canvas ,I am rendering the images on screen and then moving the coordinates to make the image look moving. When the laptop is charging the images move very fast but as soon as it is unplugged ,the speed of image falls.
On the Windows laptops you've got power options which are designed by default to reduce a processor and video performance if a laptop unplugged from a charger. Also if your browser for game's debugging is IE the windows also will reduce javascript performance for IE. The first Google link for illustrating my words: http://www.sevenforums.com/tutorials/778-power-plan-settings-change.html (you've got the same options for Windows 8).
We are making some JavaScript games. They run perfectly on iPhone and iPad and desktop as well. The biggest problem are Android devices. All tablets we have with Honeycomb OS 3.x (Samsung Tab 10.1, Motorola Xoom, Acer Iconia, etc.) are extremely slow when JavaScript is executed and content is rendered. It is better on 2.x phones, but still far behind Apple devices…
We tried to use the traditional approach with div element as well as HTML5 canvas, but even simple bouncing ball example is extremely slow (If you want to test it, access http://sie.mautilus.com/canvas).
If we disable in the debug menu on Android the Enable OpenGL Rendering it is slightly better, but still not usable for wide audience, not speaking about the fact, that normal user will not do this…
This makes the JavaScript based user interface, which is event bit complicated totally unusable on Android…
How it is that the simple bouncing ball, which was running in MS-DOS on my Intel 386 machine is unusable on high-end tablets with dual-core 1 GHz Cortex-A9 CPUs?
See also there:
http://code.google.com/p/android/issues/detail?id=17353
http://groups.google.com/group/phonegap/browse_thread/thread/fc13b40165db8a00?pli=1a
Regards,
STeN
You are correct that it's very slow on android devices, i ran into the same problem and searching the internet I only find people that agree with us.
I did a few things to speed things up (although it comes with lower quality). I also only checked on HTC Sensation and Samsung galaxy tab 10.1. I do think that you will need to use different settings for different phones.
set the screensize so my phone doesnt create a bigger canvas and then scale it down again.
scale up the scene by factor 2. This will cut the used pixels in halve, so you have actually a smaller canvas stretched over the full screen
dont use clearRect to clear the entire canvas and then redraw everything. Actually removing the clearRect at your bouncing ball example will show a lot of improvement. Clearing the areas that actually change (bats and ball) and then redraw it will be enough.
On a side not I noticed that android 2 and 4 perform faster then 3, but that is based on testing with just 3 devices, so not hard stats.
I also read that using translate3d on a canvas will trigger hardware rendering if available, but I havent checked/confirmed this.
Some code that might help you:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>
$(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)');
$(gameEl).css('-webkit-transform-origin', '0 0');