Develop Reference

Android - PDFTron - draw annotation in zoom in mode

I'm using the PdfTron SDK and i'm trying to draw annotation after the user doing zoom in, the annotation need to be in the side of the book (the third pic) but when we do zoom in it's drawing in the center of the book (pic 1 and 2).
Example with zoom (the wrong state):
Example without zoom (the right state):
right now i'm using the function convPagePtToScreenPt but it's drawing the annotation properly just if the user doesn't making zoom in.
Does somebody knows in which function is suppose to use?
This is my code :
public synchronized void drawAnnotation(AnnotationData annotationData){
if (annotationData == null) {
return;
}
AnnotationType annotationType = annotationData.getType();
if (annotationType == null) {
return;
}
ToolManager.Tool tool = mToolManager.createTool(ToolManager.e_text_annot_create, null);
if (tool instanceof StickyNoteCreate) {
StickyNoteCreate annotStickyCreate = (StickyNoteCreate) tool;
Point point;
double[] pts;
double[] ptsForScreenSize = {0, 0};
int orientation = mContext.getResources().getConfiguration().orientation;
if (mPDFView != null) {
if (orientation == Configuration.ORIENTATION_PORTRAIT) {
ptsForScreenSize = mPDFView.convScreenPtToPagePt((double) BookReader.SCREEN_WIDTH, (double) BookReader.SCREEN_HEIGHT, annotationData.getPage());
} else {
ptsForScreenSize = mPDFView.convScreenPtToPagePt((double) BookReader.SCREEN_HEIGHT, (double) BookReader.SCREEN_WIDTH, annotationData.getPage());
if (!TextUtils.isEmpty(annotationData.getStartLoc()) && !TextUtils.isEmpty(annotationData.getEndLoc()) && mPDFView != null) {
//if we have an annotation for text
pts = mPDFView.convPagePtToScreenPt(annotationData.getStartX(), annotationData.getStartY(), annotationData.getPage());
} else {
//if we have an annotation for Page
pts = new double[]{0, 0};
}
ptsForScreenSize = mPDFView.convPagePtToScreenPt(ptsForScreenSize[0] - INT_ANNO_PADDING, ptsForScreenSize[1], annotationData.getPage());
final AnnotationData noteTextHighlight = new AnnotationData(annotationData);
//we don't need to set UniqueId for this highlight annotation
noteTextHighlight.setUniqueId(null);
highlightSelectedText(noteTextHighlight);
double marginY = BookReader.SCREEN_HEIGHT * 0.015;
point = new Point(ptsForScreenSize[0], pts[1] + marginY);
annotStickyCreate.createNoteIconOnPage(annotationData, point);
}
}
}
}
public void createNoteIconOnPage(AnnotationData annotationData, Point noteIconPoint) {
KsLog.d("IsBookReaderAviliable","createNoteIconOnPage : " + BookReader.isBookReaderVisible());
if(BookReader.isBookReaderVisible()){
try {
mPDFView.docLock(true);
PDFDoc pdfDoc = mPDFView.getDoc();
double[] pts = mPDFView.convScreenPtToPagePt(noteIconPoint.x, noteIconPoint.y, annotationData.getPage());
Point p = new Point(pts[0], pts[1]);
com.pdftron.pdf.annots.Text text = com.pdftron.pdf.annots.Text.create(pdfDoc, p);
text.setUniqueID(annotationData.getUniqueId());
//creating the annotation appearance - icon
// Let's create an appearance for the annotation using an image
ElementBuilder builder = new ElementBuilder();
ElementWriter writer = new ElementWriter();
writer.begin(pdfDoc);
Image image = Image.create(pdfDoc, annotationData.getDrawable());
int w = image.getImageWidth(), h = image.getImageHeight();
Element element = builder.createImage(image, 0, 0, w, h);
writer.writePlacedElement(element);
writer.writeElement(builder.createTextBegin(Font.create(pdfDoc, Font.e_times_roman), 12));
writer.writeElement(element);
writer.writeElement(builder.createTextEnd());
Obj appearance = writer.end();
appearance.putRect("BBox", 0.1, 0.1, w, h);
text.setAppearance(appearance);
/*
The left icons spouse to be bigger the the regular icons
*/
if (annotationData.getType() == AnnotationData.AnnotationType.LINK && (annotationData.getShard() == AnnotationData.LEFT_LINK_A || annotationData.getShard() == AnnotationData.LEFT_LINK_B)) {
text.setRect(new Rect(pts[0], pts[1], pts[0] + 30, pts[1] + 30));
}
if (annotationData.getType() == AnnotationData.AnnotationType.NOTE) {
text.setContents(AnnotationData.NOTE_TYPE_CONTENTS);
} else if (annotationData.getType() == AnnotationData.AnnotationType.LINK) {
text.setContents(AnnotationData.LINK_TYPE_CONTENTS);
}
KsLog.d("createNoteIconOnPage","getPage() " + annotationData.getPage());
Page page = pdfDoc.getPage(annotationData.getPage());
if (page != null) {
page.annotPushBack(text);
}
mAnnotPushedBack = true;
mAnnot = text;
mAnnotPageNum = annotationData.getPage();
KsLog.d("createNoteIconOnPage","mDownPageNum " + mAnnotPageNum);
buildAnnotBBox();
mPDFView.update(mAnnot, mAnnotPageNum);
raiseAnnotationAddedEvent(mAnnot, mAnnotPageNum);
} catch (Exception ex) {
Log.e(PDFTronReader.TAG, ex.toString());
mNextToolMode = ToolManager.e_pan;
} finally {
mPDFView.docUnlock();
}
mPDFView.waitForRendering();
}
}

