InteractorStyleImageSlicing for Touch Screen

Web
1

I’m writing a tablet app for displaying image slices and want to override the handleStartPan function to make double touch & drag to change slices of the image, and disable the panning. Following code does not seem to work, it still does the panning instead of slicing.

function InteractorStyleImageTouch(publicAPI, model) {
  model.classHierarchy.push('InteractorStyleImageTouch');

  publicAPI.handleStartPan = (callData) => {
    model.previousTranslation = callData.translation;
    const touches = callData.touches;
    callData['position'] = {
      x: callData.touches[Object.keys(touches)[0]].x,
      y: callData.touches[Object.keys(touches)[0]].y
    }
    model.lastSlicePosition = callData.touches[Object.keys(touches)[0]].y;
    
    publicAPI.startSlice();
  }

  publicAPI.superHandleEndPan = publicAPI.handleEndPan;
  publicAPI.handleEndPan = () => {
    publicAPI.endSlice();
  }
};

function extend(publicAPI, model, initialValues = {}) {
  vtkInteractorStyleImage.extend(publicAPI, model, initialValues);

  InteractorStyleImageTouch(publicAPI, model);
}

const createImageTouchStyle = macro.newInstance(extend, 'InteractorStyleImageTouch');

Do I need to override a deeper level function to make this work, or create some new functions? I’m from a c++ background and maybe there’s a better way to extending a js class. Is there any guideline in vtk-js to do this?

2

Are you correctly using your new InteractorStyleImageTouch class, instead of the vtkInteractorStyleImage class?

3

Hi Forrest, thanks for the reply. Yes, I’ve tried printing out information inside of the overriding functions. The messages showed up in the console, but the behavior was not slicing but panning.

4

Here’s my code using the new class:

const renderWindow = fullScreenRenderWindow.getRenderWindow();
const iStyle = createImageTouchStyle();
iStyle.setInteractionMode('IMAGE_SLICING');
renderWindow.getInteractor().setInteractorStyle(iStyle);

Could Style.setInteractionMode('IMAGE_SLICING'); be doing anything here?

5

Ah, I think you’ll have to override LeftButtonPress/Move in order to get it to work. Looking at the InteractorStyleImage (link), the interaction gets set to IMAGE_SLICING based on whether the controlKey is set.

6

Hi Forrest,

Thanks for the hint! I did try your suggestion, but I realized that I should be focusing on handlePan since what I need is overriding the double touch behavior (pan).

Currently the problem is handlePan got called but startSlice is not. I’m looking at the here and my question is where can I find the code that calls this slice function from the startSlice function?

Could it be that startSlice has some logic that has led to slice not being called?

Thanks!

7

I looked more closely and realized that you are correct in overriding handleStart/EndPan. I think you will have to also override publicAPI.handlePan and have that call publicAPI.slice.