Interactive Ink

Example with multiple Editors

Hi Team,

Do you have an example with multiple Editor?

We want to have an app on a tablet, where we will provide the user with 4 different areas to write on

The system should be able to capture information separately for each of these areas as that will be saved separately in the database.

Any help on this will be appreciated.

Piyush


Dear Piujsh,


Thank you for your question.


Currently, we do not have any sample available at present.


You should then proceed as follows:

-First, create a global ink capture view. As you have the coordinates of your strokes, you then know in which field they should be assigned. You can then store the strokes for each field (eventsField1, eventsField2...)

-Then, for each of your field, you create an editor, to which you assign the configuration and part you prefer (Math, Text...) (if you have many fields, one option is to have a "pool of editors")

engine.getConfiguration().setString("text.configuration.name","text");

editor1.setPart(part_text);

engine.getConfiguration().setString("text.configuration.name","number");

editor2.setPart(part_number);

...

-Then, you can add the strokes for each editor using the pointerEvents API

editor1.pointerEvents(eventsField1, false);

editor2.pointerEvents(eventsField2, false);

...

-The different editors can share the same render target (i.e. rendering view), but you have to make sure you call the invalidate function of the uireferenceimplementation (invalidate(Renderer renderer, int x, int y, int width, int height, EnumSet<LayerType> layers)) to only affect the area of the view that correspondsto your field.


Best regards,


Olivier

Thanks Olivier. But I still did not get how we can have one global ink capture view with multiple fields. Are these fields going to be imaginary boundaries or we can create text boxes ?
Also can you let me know which class from the getstarted example are you talking about when you say global ink capture view. Sorry for being naive. Also, can we save and re populate information from database?

Dear Piujsh,


to answer your questions:

I still did not get how we can have one global ink capture view with multiple fields.

>>basically, in the editor_view.xml, you can create a view with the boxes you prefer. In the code, it is then easy to get the position of each box. When a stroke is inputted, you then know to which box it belongs to.


which class from the getstarted example are you talking about when you say global ink capture view.

>>Basically, you can refer to the InputController.java class of the UIReferenceImplementation. It shows how you can provide strokes to an editor.


From this, you understand that you have the boxes information (coordinates). When a stroke is inputted, you can then know to which box it belong to. If you created an editor per box, you can then add the strokes to the proper editor.


Best regards,


Olivier


Thank you. I will try this

Olivier, 

So you are suggesting that I create a TextView inside the EditorView in the referenceImplementation.

I did that but then the TextView is opaque and hence I cannot see what I am writing.

Pardon me for my ignorance. 

Piyush


Dear Piujsh,


currently, you can simply draw rectangles in as views:

        <View
            android:id="@+id/myRectangleView1"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="120dp"
            android:background="@drawable/bg_rectangle"/>

        <View
            android:id="@+id/myRectangleView2"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="240dp"
            android:background="@drawable/bg_rectangle"/>


           

And for bg_rectangle:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="2dp" android:color="#ff207d94" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="5dp" />
    <solid android:color="#00000000" />
</shape>



This way, you will still see the ink.


Then, after the views have been laid out on the screen, you can get the coordinates and size easily:

   myRectangleView1 = findViewById(R.id.myRectangleView1);
    myRectangleView2 = findViewById(R.id.myRectangleView2);
    int widthRect1 = myRectangleView1.getWidth();
    int heightRect1 = myRectangleView1.getHeight();

    int topRect1 = myRectangleView1.getTop();
    int leftRect1 = myRectangleView1.getLeft();

    int widthRect2 = myRectangleView2.getWidth();
    int heightRect2 = myRectangleView2.getHeight();

    int topRect2 = myRectangleView2.getTop();
    int leftRect2 = myRectangleView2.getLeft();


   

From this when a stroke is drawn, you can know to which rectangle it belongs to, and add it to the editor corresponding to this rectangle (if you defined an editor per rectangle).


Best regards,


Olivier

Thank you so much .

Hello Myscript team,

If we have to create a form with let's say ten entry fields, so do we have to create ten different editors for each field of the form and assigning custom configuration like subset knowledge, lexicon, etc settings to each field ? or do we have to create different content blocks of type text ? or we can create just different rectangle boxes of views ?

Dear Ghanendra,


Thank you for your question.


Currently, the easiest way to proceeed is that you create one editor per field.


For each editor, you can then add a configuration,  in which you can set the language (text.configuration.bundle key) and configuration you want to use (text.configuration.name key) :https://developer.myscript.com/docs/interactive-ink/1.2/reference/configuration/#text


Each configuration you create shall be consistent with the type of data you want to recognize, e.g. for a "digit" field, you can create a "digit" SK and a configration as follows:


Name: digit
Type: Text
Configuration-Script:
 AddResource en_US/en_US-ak-cur.res
 AddResource en_US/en_US-lk-text.res
 AddResource en_US/digitSK.res
 EnableAlienCharacters
 SetTextListSize 1
 SetWordListSize 5
 SetCharListSize 1


Best regards,


Olivier

Login or Signup to post a comment