We Keep Coding

How To Create A Dynamically Sized TextArea In Android Javascript

In my app a user inputs a certain distance in the form of feet and inches. After submission, I need to draw a square textarea in the center of the screen, where the user will then be able to manually adjust the size of the text to match the height of the box. This needs to be able to work across various screen sizes and densities. The app runs on TV's. How can I accomplish this in javascript?
Thanks!

I was able to accomplish this with a little bit of math. In order to create the box at the right height, I first had to find the screen PPI (Pixels Per Inch). I did this by requiring the user to input the value (in inches) of the screens diagonal. I then used the Pythagorean theorem like the following.
float PPI = (float)Math.sqrt((double)(ScreenX * ScreenX + ScreenY * SceenY))/Diagonal
From here it was as easy as setting the desired height in inches and multiplying it by PPI, hope this helps!

FFMPEG, Blur an area of a video using Image Select Areas Plugin

I am building an online video editor. I need to allow the users to blur an area of movies. This must be done graphically, I mean user should be able to select an area of a video, using an screenshot, then the selected area must be blurred. Some thing like this
Is there anyway to map this selected area dimension and its distance from borders to the real values that must be applied to the video?
I mean four numbers, width, length, top, left will be provided using this plug in and I need to use these numbers to blur an area of videos.
I take an screenshot of video. In order to keep the aspect ratio, I will fix the width to 800px and let the height to be scaled up/down. It is clear that the width, length, top, left of the selected area of the screenshot is a factor of the width, length, top, left of the area that must be blurred in video. but I don't know how to get this factor. Besides that I don't know how to get the video resolution.
Thanks in advance.
Update
This is my PHP code that gets the selected area dimensions and offsets
$iLeft = $_POST['left'];
$iTop = $_POST['top'];
$iWidth = $_POST['width'];
$iHeight = $_POST['height'];
exec('ffmpeg -i '.$url.' -filter_complex "[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop='.$iWidth.'*iw/800:iw*'.$iHeight.'/800:'.$iWidth.'*iw/800:'.$iHeight.'*iw/800,boxblur=10[b0];[bg][b0]overlay='.$iLeft.'*W/800:'.$iTop.'*W/800"" '.$name.' > block.txt 2>&1');
$iLeft, $iTop, $iWidth, $iHeight are the left, top, width and height of the selected area via the image plugin.
It blurs many selected areas very well, but areas like this
The Image Left, Top, Width, Height is 257, 39.26666259765625, 10, 391
don't get blurred. Also a video with Dimension 207x207 didn't get blurred as well.

Running
ffprobe in.mp4 -loglevel quiet -select_streams v -show_entries stream=width,height,sample_aspect_ratio -of compact=p=0:nk=1
will produce an output that looks like this:
1280|720|1:1
The first entry is the video width, then the height, and finally the pixel or sample aspect ratio, shown as num:den so it's num/den. That's your video resolution.
With that info, the factor is video-width*sar/800. This assumes that you'll be scaling all anamorphic videos to square pixels using the scale and setsar filters, and that the 800px screenshot is undistorted as well. If you're using FFmpeg to scale screenshot, it's scale=800:ih*800/iw/sar
So FFmpeg value for area width is screenshot area width * video-width*sar/800.
and for FFmpeg Y co-ordinate is screenshot top * video-width*sar/800, and so on.
Assuming the code in the comment is for the screenshot, for the full-sized movie, it would be
"[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop=50*iw/800:50*iw/800:20*iw/800:10*iw/800,boxblur='min(min(cw/2\,ch/2)\,10)'[b0];
[bg][b0]overlay=20*W/800:10*W/800"
I've scaled the movie to make sure we're always dealing with a square-pixel video.

Get pixel color from resized canvas, on mouseover

I have checked this question which provides the perfect answer. But my problem is slightly different. I have a canvas of 300 x 300 and i am re-sizing the canvas using css to 200 x 60. If i re-size the canvas using css i am not able to get the color value onmouseover.
In the re-sized fiddle if you mouse over right below the red or blue rectangles you will notice it still says #FF0000 & #0000FF respectively while it should be #000000. So how to make it work even with re-sized canvas?
Fiddle: Re-sized with css.
Fiddle: Non re-sized.

