Web-Component de reconnaissance d'écriture – Web-Components ?

View Github Repository Open presentation in a new window

padewitte

See all presentation from padewitte

Web-Component de reconnaissance d'écriture – Web-Components ?

0 0

NANTES_JS_2016

On Github padewitte / NANTES_JS_2016

Web-Component de reconnaissance d'écriture

Pierre-Alban DEWITTE

@padewitte

Reconnaissance de texte

<myscript-text-web  "
	applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81" 
	hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"  
	language="fr_FR"  
	host="webdemo.myscript.com"	class="stretch componentstyle">  
</myscript-text-web>
                GET .../do/recognition
            
textInput =  {
        "textParameter":{
            "language":"en_US",
            "textInputMode":"CURSIVE"},
        "inputUnits":[{
            "textInputType":"MULTI_LINE_TEXT",
            "components":[{
                "type":"stroke",
                "x":[438,439,439,...],
                "y":[319.5,313.5,312.5,...]
            },{...}]}]}
                var paper = new MyScript.InkPaper(inkPaper, options, function (data, error) {
    result.innerHTML = '';
    if (error) { result.innerHTML = error;}
    if (data) {
    // Display the selected text candidate
    result.innerHTML = data.getTextDocument().getTextSegment().getSelectedCandidate().getLabel();
}});
document.getElementById('trash').addEventListener('click',
    function () {paper.clear();}, false);
        // ... undo, redo ...
var languages = document.getElementById('languages');
        ...

Web-Components ?

HTML Imports

                    <link rel="import" href="bow../mon-web-components/components.html">
                
                    <script type="text/javascript" src="../q/q.js"></script>
<script type="text/javascript" src="../pepjs/dist/pep.min.js"></script>
<script type="text/javascript" src="./dist/monjs.min.js"></script>

Templates

                    <template id="mytemplate">
    <img src="" alt="great image">
    <div class="comment"></div>
</template>

Shadow DOM

Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document...

Source : Mozilla Developer Network

Custom Elements

                    <mon-super-element>
    <un-sous-element/>
</mon-super-element>

Reconnaissance de formules mathématiques

<myscript-math-web 
	applicationkey="22eda92c-10af-40d8-abea-fd4093c17d81" 
	hmackey="a1fa759f-b3ce-4091-9fd4-d34bb870c601"  
	host="webdemo.myscript.com"  
	class="stretch componentstyle">  
</myscript-math-web>

Simplifier l'équation suivante

BRAVO !

var solvingZoneElement
    = document.getElementByTagName("myscript-math-web")[0];

solvingZoneElement.classList.add("visible");
solvingZoneElement.addEventListener("myscript-math-web-result",
    function () {
        var result = solvingZoneElement.result["LATEX"];
        if (result === "\\dfrac {x^{2}} {2}") {
            hideElementAndShowBravo();
        }
    }
);
https://github.com/MyScript/myscript-math-web
https://github.com/MyScript/myscript-text-web

MERCI

@padewitte

dev.myscript.com

Crédits

Icons made by Freepik from www.flaticon.com is licensed by CC BY 3.0
Css inspiration from Lea Verou http://lea.verou.me/css3patterns/#blueprint-grid
Web-Component de reconnaissance d'écriture