I want to make a panorama viewer in HTML5, I have managed to place images in my canvas so that they form the 360 degree image and used a jQuery plugin to make the effect of scrolling sideways. Now to my "problem", I want to make it more spherical feeling by stretching the edges of the image in the canvas when I rotate my image. Like Google does in it's street view, to get a better feel for the depth in the image.
Is the stretching effect something that is possible in HTML5 canvas with or without an JavaScript plugin (feels like someone could have made such a plugin or had the same problem besides Google).
Hope I'm not being to fuzzy...
What I believe you are asking is how to perform a 3D projection on an HTML5 canvas. Your best approach would be to use wegGL. Take a look at this example.
And a beautiful example.
You can also try checking out the software Pano2VR by Gnome Software. The trial version has an unlimited trial time, it just puts stamps on your panoramas. But it's pretty easy to customize.
Related
I need a component based on an HTML5 <canvas> which will behave very much like Google maps.
NOTE - to clarify, I am not looking for a maps component, but a generic image zooming/annotating component that behaves like Google maps!
It needs to do the following:
draw an image
draw some shapes over the image at certain coordinates
have smooth pinch-zoom on the image, ideally zooming in on the spot at the centre of the pinch on the screen
have the image be draggable when zoomed-in so you can change the area of the image the viewport is looking at
redraw the shapes at the same coordinates over the zoomed portion of the image, so they remain the same size no matter the level of zoom
I thought about how I would achieve this, and decided I'd probably do something like the following:
use a library like jGestures or Hammer.js or Sencha Touch to detect pinch and drag gestures
use the context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh) function to implement image zoom and positioning based on the drag and pinch events
keep a track of the zoom level and viewport position so the shapes can be redrawn at the correct coordinates on the image every time it is dragged/zoomed
perhaps use a loop with setTimeout() to make the zooming/dragging smoothly animated rather than all-at-once
However I quickly realised this would be pretty complex to write from scratch, even using a library to handle the touch gestures.
I started Googling for an open-source implementation of such a component, but the few I found didn't have the full feature-set, seem well-supported or have good reviews.
I find it hard to believe that a good open-source implementation of a component like this isn't out there. This is such a common requirement in mobile web apps, and there are already several SO questions around how to implement something similar - though most of these are from a while ago so maybe something exists now that didn't then?
Can anyone point me in the right direction?
I have heard good things about: http://www.openlayers.org/ and have seen the results of it being used (Intranet project, nothing public - sorry). However, I have not used it myself.
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.
Do people still use the old HTML Image Maps? The ones with:
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
Or is there a newer, better alternative?
Yes, people do still use image maps. An alternative would be to position elements using absolute positioning and CSS but that's not necessarily better. It also doesn't allow you to have shapes like in image maps
They are in the HTML5 specification, so they will not get deprecated.
You can still freely use them, they certainly still have their place in web development. Or I could say, those rare occasions exist where you can best solve something with an image map.
An alternative solution to using CSS or image maps would be to make use of SVG graphics embedded into the HTML dom.
One tutorial on how to achieve mouseover effects using this technique is described in this tutorial: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
The key takeaway being that SVG elements also trigger traditional dom events including onmouseover and onmouseout.
Yes html image maps are good especially if you want your area to be a polygon. You can add rollover effects to you map as well with javascript. There is a nice tutorial and demo here:
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
Image Maps are still in HTML5 specifications, supported by all browsers.
They can be adapted to responsive design using jQuery RWD Image Maps:
https://github.com/stowball/jQuery-rwdImageMaps
It detects and automatically resize the image maps coordinates.
It's also available for Wordpress developers as plugin:
http://wordpress.org/plugins/responsive-image-maps/
Simple and effective solution.
Yes, I still use image maps, however my last project used Raphaël. It was pretty easy to get something up and running.
http://dmitrybaranovskiy.github.io/raphael/
From their web site:
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base
for creating graphics. This means every graphical object you create is
also a DOM object, so you can attach JavaScript event handlers or
modify them later. Raphaël’s goal is to provide an adapter that will
make drawing vector art compatible cross-browser and easy.
Nice simple image map example:
http://dmitrybaranovskiy.github.io/raphael/australia.html
While I rarely see them used on modern websites anymore, they do seem to be used by my clients in their email campaigns. However, I've noticed, and confirmed that there are some scaling issues with the coordinate system on mobile devices.
** I know this thread is old, I was just doing some additional research into this for a recent email campaign issue and thought it may help someone else down the line.
3rd party edit
The question on litmus.com on image map support is from 04/2014
Image maps do not support ALT tags, when images aren't loaded the ALT text isn't displayed in some clients.
Image map usage generally results in using large images which can cause deliverability issues and hinder download speed (especially
important to mobile users).
And most importantly, The iOS (iphone/ipad) doesn't scale the image map link coordinates when the image is scaled which breaks the
links. Since iOS represents a large majority of email opens (iPhone +
iPad = 38% via http://emailclientmarketshare.com/) this is important.
Yes, it still used
An image map allows a user to hyperlink to many pages by clicking different parts of an image.Simply by using image map we create lists of coordinates relating to a specific area of the same image and give the hyperlink to a different location. By using this within a single image we give multiple links.
More
image map is quite interesting option in html and html5 they are still being use and i personally love it i therefore find issuse in mobile devices my issue is relatd to scaling
yes i have experience it my self however i am a student enrolled in html html5 and for begineers i would like to follow w3chools link
http://www.w3schools.com/html/html_images.asp
you will gain alot from this [page
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.
I am a junior developer I can't understand how canvas tag is beneficial for us?
I read lot of articles on that but I can't get the root benefit getting from the canvas tag.
Think of the difference between canvas and svg as the difference betwee Photoshop and Illustrator (or Gimp and Inkscape for you OSS folks). One deals with bitmaps and the other vector art.
With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line.
With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects.
Sometimes their use case overlaps. Like a lot of people use canvas to do simple line drawings and keep track of the objects as data structures in javascript. But really, they both serve different purposes. If you try to implement general purpose vector drawing in pure javascript on top of canvas I doubt you'd be faster than using svg which is most likely implemented in C.
Basically, thanks to canvas, we can now draw/render 2D shapes using HTML5 and the canvas API.
As an example of what's possible now with canvas, see this
Some possible uses for Canvas:
Image drawing program
Photo editing/manipulation
2D Games
Advanced image viewing such as Microsoft's Deep Zoom
If you can't understand how it's beneficial, then maybe it isn't from your point of view at least. Don't think that because it's there I have to use it somehow, pick and choose what technologies work for you based on what you're trying to build, an Accounting web app probably wouldn't need a canvas for instance.
The canvas will enable you to draw pixel perfect graphics.
The cool projects that came to mind for me are:
Visualize gps data. GPS data is just an XML list of coordinates. You could easily build something in canvas to "connect the dots".
An mobile app where the user can actual sign a document with her finger - canvas allows you to export out the rendered canvas drawing to PNG where it can be saved on the server.
In a game where you have avatars, you can allow the user to actual draw on the avatar. Moustaches anyone?
Other stuff:
In iOS / Android using lots of CSS3
effects like box-shadow can lead to
poor performance, especially when
animating. You can do a lot of these
graphics in a single canvas tag,
here's an example:
http://everytimezone.com/. This thing is flawless on an ipad.
Cool background effects. For example try going to Paul Irish's
site and move your cursor around the
background: http://paulirish.com/
In this HTML5 book sponsored by Google a lot of the effects are using
canvas:
http://www.20thingsilearned.com/ -
particularly the "page flip"
animations.
my personal take on canvas (and when I actually found a use case for canvas) is the ability to color pick and color change per pixel in a canvas element - actually moving the image from something we don't have any information about what is happening inside it to an element like all other DOM elements (and yes, I know about the current problems with canvas and DOM - sure this would be taken care of in the future)
sure - canvas made some sort of animation easier and pluginless, but that we could do before (mostly with flash) - I think the real importance is the ability to know what is happening on the page.