I'm looking into several html5 frameworks for a project that would be in some ways similar to the iMakeMyCase editor.
The main features that have to be implemented:
choosing a predefined background
placement of multiple pre-defined elements with drag and drop
elements have to be resizable, rotatable
undo/redo
elements have to have ability to bring them forward/backwards (like layers)
zooming of the whole canvas (that one could be tricky ... any suggestions?)
ability to save the elements placement
get a .png preview of the finished product (can you somehow capture the canvas to a regular image)
The frameworks that I have been loooking so far:
cappuccino
Looks promising and the projects that have been made with it cover 90% of functionality that I need. I'm not sure about ObjectiveJ though ...
sproutcore
I didn't see lots of examples, but if apple made the whole iCloud with it, then it sure has to be powerful. But I have a feeling that a lot of implementation would be needed to get the required features covered. Correct me if I'm wrong.
easeljs
The examples look cool and if you combine them, you almost have everything covered. Probably my favourite at the moment.
What's your opinion on these frameworks and are they suitable for the project? Any others that I have missed? Any suggestions are really welcome to help me choose the right tool for the job.
Thx.
For your zooming Functionality i found same question here
and for a png preview of your image you can do something like that
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
//here you got the png image show just create an element and show this preview there
document.write('<img src="'+img+'"/>');
Related
I have an SVG logo made up predominatly of elements. I want to animate this, or more specifically drop it into a "gravity world". I was hoping to use Box2D (web port).
I'm a noob to Box2D and Canvas really, but I've got as far as converting my SVG into HTML5 canvas using canvg and I'm now reading through the getting started tutorials for Box2dWeb and I can see how to create a world with gravity, but I can't find any examples of walking an existing SVG or Canvas and simply adding the shapes to that world.
It looks like you need to use the Box2D drawing methods. Can anyone point me at a simple example that takes an existing set of shapes (SVG or on Canvas) and simply drops them onto a Box2DWeb gravity world so they simply collapse to the bottom, much like nearly all the existing Box2D demos and tutorials?
Note that with CanVG I'm not adding the shapes to Canvas myself, it is creating the Canvas for me from the SVG.
You can add whatever you want on top of box2d. If you wanted to draw dancing elephants instead of a box shape, that's up to you. Otherwise games would look pretty boring.
Nothing prevents you from using either SVG, canvas, WebGL or even HTML with box2d, you don't need to use the box2d drawing methods if you don't want to.
See this blogpost (and code) for using box2d together with raphaël (SVG). Dmitry Baranovskiy (the author of Raphaël) has also shown some demos of a custom box2d port/wrapper called newton.js. It's not yet released AFAIK, but it promises a simpler and more javascript-like API.
Please check out these links,
1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3) BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE
Regarding the html elements to apply box2d effects i also can't find any other links expect the one you mentioned in your answer.
I had been hoping that with a bounty somebody would be able to illustrate for me the "hello world" of 'gravity demos' that could animate some arbitrary shapes. Articles and links I've been shown (and found) so far are much more complicated than I'm looking for.
Whilst I hate to answer my own question, I'd just like to set the bar. This is EXACTLY what I'm looking for;
http://mrdoob.com/projects/chromeexperiments/google-gravity/
This script for this code is licensed under GPL3 I understand and I've tried it out successfully on my site. In fact, it just causes all the DIVs on my page to drop, so it's just the ticket, and I could use it.
It's not however, a simple script. I'd have preferred a simple stand-alone sample if it were possible. Failing that, hopefully this answer will help anyone else looking for something similar.
[Updated]
I've also since found this plugin, although it's a little CPU intensive and crashed Chrome for me.
http://tinybigideas.com/plugins/jquery-gravity/
I'd still be delighted to award the bounty for any better answers.
I'm pretty sure that this is what you want, it uses Gravity Script (the file's so large because it includes jQuery and Box2d.js):
Demo: http://jsfiddle.net/SO_AMK/Cf7jn/
JavaScript: None! It's in it's default configuration.
I don't really know 'Box2d', and I'm not sure if this is what you mean but just to clarify if it comes to where you need it, in HTML5, it works like having the background or style to a <table>, Which if you don't know is just about the same thing as a table in MS Word.
Sample Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
More Color & Style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
And If Allowed in 'Box2d' add some javascript:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Well, Dmitry's newton.js is not yet public. But like #cirrus, I needed something similar. So I've gone ahead and created my own newton.js. It is not well tested, but has API similar to what I can see in Dmitry's video + my own requirement (I wanted to create a game engine on top of Raphael as a renderer)
Please fork at - https://github.com/dbose/newton.js
#cirrus, it also has a simple test.html, which takes a simple Raphael element and add it to the Box2D "world"
Contextually, I needed this because the core of my app (Mixow) was a Raphael editor and later I wanted to create a game maker out of it. (http://www.mixow.com)
Bit of background
I've been producing a Flash-driven webcomic for three years now, incorporating some basic animation, a synced soundtrack and zoom-drag page viewing. The recent Flash-bashing, my desire to reach iHandhelds and my preference for open versus proprietary means that I want to make the move to HTML5 techniques this year. In the long-term, I think the writing's on the wall for Adobe's product, and I'm not entirely convinced that's a bad thing.
I'm relatively comfortably with both CSS and HTML, having worked a little in web design before. However, JavaScript is a foreign country to me, and I simply wanted to get some advice as to
whether what I want to achieve can be accomplished consistently across all browsers and
what the best techniques/approaches to the problem would be.
Any advice, even general principles, are very welcome. I've already sought out several HTML5 tutorials and introductions, which lead me to believe that the canvas element will be foundational to my plan; however while all the individual problems I face have been answered by many blogposts and guides, combining the various solutions into a single entity is something I'm not currently able to figure out, as I'm not certain of the limitations of the new HTML5 tags, or of best practice.
If I'm successful in achieving what I'm after, I'm going to post the full code online with an explanation of all the elements. Webcomics might not be a huge domain, but having a resource that did this would have made my life a lot easier - hopefully it'll help someone else in a similar position.
What I'm after
Here's a diagram giving the basics of the design requirements. I'll explain the elements, and the desired extras, below.
(Perhaps the simplest way to demonstrate what I'm after would be for interested folks head over to my website and see how my comic currently works. This isn't a plug - it would simply give the quickest insight.)
At core, I'm after a viewer that will:
display text (SVG image) in a canvas element above an raster image the page's panel art
both images should be zoom-and-draggable in sync but should ideally fade in separately, with the raster image coming first, followed by the SVG image
I'm guessing that the best way to accomplish this would be to layer two canvas elements one above the other using z-index, with the SVG file in the uppermost element. These could then be nested, as in the diagram, within a div element that would carry the zoom-drag function. Is this a reasonable approach, or are there more efficient options?
The next and previous buttons are self-explanatory. Would it best to have each page (bearing in mind some will involve animation and music) on a separate page, or to have all pages within a chapter on a single page, with the buttons making them visible progressively? I imagine this would have a great impact on loading speeds.
Finally, I'd like to have the viewer capable of displaying fullscreen if the reader desires. I imagine this could be accomplished by using Javascript to make the canvas elements and their surrounding div switch between different CSS giving a px-defined size and 100% height and width. Is this a good approach? Is it possible to apply the size change to the div element only and have the canvas elements automatically follow suit, possibly by defining their size via % in CSS?
Desired extras
At various points in the comic I make use of basic animation techniques - simple movements of layered raster images across the viewing pane. This would be simple to accomplish, I imagine, using Javascript; am I correct in thinking that applying overflow:hidden to the wrapping div will prevent images larger than the viewing area from spilling outside the viewer area?
I also want to synchronise audio with some of these animations. I understand that synchronising canvas events with the audio would be the best way to do this on, permitting both to begin activity only upon page loading or next button click.
That's about everything. As said, any advice at whatever level would be greatly appreciated, even if it's 'yes' or 'no' to the various questions I've asked. At root, it would also be good to know if HTML5 is the best option for what I'm after or whether (with gritted teeth) I should stick to Flash for now and go after handhelds using Adobe AIR.
As a front-end developer, I've been given a mock-up design to implement. This design features several tachograph-style icons, which have me stumped as to the best way to mark them up in HTML and CSS.
The images look like the following:
Obviously these assets represent the empty state and the full state respectively.
My issue is this: how can I mark-up these images so that I can show varying levels of completion, i.e. 10% full, 60% full etc?
Waiting in anticipation to hear your answers.
I would seriously recommend looking into the Raphael javascript library. You can knock something like this up in just a few lines of code.
See also this question: Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) where I gave an answer including a four-line code sample using Raphael, which provides an animated fuel gauge. You'll need to tweak it for your design, but even then it's only going to be a few lines of code.
The great thing about using Raphael to draw things like this is that it is fully compatible with older browsers, even IE (as far back as IE6 if you need it), without you having to do any special code to support it. It's a great little library.
Hope that helps.
Given that the image reprisents actual data and isn't purely a design mechanism, I'd mark the image up as an HTML image.
<img ... alt="10%">
If your concern is about showing portions of the image, one way you could do this would be to set the image as a background to some container and use width and height to identify the amount of the image to show.
i'm not an expert on html5 /css3, but would you not use the html5 arc command to create a mask to reveal the full state.
As you have a 270 degree rotation from empty to full, you'd just map the value as percentage of 270 to create the value of the arc that would mask the appropriate value.
I believe that there is a java script Math.PI that might help to.
We are in the research phase of a new project which will be used in the advertising arena. Users create a bunch of items that will play in different regions on the screen and can then swap out animations (images/texts etc).
We are pushing for an HTML5 solution which will be responsible for the rendering but a new proposal is to just use SVG (and SMIL).
I know you can embed SVG content in HTML5 pages and there are numerous links comparing the canvas and SVG.
What I need to know is what are the pros and cons of going for a solution which is based on HTML5 compared with a solution that is based solely on SVG? Also for the long term plans of the project, I can see HTML5 as allowing so much more.
Also I am not sure what tooling support is available for users using SVG. Most of items must be templatable (changing text/images), is this at all possible?
TIA
JD
I've recently had an opportunity to try Raphaël, an SVG-based solution, and Flot, an canvas-based solution. Both provide emulation on browsers that don't support the primary format: Raphaël uses VML on IE, and Flot uses excanvas.
Both SVG and canvas have advantages and disadvantages. Both can draw shapes, paths, and embed images, but canvas can do pixel-level manipulation and can draw a lot more sprites quickly, which is why it's becoming popular for HTML5 games. SVG has more powerful paths, although you'll have to learn the syntax.
SVG has another really interesting advantage: elements on a chart are DOM nodes, so it can use browser mouse and click events as well as add, remove, or change an individual node without redrawing the whole chart. Doing the same thing on a canvas involves manually keeping track of the locations of every visual element and redrawing the whole canvas when stuff moves. (Canvas does let you do double buffering and caching stuff sop it is possible to redraw it quickly, but the logic of keeping track of where everything is is still on you.)
For that reason, I think SVG is a better choice for interactive graphs and charts, while canvas is more appropriate for advanced graphics. In either case, cross-platform compatibility is a concern and a abstraction layer is indicated.
SVG is potentially more search-engine friendly and accessible than HTML5 <canvas>, in that SVG elements and text can be (potentially -- not sure if they actually do!) indexed and read out to a screenreader, user whilst <canvas> is initially just a bitmap and would need additional content to be created if one of these ads was to be presented as part of a web page. OTOH, if it's a game-like tool that's not for content creation then perhaps that's not an issue ... perhaps give more details?
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.