Results 1 to 7 of 7
  1. #1
    Join Date
    Feb 2004
    Location
    Australia
    Posts
    183

    Unhappy Unanswered: Scanner as an input device help?

    I have a problem and not quite sure where to start.

    I have a list with product names (the list will grow),each of those products could be read as a barcode as well,so I was asked to change my web site so that users are able to scan that barcode, that would be easy if I didn't have to look after users who have a scanner and once that don't, so the idea was if they have a scanner they scan in into a input box(not sure if combo box can be used) and according to the product code scanned that automatically populates the combo box list with the relevant product name, if they don't have a scanner then they just manually select the product name from the list.

    Would somebody have web sites links I could visit or any help at all,since I have nothing.

    Thanks a lot

  2. #2
    Join Date
    Jul 2003
    Location
    SoCal
    Posts
    721
    Hah! How coincidental.. I just finished a project that did just this. Can you program a preamble character into your scanners?
    That which does not kill me postpones the inevitable.

  3. #3
    Join Date
    Feb 2004
    Location
    Australia
    Posts
    183
    I am glad sombody knows what I am on about, I am not sure I don't have a scanner at this stage but I am to get one once I have created something where I can use a scanner.

    Sorry, not really familiar with those characters, will try and find out what they are exactly.

    Why is that so important?

  4. #4
    Join Date
    Jul 2003
    Location
    SoCal
    Posts
    721
    I have some passion about this because I had to develop exactly what you're looking for from scratch.. real sense of accomplishment

    Check out http://www.idautomation.com. They have scanners and ASP COM objects you can use to generate barcodes on web pages, and then use their scanners to read them in (they don't make the scanners, just resell them). The beauty of the scanners they sell is that they have a few that are plug-and-play USB devices (I bought 4 of these http://www.idautomation.com/laser/ for our office) and act as keyboards. So when you scan a barcode, they "type" the values onto the screen. No additional equipment or software required.

    The trick was getting the value of the barcode into the right text field on the webpage. That's where the preamble comes in. I programmed the scanner to append a tilda (~) to the begining of every barcode value. Then I wrote some JavaScript to capture every key stroke on the page. If it encountered a tilda, I immediately set the focus to the text box and removed the first character (the tilda itself). The remaining characters "typed" by the scanner were the barcode value. By default, the metrologic scanner I linked to has a postamble character of a carriage return (<enter>).

    So when a barcode was scanned, the page found the preamble, moved the focus to the text box, cleared the first character (the tilda), typed out the remaining characters and then the carriage return automatically submit the form to pull up the data. Kinda nifty eh?

    I can get you more specific code samples of the key capture if you need it.
    That which does not kill me postpones the inevitable.

  5. #5
    Join Date
    Feb 2004
    Location
    Australia
    Posts
    183
    Hm, I really appreciate you explaination and am happy for you achievment,but your answer makes me even more worried, since my knowdlege is far from what you seem to have done and yet I have the same problem to solve.

    But on the other hand I am sure I will be able to come up with something more simple ( I will have to),since knowing how my senior programmer likes to make things more complex ( just because he has the knowdlege to) when things can be just as good in a more simple way.

    Cheers

  6. #6
    Join Date
    Jul 2003
    Location
    SoCal
    Posts
    721
    It wasn't as hard as you might think it is... it truly isn't... to "program" the scanners with a preamble, it's just a matter of scanning a series of configuration barcodes from the manufacturer. Takes me about 2 minutes to get a new scanner setup for our system.

    Here is the JavaScript I use to handle the scanner... it may seem daunting, but if you look at it, you'll see that there is nothing really special about my code. You could pretty much copy what I have and change the object paths to your own. If you have an image for an hourglass, the code below includes a popup div to alert the individual scanning that the barcode was scanned properly (and since the postamble character is a carriage return, the hourglass alerts the individual to wait while the form is submit). This code also prevents the individual from scanning the same barcode twice. You may or may not want this (it can be changed in the bcCheck function). For my purposes it would have been bad.

    I hope this helps..
    Code:
    <script>
    <!--
    var sLastBC
    
    document.onkeypress = bcScan;
    document.onkeyup = bcClean;
    
    //When a key is pressed, we'll check to see if it's the preamble from the scanner
    function bcScan(e){
      switch (event.keyCode){
        //Compare the Ascii value of the global variable we set in the system for the preamble with that of the current character.
        case <%=Asc(gbl_BCPreAmble)%>:
          //This character is the preamble, set the focus prepare the field for data...
          document.frmOrderViewerSearch.query.focus();
          document.frmOrderViewerSearch.query.value = "";
      }
    }
    
    function bcClean(e){
      //Clean out any character from value that was entered from the scanner that matches the preamble character.
      var RegEx = /<%=gbl_BCPreAmble%>/g;
    
      document.frmOrderViewerSearch.query.value = document.frmOrderViewerSearch.query.value.toString().replace(RegEx, "");
    }
    
    //This function is called on the onSubmit of the form. It validates the form fields, and displays an hourglass box to alert the individual that the scan was successful.  This entire section from here down is not necessary for the barcode to be successfully scanned.
    function bcCheck(){
      if(document.frmOrderViewerSearch.query.value != ""){
        if(sLastBC != document.frmOrderViewerSearch.query.value){
          sLastBC = document.frmOrderViewerSearch.query.value;
          if ( bHourglassAvail ) {
            showHourglass();
            return true;
          }
          else{
            return false;
          }
        }
        else{
          alert("Please enter a transaction ID.");
          return false;
        }
    }
    
    //The following code handles the hourglass.  It ensures that the image of the hour glass stays in the middle of the window, even through resizing.
    
    var bHourglassAvail = false;
    
    window.onresize = updateHourglassLoc;
    
    function updateHourglassLoc() {
      if(bHourglassAvail == true){
        document.getElementById("hourglass").style.pixelTop = (document.body.clientHeight / 2) - (document.getElementById("hourglass").height / 2);
        document.getElementById("hourglass").style.pixelLeft = (document.body.clientWidth / 2) - (document.getElementById("hourglass").width / 2);
      }
    }
    
    //Shows the div containing the hourglass
    function showHourglass(){
      if(bHourglassAvail == true){
        updateHourglassLoc();
        document.getElementById("hourglass").style.display = "";
      }
    }
    
    //Hides the div containing the hourglass
    function hideHourglass(){
      if(bHourglassAvail == true){
        document.getElementById("hourglass").style.display = "none";
      }
    }
    //-->
    </script>
    
    <!-- div for the hourglass image itself.  not necessary for barcode scanning to function properly -->
    <div id="hourglass" style=" position:absolute; border:1px solid red; background-color:#EFEFEF; text-align:center; vertical-align:middle; display:none;" height="70" width="50">
      <img id="hourglass-IMG" src="<%=sAppPath%>_images/hourglass.gif" height="50" width="50"><BR>
      <span style="color:red; font-family:Arial, Helvetica, sans-serif; font-size:8px; width:50px; text-align:center;">Please<BR>Wait</span>
    </div>
    Note:

    document.frmOrderViewerSearch.query.value = document.frmOrderViewerSearch.query.value.toString ().replace(RegEx, "");

    This line, for some reason or another, is putting a space after toString and (). It's not here when I edit this message, so it's being added afterwards. Make sure to clean that up if you copy and paste the code. It shouldn't affect the code, but it looks sloppy...
    Last edited by Seppuku; 11-17-04 at 19:57.
    That which does not kill me postpones the inevitable.

  7. #7
    Join Date
    Feb 2004
    Location
    Australia
    Posts
    183
    Thanks a lot for your help, I will go through everything and hopefully I can get something out of, I am sure I will.

    I appreciate sharing your hard work with the rest.

    Ta

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •