PatD/poc.html

## poc.html
   <!DOCTYPE html>
        <html>
        <head>
            <title>Text Recognition Sample</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

            <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
        </head>
        <body style="margin:1em;">


       <h3>Azure ML Computer Vision - Check for Signature</h3>
       <ol>
        <li>

            <button onclick="processImage('one')">Check Form 1 for Signature</button>
        </li>

        <li>

            <button onclick="processImage('two')">Check Form 2 for Signature</button>
        </li>


       </ol>


        <div id="wrapper" style="width:1020px; display:table;">
            <div id="jsonOutput" style="width:600px; display:table-cell;">
                Response:
                <br><br>
                <textarea id="responseTextArea" class="UIInput"
                          style="width:580px; height:400px;"></textarea>


                <div id="bannerNotSigned" style="display:none;"><h1>&#x10102; NOT SIGNED</h1></div>

                <div id="bannerSigned" style="display:none;"><h1>&#x2714; SIGNED</h1></div>

            </div>
            <div id="imageDiv" style="width:420px; display:table-cell;">
                Source image:
                <br><br>
                <img id="sourceImage" width="400" style="border:1em solid white;" />
            </div>
        </div>


        <script type="text/javascript">
            var subscriptionKey = 'KEY';
            var endpoint = 'URL TO ENDPOINT IN AZURE';
            var uriBase = endpoint + "vision/v2.1/read/core/asyncBatchAnalyze";

            var responseTextArea = document.getElementById('responseTextArea')

            var bannerNotSigned = document.getElementById('bannerNotSigned')
            var bannerSigned = document.getElementById('bannerSigned')


            var documentImg = document.getElementById('sourceImage')


            function docSigned(){
                documentImg.style.border = "1em solid green"
                bannerNotSigned.style.display = "none"
                bannerSigned.style.display = "block"
            }

            function docUnSigned(){
                documentImg.style.border = "1em solid red"
                bannerNotSigned.style.display = "block"
                bannerSigned.style.display = "none"
            }


            function processImage(formNum) {
                documentImg.style.border = "1em solid white";
                bannerNotSigned.style.display = "none"
                bannerSigned.style.display = "none"


                function getImageText(urlToRead){
                    responseTextArea.style.background = "url('/_layouts/images/gears_an.gif') no-repeat center center"


                    console.log(urlToRead)
                    // Now query this document's text
                    axios({
                        method: 'GET',
                        url: urlToRead,
                        headers: {
                            "content-type":"application/json",
                            "Ocp-Apim-Subscription-Key": subscriptionKey
                        }
                    }).then(function(response){
                        console.log(response.data)


                        if(response.data.status === "Running" || response.data.status === "NotStarted"){
                            console.log("running")
                            responseTextArea.innerHTML = "Analyzing image for signature...";

                            setTimeout(function(){
                                getImageText(urlToRead)
                            },5000)


                        }
                        else if(response.data.status === "Succeeded"){
                            responseTextArea.innerHTML = JSON.stringify(response, null, 2);

                            responseTextArea.style.background = "none"


                            console.log(response.data.recognitionResults["0"].lines)

                            if(response.data.recognitionResults["0"].lines[19].text === "Sample Signature"){
                                console.log("This document is signed")
                                docSigned()
                            } else {
                                console.log("Not Signed")
                                docUnSigned()
                            }


                        }


                        else {
                            alert("error")
                        }


                    });
                ;}


                if(formNum === "one"){
                    var docName = 'file1.jpg'
                } else {
                    var docName = 'file2.jpg'
                }

                // Display the image.
                var sourceImageUrl = docName;
                document.querySelector("#sourceImage").src = sourceImageUrl;


                axios({
                    method: 'post',
                    url: uriBase,
                    headers: {
                        "content-type":"application/json",
                        "Ocp-Apim-Subscription-Key": subscriptionKey
                    },
                    data: '{"url": ' + '"' + sourceImageUrl + '"}'

                })
                .then(function (response) {
                    console.log(response.headers["operation-location"])
                    getImageText(response.headers["operation-location"])

                })
                .catch(function (error) {
                    alert("Error: " + error)
                    console.log(error);
                });


            }


        </script>
      </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Text Recognition Sample</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

	<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
	</head>
	<body style="margin:1em;">



	<h3>Azure ML Computer Vision - Check for Signature</h3>
	<ol>
	<li>

	<button onclick="processImage('one')">Check Form 1 for Signature</button>
	</li>

	<li>

	<button onclick="processImage('two')">Check Form 2 for Signature</button>
	</li>


	</ol>


	<div id="wrapper" style="width:1020px; display:table;">
	<div id="jsonOutput" style="width:600px; display:table-cell;">
	Response:
	<br><br>
	<textarea id="responseTextArea" class="UIInput"
	style="width:580px; height:400px;"></textarea>


	<div id="bannerNotSigned" style="display:none;"><h1>𐄂 NOT SIGNED</h1></div>

	<div id="bannerSigned" style="display:none;"><h1>✔ SIGNED</h1></div>

	</div>
	<div id="imageDiv" style="width:420px; display:table-cell;">
	Source image:
	<br><br>
	<img id="sourceImage" width="400" style="border:1em solid white;" />
	</div>
	</div>






	<script type="text/javascript">
	var subscriptionKey = 'KEY';
	var endpoint = 'URL TO ENDPOINT IN AZURE';
	var uriBase = endpoint + "vision/v2.1/read/core/asyncBatchAnalyze";

	var responseTextArea = document.getElementById('responseTextArea')

	var bannerNotSigned = document.getElementById('bannerNotSigned')
	var bannerSigned = document.getElementById('bannerSigned')




	var documentImg = document.getElementById('sourceImage')


	function docSigned(){
	documentImg.style.border = "1em solid green"
	bannerNotSigned.style.display = "none"
	bannerSigned.style.display = "block"
	}

	function docUnSigned(){
	documentImg.style.border = "1em solid red"
	bannerNotSigned.style.display = "block"
	bannerSigned.style.display = "none"
	}




	function processImage(formNum) {
	documentImg.style.border = "1em solid white";
	bannerNotSigned.style.display = "none"
	bannerSigned.style.display = "none"


	function getImageText(urlToRead){
	responseTextArea.style.background = "url('/_layouts/images/gears_an.gif') no-repeat center center"


	console.log(urlToRead)
	// Now query this document's text
	axios({
	method: 'GET',
	url: urlToRead,
	headers: {
	"content-type":"application/json",
	"Ocp-Apim-Subscription-Key": subscriptionKey
	}
	}).then(function(response){
	console.log(response.data)




	if(response.data.status === "Running" \|\| response.data.status === "NotStarted"){
	console.log("running")
	responseTextArea.innerHTML = "Analyzing image for signature...";

	setTimeout(function(){
	getImageText(urlToRead)
	},5000)


	}
	else if(response.data.status === "Succeeded"){
	responseTextArea.innerHTML = JSON.stringify(response, null, 2);

	responseTextArea.style.background = "none"


	console.log(response.data.recognitionResults["0"].lines)

	if(response.data.recognitionResults["0"].lines[19].text === "Sample Signature"){
	console.log("This document is signed")
	docSigned()
	} else {
	console.log("Not Signed")
	docUnSigned()
	}


	}


	else {
	alert("error")
	}


	});
	;}





	if(formNum === "one"){
	var docName = 'file1.jpg'
	} else {
	var docName = 'file2.jpg'
	}

	// Display the image.
	var sourceImageUrl = docName;
	document.querySelector("#sourceImage").src = sourceImageUrl;


	axios({
	method: 'post',
	url: uriBase,
	headers: {
	"content-type":"application/json",
	"Ocp-Apim-Subscription-Key": subscriptionKey
	},
	data: '{"url": ' + '"' + sourceImageUrl + '"}'

	})
	.then(function (response) {
	console.log(response.headers["operation-location"])
	getImageText(response.headers["operation-location"])

	})
	.catch(function (error) {
	alert("Error: " + error)
	console.log(error);
	});


	}


	</script>
	</body>
	</html>