The following code will place an annotation on the right side of any page, 1 inch from the top.
Matrix2D mtx = page.getDefaultMatrix(true).inverse();
double x1 = page.getPageWidth() - 25; // this is the width as the a user sees it (rotated). 20 is the width of a Text annotation
double y1 = 72; // not clear how you decide the vertical placement. In this example, this 1 inch from the top as the user views the page. If you have the value from the bottom, switch the boolean value argument in GetDefaultMatrix
mtx.mult(ref x1, ref y1);
com.pdftron.pdf.Annots.Text txt = com.pdftron.pdf.Text.create(doc, new Point(x1, y1));
page.annotPushBack(txt);
Regarding your code, there appeared to be confusion over Screen and Page coordinates. For example, for ptsForScreenSize on one line of you pass in the results of ConvScreenPtToPagePt, and in another line, you pass in the results of ConvPagePtToScreenPt.

composing canvas with Images works on Android but fails silently on IOS

I have the following code which fails on IOS but works on Android (using ionic/cordova). What am I missing (maybe I am being lucky with Android!) ? On Androids I get a seamless vertical stacking of image(s), whereas on IOS I get a blank look. It fails on IOS whether I am stacking one SVG or many.
The SVG elements by themselves show up fine on the page, and in debugger I can see their complete markup.
function _appendImgToCanvas(canvas, image, first_image) {
// image contents are -- {id, h, w}
var ctx = canvas.getContext("2d");
var img_type = "data:image/svg+xml;charset=utf-8";
try {
var img_el = document.getElementById(image.id).getElementsByTagName("svg")[0];
var img_src = new XMLSerializer().serializeToString(img_el); // thx Kaiido
var img = new Image();
img.src = img_type + "," + img_src;
var h = image.h, w = image.w; // is in CSS pixels
var old_h = canvas.height, old_w = canvas.width;
var old_image;
if (first_image) {
ctx.clearRect(0, 0, old_w, old_h);
old_h = old_w = 0; // it's a new beginning
} else {
old_image = canvas.toDataURL("image/png"); // Android appears to wipe out image on resizing
}
// update canvas dims, and update its CSS style too
canvas.setAttribute("height", old_h + h);
canvas.setAttribute("width", Math.max(w, old_w));
canvas.style.height = canvas.height + "px";
canvas.style.width = canvas.width + "px";
// retrieve any old image into the resized canvas
if (old_image) {
var x = new Image();
x.src = old_image;
ctx.drawImage(x,0,0);
}
// add the given image
ctx.drawImage(img, 0, old_h);
$log.debug("IMG#" + image.id, w,"x",h, "appended at h=", old_h, "new dim=", canvas.width, "x", canvas.height);
} catch(e){$log.error("IMG#" + image.id, "ERROR in appending", e);
}
}

You have to wait for your images has loaded, add the drawing operations into their onload handler.
Also, for converting your svg element to a dataURL, use encodeURIComponent(new XMLSerializer().serializeToString(yourSVGElement)) method instead of outerHTML/innerHTML, you will avoid encoding issues and this if/else //probably ios..

How to avoid ghost drawing after clearing SurfaceView canvas

