| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>QR Scan Difficulty Check</title> |
| <meta name="description" content="Where does your QR code fall among thousands of measured codes? Add a picture: five open-source scanners read it at seven sizes and place it on the scale eight scanners set."> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <main class="page"> |
|
|
| <header class="hero"> |
| <p class="kicker">QR scan difficulty · measured</p> |
| <h1>How hard is your QR code to scan?</h1> |
| <p class="lede" id="lede">Every code we measured at seven sizes, on one scale from easy to hard, shaded by how many of eight scanners read each one. Add pictures of your own codes to see where they fall.</p> |
| <div class="add"> |
| <button type="button" class="button" id="add">Add pictures</button> |
| <p class="add-note" id="addNote" role="status">Read by five of the eight scanners. Nothing is kept.</p> |
| <input type="file" id="file" accept="image/*" multiple hidden> |
| </div> |
| </header> |
|
|
| <section class="block" aria-labelledby="bellTitle"> |
| <h2 class="visually-hidden" id="bellTitle">Every code measured at seven sizes, from easy to hard</h2> |
| <div class="spectrum"> |
| <figure class="bell-figure"> |
| <div class="key bell-key" id="bellKey"></div> |
| <svg class="chart" id="bell" role="img" aria-label="Every code measured at seven sizes, from easy to hard"></svg> |
| <input type="range" id="cursor" class="range" min="-6" max="106" step="0.5" value="40" aria-label="Move along the difficulty scale"> |
| <p class="readout" id="readout"></p> |
| <figcaption class="fine" id="bellNote">Shades count the scanners that read each code at 1280 pixels. The curve’s shape is an illustrative mix of the sets, not a count of them.</figcaption> |
| </figure> |
| <aside class="specimen" id="specimen"></aside> |
| <div class="your-list"> |
| <ol class="pictures" id="pictures" aria-label="Your pictures" hidden></ol> |
| <p class="pictures-end" id="picturesEnd" hidden></p> |
| </div> |
| </div> |
| </section> |
|
|
| <footer class="block footer"> |
| <details class="more" id="how"> |
| <summary>How your pictures are placed</summary> |
| <div class="more-body method"> |
| <p>Each picture is read the way every measured code was. It is turned gray and shrunk, never enlarged, to seven sizes from 1920 down to 224 pixels on its long side, and five of the eight scanners read it at each size, with the versions and settings of the measurement: WeChat’s scanner, zxing-cpp, Android Settings’ scanner (ZXing) and OpenCV’s two detectors. Transparent parts count as white, as on a printed page. A scanner reads a picture when it returns the content that more of the five return than any other, even if only one returns any; a picture with several codes is placed by that one. How many of the five read a picture is counted at 1280 pixels, the long side of a 720p video frame.</p> |
| <p>The other three, Apple’s, Google’s and Huawei’s, can’t run on this server: Apple’s runs only on Apple devices, and Google’s and Huawei’s, as measured, need Android. So a picture is placed from its 35 reads, five scanners at seven sizes, on the scale all eight set, which stays as measured. Tried on the measured codes that at least two of the five read at 1280 pixels, 9 in 10 land close to where all eight put them: within about a tenth of the way from clean to tough prints. If only one of the five reads a picture at 1280 pixels, or none does but some do at another size, its place is rough and its line is dashed: fewer than half of such measured codes land so close. A reading cut short by the time limit is dashed too.</p> |
| <p>A picture none of the five read at any size goes to the pile on the right, where its place is least sure. Phones’ own scanners still read about 1 in 6 of the measured codes like that, most of them distorted research images, and 33 of the 59 photos and prints among them.</p> |
| <p>Pictures are read from a temporary file that is deleted as soon as the reading ends. The server keeps no copy and no access log. Hugging Face, which hosts it, has its own <a href="https://huggingface.co/privacy" target="_blank" rel="noopener">privacy policy</a>.</p> |
| </div> |
| </details> |
| <details class="more" id="about"> |
| <summary>About the measurements</summary> |
| <div class="more-body method"> |
| <p id="aboutCodes">Each code on the curve was read by eight scanners at seven image sizes. A two-parameter item-response model turns each code’s pattern of reads and misses into one difficulty. A code counts as read only when a scanner returns its exact content, and its shade counts the scanners that read it at 1280 pixels. The curve’s shape is an illustrative mix, not a count of the sets: half everyday prints, a fifth each clean and tough prints, and a tenth the research sets. The full measurement, phone by phone, is on <a href="https://huggingface.co/spaces/devmandan/qr-scan-difficulty" target="_blank" rel="noopener">QR Scan Difficulty</a>.</p> |
| <h3>The eight scanners</h3> |
| <ul> |
| <li>Apple’s scanner: <a href="https://developer.apple.com/documentation/vision/vndetectbarcodesrequest" target="_blank" rel="noopener">Apple Vision</a>, Apple’s barcode detector built into iOS; our stand-in for the iPhone, measured on a Mac (macOS 14.3).</li> |
| <li>Google’s scanner: the one Android’s own QR button opens on Pixel phones, from <a href="https://developers.google.com/android/guides/overview" target="_blank" rel="noopener">Google Play services</a> 26.41.31; on Google’s Android 14 emulator image.</li> |
| <li>Huawei’s scanner: <a href="https://developer.huawei.com/consumer/en/hms/huawei-scankit/" target="_blank" rel="noopener">Huawei Scan Kit</a> 2.15.0.301, photo mode; on the same image.</li> |
| <li>Android Settings’ scanner: <a href="https://github.com/zxing/zxing/releases/tag/zxing-3.5.2" target="_blank" rel="noopener">ZXing</a> 3.5.2, called as Android’s Settings app calls it. Runs here.</li> |
| <li>WeChat’s scanner: <a href="https://docs.opencv.org/4.12.0/d5/d04/classcv_1_1wechat__qrcode_1_1WeChatQRCode.html" target="_blank" rel="noopener">WeChatQRCode</a> in OpenCV contrib 4.12, with its detector and super-resolution models (the app’s own build may differ). Runs here.</li> |
| <li><a href="https://github.com/zxing-cpp/zxing-cpp/releases/tag/v3.1.1" target="_blank" rel="noopener">zxing-cpp</a> 3.1.1, library defaults. Runs here.</li> |
| <li>OpenCV’s newer and original detectors: <a href="https://docs.opencv.org/4.12.0/d3/db0/classcv_1_1QRCodeDetectorAruco.html" target="_blank" rel="noopener">QRCodeDetectorAruco</a> and <a href="https://docs.opencv.org/4.12.0/de/dc3/classcv_1_1QRCodeDetector.html" target="_blank" rel="noopener">QRCodeDetector</a>, OpenCV 4.12, single-code reading. Both run here.</li> |
| </ul> |
| <h3>The codes</h3> |
| <ul> |
| <li>Made for the measurement, with made-up content: clean, everyday and tough prints, published as <a href="https://huggingface.co/datasets/devmandan/qr-scan-difficulty" target="_blank" rel="noopener">QR Scan Difficulty: synthetic codes</a>; CC BY 4.0.</li> |
| <li><a href="https://huggingface.co/datasets/devmandan/boofcv-qr-singles" target="_blank" rel="noopener">BoofCV QR singles</a>: Peter Abeles’ BoofCV QR Code Performance Benchmark photos, published openly without an explicit licence grant.</li> |
| <li><a href="https://huggingface.co/datasets/devmandan/qr-dn1.0" target="_blank" rel="noopener">QR-DN1.0</a>: clean and distorted codes; CC BY 4.0 (Mendeley Data, doi:10.17632/t2bdr663ms.2).</li> |
| <li><a href="https://huggingface.co/datasets/devmandan/syn10k-huawei-barcodes" target="_blank" rel="noopener">syn10k</a>: Bodnár, Grósz and Tóth’s computer-made warped codes; CC BY 4.0.</li> |
| <li><a href="https://huggingface.co/datasets/devmandan/broken-qr-codes-104" target="_blank" rel="noopener">Broken QR 104</a>: real codes that fail, collected from public web sources; annotations CC BY 4.0.</li> |
| </ul> |
| <p>Pictures from the research sets are cropped and resized from their datasets; to have one removed, open a discussion on its dataset page.</p> |
| <p class="fine">Independent work, not affiliated with or endorsed by Apple, Google, Huawei, Tencent or DENSO WAVE, nor by the open-source projects and dataset authors credited here. QR Code is a registered trademark of DENSO WAVE INCORPORATED. Apple and iPhone are trademarks of Apple Inc.; Android, Google Play and Pixel of Google LLC; Huawei of Huawei Technologies Co., Ltd.; WeChat of Tencent. Other names are trademarks of their owners.</p> |
| </div> |
| </details> |
| </footer> |
|
|
| <div class="tooltip" id="tip" hidden></div> |
| <div class="drop" id="drop" hidden><p>Drop to read</p></div> |
| </main> |
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
