Arcgis map graphics run hopelessly slow on IE8 - javascript

I'm working on a project via arcgis javascript api.
With hundreds of graphics drawn on a graphicsLayer, it works well on chrome or IE11, but on IE8 and supposedly also IE6 when I drag the map, it's extremely slow so that makes it completely unusable.
I found the "displayOnPan" option of graphicslayer which seems to be designed specifically for IE. But if I turn that off, the performance is still unsatisfactory, besides, the disappearing and reappearing of the graphics each time the map is panned are really irritating.
No question of requiring the users to update or change the browser.
Is there any ways to the problem?

According to ESRI, no. This is what I got from ESRI's support centre when I put the same question to them
Hi Clark,
The Javascript API support for Internet Explorer 9 introduced significant performance improvements for drawing graphics.
In earlier versions of Internet Explorer, drawing large number of graphics performed poorly compared to browsers like Firefox and Chrome. At IE9, graphics drawing performance is much improved over earlier versions of IE and is comparable to other browsers.
A table comparing performance between the different browsers is available at https://developers.arcgis.com/javascript/jshelp/new_v23.html
Feature services are essentially graphics. If the layer(s) you're loading contain a large number of features, this is the reason for slow performance in IE8.

Related

Canvas elements not working in IE 8 and below

I have used this tutorial: Save Google charts as a image which converts Google Graphs into an image and then saves it for me.
It's working perfectly and it achieves this by creating a canvas element and then drawing the graph onto it.
However and typical with IE its doesnt work with any browser lower than 9. Which is a huge problem as most of our clients are still in the dark ages. sadly.
Can anyone recommend a good solution to this or has any of you got any experience to share on this matter?
You can use ExCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
Reference
#wizkid's answer is a good suggestion in it self - however, the only problem is that exCanvas do not support toDataURL() and won't due to the nature of it using VML. This means you won't be able to use it to save out images.
Update
You can use flash to solve this problem. There are two solutions available:
http://code.google.com/p/fxcanvas/
http://flashcanvas.net/
Both of these should be able to save out bitmap images from the "canvas" as png and jpeg (ref: fxcanvas, flashcanvas). This would of course require the client to have Flash player installed.
The third option is to use a server as a proxy (or as processor) for Google charts.

svg on older IE browsers [duplicate]

Does anybody know of a comprehensive library to make SVG work with IE (7 and 8 in particular)?
I wanted something Javascript which could be included in my web page and which would silently convert all my SVG to VML in a fashion similar to what excanvas does for Canvas.
The Raphaël—JavaScript Library can help you out there.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics and supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
EDIT:
There are two more js-libraries which use vml to render svgs in IE:
Ample SDK (where it should be possible to easily integrate existing svg files)
DojoX GFX from the Dojo Toolkit
Google's SVG Web does this. According to the project website:
SVG Web is a JavaScript library which
provides SVG support on many browsers,
including Internet Explorer, Firefox,
and Safari. Using the library plus
native SVG support you can instantly
target ~95% of the existing installed
web base.
Whilst it's described as a JavaScript library it also requires Flash 9+. This isn't usually a problem, but if you're in a corporate environment with old Flash or no Flash on the workstations it's not going to work.
Also, it is still in Alpha which could be a problem, depending on what your project is.
I think SVGWeb is the way to go, even if it is based on Flash as VML is far from being fast enough for lots of applications.
Adobe provides scripts to automatically detect, install, and redirect you back to your original site:
http://support.adobe.com/devsup/devsup.nsf/docs/51780.htm
http://www.adobe.com/svg/workflow/autoinstall.html
I have been using this fairly successfully on my site.
A more low tech solution would be to use something like svg_alike (insert conflict of interest notification here :)). It checks for the SVG support, then if it doesn't find it it replaces all SVG images with PNGs.
https://github.com/forwardadvance/svg_alike
You lose the advantages of smooth vector zooming, and retina support, but IE8 users are unlikely to make use of these features anyway.
The advantage is that you don't have to convert your images into JavaScript. I think it provides 80% of the value for 5% of the work.

Standalone javascript applications, html5 canvas games...ideally with V8, or adjusting game based on browser