You need to apply a scale factor inside the mouse handler method. The scale factor is the relationship between your canvas's bitmap (actual size) and the element size (CSS size).
For example:
// find scale:
var sx = example.width / parseInt(example.style.width, 10);
var sy = example.height / parseInt(example.style.height, 10);
// apply to x/y
x = (x * sx)|0; // scale and cut any fraction to get integer value
y = (y * sy)|0;
Updated fiddle
In addition the code need to have some boundary check of the coordinates so getImageData() won't fail (not shown here).

Measure area inside of image - is it possible?

Situation:
Got png (or bmp) image inside html file, on image there are black rectangles on white background. Image size is always constant AxB, rectangles are not rotated and are different each time. Html file and images are generated automatically by some software as a job report.
I need to measure area (in square pixels) of that rectangle i point and click with mouse.
I imagine it this way:
Image is loaded into array or something, when i click image, desired function perform following tasks:
find nearest black pixels to the left, right, up and down, (searching through array from coordinates i click with cursor)
calculate size of rectangle (based on those black pixels),
calculate area,
return area to some variable.
Now, is it even possible? Is there maybe another method? I'm thinking about js solution since i'm not familiar with jquery at all; php and server-side solutions are not an option since the html files are standalone files on local drive.
Thank you in advance
----------------edit-------------
Images to process are black&white (always 1bit!) and look like here.
http://www.dropbox.com/s/smh4982om3hkhd8/job_report_image1.png
I know that first rectangle marked with red "1." has size of 542x570px (inside) - so area is 308940 square pixels - i measured it with MS Paint ;) - now i want to achieve the same in browser - click inside this rectangle and get the same result.

Not an implementation but more a way to go with javascript and HTML5:
Import your image in a 2d canvas context
get the coordinates in the canvas where the mouse click occured
then using canvas getImageData and go through them to get surrounding black pixel
more info on getImageData here: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

If I understand true, you want to calculate area of an image.
here is a working sample. If you need to calculate with borders you should use myitem.clientHeight * myitem.clientWidth else myitem.offsetWidth*myitem.offsetHeight
function calculate(myitem) {
alert(myitem.clientHeight * myitem.clientWidth);
alert(myitem.offsetWidth*myitem.offsetHeight)
}

This might be little useful for you to find the area: (using php)
<?php
$img = imagecreatefrompng('http://img87.imageshack.us/img87/5673/rotatetrans.png');//open the image
$w = imagesx($img);//the width
$h = imagesy($img);//the height
//Convert to centimeter
$dpi = 300;
$h = $h * 2.54 / $dpi;
$w = $w * 2.54 / $dpi;
echo "width is:".$w;
echo "Height is:".$h;
$area = $w * $h;
echo "Area is:".$area;
?>
Edit:
The number of pixels in an image is simply the height multiplied by the width.
Demo Here>>

Cropper ratio formula

I am using the YUI Image cropper to, well crop images. I have the cropper all set up ok. I am now setting the cropper's width's and height vars to defined values that fit my website structure.
I have the cropper set up so that a small resized version of the original is shown with the cropper attached to that. Now, my problem is determining what size to set the overlay to.
For example, my original image is say 1000x750, my resized image with the cropper attached to it is say 600x450. My final cropped image must be 205x655 - what is the correct formula to determine what size my crop overlay should be? In otherwords, how do I work out the correct ratio?
I also need a formula to convert the positioning values (top and left) return from the crop to run a crop from the original image (opposite of the previous ratio?)
Thanks

So there are 4 rectangles/images:
The original picture: 1000x750 (varies)
The (temporarily) resized picture: 600x450 (varies within those limits, preserving aspect ratio?)
The resized crop box: 123x393 (varies)
The final cropped image: 205x655 (fixed requirement)
Is that correct?
If so, just compute the resize ratio and key everything off of that.
Pseudo Code:
ResizeRatio = resizedPicture_width / originalPicture_width;
//-- Note that this assumes aspect ration was preserved, like it should be.
resizedCropBox_width = 655 * ResizeRatio;
resizedCropBox_height = 205 * ResizeRatio;
//-- Now translate from the resized crop position to the original pic postion.
finalCropTop = resizedCropTop / ResizeRatio;
finalCropLeft = resizedCropLeft / ResizeRatio;