Setup Mocha LPR - Design HTML page

Mocha LPR

Design a HTML web page for license plate input

The HTML page used to receive license plate data can be configured with one or more scan fields. Below is an example with 2:
        
        <html>
        <head>
          <script type="text/javascript">
          function onscan(platedata) {
            alert( "Plate result : " + platedata );
          }
          function startscan(platefield) {
            window.location = "readplate://"+platefield;
          }
          </script>
        </head>
       <body>
        <form action="http://www.w3schools.com/tags/demo_form_method.asp" method="GET">

          <h3>Enter Plate:</h3>
          <input id="platefield1" /><br />
        
          <input id="platefield2" /><br />
        
          <input onclick="startscan('platefield1')"
              type="button"
              value="Scan to field 1" />
          <input onclick="startscan('platefield2')"
              type="button"
              value="Scan to field 2" />
              <input name="button" type="submit" style="font-size: 20px" value="Send data to server">
         </form>
        </body>
        </html>
        
    
Function onscan() is optional, and can be called, when a scan has been completed. Replace alert() with code updating the server with the scan code.

As to start a scan from the HTML page, and not using the toolbar scan icon, it is important to use the location URL readplate://. This name is fixed, and cannot be changed. Give the scanner input field as parameter to the call. In the example platefield1 and platefield2 are used.

If the toolbar scan button is used, the scan data will be send to an input field name platefield1. This name is fixed, and cannot be changed.