jquery input detection after tirgger key for online pos - php

im writing a php pos system for my store, and im dealing with the barcode system now.
basically i want to be able to monitor the window, and when the barcode comes in put it in the input search box and submit it.
the 2nd part is the easy part, im having difficulty with the first part.
i made the scanner append te pipeline charecter (|) to the barcode, and i have jquery monitoring the window for any key presses that are pipeline, but how would i read the key presses after the pipeline once its triggered? maybe i have the wrong approach to this..?

Last time I built something like that, the page had a big fat <input> element, that was auto-focused. Your scanner acts as a keyboard, with the exception of pasting the string in one event, rather then emitting a key-events for each distinct character. (at least that was the case with our scanners).
add an <input> element, focus it. When your scanner sends a code, it will be written into the <input>. There you can react to keyup or change events to see if the code was written completely and then react accordingly. In our case, a newline (\n) was appended to the code to mark its end. But I guess a pipe (|) would be just fine as well.

Related

swap text/add specific word html/php code

I am looking to translate some very specific encoding to something that will improve its readability.
Example input
OUT PUT:
Copper Box v3;
S/N:25304;FW:1.07.12;
;a-b;a-GND;b-GND;
U=;0.74 V;3.23 V;0.48 V;
U~;0.03 V;0.02 V;0.02 V;
C;232.5 nF;11.87 nF;30.73 nF;
ISO;2.28 MΩ;237 kΩ;2.19 MΩ;
R;- -;
ΔC;- -;
Length; - m;
Desired output
OUT PUT:
U=;
A-B 0.74 V
A-G 3.23 V
B-G 0.48 V
U~;
A-B 0.03 V
A-G 0.02 V
B-G 0.02 V
C;
A-B 232.5 nF
A-G 11.87 nF
B-G 30.73 nF
ISO;
A-B 20.28 MΩ
A-G 237,1 kΩ
B-G 20.19 MΩ
Background
In my spare time I work with printed circuit boards as a hobby and try to fix broken machines for people, like coffee machines.
I have a new device with which I can measure things in an easy way.
But the device only gives a QR code that I can scan. It looks like the "example input" provided above.
I want to make it easier to read such text.
Manually changing it is a possibility; but it takes a lot of time. Sometimes I have 5 such measurements per hour.
Question
I would love to make a textarea box where I could paste it in, press a "beautify" button, and have code that makes the translation.
I was reading this, and even found a thing called the hanna code or so, but that did not give the little part I am looking for...
I know a little bit of PHP and HTML. Is there a way to use it in that language or do I need to learn how to use JavaScript or whatever?
Could you point me in the right direction? I would love to get this puzzle solved, but I don't even know where to start....
Here is a JavaScript solution. You can directly paste the output in the first box, and the second box will immediately give the beautified translation.
Of course, I had to make some assumptions about the syntax of the original text, so let me know how this meets your needs:
document.querySelector("#source").addEventListener("input", function () {
const lines = this.value.split(/^;/m).slice(1).join("").split("\n");
const cols = lines.shift().toUpperCase().split(";")
.filter(Boolean).map(code => code.slice(0,3));
document.querySelector("#target").value = "OUT PUT:\n" +
lines.filter(line => /;\d/.test(line))
.map(line => line.split(";").filter(Boolean))
.map(([s, ...v]) => s + "\n" + v.map((value, i) =>
cols[i] + " " + value
).join("\n"))
.join("\n");
});
<table>
<tr>
<th>Paste output here:</th><th>Beautified:</th>
</tr>
<tr>
<td><textarea id="source" cols="30" rows="18"></textarea></td>
<td><textarea id="target" cols="30" rows="18" readonly></textarea></td>
</tr>
</table>
Your question is very broad but reading it carefully I'm going to assume that you are not interested in a specific coding example but moreso a strategy. We're I looking at a problem like this in HTML I would without question code it in JavaScript.
The main difference between JavaScript (JS) and PHP in the example you've stated (ie, in HTML) is that PHP is a server-side language while JS is client based. This means that for PHP to solve the problem you need a webserver (a place to host the script), a way to post to the server, a PHP script on the server that can make the conversion for you.
In addition to that for the PHP solution you need a way for HTML to make the server side request to make the translation for you (translation meaning converting the first form of the data into the second) ie the HTML page needs to ask the webserver for the answer, post the original data to the server and receive (catch) the result and display it... generally this is all done in JavaScript using a technology called Ajax.
Another approach to solving the server problem w/out JavaScript is to use the HTML FORM tag with an associated INPUT to submit the data to the server. Then the server will render an entirely new page in HTML that contains the changed data and return that to the client (your web browser) replacing the old HTML page with the updated one. A lot of work!
A simpler solution would be to just use JavaScript which will allow you to do all the work in your client (the webbrowser) and will not require a webserver, re-rendering the page, etc. Far simpler and a better place to start if you're just exploring into coding - which from your question seems the case.
I would research JavaScript and some simple tutorials for reading/setting values on the page. As for how to actually code the function in JS to make the conversion of the data... that's relatively straight forward IF you can assume that the data is "fair" (ie, has no errors, bugs, etc) otherwise the problem of determining the veracity of the data is a far far more complex problem than the actual conversion (this is often the case in Computer Science).
All that said, I think it is an awesome project for starting to learn JS and think it's a great place to start. Take a look at these examples for some basics of JS and how to move data from one place to another.
https://formidableforms.com/knowledgebase/javascript-examples/

