SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

Answered
0
0

Hi,

I’m trying to use Android’s Magnifier widget on scichart surface but only annotations or crosshairs lines shows and magnify.
Chart series (line, candle etc.) not showing on magnifier window. Is it possible to show all chart surface with series?

Tnx.

Version
3.0
  • You must to post comments
Best Answer
1
0

Hi Dunya,

I’m not 100% sure, but it could be caused by the fact that almost all chart except modifiers and annotations are rendered using OpenGL outside Android View hierarchy. Can you try to switch to Canvas based RenderSurface?

        surface.setRenderSurface(new RenderSurface(getActivity()));

In this case chart will be rendered as the rest of Android Views, so it should work with magnifier.

Best regards,
Yura

  • You must to post comments
0
0

Hi Yura;

I found a magnifier example on https://stackoverflow.com/questions/33993886/implementing-magnifier-loupe-for-custom-dynamic-view-on-android (first answer). I inspired by ExampleMagnifierView class and made CustomSciChartSurface. I’m also sharing a screen recording with you: https://drive.google.com/file/d/1Pgfu9qQcku0DmX7JnjHxNTVzwrlj7Ab8/view?usp=sharing

public class CustomSciChartSurface extends SciChartSurface
{

public CustomSciChartSurface(Context context) {
    super(context);
}

public CustomSciChartSurface(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CustomSciChartSurface(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

Matrix matrix = new Matrix();
Paint shaderPaint = new Paint();
BitmapShader shader = null;
//start the magnifier
boolean zooming;
//capture a new bitmap form a view
boolean isFirstTouch = true;
//magnifier position
static final PointF zoomPos = new PointF(0, 0);

private float magnifierSize = 40;
private Context context = null;

@Override
protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);

    if (zooming) {
        matrix.reset();
        matrix.postScale(3f, 3f, zoomPos.x, zoomPos.y);
        shaderPaint.getShader().setLocalMatrix(matrix);

        canvas.drawCircle(convertDpToPixel(magnifierSize, this.getContext()), convertDpToPixel(magnifierSize, this.getContext()), convertDpToPixel(magnifierSize, this.getContext()), shaderPaint);
    }
}

@Override
public boolean onTouchEvent(MotionEvent event)
{
    context = getContext();

    if (isFirstTouch) {
        //we set the zooming to false because we want a image of the view without magnifier
        zooming = false;

        shader = null;
        shaderPaint = null;
        shaderPaint = new Paint();

        //get a fresh bitmap from the view
        shader = new BitmapShader(getBitmapFromView(this), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        isFirstTouch = false;
    }

    shaderPaint.setShader(shader);
    matrix.reset();
    matrix.postTranslate(event.getX(), event.getY());
    shader.setLocalMatrix(matrix);

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:

            zoomPos.x = event.getX();
            zoomPos.y = event.getY();

            //this flag starts drawing the magnifier
            zooming = true;
            invalidate();

            isFirstTouch = true;


            break;
        case MotionEvent.ACTION_MOVE:

            zoomPos.x = event.getX();
            zoomPos.y = event.getY();

            //this flag starts drawing the magnifier
            zooming = true;
            invalidate();

            break;

        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:

            isFirstTouch = true;
            zooming = false;
            invalidate();

            break;
    }


    return super.onTouchEvent(event);
}

/**
 * This method get the bitmap form a view.
 *
 * @param view The view who we want as a bitmap
 * @return The view's bitmap
 */
public static Bitmap getBitmapFromView(View view) {
    //Define a bitmap with the same size as the view ( Use RGB_565 for better performance )
    Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.RGB_565);
    //Bind a canvas to it
    Canvas canvas = new Canvas(returnedBitmap);
    //Get the view's background
    Drawable bgDrawable = view.getBackground();
    if (bgDrawable != null) {
        //has background drawable, then draw it on the canvas
        bgDrawable.draw(canvas);
    } else {
        //does not have background drawable, then draw white background on the canvas
        canvas.drawColor(Color.WHITE);
    }

    // draw the view on the canvas
    view.draw(canvas);

    //erase the drawable
    bgDrawable = null;

    //return the bitmap
    return returnedBitmap;
}

/**
 * This method converts dp unit to equivalent pixels, depending on device density.
 *
 * @param dp      A value in dp (density independent pixels) unit. Which we need to convert into pixels
 * @param context Context to get resources and device specific display metrics
 * @return A float value to represent px equivalent to dp depending on device density
 */
public static float convertDpToPixel(float dp, Context context) {
    Resources resources = context.getResources();
    DisplayMetrics metrics = resources.getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return px;
}

}

  • You must to post comments
0
0

Hi Dunya,

Unfortunately I couldn’t reproduce the behavior from your video – I tried to use your code in one of our examples and it worked out of the box.

Best regards,
Yura

Images
  • You must to post comments
0
0

Hi Yura,

Yes that’s worked, thanks.

But i have one more question…
I’m trying to create my own magnifier because of that Android’s magnifier only works after api 28.
I try to create a Canvas (create a scaled bitmap from surface view and apply to canvas) and add to the surface. But canvas added to the surface child layers and not showing completely. Is it possible to bring the canvas to the top layer?

Tnx.

Images
  • Yura Khariton
    I’m not sure that I understand. Canvas isn’t a View so I’m not sure how you want to add it into chart which is a View. Can you provide more information about what you’re doing?
  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.