iink SDK Web

Answered

Drawn strokes are not getting displayed on editor space.

Hello,

I'm using the MyScript for Math recognition and generating the Latex strings by following this source code example.

As stated in the subject line, when I'm trying to draw or write in the editor area, the strokes are not getting generated on the editor but the text is getting recognized and the output is getting displayed.

This issue is happening when I'm trying to hide the editor and then display after a button click or any other event occurrence. In essence, this is happening if the editor is not displayed document load, but if we display it first when the document loaded then it works totally fine.

I've also recorded a video so that you guys can visually understand the issue, the video can be found here.

Awaiting your reply.

Regards.


Best Answer

Dear Mukunda M Mhasalkar,


just a quick update after discussing the behavior you are facing.


Instead of using the "display" css property, could you please try using the "visibility" property?


Let us know if it helps.


Best regards,


Olivier


Dear Mukunda,

thank you for your question.

First, can you confirm you are using the latest iinkJS, and no longer use the MyScriptJS? Indeed, the latest iinkJS solves issues that were found into the iinkJS.

Now, based on your video, which function are you calling when clicking "submit answer"? Are you doing an import?

Also, when writing after "submit answer", what are you doing exactly in your code? Indeed, if the strokes are not drawn, this may a due to the renderer, model or stroker that may have not been properly initialized. Can you please check the "drawCurrentStroke" function of the CanvasRenderer.js function and confirm all the 3 are properly set?


export function drawCurrentStroke (context, model, stroker) {
// Render the current stroke
context.capturingCanvasContext.clearRect(0, 0, context.capturingCanvas.width, context.capturingCanvas.height)
logger.trace('drawing current stroke ', model.currentStroke)
drawStroke(context.capturingCanvasContext, model.currentStroke, stroker)
return model
}


Indeed, this may help understand where the issue is coming, but based on the video, I suppose this may be an issue in your code.

Best regards,

Olivier

Hello Olivier,

First of all, thank you for your response to the issue.

As you said, currently I've installed and used the scripts suggested in the example source code and would like to highlight that, one of the support members of the MyScript has referred me that code. The following are some scripts that are being used in my code. 


<link rel="stylesheet" href="/static/myscript/dist/myscript.min.css" />
<link rel="stylesheet" href="/static/css/myscript-manual.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script type="text/javascript" src="/static/myscript/dist/myscript.min.js"></script>

On the other hand, I would also like to share some points and code snippets which can give you an idea about what is happening when we click on submit answer.

So here it is: 

When we click on the "submit answer" the form actually gets submitted and the redirect to the same page occurs. Once the page again gets loaded, the following javascript code checks whether the status of the question which is being shown on the screen is submitted or not, and if it is submitted already, then it basically hides the editor and shows submitted status message. After that, if the user clicks on the "resubmit" button to re-answer then the editor made unhidden and will get shown to the user. Check the following code for more clarification.

The following block of code is used to check whether the question is 'attended' or 'unattended' and shows or hides the answer block accordingly which contains myscript editor.

 

if (recordStatus.val() !== "unattended") {
    var responseBlockId = "response-block-" + questionNumber;
    $(".response-block").removeClass("active");
    $("#" + responseBlockId).addClass("active");
    choicesInput.prop("disabled", true);
    answerBlock.hide();
} else {
    $(".response-block").removeClass("active");
    answerBlock.show();
}

 And the answer block which contains the myscript editor div is as follows:


  

