Interactive Ink

IInk with React Native

Hello,

I'm working on an iOS integration of IINK with React Native and have some problems. I'd like to have something similar to MyScript Stylus keyboard on Android but on iOS.

According to React Native documentation the way to go is to create a bridge. However as the example showed I need to return a UIView like this 

 

- (UIView *)view
{
  return [[MKMapView alloc] init];
}

 But I can't find such a UIView in the documentation. I found `InputView` and `RenderView` but none return something. I instantiate them like this:

 

// Return the native view that represents your React component
- (UIView *)view
{
  return [[InputView alloc] initWithFrame:CGRectZero];
}

According to MyScript GetStarted, I have integration example but as UIViewController which I cannot use in my context of a UIView. Is there a view provided by MyScript that could handle this?

Thanks for your help


The other solution I'm trying is to find the parent view controller and add the editorViewController as a child. But I can't fix the invalid view size error I got at run time

 

- (void)layoutSubviews
{
  [super layoutSubviews];
  
  if (!self.editorViewControllerConfigured) {
    
    if (![self checkEngine])
      return;

    // Instantiate the editorViewController as the GetStarted
    self.editorViewController = [[EditorViewController alloc] init];
    self.editorViewController.engine = self.engine;
    
    self.editorViewController.inputMode = InputModeAuto;
    IINKContentPackage *package = [self createPackageWithName:@"NewPackage"];
    [self.editorViewController.editor setPart:[package getPartAt:0 error:nil]];

    parentVC = [self parentViewController];
    
    [self.editorViewController willMoveToParentViewController: parentVC];
    [parentVC addChildViewController:self.editorViewController];
    
    [self addSubview:self.editorViewController.view];
    self.editorViewController.view.frame = self.bounds;
    
    [self.editorViewController didMoveToParentViewController: parentVC];

    
    self.editorViewControllerConfigured = TRUE;
  } else {
    self.editorViewController.view.frame = self.bounds;
  }
}

 If I comment the setPart method there is no more error (but an empty screen).

Dear Adlen Sofane,

Thank you for contacting us.

First, can you please check when calling the setPart function, the view size is properly set? Indeed, you should not set it to (0,0).

Let us know if this helps.

Best regards,

Olivier

Hello Olivier,

Thanks for your answer.

I'm not sure which view size should not be set to (0, 0), the editorViewController? The component view?

Indeed, I do not explicitly set any view size. I'll explore in this direction.

Best

Hi Adlen,

IINKEditor has a setViewSize: method. It is important to tell the editor about the area it can use to display content (it will for instance define how reflow operations shall be managed). This value shall be properly set before doing setPart:.

Best regards,
Thomas

 

Hi Thomas,


Thank you for your message, I'll investigate the IINKEditor setView method. As of today I' trying to copy your GettingStarted and the editorViewController which was supposed to handle it according to https://developer.myscript.com/docs/interactive-ink/1.0/ios/fundamentals/editing/

Maybe I should not try to use the EditorViewController of the getting started and try again from scratch


Best

Thanks to the setView I managed to remove the "invalid view size" error. Thanks :)

However I still got an empty screen, it seems that some child views of the editorViewController have a (0, 0) size. 

image


Is there any other methods I should handle?

Thanks

Hi Adlen,

The 4 subviews you get as children of the main UIView in your controller are in charge of displaying the content of the model (one for each layer, as explained by https://developer.myscript.com/docs/interactive-ink/1.1/ios/fundamentals/rendering/#layer). I suspect that for whatever reason they do not get resized along with their parent view, while they should have the same size.

Best regards,
Thomas

 

Hi Thomas, 

Ok understood, I've iterated through the subview to be sure that everyone is big enough, according to the log it's now ok. Unfortunately, nothing is visible yet. Are those layers waiting for any signal or lifecycle event to be triggered?

image


Hi Adlen,


It may sound obvious, but you need something to render. If your part is of type Text Document or Text (provided that you use iink 1.1+ for the latter), the guides will need to be displayed. If not, or if guides are deactivated, you will need to input ink for it to be rendered.


Now, if you need to debug further:

  • Typically, DisplayViewController's invalidate:layers: and invalidate:area:layers: methods will be called in response to events such as ink input, initial rendering of the model, etc. and refreshViews will be called following view resize.
  • This in turn will cause a call to the drawRect: methods of the impacted layers (see RenderView.mm).
  • These methods will call the renderer object and ask it to render a certain portion of the model via a canvas object (that does the actual drawing).


Please check if this works or not by placing break points.


If not, please check that your InputView actually captures ink input and sends it to the model or that the view resize events are properly propagated.


Best regards,

Thomas




1 person likes this

Hi Thomas,

Thank you for the help, I managed to get guides displayed. I'm not available to enter ink as of now but I'm working on it.


image


Ok after some investigation my main issue is that MyScript provides examples of `ViewController` + `Storyboard` to integrate and use the SDK, however, React Native uses a `View` as the entry point for iOS integration.

Would you have any examples of `View` containing all the behavior of a basic MyScript stylus acquisition?

Hi Adlen,


To help you, I quickly ported our GetStarted code for iOS to only use UIViews for iink-related parts (except for the Smart Guide displaying the recognition results in real-time, but it should be achievable in a similar way).


Here is how you can test it:

  1. Follow the steps to get, compile and launch the GetStarted project for iOS
  2. Download the attached archive. Unzip it. It contains two folders ("Classes" and "Base.lproj") that should replace their equivalent in "Examples/GetStarted/GetStarted/"


I hope it will help.


Best regards,

Thomas

zip
Login or Signup to post a comment