Hi I am working on plotting a real time graph of incoming signals using SurfaceView.
The sampling rate is 128Hz and the target graph refresh rate is 50Zh.
Things run pretty smoothly, the points are drawn real-time properly.
I plot the data in segments of a few points using Path()
for each segment I call path.computeBounds() to get a rect that I will use to call holder.lockCanvas(rect) and draw the path. Using a rect prevents flickering and reduces cpu usage
when the graph reaches the end I lock the entire canvas and clear the background, draw the graph frame and then continue on plotting.
the problem is that at the beginning of each new "page" I get a ghost image from the last page:
I believe this is caused by double buffering / use of a dirty area when plotting.
I have looked for solutions to this problem but none seem adequate for this type of application. Any help is most welcome.
Thanks
Jean-Pierre
Code follows:
private void draw() {
Point point = null;
Canvas canvas = null;
Path path = new Path();
ArrayList<Point> pointArray;
float oldX = -1;
boolean setToClear = false;
boolean isNewSegment = false;
if (samplesInQueue == 0) {
return;
}
pointArray = new ArrayList<Point>((int) samplesInQueue);
for (int i = 0; i < samplesInQueue; i++) {
// take a peek at the point without retrieving it from the point
// queue
point = Points.peek();
// check if first point of segment is the start of a page
if (i == 0) {
if (lastSegmentEndPoint != null) {
if (point.x < lastSegmentEndPoint.x) {
// yes then we will need to clear the screen now
isNewSegment = true;
}
} else {
// yes then we will need to clear the screen now
isNewSegment = true;
}
}
if (point != null) {
if (point.x > oldX) {
// put consecutive points in the path point array
point = Points.poll();
samplesInQueue--;
pointArray.add(point);
oldX = point.x;
} else {
// we have a wrap around, stop and indicate we need to clear
// the screen on the next pass
if (!isNewSegment) {
setToClear = true;
}
break;
}
}
}
// no points, return
if (pointArray.size() == 0) {
return;
}
// fill the path
for (int i = 0; i < pointArray.size(); i++) {
Point p = pointArray.get(i);
if (i == 0) {
if (lastSegmentEndPoint != null) {
if (p.x >= lastSegmentEndPoint.x) {
// if we have the end of the last segment, move to it
// and line to the new point
path.moveTo(lastSegmentEndPoint.x, lastSegmentEndPoint.y);
path.lineTo(p.x, p.y);
} else {
// otherwise just line to the new point
path.moveTo(p.x, p.y);
}
} else {
path.moveTo(p.x, p.y);
}
} else {
path.lineTo(p.x, p.y);
}
}
if (clear || isNewSegment) {
if (clear) {
clear = false;
}
// we need to clear, lock the whole canvas
canvas = holder.lockCanvas();
// draw the graph frame / scales
drawGraphFrame = true;
drawGraphFrame(canvas);
} else {
// just draw the path
RectF bounds = new RectF();
Rect dirty = new Rect();
// calculate path bounds
path.computeBounds(bounds, true);
int extra = 0;
dirty.left = (int) java.lang.Math.floor(bounds.left - extra);
dirty.top = (int) java.lang.Math.floor(bounds.top - extra);
dirty.right = (int) java.lang.Math.round(bounds.right + 0.5);
dirty.bottom = (int) java.lang.Math.round(bounds.bottom + 0.5);
// just lock what is needed to plot the path
canvas = holder.lockCanvas(dirty);
}
// draw the path
canvas.drawPath(path, linePaint);
// unlock the canvas
holder.unlockCanvasAndPost(canvas);
// remember last segment end point
lastSegmentEndPoint = pointArray.get(pointArray.size() - 1);
// set clear flag for next pass
if (setToClear) {
clear = true;
}
}
Draw frame / clear graph code
private void drawGraphFrame(Canvas canvas) {
if (!drawGraphFrame) {
return;
}
if (canvas == null) {
Log.e(TAG, "trying to draw on a null canvas");
return;
}
drawGraphFrame = false;
// clear the graph
canvas.drawColor(Color.BLACK, Mode.CLEAR);
// draw the graph frame
canvas.drawLine(leftMargin, topMargin, leftMargin, mCanvasHeight - bottomMargin, framePaint);
canvas.drawLine(leftMargin, mCanvasHeight - bottomMargin, mCanvasWidth - rightMargin, mCanvasHeight
- bottomMargin, framePaint);
// more drawing
}

Your problem is quite straight forward.. your only locking the new portion of the canvas that the new path covers. So the best thing to do is to make your path and dirty rect's private members of your class. Then at the start of your draw method get the path's current bounds (the old bounds) in your dirty rect. Now call path.rewind(); and start modifying your path. After do a union on the dirty rect with the new bounds. Now your dirty rect covers the old and new rect's. So your clear will remove the old path. This also reduces overhead because you don't want to be allocating 100+ objects per second for rect's and path's. Now since your drawing an oscilloscope then you probably want to adjust the old bounds to only be a portion of the width of the view. The same amount your new portion covers.
Hope that's cleared things up.

