Develop Reference

How to avoid sluggish d3 force layout on Android?

We're using a d3.layout.force on a web app, and I've been investigating a bug report that it is sluggish on Android: it feels like the nodes are in oil, compared to how it works on desktop browsers, or iOS.
(By the way, we only ever have between 4 and 9 nodes, and the sluggishness does not feel different between 4 and 9.)
We set size(), linkDistance() and charge(); so we're using the defaults for friction, theta, alpha, gravity, etc. I experimented with these to try and reproduce the effect on desktop, but couldn't. (friction(0.67), instead of default of 0.9, was closest, but still felt different, somehow.)
I then set up an FPS meter (based on calls to the tick() function). We get 60fps on desktop, and it seems in the 40s and 50s on an ipad. But on Android Chrome (on a Nexus 7) it seems capped at 30fps, and is often half that. Android Firefox was in the 20s normally, but sometimes into the 30s.
So, is it a reasonable hypothesis that are Android devices are just slower? Could there be a cap of 30fps in Android Chrome?
Then how can I fix this? I believe d3.js uses requestAnimationFrame(). Often animation libraries take the time between calls to requestAnimationFrame() to decide how far to move objects (so when the CPU gets overloaded the animation becomes jerkier, but takes the same amount of time to complete). But it appears that d3.js does not do this, and moves everything the same amount by tick, not by elapsed time. What can I do about this?
(Ideally I'd like a solution based on how slow/fast the machine is, rather than having to sniff the browser.)

Curiously, adding more calls to force.tick() in my own requestAnimationFrame() handler (see https://stackoverflow.com/a/26189110/841830), does increase the FPS. That suggests it is not CPU bound, but instead a limit that Android is enforcing (perhaps to save battery?).
Here is the code I'm using, that tries to adapt dynamically to the current fps; it ain't beautiful but seems to be getting the job done in my test android devices, without changing the behaviour in iOS or desktop.
First, where you set up the force layout:
var ticksPerRender = 0;
var animStartTime,animFrameCount;
force.on('start',function start(){
animStartTime = new Date();animFrameCount=0;
});
requestAnimationFrame(function render() {
for(var i = 0;i < ticksPerRender;i++)force.tick();
if(force.alpha() > 0)requestAnimationFrame(render);
});
The above does two things:
sets up the fps counter
sets up our own animation callback, which does nothing by default (ticksPerRender starts off as zero).
Then at the end of your tick handler:
++animFrameCount;
if(animFrameCount>=15){ //Wait for 15, to get an accurate count
var now = new Date();
var fps = (animFrameCount / (now - animStartTime))*1000;
if(fps < 30){
ticksPerRender++;
animStartTime = now;animFrameCount = 0; //Reset the fps counter
}
if(fps > 60 && ticksPerRender >= 1){
ticksPerRender--;
animStartTime = now;animFrameCount = 0; //Reset the fps counter
}
}
This says that if the FPS is low (below 30), do an extra call to tick() on each animation frame. And if it goes high (over 60), remove that extra call.
Each time ticksPerRender is changed, we measure the FPS from scratch.

Getting element which disappears after a period of time

I am trying to automate a native Android 4.2 application. The application plays a video and if you tap on the video a SeekBar widget which can be used to rewind the video is shown for 5 seconds.
The problem I am having is when I tap on the video to show the SeekBar widget it disappears too quickly before Appium can to do anything with it. e.g. get the seekbar coordinates for example.
Are there any solutions to this which don't require modifying the application itself? Is it possible to force the widget to always show for example? Or are there any other ways?
// tap to show the SeekBar widger
new TouchAction(driver).Tap(0.5, 0.5).Perform();
// get SeekBar element
IWebElement seekbar = new WebDriverWait(driver, TimeSpan.FromSeconds(60))
.Until(d => d.FindElement(By.XPath("//android.widget.SeekBar")));
// get its location.
// here is where test fails most of the time due to SeekBar widget disappearing too quickly.
var location = seekbar.Location;

Measuring the load time of individual GUI elements

I am writing a program to measure the load time of every GUI element (like button, Text box etc.). Right now I am working on Windows Phone and I plan to expand it to Android and iOS (using swift probably, still undecided) and Java desktop.
I am using the click event of a button to generate a GUI element (a button in this case)
private void btnCreate_Click(object sender, RoutedEventArgs e)
{
CleanUp(); // to Garbage collect
watch.Start();
Button btn = new Button();
btn.Width = 110;
btn.Height = 56;
btn.Foreground = new SolidColorBrush(Windows.UI.Colors.White);
btn.Content = "Button";
btn.Click += btn_Click;
gridMain.Children.Add(btn);
watch.Stop();
}
I use a different button, with the following code in its event handler, to show the results
private void btnResults_Click(object sender, RoutedEventArgs e)
{
long ticks = watch.ElapsedTicks;
double ms = 1000.0 * (double)ticks / Stopwatch.Frequency;
// show results in a message box
}
I also have a button to remove the generated button and garbage collect so that I can remove and recreate and take several readings
private void btnRemove_Click(object sender, RoutedEventArgs e)
{
gridMain.Children.RemoveAt(3); //the dynamically generated button is at 3
watch.Reset();
}
The problem is that I am getting some what inconsistent results.
Here are few of my results (excluding the first run):
0.6028 ms
0.7217 ms
0.9596 ms
1.3834 ms
0.5626 ms
1.3814 ms
0.7343 ms
I don't understand the reason. Is this significantly inconsistent? if yes, then is my method flawed? is there a better way to do this? Thanks

Right now you're measuring constructing two objects (a Button and a SolidColorBrush), setting various properties, inserting a couple of things into vectors (the event handler and the children), etc. but I don't think the button is actually visible when you call Stop (there is probably a layout and render pass still to happen). So you're measuring some random things.
Off-hand (and I'm not a XAML perf guru by any stretch of the imagination) a variance of +/- 1ms wall-clock time for adding a Button to a Grid seems reasonable given the way you're measuring (eg, what else is your computer doing at the same time?). If you want to do perf analysis, use the performance analyzer tools.

GUI.Toggle button in Unity does not close pop up window

I have the following script to open a GUI.Window as a pop up with a toggle button. In Unity3d editor player the script run o.k., with the window open-close on toggle button click.
As I compile the scene to my Android device, the script runs, but I can only open the GUI.Window with touching toggle button, and I cannot close it on touching again the button.
Take a look at the script, and give me some advise why is that happening, what is wrong with this UnityScript? Thank you all in advance.
Here is the script:
#pragma strict
private var doWindow0 : boolean = false;
var aTexture : Texture;
var wTexture : Texture;
// Make the contents of the window.
function DoWindow0 (windowID : int) {
GUI.color = Color.cyan;
GUI.Box (new Rect (10,10,415,210),wTexture);
}
function OnGUI () {
if(!aTexture) {
Debug.LogError("Please assign a texture in the inspector.");
return;
}
// Make a toggle button for hiding and showing the window
doWindow0 = GUI.Toggle(Rect(210,210,70,20), doWindow0, aTexture);
//doWindow0 = GUI.Button (new Rect (10,10,100,20), doWindow0, "InfoBox");
// Make sure we only call GUI.Window if doWindow0 is true.
if (doWindow0)
GUI.Window (0, Rect (30,0,420,215), DoWindow0, "InfoBox");
// Make the windows be draggable.
GUI.DragWindow (Rect (0,0,10000,10000));
}

Well, since nobody has posted anything yet, let me crarify the situation. After extented research with "trial and error" and step by step running (& debuging) the posted script, I have finaly made it, to find the culprit.
There was nothing wrong in the js code. It was a GameObject, the device rendered on a lower layer, besides the layer of the toggle button.
It seems that the graphics chip of my android device, isn't strong enough to render 2d and 3d graphic simultaneously with user interaction. Having replaced the 3d GameObject with a high definition 2d image, made everything work ok.

animation made in adobe flash professional

I have made 2 different animations in Adobe flash professional cs5.5 for an Android aplication.
And I want a code that makes it possible for a user of the app to play the animation as often they want, so if the user wants the animation to play 1 time the first animation will be playes, if the user wants to play it 2 times the animation 1 and 2 will be played, if the user wants the animation 3 times played the animation 1, 2 and 1 will be played and so on.
Can somebody help me with this problem and tell me if this is possible in jquery.

If I was you, the way I would approach this is by having a keyframe after each of the animations where you can type some code.
On the menu page or where ever you have the code for how many times the code should run, define a variable and call it something like "runTimes" which should become the amount of times the animation should run.
At the end of the animations do a simple if statement to check what the value of "runTimes" is and then decrement it. Depending on the value, it should use gotoAndPlay/gotoAndStop.
So, put this on the keyframe after the first animation:
if (runTimes > 0) {
runTimes--;
gotoAndPlay(<FIRST FRAME OF SECOND ANIMATION>);
} else {
gotoAndStop(<FRAME OF MAIN MENU>);
}
and this after the second animation:
if (runTimes > 0) {
runTimes--;
gotoAndPlay(<FIRST FRAME OF FIRST ANIMATION>);
} else {
gotoAndStop(<FRAME OF MAIN MENU>);
}
On the mainmenu frame, let's assume you have a textbox named "numTimes_txt" for the number of times to play and a button "playAnimations_btn" to start the animations.
import flash.events.MouseEvent;
var runTimes:int = 0;
playAnimations_btn.addEventListener(MouseEvent.CLICK, playAnims);
function playAnims(e:MouseEvent):void {
runTimes = parseInt(numTimes_txt.text);
play(); // or gotoAndPlay(<FIRST FRAME OF FIRST ANIMATION>);
}
I haven't tested this as I don't have my IDE on me right now, but this should work if I understand the question properly.