if i have a map - say, of the united states, or an anatomy picture of the human body, or some sort of image with discrete sections, and i have a plain black and white outline of the image, what is the easiest way to determine the co-ordinates of the discrete sections, for use in an html image map?
I've used the coffee cup map maker, which is tedious (but also the best manual image-map maker i could find). Is there something - maybe free, maybe expensive - that can do this task automatically?
cheers!
I quite like iMapBuilder, I installed the Chrome app and find it very easy to create image maps there for both regular and irregular areas.
You can import your image, set the area and actions, then simply add the embed code to your site.
I don't create too many image maps so maybe this isn't quite what you're looking for but I hope it helps.
Related
I'm searching for Depth map algorithm for action scrip 3 (or some other language).
My goal is to generate depth map for static image on run time.
I have fount this example http://kode80.com/2009/06/29/papervision-zbuffer-and-dof/, i didn't have the time to investigate it's code but i have the filling its working only with 3d models.
Worst viable option is server side technology that does the work.
Extended description:
I have a task to develop flash application where 3d rotation of a head is simulated by a 2d image uploaded by the user.
There are some japan guys that have managed to do that (http://hairtry.jp/), but the technology that they are using is server side. It generates swf fail with precisely coped eyes and image for the depth map of the uploaded picture. I can't find out what is the sever side technology that they are using so I'm searching for any posible workarounds.
Thanks in advance.
Cheers,
Chavdar Slavov
your easiest solution would be to use a 3d engine, Paper vision seems to be getting out dated, theres a lot of documents on how to use, and tutorials but again not much has been happening with them lately. i suggest Away3d "www.away3d.com" they seem up to date.
for what your asking it is possible to do this 100% in flash but to create a 3d head at runtime and fill the face with hieght maps this is possible, you would need to look at bitmap manipulation.i dont think this is an easy task, what you should learn first is how to add an image to a spheric surface dynamically than look into height mapping by converting certain coulours from the image into different levels of depth i must say im sure this is advanced stuff, i manged to animate a globe that was this same method it looks dodgy but it gives you some source code in the FLA
http://www.ffiles.com/flash/animations/globe_animation_3496.html
The above link will allow you to download my source files, the animation it self is a scrolling image but i used Actionscript to give the globe depth and a sheric look
My first KML project was an animated map of the Washington DC Metro system (see Animating Metro with KML and Google Earth). Unfortunately, where Metro lines share the same track, only one color prevails. The real map shows a wider line with both colors side by side.
Is there a way to draw a line in KML (Google Earth) with two side-by-side colors? I've seen a way to have a different color on the edges of the line, but that's different.
I could cheat by changing the coordinates of each station, but aside from computational difficulties, I'd have to continuously changes to positions every time the user zooms, to prevent a gap between colors (or an overlap).
Other subway systems show more than two colors running alongside each other, so an option to show multiple colors would be nice. And this is not really a gradient, as the colors don't fade together; they should be distinct, assuming the pixel width is wide enough.
This is probably a feature request, though surely someone else has run across this problem before Google Earth v6? Would love to be able to do this, or find a good workaround in the interim.
Michael
http://www.mvjantzen.com/blog/
The short answer is no, although you could probably create a custom MVC object that renders the line for you as desired (i.e. you would not need to alter the Kml)
http://code.google.com/apis/maps/articles/mvcfun.html
That said, your cheat method could work too - and I would disagree that
"...I'd have to continuously changes to positions every time the user
zooms, to prevent a gap between colors"
You can set the <gx:physicalWidth> property which allows you to set the width of a LineString to be in meters, rather than pixels.
https://developers.google.com/kml/documentation/kmlreference#gxphysicalwidth
In the case of your track example, this means you can set the width of the track to match the underlying imagery no matter what altitude the end user views it from.
I need to build a custom interactive web map of my country with all it's regions (Peru). Which tool or technology would be the best way to go?
The idea is to have a map that shows the population of each region with a color scale: the more people the region has, the darker it's painted. Also I need to display some information as text and pictures when I click each region as the maps zooms in.
I've seen around and there are lots of "pre-developed" tools that can be customized but I need to build my own. Flash is already discarded. I was thinking of Java applet but is just an idea.
Thank you for your answers.
Here is the VectorWorkz GeoChart jQuery plugin, which are readily compatible with all major web-development platforms. It allows you to create heat map based on some data, you can bound your data to the regions so that region color will change when bounded data changes, it also allows you to add label text and markers into the map, adding image markers also possible.
I would not use a java applet, as seo searching of the applet will not happen. Who cares if it's a great applet if no one knows about it?
I would check out D3. I am trying to use it myself as we speak, but I have the feeling you can map your data to it quite well.
I am trying to generate some sun 'rays' which I can best describe as looking like the blade of a krisknife, such as the blade portion of this picture.
This is just an example. I only need a triangular shape with two or three waves that I can close and fill.
Better yet, is there some HTML5 app with which I can draw a complex figure and then export the javascript (moveTo, arcTo, bezierCurveTo, quadraticCurveTo, ...). Something similar to HTML5 Bezier Sketcher but which saves the javascript. Trying to draw complex figures blind is very difficult and I don't want to switch to SVG if it is not necessary.
Thanks 1,000,000
Edit: I have now also looked at all the options at this site. None will allow me to draw and fill simple curves and then see/save canvs commands. All that show commands show them in new libraries like fabric or jsDraw2D.
You can parse SVG into an html5 canvas with fabric.js.
That might do the trick for you.
https://github.com/kangax/fabric.js
Beside SVG it can help you with a nice API to canvas drawing.
I found the answer among the solutions for Convert SVG to Canvas friendly output. The author didn't think it worked for him, but I think it's as perfect as any I have seen.
Professor Cloud (...is frikkin' amazing! This isn't the first thing he's done I have found incredibly useful.) created a site to take SVG input and product Canvas output. You can see it here, at Professor Cloud SVG-to-Canvas.
Using this site, I can draw something or even take a stock vector image in AI, export as SVG, cut out the commands and past them into Prof. Clouds amazing SVG-chipper, and get Canvas code. I understand it doesn't support full SVG capabilities, but then, neither does Canvas. Great for me.
Your solution is probably best but just for the record, I tried experimenting with some graph plotting, and got some nice results:
The equations are:
sin(x)*log(2/x) + x/10
sin(x)*log(2/x) - x/10
You can plot them using: http://www.graphsketch.com/
It looks good with 0 < x < 25
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.