My simple answer is just using this function clear_holder() wherever you want to clear the canvas. I copy and paste 3 line for 3 times because it need 3 times clear to leave holder blank.
After clearing holder, you should draw any new thing you want!
This link give me this source code!
private void clear_holder(SurfaceHolder holder){
Canvas c = holder.lockCanvas();
c.drawColor( 0, PorterDuff.Mode.CLEAR );
holder.unlockCanvasAndPost(c);
c = holder.lockCanvas();
c.drawColor( 0, PorterDuff.Mode.CLEAR );
holder.unlockCanvasAndPost(c);
c = holder.lockCanvas();
c.drawColor( 0, PorterDuff.Mode.CLEAR );
holder.unlockCanvasAndPost(c);
}

It looks like you are clearing the canvas so, it's not double buffering problem. I think it's related to your path been reused.
Try adding adding the next line when starting new page.
path.reset();

Treshold face images in various light

I want to ask about some ideas / study materials connected to binarization. I am trying to create system that detects human emotions. I am able to get areas such as brows, eyes, nose, mouth etc. but then comes another stage -> processing...
My images are taken in various places/time of day/weather conditions. It's problematic during binarization, with the same treshold value one images are fully black, other looks well and provide me informations I want.
What I want to ask you about is:
1) If there is known way how to bring all images to the same level of brightness?
2) How to create dependency between treshold value and brightness on image?
What I have tried for now is normalize the image... but there are no effects, maybe I'm doing something wrong. I'm using OpenCV (for android)
Core.normalize(cleanFaceMatGRAY, cleanFaceMatGRAY,0, 255, Core.NORM_MINMAX, CvType.CV_8U);
EDIT:
I tried adaptive treshold, OTSU - they didnt work for me. I have problems with using CLAHE in Android but I managed to implement Niblack algorithm.
Core.normalize(cleanFaceMatGRAY, cleanFaceMatGRAY,0, 255, Core.NORM_MINMAX, CvType.CV_8U);
nibelBlackTresholding(cleanFaceMatGRAY, -0.2);
private void nibelBlackTresholding(Mat image, double parameter) {
Mat meanPowered = image.clone();
Core.multiply(image, image, meanPowered);
Scalar mean = Core.mean(image);
Scalar stdmean = Core.mean(meanPowered);
double tresholdValue = mean.val[0] + parameter * stdmean.val[0];
int totalRows = image.rows();
int totalCols = image.cols();
for (int cols=0; cols < totalCols; cols++) {
for (int rows=0; rows < totalRows; rows++) {
if (image.get(rows, cols)[0] > tresholdValue) {
image.put(rows, cols, 255);
} else {
image.put(rows, cols, 0);
}
}
}
}
The results are really good, but still not enough for some images. I paste links cuz images are big and I don't want to take too much screen:
For example this one is tresholded really fine:
https://dl.dropboxusercontent.com/u/108321090/a1.png
https://dl.dropboxusercontent.com/u/108321090/a.png
But bad light produce shadows sometimes and this gives this effect:
https://dl.dropboxusercontent.com/u/108321090/b1.png
https://dl.dropboxusercontent.com/u/108321090/b.png
Do you have any idea that could help me to improve treshold of those images with high light difference (shadows)?
EDIT2:
I found that my previous Algorithm is implemented in wrong way. Std was calculated in wrong way. In Niblack Thresholding mean is local value not global. I repaired it according to this reference http://arxiv.org/ftp/arxiv/papers/1201/1201.5227.pdf
private void niblackThresholding2(Mat image, double parameter, int window) {
int totalRows = image.rows();
int totalCols = image.cols();
int offset = (window-1)/2;
double tresholdValue = 0;
double localMean = 0;
double meanDeviation = 0;
for (int y=offset+1; y<totalCols-offset; y++) {
for (int x=offset+1; x<totalRows-offset; x++) {
localMean = calculateLocalMean(x, y, image, window);
meanDeviation = image.get(y, x)[0] - localMean;
tresholdValue = localMean*(1 + parameter * ( (meanDeviation/(1 - meanDeviation)) - 1 ));
Log.d("QWERTY","TRESHOLD " +tresholdValue);
if (image.get(y, x)[0] > tresholdValue) {
image.put(y, x, 255);
} else {
image.put(y, x, 0);
}
}
}
}
private double calculateLocalMean(int x, int y, Mat image, int window) {
int offset = (window-1)/2;
Mat tempMat;
Rect tempRect = new Rect();
Point leftTop, bottomRight;
leftTop = new Point(x - (offset + 1), y - (offset + 1));
bottomRight = new Point(x + offset, y + offset);
tempRect = new Rect(leftTop, bottomRight);
tempMat = new Mat(image, tempRect);
return Core.mean(tempMat).val[0];
}
Results for 7x7 window and proposed in reference k parameter = 0.34: I still can't get rid of shadow on faces.
https://dl.dropboxusercontent.com/u/108321090/b2.png
https://dl.dropboxusercontent.com/u/108321090/b1.png

