"State" callbacks for pending/reading and idle UI changes
JamoCA opened this issue · 9 comments
During the scanning process, there's no visual indication that anything is happening until the script has completed reading and initiates parsing. Using Firefox with dev tools, there's a 1-3 second pause during the "pending/reading" process and the operator may be tempted to rescan or press a key. (Google Chrome is much faster, but I still want to show something on the screen that something is happening.)
I initially added callbacks so that I could block the UI (using BlockUI and "bindEvents:false" option so keyboard would continue to work) and displayed a "Processing..." message or spinner. Since the "prefix" update, my hacks aren't working properly and I was wondering if you could add these features so I can replace my library with yours without having to use an internal DIFF tool. (I'm not that savvy with GitHub yet.)
I added "onScanStart" & "onScanEnd" options to the config and defaulted both to null. Here's my attempt (and it's currently 4 commits behind yours.):
https://github.com/JamoCA/jquery.cardswipe
I agree that the scanning delay can be a problem sometimes. I have been considering using custom events for the same purpose. These would probably be attached to the document, and would include scanStart, scanEnd, successfulScan, failedScan, etc. Using events rather than a single callback would allow attaching multiple listeners at different places in the page. You could bind a listener that would disable input during the scan, and independently bind another that would show an animation or play a sound or whatnot. That would be cleaner than trying to do everything in one callback.
It'll be a little while before this is ready, so you should probably proceed with your approach. In the meantime, I'll try to incorporate your callbacks, but it'll be a few days before I can do that.
I would suggest that onScanStart should happen on entering the READING state, so that a single typed % won't trigger it.
Any update on this? I would like to have a "Please wait.." show while the card is processing after a scan because of the delay. Thank you.
Actually, yes. There's a branch called "events" with a preliminary version. It's preliminary, but I'd like some feedback. The demo.html page shows how to invoke it, using the built-in parsers.
Unlike before, there are multiple parsers, each handling one kind of card. You pass in an array with one element for each kind of parser you want to use, including your own custom one if that's what you need. The build-in ones are referenced by name (a string), and your own would get passed in as a function reference.
Good luck!
Super. I didn't think to check out the branches. I will try it out and let you know how it goes. Thanks!
So, I've been playing around with this today. Your events sample works great. I'm trying to use this under Asp.Net MVC and it gives quite a delay and then brings up my please wait spinner and then continues. Not sure why the long delay before firing that scanstart event. Any ideas?
Hmm. No idea. I use the same platform, and in any case, the server side shouldn't matter at all.
It might have to do with the version of jQuery I'm using. I'm using 2.1.3 and jquery-ui version 1.11.3. Have you tried it out with those versions? I have been loading the events sample in a partial view inside a jquery ui dialog window. I decided to try loading it in a window by itself and it scans quickly now. Any idea of why it would go so slow in the dialog window? Thanks for your help.
Just to update this for anyone who is also having long delays when scanning -- I determined the problem. I get a long delay when the scanning is inside a @using (Html.BeginForm("PostPayment", "Home", FormMethod.Post, new { id = "submitForm" })){ with a lot of fields on the page.
If I remove the using (Html.BeginForm... then the scan happens very fast. I think it has something to do with client side validation but I'm not sure. I tried disabling client validation, but it did not change anything. I thought perhaps it was going through trying to validate the hundreds of fields I have when I initialize a scan. So, the problem is not the modal, but the form.
Thanks for the update. It does sound like an interaction with jQuery Validate. I'll try to dig into that, and find a way around it.