I want to detect whether a visitors browser is capable of running famo.us - if not redirect them.
My first thought was Modernizr and detect whether the browser is capable of CSS 3D transformations, though i'm worried that this may be too severe as famo.us is adding some backward compatibility perhaps through shims.
I'm currently using WURFL for device detection, though this doesn't give enough browser information as far as i can tell.
Any thoughts on this?
The standout feature that famo.us depends on is CSS preserve-3d which is key to doing CSS 3D transforms and what famo.us depends on to render correctly.
You can use the cutting edge 3.0 beta of Modernizr to test for this support specifically. I'd recommend using it over reading the User Agent, as you'll always get weird false positives somehow. Using the current 2.x release will not work, as testAllProps won't support the two parameter syntax.
if(Modernizr.testAllProps('transformStyle', 'preserve-3d')){
//true
// run famo.us code!
}
else
{
//false
// famo.us 3d transforms won't work right, so lets compromise
}
There's been quite an effort to track this one on the Modernizr teams part, so if you find any issues, let them know here.
You will need to do it via user agents to detect browsers and versions. See:
https://stackoverflow.com/questions/23219710/famo-us-browsers-supports
https://github.com/Famous/famous
Related
I am working with Google Maps on Android 4.0 and I would like to know:
Is there a testing framework (or anything..) that can interact with the Google Maps API? What are the possibilities when interacting/testing with Google Maps on Android? Is it not possible to find all pins on the map and perform a click on them or perhaps determine zoom level?
There seem to be a couple questions on this website dealing with similar issues/questions with no answer.
I realize "interact with" is a broad term. I am really looking for any kind of help whether it is a suggestion or just to tell me something is not possible.
I have been using JUnit but it seems limited by itself. Just today I started looking at Robotium since the majority of tests I need to do are UI based. I am new to Robotium so maybe it is possible with this and I have not discovered it yet?
When our team created an Android application that used Google maps, I was able to create tests using the R.id for the map fragment. It is important to note that I had access to the Application's code, so I knew what variables to look for.
Prior to creating this test, I wanted to make sure that I was targeting the correct R.id, so I went into the R file, copied the value and placed it in
assertEquals(id.satellite,copiedRValue);
which returned true, and then build the test around the changeable variable
initialID = solo.waitForFragmentById(id.satellite); //where id.satellite is defined in the R file, eventually would time out and throw error if fragment was not present
//save the map type, leave
//and do other awsome stuff
//before coming back to the map
finalID = solo.waitForFragmentById(id.satellite);//capture the map fragment that is now displayed, again would time out if this specific fragment was not visible
//assert that the fragments are equal
assertTrue(initialID.equals(finalID);
The biggest problem that I had with this test and with other Robotium tests is that I had click events happening to bring in menus and sometimes Robotium would not perform the click, and the test would fail on the click.
This was my first go at testing with Robotium, so there might be other ways to manipulate the R.id values to create a tighter test.
In case anyone wants to know after much searching I finally found something that can test Google Maps. Things such as zoom level and I believe tap pin (method is called tapMapMarkerItem()) are supported. I have not tested the pin tap yet tho.
Apparently the awesome Robotium does not support map testing by itself. Nicholas Albion was nice enough to create an extension to provides testing support for maps on Android. Thank you so much Nicholas!
So here it is:
1. Download the Robotium jars from robotium.org (I found this helpful http://www.vogella.com/articles/AndroidTesting/article.html - by Lars Vogel)
2. Download the extension from https://github.com/nalbion/robotium-maps
I try to make a flip-page effect in IE10.
When i make the transformation with rotateY(180deg) it works well,
but with rotate3d(0,1,0,180deg) it makes a strange flip at 90deg (only on IE10!).
Have a look at this jsfiddle on IE10: http://jsfiddle.net/wG6gk/2/
Is this a IE Bug or does the container need any additional CSS attributes?
Css3 is in draft mode, each browser can have it's own perception of Css3.
I don't think that it is a bug.
According to my experience in css3, rotate3d is one the css3 properties that is hardware accelerated (more accelerated than rotateX and rotateY). But in this case you can't use rotate3d for IE, because it will not act the way you expect here.
I have recently implemented some data visualisation using d3.js, I'm now trying to get this to work for Internet Explorer browser versions 7 and above. The common suggestion to get this to work, is to combine d3.js with raphael.js, which is a cross browser graphics library.
There already seem to be some implementations of such libraries such as
r2d3.js :
d34raphael.js :
I'm trying to understand if these existing implementation already have d3's capability of data binding and the physics implementation of the force layout to implement something as simple as this d3 example : http://bl.ocks.org/1095795
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.
I have a django app and I would like to display some graphical data visualization to my users. I am looking for an easy-to-use package that would allow me to add graphs and widgets.
The kind of widget I want to build is a kind of speedometer dial that is red at one end and green at the other. As a user completes their job over the day, the graphic/widget adjusts itself. The dial moves from red to green.
I also want an S-curve graphic that shows the cumulative amount of work accomplished against planned. That is kind of an x/y line plot.
My question are: How easy is this to implement? Are there any add-ins libraries or packages that do this already? I am trying to keep my entire application open-source. I've seen a couple subscription services that do this type of thing, but I can't stomach the cost.
I don't mind using ajax or jquery to implement such a thing, but I would like the most elegant and maintainable solution.
Any advice or examples on how to tackle this project?
There are lots of good javascript libraries these days, but all require some effort to learn how to use. I have not found one that really is easy to use, I guess because everyone wants something different. My general experience has been the more effort you put into learning them, the more you get out.
Google has gauges: http://code.google.com/apis/chart/interactive/docs/gallery/gauge.html
Also
http://www.flotcharts.org/
http://philogb.github.com/jit/
http://www.highcharts.com/
http://www.jqplot.com/
Or really take control:
http://mbostock.github.com/protovis/
As first, see the following grid (https://www.djangopackages.com/grids/g/dashboard-applications/) on djangopackages.
Not sure if that's exactly what's asked for, but you might take a look at django-dash (https://pypi.python.org/pypi/django-dash).
It allows each user to make his own dashboard (from plugins available). Those dashboards can be made public.
Some screenshots (http://pythonhosted.org/django-dash/#screenshots).
It's modular and plugin based, so you need to make a plugin and widgets for every specific feature (in this particular case - the speedometer plugin and widgets for it). Each plugin/widget can include own JS/CSS when being rendered.
See the following chart usage examples:
D3.js integration examples (https://github.com/barseghyanartur/django-dash/tree/master/example/example/d3_samples).
Polychart2.js integration example (https://github.com/barseghyanartur/django-dash/blob/master/example/example/bar/).
protovis is no longer under active development, but they started a new poject: http://d3js.org/
You may choose from these packages:
https://www.djangopackages.com/search/?q=dash
I wrote a program in C++/OpenGL (using Dev-C++ compiler) for my calculus 2 class. The teacher liked the program and he requested me to somehow put it online so that instead of downloading the .exe I can just run it on the web browser. Kinda like java applets run on the browser.
The question is:
How if possible, can I display a C++/OpenGL program in a web browser?
I am thinking of moving to JOGL which is a java interpretation of OpenGL but I rather stay in C++ since I am more familiar with it.
Also is there any other better and easier 3D web base API that I can consider?
There is a lot activity recently with WebGL. It is a binding for Javascript to native OpenGL ES 2.0 implementations, designed as an extension of the canvas HTML5 element.
It is supported by the nightly builds of Firefox, Safari, Chrome and Opera.
Have a look at these tutorials, based on the well known NeHe OpenGL tutorials.
Several projects based on WebGL are emerging, most notably Scenegraphs APIs.
From Indie teams: SceneJS, GLGE, SpiderGL.
From Google: the team behind O3D plugin is trying to implement a pure WebGL backend (source) for the project, so that no plugin will be necessary.
From W3C/Web3D: There is an ongoing discussion to include X3D as part of any HTML5 DOM tree, much like SVG in HTML4. The X3DOM project was born last year to support this idea. Now it is using WebGL as its render backend, and is version 1.0 since March 2010.
I'm almost sure that WebGL is the way to go in the near future. Mozilla/Google/Apple/Opera are promoting it, and if the technology works and there is sufficient customer/developer demand, maybe Microsoft will implement it on IE (let's hope that there will be no "WebDX"!).
AFAIK, there's only 3 options:
Java. it includes the whole OpenGL stack.
Google's Native Client (NaCL), essentially it's a plugin that let's you run executable x86 code. Just compile it and call it from HTML. Highly experimental, and nobody will have it already installed. Not sure if it gives you access to OpenGL libraries.
Canvas:3D. Another very experimental project. This is an accelerated 3D API accessible from JavaScript. AFAICT, it's only on experimental builds of Firefox.
I'd go for Java, if at all.
OTOH, if it's mostly vectorial works (without lots of textures and illumination/shadows), you might make it work on SVG simply by projecting your vectors from 3D to 2D. In that case, you can achieve cross-browser compatibility using SVGWeb, it's a simple JavaScript library that allows you to transparently use either the browser's native SVG support or a Flash-based SVG renderer.
Do you really have the time to rewrite it? I thought students were meant to be too busy for non-essential assignment work.
But if you really want to do it, perhaps a preview of it running as a flash movie is the easiest way. Then it's just a matter of doing that and you could provide a download link to the real application if people are interested.
Outside of Java, in-browser OpenGL is really in its infancy. Google's launched a really cool API and plugin for it though. It's called O3D:
http://code.google.com/apis/o3d/
Article about the overall initiative:
http://www.macworld.com/article/142079/2009/08/webgl.html
It's not OpenGL, but the Web3D Consortium's X3D specification may be of interest.
Another solution is to use Emscripten (a source-to-source compiler).
Emscripten supports C/C++ and OpenGL and will translate the source into html/JavaScript.
To use Emscripten you will need to use SDL as a platform abstraction layer (for getting an OpenGL context as well as loading images).
Emscripten is currently being used in Unreal Engine and will also be used in the Unity 5 engine.
Read more about the project here:
https://github.com/kripken/emscripten
Two approaches:
Switch to Java. However, your application will suffer from a loss of performance as a trade off for portability. But since Java is everywhere, this approach ensures that your code can be executed in most browsers.
Use ActiveX, which allows you to run native binary code for Microsoft Windows. This is not recommended in production because activeX is well known as a potential security hole, but since your lecturer is the one viewing it, security doesn't seem to be a big deal. This is applicable for Microsoft platform (Windows+IE) only.