things to look at:
http://docs.opencv.org/java/org/opencv/imgproc/CLAHE.html
http://docs.opencv.org/java/org/opencv/imgproc/Imgproc.html#adaptiveThreshold(org.opencv.core.Mat,%20org.opencv.core.Mat,%20double,%20int,%20int,%20int,%20double)
http://docs.opencv.org/java/org/opencv/imgproc/Imgproc.html#threshold(org.opencv.core.Mat,%20org.opencv.core.Mat,%20double,%20double,%20int) (THRESH_OTSU)

Box2d Cocos2d Android gravity not working

I'm trying to create a simple test for Box2d, Cocos2d, and Android. All I need is to put one body on the screen, and have it respond to gravity. I looked everywhere and there are good tutorials for non-Android applications but none of them has gravity on Android working. Can anyone help?
This is the code I'm using. I took it, and modified lightly from here: http://www.expobrain.net/2012/05/12/box2d-physics-simulation-on-android/
For creating the world:
World world = new World(new Vec2(2.0f, 8.0f), false);
And this is how I create the body:
public void setupBallBody() {
CGSize size = CCDirector.sharedDirector().winSize();
CGPoint pos = CGPoint.make(size.width / 1.2f, size.height / 1.2f);
// Create Dynamic Body
BodyDef bodyDef = new BodyDef();
bodyDef.type = BodyType.DYNAMIC;
bodyDef.position.set(screenToWorld(pos));
ballBody = world.createBody(bodyDef);
MassData md = new MassData();
md.mass = 5;
ballBody.setMassData(md);
// Create Shape
CircleShape ballShape = new CircleShape();
ballShape.m_radius = SMILE_RADIUS;
// Create fixture
FixtureDef ballFixture = new FixtureDef();
ballFixture.shape = ballShape;
ballFixture.density = SMILE_DENSITY;
ballFixture.friction = SMILE_FRICTION;
ballFixture.restitution = SMILE_RESTITUTION;
// Assign fixture to Body
ballBody.createFixture(ballFixture);
// Set sprite
final CCSprite ballSprite = CCSprite.sprite("ball.jpg");
ballSprite.setPosition(pos);
addChild(ballSprite, 0);
ballBody.setUserData(ballSprite);
}
This is my "tick" method (which I'm not sure is part of what makes gravity working but I include it here for completeness.)
public void tick(float dt) {
synchronized (world) {
world.step(1/60, 10, 10);
}
// Update sprites
for (Body b = world.getBodyList(); b != null; b = b.getNext()) {
if(b == ballBody) {
CCSprite ballSprite = (CCSprite)ballBody.getUserData();
if(ballSprite != null) {
ballSprite.setPosition(worldToScreen(ballBody.getPosition())));
ballSprite.setRotation(-1.0f * (float)Math.toDegrees((ballBody.getAngle())));
}
}
}
}

My guessing here is this line may be the problem.-
world.step(1/60, 10, 10);
step function handles the bodies positions based on the time passed since last step. You're doing an integer division 1/60, which result is 0. Try 1.0f / 60.0f instead.
Otherwise, you're telling your world that 0 milliseconds passed since the last step, so bodies will always remain at their initial position.
However, it's not good practice to 'hardcode' your time step. You better pass to your world step the delta time your receiving.-
world.step(dt, 10, 10);
Also, you may simplify your loop to work for any body with an attached CCSprite, like this.-
for (Body b = world.getBodyList(); b != null; b = b.getNext()) {
CCSprite sprite = (CCSprite)b.getUserData();
if(sprite != null) {
sprite.setPosition(worldToScreen(b.getPosition())));
sprite.setRotation(-1.0f * (float)Math.toDegrees((b.getAngle())));
}
}