I'm looking for a framework that allows you to make a Subway map or that renders pipes. But I would like to animate it in the sense that you can see 'traffic' on the lines.
My idea is to create a visual monitoring system for message queues.
I found this "London Underground" jQuery plugin, but it's not animated: http://kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
Does anyone know of such a framework that already exists? If not, what is the best solution to make this? Canvas, JS, CSS3 or some kind of hybrid?
Try D3.js..
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
http://d3js.org/
Some good examples are here: (Node based)
https://github.com/mbostock/d3/wiki/Gallery
Related
We are developing a web application for CAD designers, existing similar projects are:
http://mydeco.com/3d-planner/
http://sunglass.io/
These projects are implemented using either SVG or Canvas. My question is:
Considering SVG and Canvas, which one is better for similar projects?
Since Canvas only provides a bundle of low-level APIs, is there any existing libraries that handle object rendering, layer management, conflict detection, etc.? For instance, with wxWidgets, Qt or MFC, developers do not have to care about window overlay and rendering in a window system.
Thanks a lot :-)
UPDATE 2
OK, I've read the posts and I'll try to avoid such kind of questions. Now I've found out this library:KineticJS, which also implements some of the functionalities of SVG. I'm trying to use it and will come up with a conclusion later.
UPDATE
Thank you Richard. Moreover, since we are deploying this application to iPad, we are trying to find out an efficient and easy-to-use technology to build it. In 2D environment, does Canvas perform faster than SVG? Is there any pitfalls of SVG on iOS devices? Thanks a lot.
Just to answer from personal experience, I have had more success with SVG in 2D projects and better results with canvas for 3D.
If you want a good library for creating 3D on the client side I would look at threeJs from the amazing Mr Doob.
http://mrdoob.github.com/three.js/
It can use canvas or WebGl for faster rendering.
Hope this helps.
I had created an HTML5 Canvas WebGL game in January for the Mozilla Game On 2010 competition (pretty late, I know - I never released it until yesterday). Now I want to port it to Flash ActionScript 3.0 for a college assignment.
I'm well versed with both static languages like C/C++ and Java; and dynamic languages like Python and JavaScript. However I don't know ActionScript, but since it's a subset of ECMAScript it should be pretty easy to understand.
I want to learn programming in ActionScript 3.0 so that I may be able to port my game in Flash. To be more specific, I want to know more about:
How is ActionScript different from Browser and Server-Side JavaScript, and basics.
OpenGL programming in ActionScript (including loading textures, shaders, etc).
How to create a HUD in Flash using a 2D HTML5 Canvas like API (in my game I have 2 canvases, one for the 3D game and another overlaying it for the heads-up display).
Support for vector and matrix calculations in ActionScript.
How to load assets like audio and sprites in Flash.
I would appreciate it if you would provide me a link to a page from where I can learn more about these topics. A more direct hands-on approach would be preferable.
It would be even more helpful if you would check my source code in JavaScript and suggest the best possible way for me to tackle this problem.
The code for the main game engine and the game itself may be found in my Github repository.
ActionScript and JavaScript are very similar at their core. In some ways you can think of ActionScript as more like a robust library layered on top of ECMAScript. There are a few differences (namely ActionScript likes to think of itself as a class-based oop, where as JavaScript is prototype-based), but if you are comfortable with one, then you should be pretty at ease with the other.
ActionScript has a class based inheritance system and supports interfaces (but you can still do some prototypical magic if you want, but its not recommended). It also supports strongly-typed objects.
var object:MovieClip = new MovieClip();
This will strongly type the object variable as a instance of the MovieClip class.
If your game is very 3D intensive, then you'll want to look into the new Flash 11 Stage3D and Context3D classes. These expose a low level GPU accelerated API that before Flash 11 wasn't possible. You can do interesting 3D stuff with Flash 10, but you are usually using drawTriangles(), which was not hardware accelerated. Flash 11 is currently in beta, but it should be out very soon. There are beta versions of the Flex SDK that should let you compile targeting the Flash 11 player.
There are also quite a few 3D libraries that are built on-top of these low-level api. If you goggle around for them, they are easy to find. But I would recommend getting a solid understanding of how ActionScript works before diving into the 3D libraries.
The HUD stuff in flash is simple whether you go with Flash 11 or Flash 10. For "classic" flash, you'll want to get familiar with the display tree concept they use in flash. Just make sure the display order is correct, and your HUD DisplayObject will always be "on-top" of your rendering DisplayObject
For Flash 11, StageVideo and Stage3D objects sit directly above the stage, but behind all normal flash DisplayObjects that are attached to the stage. So in that case, I would let the Stage3D api take care of all of your heavy rendering lifting, and use the traditional display stack for your HUD elements.
You'll probably also want to grab yourself Flash Builder over Flash CS5.5. If you are a programmer (which I am assuming you are since you are posting here), it wont make your eyes bleed trying to code. FB is based off eclipse, and its pretty decent but not perfect. But if you grab yourself the free Flex SDK, and don't mind using the command line, you can get started compiling swfs pretty quick and cheap (aka free).
Also, look into FlashDevelop. I haven't used it in a while, since switching to FB for its built in profiler, but it might be of use to you.
Importing images and audio is pretty straight-forward with the Flex SDK.
[Embed(source="logo.gif")]
public var LogoBitmapData:Class;
and then later instantiate the class:
var bitmapData:BitmapData = (new LogoBitmapData()) as BitmapData;
And then use it where ever you want to.
Just a note about the Flex. Flex is a set of UI libraries built on top of the normal Flash API, the Flex SDK includes the libraries and tools to compile MXML and ActionScript code files. So, despite it sounding like you should use the Flex SDK to compile Flex apps, you can use it to compile straight ActionScript code as well.
There are built in classes for Vector3D and Matrix3D.
As far as tutorials or references, I don't have any to offer really. I've found that most of the information on the internet about ActionScript programming is pretty hit or miss (when you can find something thats not written by a graphic designer). I'd dig around in here and see if you can find anything that makes sense to you.
There is obviously a lot more I could go into about this stuff, but hopefully this will give you a push in the right direction.
Welcome to AS3 :)
#32bitkit beat me to the IDE info, but I'd absolutely recommend Flash Builder. It's a real tool and worth the money if you're going to be doing any real AS3 work.
As far as actual tutorials, Senocular is known for writing some of the best content out there. He has a number of great tutorials here, but the following two are especially excellent introductory tutorials for AS3:
AS3 Introduction in Flash CS3 This tutorial is good because it explains the differences between AS2 (very JavaScript-like) and AS3. Ignore the fact that it's based on using the Flash "IDE."
AS3 Introduction Without Learning Flex This one is useful because it give more of an introduction to the language itself, without all of the trappings of the IDE or the Flex framework. It will help you understand the language itself.
As shown in that second tutorial, an AS3-based project will inherit from the flash.display.Sprite class. You can view the docs for that here. Perhaps it sounds silly, but you'll honestly learn quite a lot about AS3 by just browsing the AS3 Reference docs. Adobe has done a good job with those.
Another thing to be aware of in AS3 is how events are handled. This tutorial explains how the EventDispatcher class functions as the base of the event management. You can use the built-in events or dispatch your own.
HTH!
I'm coming back to web UI after a hiatus and looking to create a modern single-page javascript application using backbone.js (or batman.js if it ever desublimates), node.js, communication via now.js etc - but my question is how do I lay the thing out? CSS is not optimal for this case plus I believe css fixed positioning doesn't work on the iPad (and css layout ruins my soul). Ideally the library would work for both desktop and mobile layout, but this is not strictly a requirement as there seem to be libraries that handle mobile layout just fine.
I only care about supporting modern browsers (webkit and FF), and want to use css3 animations and rendering for everything, not legacy animations and rounded corner tricks. I also don't care if people with old browsers or js disabled can't view the site.
It seems like a lot of people are using JQuery (JQuery UI Plugin?) or similar "traditional" libraries, but with the explosion of modern js libraries I'm surprised there is not something standalone that pairs well with the likes of backbone.js. I saw jLayout (http://www.bramstein.com/projects/jlayout/) but it lacks features I need (draggable/collapsable panes in a border layout, etc).
So should I just go with a traditional framework such as JQuery + UI plugin or Mootools MochaUI? ExtJS is out due to licensing, UKI looked promising but seemed insanely under-documented. Does anyone have good experience with these or is there another option? Or should I be reconsidering the painful possibility of CSS layouts?
UPDATE:
Thanks guys. Unless I'm missing something, all the templating solutions are just that - templating solutions, not layout frameworks that can do what I want (border layouts with fixed regions etc). Does the consensus seem to be then I should stick to CSS, possibly using something like Compass + Sass? My understanding and experience was that it is difficult to do fixed-region border layouts that work cross-browser and don't fail on mobile devices, but I could be way off. I'm also not sure I understand the role of templating here, it's to render regions and models automatically right?
Your question sounds less like you are looking for a javascript framework and more like you are looking for something to help with page layout. I use Backbone heavily and just started dabbling with Batman as well. I see no reason to not use these libraries/frameworks. I prefer using lightweight tools and avoid monolithic frameworks.
In my opinion, a solid knowledge of CSS is essential if you are building single page webapps. I totally agree that you should bite the bullet and learn it. Using Less, Stylus, or SASS to simplify your CSS is perfectly acceptable, but you should still understand the underlying CSS that these tools generate. I personally use Stylus at this time.
If you want to jump-start your project and learn CSS as you go, there are a few projects that you might want to look at. These will help you to get up and running quickly and reduce the amount of CSS you need to create from scratch.
HTML5Boilerplate
This is a good starting point for your HTML and includes a solid CSS reset. I personally don't use the entire reset and customize it to just what I need. There really is no reason to not use HTML5 at this point. Even if you don't use HTML5Boilerplate, still look into using Modernizr and YepNope for feature detection and polyfill resource loading.
Twitter Bootstrap
This project includes all sorts of CSS boilerplate to get many common layout features working consistently and attractively. Note that this will make your application have a "twitterish" feel to it, but of course you can tweak it to look different. It uses LESS to more easily manage the CSS. I might fork and convert this to stylus at some point.
Semantic.gs
The Semantic Grid System provides a grid system without filling markup with .grid_x classes. I haven't used it yet, but I plan to play with it soon. You might find it helpful for creating layouts. It also uses LESS. Again, I might fork and convert to stylus.
jQuery UI Layout
This is a powerful layout plugin that I'm using in my application, although it is quite heavy and I've recently been considering removing it and using custom CSS/javascript. I created a tabbed interface layout and custom theme and contributed it to Kevin of the UI Layout project. Perhaps you would find it useful. Here's a list of other layout solutions based on jquery.
Template Precompiler
There are tons of templating soutions, including underscore template, jquery templates, mustache, jade, coffeekup, and so forth. I'm currently using Jade and created the tmpl-precompile project with node.js to compile, combine, and compress/uglify jade templates into executable javascript functions that can be served to the client. The uglified precompiled templates aren't much bigger than raw HTML templates would be, and they don't need to be compiled on the client. Using these templates with Backbone is as simple as calling a function in the render method.
I wouldn't use them, but there are some toolkits that do layout abstraction.
http://code.google.com/webtoolkit/
http://cappuccino.org/
http://ui.ajax.org/#home
As a commenter suggested, I would bite the bullet if I were you. backbone.js is pretty damn close to the metal, and a solid understanding of modern css/html combo is pretty mandatory imo.
I'd use templates and potentially a sass like language to make css a little more palatable.
Templating:
Mustache: http://mustache.github.com/
bunch of language specific ones like jade, haml, and the such
CSS meta languages:
sass: http://sass-lang.com/
less: http://lesscss.org/
language specific ones like stylus: http://learnboost.github.com/stylus/
Josh
Perhaps microjs could be useful to you. You could look at templating libraries and css animation libraries, and even maybe even single page app libraries.
The best js layout plugin around:
http://masonry.desandro.com
A very intersting and ultra lightweight is Tempo JS. Very good json render engine and you will find articles about tempo+backbone.
I am trying to create a type of mind mapping software that runs on the web, and I am trying to figure out where to start. I would like this to be able to be used by the most number of people possible. My web application is currently written using Javascript for the front end and C# for the back-end.
I was thinking of using Javascript for this. Unfortunately, the most experience I have with Javascript is with basic DOM manipulating using JQuery and cannot really figure out how I would create mind map bubbles with interactive elements inside of them.
There are one or two mind mapping jquery plugins I have found but all don't function the way I need to (too much animation, slow, doesn't look easy to add and remove elements easily, doesn't work in IE, etc...) so I am looking at creating my own system but I have no idea how I would even approach this type of thing with JS.
HTML5 is not an option as it looks to be low availability at this point.
Raphaël in combination with the Dracula Graph Library will get you started.
Be prepared to do some scripting of your own. (for example: i quickly checked the source of the dracula graph library. The graph has no method removeNode, but it is really easy to add it )
I want to draw some 3D network diagrams in a web browser, and the data for these diagrams are in a Rails app (in the database).
I already use flotomatic as a Rails interface for pretty Javascript plots (e.g., independent variable, dependent variable). Certainly there are packages for drawing simple things in Javascript.
What I'm looking for is (a) a Javascript package for 3D drawings that are displayed in a web browser (without a plugin), and (b) a Ruby API for that package, if possible.
Any recommendations? Many thanks!
I haven't found a definitive answer, but something like this might be useful:
http://www.canvasdemos.com/2009/04/05/processingjs/
http://processingjs.org/
In short, processing has been ported to javascript and makes use of the HTML5 canvas element.
Processing.js does not yet support 3D (as canvas doesn't support it due to lack of acceleration), but it shouldn't be a big deal to create a wireframe.