Zoom a plot with two fingers using grafica library

ermina

Could you please provide me an example code in processing i3 that i can make zoom with two fingers in my App,in Android Mode??I would like to zoom in the whole screen, not only in a shape..

ermina

I tried to use the method void onPinch() like:

      void onPinch(float x, float y, float d)                
            {
              rectSize = constrain(rectSize+d, 10, height);
              println("PINCH:" + x + "," + y + "," + d);

but i cant find what i might put instead of rextSize to zoom the whole app, whole screen.

akenaton

@ermina===

i dont know with only processing but using android apis you can do that very quickly; guidelines:

• you import onTouchListener && import android.view.MotionEvent && import android.graphics.Matrix;

• you add your listener to some object (let us say your imageView) and its initial matrix (which is 1): myImage.setScaleType(ScaleType.MATRIX);

• you create on touch() method; it returns the touch event and transmits it to the main method: onTouchEvent(MotionEvent event)

• in this method you count the pointers (event.getPointersCount()) and get the coordinates x && y for them with event.getX, event;getY() or event getRawX() && event getRawY(); so you have 4 values (if two pointers: you can add here some restriction in order to eliminate the case that two pointers are very very near: they are 2 if(....)

• now you can calculate the (euclidian) distance between the points and according to it you have to scale the bitmap to the new matrix: which can be greater (1.5....10.....) or smaller (0.1, 0.5........) ; dont forget to center the matrix on the midpoint of the bitmap.

• finally you have to add a timer in order to get rid of the old values (from getX()...)

that's done!

more details: https://developer.android.com/reference/android/view/View.OnTouchListener.html

PS: you can also use the onScaleGestureDetector API: https://developer.android.com/reference/android/view/ScaleGestureDetector.OnScaleGestureListener.html

ermina

I am using grafica library to make plots..Maybe is there special functions for zooming the graph??

ermina

I know that in Java Mode i can zoom the graph with the function plot.activateZooming() but when i turn into Andoid Mode doesn't worked.

ermina

Is there an example code for zooming with two fingers in a plot??

kfrajer

I am not familiar with grafica and I know even less about zooming. You should have a look at the source code here:

https://github.com/jagracar/grafica/blob/master/src/grafica/GPlot.java

Go to line 2606 and 2651 (Sorry I could provide you links but my browser is playing tricks on me this morning)

For instance:

/**
* Activates the option to zoom with the mouse using the LEFT and RIGHT buttons
*
* @param factor the zoom factor to increase or decrease with each mouse click
*/

To succeed, you need to understand how this operation is managed in the Java side by Grafica. Then you will need to translate it to Android. In the Java side, I can see that the activateZooming also defines, as a minimum, what mouse buttons are required to zooming in and out. Can you override or re-defined the behavior so to use gestures in Android? Not sure. What you should do is forget activateZooming() for a moment and dig into the code and follow zoomingIsActive which is a boolean variable. Understand how this variable affects the zooming action on a Grafica Plot object. After you understand this, then you can try to use Android gestures.

Kf

akenaton

@ermina===

Though i never used this lib i can see that zooming is triggered by the mouse buttons and wheel, which of course do not exist for android. So you have to forget it and implement androi!d TouchEvents as i have explained.

ermina

@akenaton i can not understand how it works..Is there an example or a template??And will it works with grafica library??

akenaton

@ermina===

as i have said i never used this lib; yet if using it you can write code which runs except for touch events (and reading your posts that seems the case) you can try the way i told. As for examples i cannot be more precise: depends of what you want to zoom in/out...

kfrajer

I hope one can hook android gestures to the zooming in Grafica. It will be an useful tool in the Android arsenal. For this, one needs to dig in the source code as I mentioned in my prev post. At this pt, not sure if it is doable without major changes. Did you file a tix in the grafica repo as a feature request? If not, please do so and cross-link your tix with this post.

Kf

jagracar

Hi, this example shows how you can implement the zooming effect using the mouseClicked method. I'm not an expert in Android but I guess you can do the same using the touch event methods.

Cheers, javier

import grafica.*;

GPlot plot;

void setup() {
  size(500, 350);
  background(150);

  // Prepare the points for the plot
  int nPoints = 100;
  GPointsArray points = new GPointsArray(nPoints);

  for (int i = 0; i < nPoints; i++) {
    points.add(i, 10*noise(0.1*i));
  }

  // Create a new plot and set its position on the screen
  plot = new GPlot(this);
  plot.setPos(25, 25);
  // or all in one go
  // GPlot plot = new GPlot(this, 25, 25);

  // Set the plot title and the axis labels
  plot.setTitleText("A very simple example");
  plot.getXAxis().setAxisLabelText("x axis");
  plot.getYAxis().setAxisLabelText("y axis");

  // Add the points
  plot.setPoints(points);
}

void draw() {
  // Draw it!
  plot.defaultDraw();
}

void mouseClicked() {
  if (plot.isOverBox(mouseX, mouseY)) {
    float zoomFactor = 1.3;

    if (mouseButton == LEFT) {
      plot.zoom(zoomFactor, mouseX, mouseY);
    } else if (mouseButton == RIGHT) {
      plot.zoom(1/zoomFactor, mouseX, mouseY);
    }
  }
}

ermina

I have just made some changes and it worked only zoom in..Any ideas how to zoom out???

    import grafica.*;
    import android.view.MotionEvent;
    import android.view.View.OnTouchListener;
    import ketai.ui.*;

    KetaiGesture gesture;
    GPlot plot;

    void setup() {
     size(500, 350);
      //orientation(LANDSCAPE);
      background(150);
     gesture = new KetaiGesture(this);
      // Prepare the points for the plot
      int nPoints = 100;
      GPointsArray points = new GPointsArray(nPoints);

      for (int i = 0; i < nPoints; i++) {
        points.add(i, 10*noise(0.1*i));
      }

      // Create a new plot and set its position on the screen
      plot = new GPlot(this);
      plot.setPos(25, 25);
      // or all in one go
      // GPlot plot = new GPlot(this, 25, 25);

      // Set the plot title and the axis labels
      plot.setTitleText("A very simple example");
      plot.getXAxis().setAxisLabelText("x axis");
      plot.getYAxis().setAxisLabelText("y axis");

      // Add the points
      plot.setPoints(points);
    }

    void draw() {
      // Draw it!
      pushMatrix();
      translate(width/2, height/2);
      popMatrix();
      plot.defaultDraw();
    }

    void onPinch (float x, float y, float d ) {
      if (plot.isOverBox(x, y)) {
       float zoomFactor = 1.3; 

         plot.zoom(zoomFactor, x, y);
      } 
      //else{
        //float zoomFactor = 1.3; 
     // plot.zoom(1/zoomFactor, x, y);
    //} 
    }

    public boolean surfaceTouchEvent(MotionEvent event) {

      //call to keep mouseX, mouseY, etc updated
      super.surfaceTouchEvent(event);

      //forward event to class for processing
      return gesture.surfaceTouchEvent(event);
    }

kfrajer

Check if the d value from onpinch is positive or negative. This is pinching in or out which should be related to zooming in or zooming out. So, in your code you zoom in with 1.3 so zoom out with 0.8, for instance.

Kf