I want to make a simple html page with just a single image on it. Then make this image become pinchable.
I want to rotate it and zoom it in and out.
It may snap back to its original position when I release it.
i need code snippets that don't use any existing Javascript libraries for this – no jQuery, no Zepto, etc... it only needs to work in webkit-based browsers, but it MUST work on iOS.
Any recommandation or Key words that could be helpful to start with are appreciated.
You will need to figure out how to program the pinches yourself, but touches are a standard HTML5 thing now. See here for info on getting the touches information:
http://www.html5rocks.com/en/mobile/touch/
Related
I'm currently planning a web project that has a few animated sequences that need to run on the site.
I need the site to be as cross browser compatible as possible (duh!) and wanted to get fellow developers thoughts on different options.
Canvas is not an option mainly because of IE. IE9+ only support isn't good enough, even though the 'progression' of browser stats for IE is near on laughable
http://www.w3schools.com/browsers/browsers_stats.asp (13% for IE in March 2013 (AND IT COMES AS DEFAULT WITH ALL WINDOWS MACHINES) going slightly off topic...
I was planning on preloading a series of animated gifs for different stages of animations for example 'run', 'walk', 'fly' and then swap the src of an img tag as and when required. I haven't tested anything like this yet, but i invisage delays even with preloaded images (though javascript http://www.preloadjs.com )
although im not too keen on the quality of animated GIFS. taking this idea a little further, using the same method but with each from as a seperate PNG? is that feasible?
Or could a DOM element with a spritesheet attached as the background image work, changing the background position on each step?
Any thoughts or examples ;) would be very helpful! :)
Cheers,
Rory!
---EDIT
im also open to different javascript libraries.. although currently included in my project are jQuery and Rapheal
jQuery animate is going to be your best bet. Buf you have time to generate a sprite sheet to show different animation stages, then you may have enough time to look into a good jquery plugin like gameQuery, which allows you animate sprite sheet items.
How do I print rotated content (divs) in IE8? The DXImageTranform filter options do not appear to be printable.
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85)
Just to put this into context. I'm writing a pure dom-based canvas library called simpleCanvas. I am desperately trying to offer rotation of text, rectangles and images in IE8 without using a VML fallback, because it's ugly and slow, and error prone. A VML fallback is on my todo list as I concede that it's the only way I know how to do this in IE8 without additional tools. I'm hoping that there is some trick that I'm missing that doesn't come with a third party or server side requirement. If you have found it, a bounty is coming your way.
This is a massive stretch but is the best idea I could come up with:
Explorer Canvas - https://code.google.com/p/explorercanvas/ - Implements the canvas in IE8 by abusing VML.
HTML2Canvas - http://html2canvas.hertzen.com/ - Can render your document onto a canvas, which can then be rotated.
Failing that, I suspect your only option is going to be to generate a rotated document server-side and give that to the client for printing.
Edit: One other last ditch would be to handle the printing via Silverlight, embedding the page in a browsercontrol inside silverlight (yuck), rotating that and printing the result via SL.
Really grasping at straws here though for anything client side in a legacy browser.
According to Printing webpage with rotated text in Internet Explorer 9 you need to use -ms-transform too. Be sure to read the EDIT too as there is something buggy.
Would https://developers.google.com/chrome/chrome-frame/ be acceptable? I'm guessing not if its a LOB application, but it'd give you the features you need without taking the user out of IE8 in the strictest sense. Just another avenue to explore.
https://code.google.com/p/jqueryrotate/ - This will rotate images, it uses VML to do it in IE8. The caveat is that any text you wanted to rotate would have to be as an image.
I've never used it and it would be some work but have you tried svgweb? Basically it uses SVG if the browser supports it and Flash if it doesn't. Because it's a flash object you can print it like an image once rendered.
Here's a few more demos of it: svgweb Demos
I know it is possible to use jQuery to do something like:
$('body').css('cursor','wait');
What I want to know is: is it possible to change the cursor to a custom loading animation, such as a simple 'spinner' gif?
Many thanks in advance.
You are just manipulating CSS on the fly here. See the spec — URIs are acceptable. Browser support is variable. I haven't tried it in years, but last time I did Internet Explorer required the cursors to be in .cur format.
That said, while it is possible, there are a good set of standard cursors that users recognise. It is rare that you will have thing usefully represented by a cursor that isn't covered by the standard list, and when that list does cover things it should be used so users don't have to learn a new icon.
yes, have a look at this page
custom cursor
or this
custom cursor - 2 (easier to understand/customize i guess)
(but using non-default cursors is probably not a great idea)
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.
Are there any advanced solutions for capturing a hand drawing (from a tablet, touch screen or iPad like device) on a web site in JavaScript, and storing it on server side?
Essentially, this would be a simple mouse drawing canvas with the specialty that its resolution (i.e. the number of mouse movements it catches per second) needs to be very high, otherwise round lines in the drawing will become "polygonal" when moving the pen / mouse fast:
(if this weren't the case, the inputDraw solution suggested by #Gregory would be 100% perfect.)
It would also have to have a high level of graphical quality, i.e. antialias the penstroke. Nothing fancy here but a MS Paint style, 1x1 Pixel stroke won't cut it.
I find this a very interesting thing in general, seeing as Tablet PCs are becoming at least a bit more common. (Not that they get the attention I feel they deserve).
Any suggestions are highly appreciated. I would prefer an Open Source solution, but I am also open to proprietary solutions like ActiveX controls or Java Applets.
FF4, Chrome support is a must; Opera, IE8/9 support is desired.
Please note that most "canvas" libraries around, and most answers to other questions similar to mine, refer to programmatically drawing onto a canvas. This is not what I am looking for. I am looking for something that records the actual pen or mouse movements of the user drawing on a certain area.
Starting a bounty out of curiosity whether anything has changed during the time since this question was asked.
I doubt you'll get anything higher resolution than the "onmousemove" event gives you, without writing an efficient assembler program on some embedded system custom built for the purpose. You run inside an OS, you play by the OS's rules, which means you're limited by the frequency of the timeslices an OS will give you. (usually about 100 per second, fluxuating depending on load) I've not used a tablet that can overcome the "polygon" problem, and I've used some high end tablets. Photoshop overcomes the problem with cubic interpolation.
That is, unless, you have a very special tablet that will capture many movement events and queue them up to some internal buffer, and send a whole packet of coordinates at a time when it dispatches data to the OS. I've looked at tablet api's though, and they only give one set of coordinates at a time, so if this is going to happen, you'll need custom hardware, and a custom driver, and custom apis that can handle packets of multiple coordinates.
Or you could just use a damned canvas tag, the onmousemove event, event.pageX|pageY some cubic interpolation, the "toDataURI" api of canvas, post the result to your php script, and then just say you did all that other fancy stuff.
onmousemove, in my tests, will give you one event per pixel of movement, limited only by the speed of the event loop in the browser. You'll get sparse data points (polygons) with fast movement and that's as good as it gets without a huge research grant and a hardware designer. Deal.
there are some applets for this in the oekaki world: Shi painter, Chibipaint or PaintBBS. Here you have php classes for integration.
Drawings produced by these applets can have quite good quality. If you register in oekakicentral.com you can see all the galleries and some drawings have an animation link that shows how was it drawn (it depends on the applet), so you can compare the possibilities of the applets. Some of them are open source.
Edit: See also this made in HTML 5.
Have a look at <InputDraw/>: a flash component that turns freehand drawing into SVG. Then you could send back the generated SVG to your server.
It's free for non commercial use. According to their site, commercial use price is 29€. It's not open source though.
IMHO it's worth a look.
Alternatively, you implement something based on svg-edit which is open source and uses jQuery (demo). If requires the Google Frame Plugin for IE6+ support though.
EDIT: I just found the svg-freehand-signature project (demo) that captures your handwritten signature and sends it to a server as a SVG using POST. It's distributed as a straight-forward and self-contained zip (works out of the box with Safari and Firefox, you may want to combine it with svgweb that brings SVG support to Internet Explorer).
EDIT: I successfully combined Cesar Oliveira's canvaslol (just look at the source of the page to see how it works) with ExplorerCanvas to have something on IE. You can also have a look at Anne van Kesteren's Paintr experiment.
markup.io is doing that with an algorithm applied after the mouseup.
I asked a similar question recently, and got interesting but not satisfying answers: Is there any way to accelerate the mousemove event?