Is there any way to detect which hardware the input came from in web programming?

I am developing a barcode reader application for personal use (inventory). The barcode reader I am using, acts like a keyboard, it inputs the barcode number and sends an "Enter". However, I always need to focus manually said text field.
I want to make the reader update the whole form of fields when it reads a barcode. Without having to place the focus manually on the field.
In order to do so, I was wondering if there's a way to determine if the keypress (or another event) came from the bar reader or from the keyboard?.
The development it's currently done under HTML/JS (jQuery) and PHP, but I'm not closed to other suggestions.
The barcode reader is plug and play, and didn't come with drivers. Is there a way to read the information on the device that is performing the input?
As far as I know there is no way of differentiating a (generic) barcode reader from a real keyboard. You may solve your problem by adding a keypress handler on a page with code that sets focus to the field you need to put the value into.
You can try adding the autofocus attribute in the html.
http://www.w3schools.com/tags/att_input_autofocus.asp

Make paragraph of text an editable textarea on click

I have an about box on a profile page I'm working on (see below). Now that area shown by the textarea will have a PHP variable (about user column) produced in the space.
What I want to do is when a user clicks edit the paragraph content produced becomes an editable <textarea> which I can then save and it will write the new data to my PostGreSQL database and instantly show the new edit.
Basically I'm looking for a dynamically editable paragraph/textarea combo which will automatically update the database storing the original textual data in an about user column.
I have researched many JQuery examples like this on jsfiddle - http://jsfiddle.net/BenjaminRH/467S5/ but that doesn't have the database functionality I am looking for.
In essence, the HTML5 ContentEditable attribute could be perfect here.
This won't automatically update any databases, or anything for that matter, but nor will any other control that isn't some kind of composite made specifically for (and even genericised to handle) certain database types and scenarios and frameworks etc.
Therefore, in order to get this (a control that does it all) you're likely going to need to hunt down a third party product - there may be a free one (I've not seen one for the likes of PHP or ASP.NET or other major frameworks, and frankly I'm glad), or you may be stuck with having to buy one. As expected, I personally can't vouch for any, and wouldn't recommend such a plug n' play control anyway.
But, as per my first suggestion, there's half the task done - just write the code-behind in a reusable class and hook it up some how.

integrating barcode scanner into php application?

