Any recommendations on zooming a large image and panning around? ideally inline on the page.
I've been using PanoJS (aka GSV2), but now more people are using iPhone/iPad/Android type devices, this library is either too slow, or the older versions do not support dragging (the one I'm using at the moment).
http://code.google.com/p/panojs/
http://www.dimin.net/software/panojs/
My current thought is that using the tiled images approach is too much for these little processors (at maximum zoom trying to drag 144 individual images, from a 3000 x 3000px original image, where each tile is 250x250px).
So probably looking more at loading the original image in an with a set width/height... and either writing my own JS to zoom/drag, or using another library (which I can't seem to find at the moment)... then there is the question of using jQuery (with jQuery UI for draggable support), or just writing the raw JS myself to keep the amount of code down.
More so answering my own question, as the standard libraries don't seem to work as well as I needed, I ended up creating my own solution:
https://github.com/craigfrancis/zoomify
The intention is that you can copy this code and then customise it to your own particular requirements... so ideally you should be able to read/understand the code, rather than just dropping it into your project and hoping for the best.
I would suggest making a viewport for mobile devices of screen width.
set all the images that are outside the viewport for more than one tile to display:none.
Then when the user pans just update the display property.
That way the browser will mainly compute a large element moving with a few images, and then compute the on and off state of some images.
a lot less graphics intensive than to recalculate a graphics heavy div element.
After looking around for this too, I decided to use OpenSeadragon (New BSD licence), an open-source, web-based viewer for high-resolution zoomable images (desktop and mobile). I needed it for the Image Pyramid sources with Multi-Image support and filtering capabilities (via one of a multitude of plugins)
Another strong contender was OpenLayers (2-Clause BSD). Here's a simple example with a static image, and here's the complete list of examples.
Related
I'd like to create a polygon like on picture below, but it should rotating and bouncing between the borders of a web page, also it should be at the background and doesn't interfere with other elements of a web page.
I can do this in pure JavaScript with a lot of math, but maybe there's another approach which can simplify this task?
UPDATE: It need to work without user actions on Safari/Chrome/FF, at least few latest releases of these browsers, and mobile devices of course.
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.
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
I'm making an TV Guide. See http://i.tv/guide for an example implementation using Canvas.
I need to make lots of little boxes representing each show. I need to be able to scroll them around, both vertically (channels) and horizontally (time). To make it with Canvas, my understanding is that the only way to implement scrolling is to intercept the correct events, and redraw the canvas smoothly with new offsets many times a second.
If I were to use divs, I could slap scrollbars on it and let it scroll normally. I could position them once, and let the scrolling move them around, rather than re-calculating their new offsets.
Which should I pick for this kind of project? If I use divs will it be too slow? Some lineups have 500 channels. I want to display up to 4 hours at once.
Thanks!
I would strongly recommend using plain HTML in preference to canvas, for interactive elements. Apart from the speed issue (divs are usually going to be faster than drawing it all manually yourself), HTML is designed to offer accessibility and usability features for free, which you'd have to do a lot of work to get even partially from canvas.
The canvas-based guide as linked has the following drawbacks:
very slow to render/scroll, for me;
impervious to keyboard navigation;
no HTML link actions (like middle-click-link-to-open-in-new-tab or right-click-bookmark);
text not copy/pastable;
a dead loss for accessibility tools like screen-readers;
reduced browser compatibility;
invisible to search engines.
Use canvas for pretty graphical and interactive effects you can't achieve with plain HTML. To be honest I don't even see any of that on i.tv's site; I have no idea why they have implemented it in this seemingly-crazy way.
Doing it with DIV's wont have issues with speed. Browsers rendering engines are built to render elements. DOM rendering is faster than canvas rendering in a lot of cases, take isogenicengine they use DOM based rendering to render thousands of elements to make games You should implement it based on your technical ability. Both technologies will be able to do what you want. Personally I would choose canvas but I see no issue with DOM rendering.
Good Luck.
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.