<div class="row answer-block">
    <div class="col-sm-12 steps-area">
        <ul class="nav nav-tabs Assessment-tabs stud-test-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#Scribble">Scribble</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#Type">Type</a>
            </li>
            <li>
                <a class="text-left"><i class="fas fa-trash"></i></a>
            </li>
            <li>
                <span class="d-flex align-items-center test-time">
                    <i class="far fa-clock" style="color: #5e72e4; margin-right: 10px; font-size: 25px;"></i>
                    <span class="answer-minutes"></span>:<span class="answer-seconds"></span>
                    <input type="hidden" id="time_taken" name="time_taken" class="time_taken" />
                </span>
            </li>
        </ul>
        <div class="tab-content Assignment-tabs">
            <div id="Scribble" class="container-fluid tab-pane active pl-0 pr-0">
                <div id="result"></div>
                <div id="latexString" style="display: none;"></div>
                <div>
                    <nav class="myscript-nav">
                        <div class="button-div">
                            <button id="clear" class="nav-btn btn-fab-mini btn-lightBlue d-flex justify-content-center align-items-center" disabled>
                                <i class="fas fa-trash text-white"></i>
                            </button>
                            <button id="undo" class="nav-btn btn-fab-mini btn-lightBlue d-flex justify-content-center align-items-center" disabled>
                                <i class="fas fa-undo text-white"></i>
                            </button>
                            <button id="redo" class="nav-btn btn-fab-mini btn-lightBlue d-flex justify-content-center align-items-center" disabled>
                                <i class="fas fa-redo text-white"></i>
                            </button>
                        </div>
                        <div class="spacer"></div>
                        <button class="btn btn-primary" id="convert" disabled>Convert</button>
                    </nav>
                    <div id="editor" touch-action="none"></div>
                </div>
            </div>
            <div id="Type" class="container-fluid tab-pane pl-0 pr-0">
                <br />
                <div class="test-auto-alert hint-popover">
                    <button type="button" class="ml-2 mb-1 close test-alert-close close-hint-popover">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="face-container">
                        <div class="bangs-left"></div>
                        <div class="bangs-middle"></div>
                        <div class="bangs-right"></div>
                        <div class="face">
                            <div class="left-eyebrow"></div>
                            <div class="left-eye">
                                <div class="pupil"></div>
                            </div>
                            <div class="right-eyebrow"></div>
                            <div class="right-eye">
                                <div class="pupil"></div>
                            </div>
                            <div class="lips"></div>
                        </div>
                    </div>
                    <div id="hint-message-area"></div>
                    <div class="d-flex align-items-center justify-content-around mt-2" id="hint-links-area"></div>
                </div>
                <div class="form-group" data-url="/assignments/14/solve-assignment/14/check">
                    <textarea name="solve_steps" class="form-control" placeholder="Add your solve steps here!" rows="10" cols="30" style="white-space: pre-wrap;" id="id_solve_steps"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

 And at the last, we are not using any CanvasRenderer.js and also not implemented any function called "drawCurrentStroke" anywhere in our code.  So, If you want me to check for that please share any sample test code so I can check.

Please recheck the above code snippets and let me know if it's anything bad there so I can fix it. Awaiting your response.


Regards.

Mukunda M Mhasalkar

 

Dear Mukunda M Mhasalkar,


thank you for the update and information you added.


It appears you are using the "legacy" MyScriptJS. Instead, can you please update to the latest iinkJS. Similar samples are available here: https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_math_iink.html


And you can find the iinkJS on our github page: https://github.com/MyScript/iinkJS


Doing side by side comparison in between iinkJS and MyScriptJS, you should be able to update quickly.


Indeed, we recentlyy released the iinkJS to replace the MyScriptJS, and it is likely to solve some issues.


If this doesn't work, of course feel free to come back to us.


Best regards,


Olivier

Thanks for your response and update Olivier.

As you suggested, I changed MyScriptJS to iinkJS, and still, there is the same error happening.

After checking the console following error is getting displayed:

image

Hope this will be helpful for you guys to understand the error and making it solved.

Please check in the above image and let me know if anything which needs to be done to fix this issue.

Awaiting your response. 

Regards.

Mukunda M Mhasalkar

Dear Mukunda M Mhasalkar,


thank you for the log, which is indeed of interest.


What seems to happen is that when hiding the editor and re-displaying it, the context is not restored.


Thus, when calling "const parent = context.select(update.parentId ? `#${update.parentId}` : svgElementSelector).node()" in updateView function (line 161 of SVGRenderer.js), parent is null.


On your side, you can try to patch ensuring the context is properly saved when hiding and restore it when re-opening the editor.


Internally, we will tryto patch the iink.


I keep you updated.


Best regards,


Olivier


Thank you so much Olivier for your reply.

From the statement you've made in the above response, "On your side, you can try to patch ensuring the context is properly saved when hiding and restore it when re-opening the editor."

I wonder if you can share some steps or any tutorial kind of code through which I can accomplish this.

Or if you guys are going to implement that internally, should we just wait for the next update and update our iinkjs once the update is released from your side?

Please suggest. 

Awaiting your response. Regards :)

Dear Mukunda M Mhasalkar,


just an update to warn you we will not be able to provide with an update of the iinkJS shortly.


Please expect few weeks before any update of the iinkJS.


Best regards,


Olivier

Ok Olivier,

Thanks for your update. We will be waiting to get the new release with fixed issues.

Regards,

Mukunda M Mhasalkar

Answer

Dear Mukunda M Mhasalkar,


just a quick update after discussing the behavior you are facing.


Instead of using the "display" css property, could you please try using the "visibility" property?


Let us know if it helps.


Best regards,


Olivier