We have been developing web application in php.
We need barcode scanner to be integrated into our application.
Our application is divided into two modules, users and merchant.
When user comes and scans the card, merchant should be identified the user by barcode number. Admin will give barcode number and that is being sent to the card manufacturer and the number will be assigned to the magnetic stripe.
As i know scanner can acts as a key board, can you please tell the method to integrate barcode scanner into this php web based application?
PHP can be easily utilized for reading bar codes printed on paper documents. Connecting manual barcode reader to the computer via USB significantly extends usability of PHP (or any other web programming language) into tasks involving document and product management, like finding a book records in the database or listing all bills for a particular customer.
Following sections briefly describe process of connecting and using manual bar code reader with PHP.
The usage of bar code scanners described in this article are in the
same way applicable to any web programming language, such as ASP,
Python or Perl. This article uses only PHP since all tests have been
done with PHP applications.
What is a bar code reader (scanner)
Bar code reader is a hardware pluggable into computer that sends decoded bar code strings into computer. The trick is to know how to catch that received string. With PHP (and any other web programming language) the string will be placed into focused input HTML element in browser. Thus to catch received bar code string, following must be done:
just before reading the bar code, proper input element, such as INPUT TEXT FIELD must be focused (mouse cursor is inside of the input field).
once focused, start reading the code
when the code is recognized (bar code reader usually shortly beeps), it is send to the focused input field. By default, most of bar code readers will append extra special character to decoded bar code string called CRLF (ENTER). For example, if decoded bar code is "12345AB", then computer will receive "12345ABENTER". Appended character ENTER (or CRLF) emulates pressing the key ENTER causing instant submission of the HTML form:
<form action="search.php" method="post">
<input name="documentID" onmouseover="this.focus();" type="text">
</form>
Choosing the right bar code scanner
When choosing bar code reader, one should consider what types of bar codes will be read with it. Some bar codes allow only numbers, others will not have checksum, some bar codes are difficult to print with inkjet printers, some barcode readers have narrow reading pane and cannot read for example barcodes with length over 10 cm. Most of barcode readers support common barcodes, such as EAN8, EAN13, CODE 39, Interleaved 2/5, Code 128 etc.
For office purposes, the most suitable barcodes seem to be those supporting full range of alphanumeric characters, which might be:
code 39 - supports 0-9, uppercased A-Z, and few special characters (dash, comma, space, $, /, +, %, *)
code 128 - supports 0-9, a-z, A-Z and other extended characters
Other important things to note:
make sure all standard barcodes are supported, at least CODE39, CODE128, Interleaved25, EAN8, EAN13, PDF417, QRCODE.
use only standard USB plugin cables. RS232 interfaces are meant for industrial usage, rather than connecting to single PC.
the cable should be long enough, at least 1.5 m - the longer the better.
bar code reader plugged into computer should not require other power supply - it should power up simply by connecting to PC via USB.
if you also need to print bar code into generated PDF documents, you can use TCPDF open source library that supports most of common 2D bar codes.
Installing scanner drivers
Installing manual bar code reader requires installing drivers for your particular operating system and should be normally supplied with purchased bar code reader.
Once installed and ready, bar code reader turns on signal LED light. Reading the barcode starts with pressing button for reading.
Scanning the barcode - how does it work?
STEP 1 - Focused input field ready for receiving character stream from bar code scanner:
STEP 2 - Received barcode string from bar code scanner is immediatelly submitted for search into database, which creates nice "automated" effect:
STEP 3 - Results returned after searching the database with submitted bar code:
Conclusion
It seems, that utilization of PHP (and actually any web programming language) for scanning the bar codes has been quite overlooked so far. However, with natural support of emulated keypress (ENTER/CRLF) it is very easy to automate collecting & processing recognized bar code strings via simple HTML (GUI) fomular.
The key is to understand, that recognized bar code string is instantly sent to the focused HTML element, such as INPUT text field with appended trailing character ASCII 13 (=ENTER/CRLF, configurable option), which instantly sends input text field with populated received barcode as a HTML formular to any other script for further processing.
Reference: http://www.synet.sk/php/en/280-barcode-reader-scanner-in-php
Hope this helps you :)
You can use AJAX for that. Whenever you scan a barcode, your scanner will act as if it is a keyboard typing into your input type="text" components. With JavaScript, capture the corresponding event, and send HTTP REQUEST and process responses accordingly.
I've been using something like this. Just set up a simple HTML page with an textinput. Make sure that the textinput always has focus. When you scan a barcode with your barcode scanner you will receive the code and after that a 'enter'. Realy simple then; just capture the incoming keystrokes and when the 'enter' comes in you can use AJAX to handle your code.
If you have Bluetooth, Use twedge on windows and getblue app on android, they also have a few videos of it. It's made by TEC-IT. I've got it to work by setting the interface option to bluetooth server in TWedge and setting the output setting in getblue to Bluetooth client and selecting my computer from the Bluetooth devices list. Make sure your computer and phone is paired. Also to get the barcode as input set the action setting in TWedge to Keyboard Wedge. This will allow for you to first click the input text box on said form, then scan said product with your phone and wait a sec for the barcode number to be put into the text box. Using this method requires no php that doesn't already exist in your current form processing, just process the text box as usual and viola your phone scans bar codes, sends them to your pc via Bluetooth wirelessly, your computer inserts the barcode into whatever text field is selected in any application or website. Hope this helps.

Is there a way to catch all keyboard input in a browser?

Is there a way to catch all keyboard input in a browser? Im guessing it would have to be JavaScript.
My problem is that I have a USB Bar Code Scanner which the computer treats as a second keyboard. I dont want the user to have to click on the input box for bar codes to be entered in it. But I also want them to be able to hit key short cuts that perform an action that does not display that input in the text box. Also can the f1 - f12 keys be used in this manner or are they reserved for the browser itself?
keydown will fire for most keys (certainly more than keypress) in most browsers (some, such as Safari 3.0, won't fire any events for modifier keys such as Shift) and all keys in recent browsers. The behaviour of function keys is not a good thing to rely on though.
The following page is an excellent reference for key events in JavaScript: http://unixpapa.com/js/key.html
You can handle the keypress event for the document object, which will receive almost all keyboard input.
The exact behavior of function keys will depend on the browser.
I did this before. I used a timer. I give the input box focus and start the timer after the first keypress is detected, then if no other keys are pressed within 100 milliseconds I submit the form. The barcode scanner "types" pretty quickly.
You can also intercept the character codes to detect the F-keys.

Categories