Other than just sniffing browsers and telling anyone not using Chrome tough luck on purpose (75%+ of the internet?), I'm looking for different options to make an executable out of a canvas game, if that's even possible.
The idea is to control the performance of my game by including v8 to users who don't have chrome installed.....is there a way to interface with it?? Something like a web "wrapper" like Flash's plugin so you could install a v8 "plugin" cross browser???
The canvas game works with safari and firefox, but at 50-60% of the performance experienced in google chrome.
Another discrepancy is with Firefox if I make the game map more than 100x100 tiles, it chokes when generating the map and gives a "stop script" popup, if you hit "continue" it throws another popup for "out of memory, close your stuff to prevent data loss".
Using the same code in Chrome or safari, I tested maps with 500x500 tiles (yes that is 250,000 tiles, where firefox choked on 10,000 tiles....) which runs smoothly/consistently in both Chrome and Safari, though safari is 60% of the frame rate chrome manages.
I haven't yet found a limit to what chrome can handle, and using culling to only draw tiles around the view it's the same frame rate with 250,000 tiles as it was with 100 tiles (more than 200fps in chrome with 250k tiles!!!!! small view though), the only thing that changes performance is the size of the canvas element/view. Meanwhile Firefox can't even calculate the zones, let alone draw all the tiles inside the proper zones. (it does work over 100fps with maps 10k tiles or less)
It's tempting to allow anyone with a browser that supports html5 to play the game, but at the same time, user's opinion of your game will be MUCH MUCH MUCH better if the PERFORMANCE IS TWICE AS GOOD as the crappiest version that "can" play your game.
I'm reading about V8, and how you can incorporate it into your own c++ applications, or run it standalone?? Has anyone developed a wrapper to make a self contained executable for html5 canvas games?? Or a web wrapper to embed an interface to V8 or something???
I just installed chrome myself this week, after trying to target as many browsers as I could in the past, and it changed the way I think, now it's just not as good once you've had over 200fps to then play the same game with under 100fps..............And as much as I've thought it was idiotic to require chrome (seen lots of html5 devs begging people to use chrome) I've come to the realization I was ignorant, and now I think the only way to enforce the full potential of my efforts is to drop coverage for all browsers except ones that can output a set level of performance.
Otherwise the only thing I can figure is to make a different version of whatever games I develop for firefox with a smaller viewable window, smaller map, etc, then on other browsers, check performance and scale the view/map size based off what browser they're using.
Another temporary idea I was thinking of, if a user has google chrome, the game window will be 700x500px on the screen, if they have safari, drop it to like 500x375px to achieve the same frame rate, and if they have firefox the window will be like 400x300px.
At the same time, if a user is playing the game with Firefox, in the 400x300px window, I would include an obvious(blinking? lol) border around the window 700x500px showing how big the game window would be if they were using chrome? Does that sound like motivation? Then they can get a taste of the game, if they like it they might find it worthwhile to install chrome to view the full size game????
For IE<9, you can do what you're after with Google Chrome Frame. This works like a Flash-style plugin, which you can prompt users to install. It isn't available for Firefox or Safari, as far as I know.
While I'm aware of several frameworks for desktop apps using HTML and Javascript, they generally seem to use WebKit, so I would expect performance to be comparable to Safari at best (Titanium Desktop from Appcelerator is another option, but also WebKit-based).

SVG/VML browser compatibility table

I'm interested in finding a browser compatibility table that lists the parts of SVG/VML supported by each version of Opera, Safari, Chrome, Firefox and Internet Explorer (also Konqueror would be nice) in the vein of Quirksmode.
I have found the following two compatibility tables for SVG but neither of them provide enough detail:
http://caniuse.com/#cats=SVG&statuses=rec
http://www.codedread.com/svg-support.php
The information in the first link seems to clash with libraries like Raphael which claim to fully support animations in Firefox 3.0+ and Safari 3.0+ whilst the link suggests that the animation module isn't implemented till later versions for those two browsers.
The second link simply doesn't go far back enough for me to be able to draw conclusions about which features of SVG/VML I can use to ensure compatibility with older browsers.
Needless to say I'm endlessly confused.
To be perfectly clear, I'm interested in finding out which part of SVG are supported in different versions of all the popular browsers. As IE doesn't support SVG I'm interested in finding out which parts of VML the are supported in the different versions of IE.
If the developers of the libraries have found this information it must exists, it just seems to be evading me.
Any help would be much appreciated.
You may find this article helpful:
Creating SVG vector graphics for maximum browser compatibility
http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility
It shows some good examples of SVG features which aren't even supported by the latest versions of Chrome.
There's also a nice compatibility table at the bottom.

How to generate simple 3D images in JavaScript

I like to generate a simplified version of the following static image in pure JavaScript. It should work with 2010 vintage browsers, so I can't wait for Firefox 4 and WebGL.
I do not need any fancy textures - the task is just to visualise how to stack some boxes.
BTW: the current image is generated with POV-Ray which is overkill for the job - and does not run in the browser ;-)
As you say you don't need fancy textures I'd recommend for vintage support that you stack images like mentioned earlier. I made an example for you: http://jsfiddle.net/andersand/5RsEx/
The simple function is just to illustrate, and does the drawing of a segmented box. Of course you may need to figure out box placement, orientation, and so on if that is your business goal.
That approach could help you with boxes of various height (z axis). If your boxes also vary in width (x and/or y) you'd need to create more images to suit your needs.
If you can do without IE support, or require a plug-in for IE users, or provide server-side rasterization for IE users, you could use computed svg files.
You could do a very basic projection of the vertices of the boxes, maybe start with a simple isometric projection and then go to a perspective projection. Use simple 4x4 matrix math as used in OpenGL for this and represent the 3D coordinates as [x, y, z, w] vectors. Since the images are small and simple enough you can get away with simply using a smart rendering order, i.e. bottom to top, back to front, which will make sure you don't have to worry about mucking about with a depth buffer or other such things. Should be fairly simple to implement, you don't need third party libs and it will be natively supported in most of the contemporary browsers.
Okay, I thought this to be an interesting experiment, so I made a working version of what I described above. It works in all major browsers with the notable exception of IE. SVG support should come to IE with the introduction of IE9. I've tested in Opera, Firefox and Safari under OS X and Opera and Firefox under Linux. It might be possible to add IE support by making VML output possible, though I must say that I do not know whether IE permits inlining of VML in XHTML using namespaces like I used here.
Computed SVG rendering of 3D stacked boxes
Right now it only does isometric projection. I might just spend a bit more time on this to add a perspective projection option as well. That would seem fun and should not be much more than adding another matrix multiplication.
Searching for Collada (XML based 3d file) support may be your best bet. Now that canvas has landed, lots of 3d routines are being ported from Flash Actionscript to Javascript.
You can export Collada files from all of the major 3D applications, as well as blender ;)
Try the following as an example;
http://www.rozengain.com/blog/2007/11/21/parsing-collada-3d-assets-with-javascript-in-the-html-5-canvas-element/
If you want to rotate a 3D scene using javascript, you may have a few months wait until the engines get released. They will most likely be HTML5 dependent.
There are a few WebGL implementations doing the rounds but they are for the bleeding edge browsers and are very unstable.

Categories