An SVG based Interactive Map is having serious performance issues on tablet. Any suggestions on how to optimize performance for a page that renders many SVG graphics - specifically tablet based issues? Is use of a JS library like Canvas helpful?
Related
Is there currently any full widget toolkit providing components rendering in WebGL only? Similar to the ZebraUI project, which renders a full UI component set in HTML5 canvas?
The idea is to write pure JavaScript, and still be able to shaders to render the components.
There is a new open source project which supports complete rendering of all widgets using WebGL: The DreemGL toolkit. Here is a screenshot of a DreemGL application. All UI elements are rendered using WebGL (including fonts). It's still alpha or beta quality.
I'm having a heck of a time getting a map to render properly in IE8 or IE compatibility mode. I've tried examples and demos, I've changed maps multiple times... All features seem to work and look great except IE compatibility mode or antiquated versions of IE. Maps ARE rendering on IE8 or below on the jvectormap website just not for the examples offered.
I've even gone as far as trying to replicate the maps on http://jvectormap.com, linking right to it's JS files. Still nothing.
Thanks so much for your time.
I reviewed the link you gave. The only issue I see is an absence of region border in IE8 or compatibility mode. The problem behind this is inability of VML engine to render borders with fractional width. Setting border as 1 makes the example work as expected.
I was reading the Three.js wikipedia page and it states "Three.js runs in all browsers supported by WebGL." If you use canvas renderer will the application/game created with Three.js run in browsers that support canvas but not webGL. Also are there any know issues with Three.js and mobile browsers.
Actually all browsers are supported which have support for canvas. We do not support polyfilled canvas. Mainly because most of the time, we use other things beside the canvas that are not implemented by the browser.
Checkout the browser compatibility list here:
http://caniuse.com/webgl
There's another site with a pretty neat breakdown of the OS + device/browser combination support for WebGL:
http://webglstats.com
Edit: To answer your second question on mobile, problems will be unlikely if the mobile browser supports WebGL since WebGL is basically based off of Open GL 2.0 ES (Embedded Systems). "ES" is mainly targeted things like mobile devices
You can take a look at WebGL plugin for Internet Explorer 10 and below.
We have a website that currently serves drawings to users via the SVG Viewer plugin. We have one client that sees it through IE8. With IE8, when they do a Change Zoom Level on the browser to anything other then 100%, the viewer tries to occupy the new space and zooms correctly. However, when the user tries to manipulate the frames inside that bound the viewer (it's a frameset website with the viewer being in the center) the entire site hangs. IE8 also shows that it takes up CPU cycles on the client computer, so it's trying to do something but hitting a loop.
I don't think this is actually our code and might just be something with SVG and how IE8 handles plugins and it's zoom. Does anyone know if this is a real problem and if there's a good solution?
If you are referring to the Adobe SVG Viewer plug-in, then I recommend that you (ideally) get your clients to start using a web browser that supports SVG natively — i.e. Chrome, Safari, Firefox, Opera; even IE9 (to some extent) — or use a different shim like SVGWeb to provide SVG support for those users of older browsers who also have Flash installed.
I found out what the problem was. I thought it was the SVG viewer trying to do something with the frames, when it turned out that I was just setting the frameset's initial size to the clientHeight and clientWidth, and then subtracting something from the height. That subtraction was a toolbar based in the frameset and, when you change the zoom level in the browser, there's a lock up that can occur with you trying to pull a components size and the client's size. At least, this is what I was seeing.
I want to build a web app using either canvas or SVG. But I would like to use a library that gives me some pre-made ui components like file menus or forms.
What are some of the libraries out there that could accomplish this with either of these technologies?
Mocha ui uses Canvas and is probably the closest to having good file menus and forms: http://mochaui.org/
Some other things to look at:
http://raphaeljs.com/ - Raphael for SVG
https://bespin.mozillalabs.com/ - Mozilla Bespin premade code editor for Canvas
If you don't want to use HTML for the widgets, then have a look at the pergola framework which is based on svg (has menus, windows, widgets etc).
Take a look at the canvas based framework
http://www.zebkit.com
Zebra brings fresh view and possibilities to develop WEB based Rich UI applications. The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI. Zebra development is much closer to software engineering where you write well structured, supportable, extendable code basing on easy Zebra OOP concept