Plotting shapes ontop of image with given co-ordinates - jQuery - javascript

I am building a web application that uses skybiometry api. On their demo, they have a very nice user feedback after a face is recognized like the one below
I'm trying to implement a similar functionality. Was thinking of Jquery/javascript solution. Found a lead at http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-outline but not what exactly I want.
Given co-ordinates e.g from the api response
"center"=>{"x"=>62.4, "y"=>43.4},
"eye_left"=>{"x"=>74.4, "y"=>41.2, "confidence"=>53, "id"=>449},
"eye_right"=>{"x"=>61.6, "y"=>36.6, "confidence"=>54, "id"=>450},
"mouth_center"=>{"x"=>63.8, "y"=>52.0, "confidence"=>54, "id"=>615},
"nose"=>{"x"=>67.0, "y"=>47.2, "confidence"=>58, "id"=>403}
Is there a simple library I can use to plot this on a picture? Any leads or online tutorial I can reference will be highly appreciated.

i am sure you have an answer by now but if you check this out does the canvas piece just not the tool tip
https://github.com/Liuftvafas/FCClientJS

Related

Extension for Google Earth that allows freehand and draggable selection of placemarks

I have spent about 3 whole days searching for a Google Earth API extension that would enable users to perform selections of placemarks by either clicking multiple points, OR by drawing a polygon. I didn't budget or spec this functionality because I was confident that this is the type of thing that would be readily available for Google Earth. Turns out I was wrong.
At any rate, I am not asking anyone to write the code, I am hoping someone has come across a javascript library that enables this functionality.
As you have discovered GE plugin does not support drawing or dragging without writing some code yourself.
There is an extension library that I have found useful for draggable placemarks. Use makeDraggable().
Example here:
http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/examples/draggable.html
Source here:
https://code.google.com/p/earth-api-utility-library/source/browse/trunk/extensions/src/edit/dragging.js
I believe you want to look at the second example: https://developers.google.com/earth/documentation/events#examples

How do I draw my Box2D world using HTML5 Canvas instead of Debug Draw?

I know HTML5 canvas fairly well, I know the basics and animation using loops etc.
Demo I'm working with: (click to make shapes) http://henry.brown.name/experiments/box2d/example-canvas.html
What I'm not very familiar with is Box2D. I'm using the Box2DWeb port, I heard it was newer than Box2D-js, I'm not sure which is best.
I know how to initialize the 'world' and I can place objects in the world. I then use Step to animate the world - however to display it on the screen so far I've only been able to get it working with debug draw as it basically does everything for you.
Instead of using debug draw I'd like to use canvas to draw, for example a car instead of just a square. How do I attach the physics of a square to the image of a car? I just can't get my head around integrating canvas with Box2D.
Any tips will be massively appreciated!
Thanks
I spent the last few days trying the same thing.
I found Jonny Strömberg's tutorial, which is not super detailled but by analyzing the code I found how he retrieves the body's position:
var b = world.GetBodyList()
GetBodyList() seems to be an iterative Array, so the next body is accessible through b.m_next.
You can then use
b.GetPosition().x
b.GetPosition().y
b.GetAngle()
to retrieve the body's coordinates.
EDIT: this code is for the Box2dweb library, which I found better documented than Box2djs
If you aren't familiar with Box2D you should check out the documentation at http://www.kyucon.com/doc/box2d/. This should tell you all of the properties you need. To my knowledge the standard way of using Box2D is to attach an image with userData. See this example tutorial for image and Canvas image usage.
http://www.jeremyhubble.com/box2d.html
I had the same question.
here is the documentation of it.
You could use calls like GetBodyList() , GetAngle()and members like m_position to get all that you need to paint whatever using whatever library you want to use on a canvas.

Solution to get JCrop to support image zooming

I have been searching all of the net but I can not seem to find a simple opensource plugin which essentially provides a basic image cropping tool.
Here is the deal... I am essentially looking for exactly what "jcrop" provides example: http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop
however with the added ability of just being able to zoom in/out of the image.
The simplest tool which demonstrates what I am looking for is:
http://kroppr.rborn.info
as you can see its just like jcrop but this one lets you zoom into the image and move the image around so you can get the crop area you want.
Is there ANY opensource solution out there or does anyone happen to have the skill to integrate this quick hack?
Here is free opensource solution. It is a exact copy of kropper (functionality-wise, not sure otherwise). http://www.gastonrobledo.com.ar/cropzoom/index.html
Edit: Above link is broken , as the developer has changed his domain name to http://www.cropzoom.com.ar/
New Link of this guys: https://github.com/gastonrobledo/cropzoom

Having the user draw a box around a portion of an image

I'm not fluent in more than basic javascript, but I am looking to have a way that the user can draw a box around a certain portion of image, and then have the coordinates accessible so I can save them. Something similar to tagging photos in Facebook. Does anybody know of any libraries I can reuse? Any tips to get started?
Thanks in advance.
Check out the jQuery image crop plugin. It's the most usable and beautiful plugin for the requirement that I know.
Here are some examples. You should be able to fetch the coordinates as shown in the event handler demo.

Javascript graphing library to draw a region

As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/

Categories

Resources