{"id":52,"date":"2019-12-30T22:53:20","date_gmt":"2019-12-30T21:53:20","guid":{"rendered":"http:\/\/stuff.frankdux.de\/?p=52"},"modified":"2022-11-14T17:49:22","modified_gmt":"2022-11-14T16:49:22","slug":"playing-around-with-qr-codes","status":"publish","type":"post","link":"https:\/\/stuff.frankdux.de\/?p=52","title":{"rendered":"Playing around with QR codes"},"content":{"rendered":"\n<p>Almost all smartphones have a built-in QR-code reader meanwhile (inside the camera), or at least a good QR code reader can be installed (e.g. <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=la.droid.qr\">QR Droid<\/a> for Android).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use a QR code to link to a manual<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/qrcodesample.png\" alt=\"Sample QR code\" class=\"wp-image-54\" width=\"128\" height=\"128\" srcset=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/qrcodesample.png 300w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/qrcodesample-150x150.png 150w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><figcaption>Sample QR code<\/figcaption><\/figure><\/div>\n\n\n\n<p>Besides using QR codes in marketing and advertisement, you can use them as information stores, for example for manuals or reference documents.<\/p>\n\n\n\n<p>I use them as follows: For new technical devices, I either scan the paper manual or search for an electronic PDF version on the web.<\/p>\n\n\n\n<p>I transfer this PDF document to my own webspace. You may as well save it on Google drive and share it (i.e. create a unique link to it). In the end you need to have a unique URL pointing to the document.<\/p>\n\n\n\n<p>Then I create a QR code from this URL, e.g. on <a href=\"https:\/\/www.qr-code-generator.com\/how-to-create-a-qr-code\/\">this site<\/a>.<\/p>\n\n\n\n<p>I print this QR code, cut it out and physically attach it to the device&#8230;<br>Now, each time you need to look up the manual of a device, just scan it! <\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"alignleft size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230250-300x225.jpg\" alt=\"\" class=\"wp-image-57\" width=\"262\" height=\"197\" srcset=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230250-300x225.jpg 300w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230250-1024x768.jpg 1024w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230250-768x576.jpg 768w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230250-1536x1152.jpg 1536w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230250-2048x1536.jpg 2048w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"alignright size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230132-1-300x225.jpg\" alt=\"\" class=\"wp-image-60\" width=\"249\" height=\"187\" srcset=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230132-1-300x225.jpg 300w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230132-1-1024x768.jpg 1024w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230132-1-768x576.jpg 768w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230132-1-1536x1152.jpg 1536w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2019\/12\/20191230_230132-1-2048x1536.jpg 2048w\" sizes=\"auto, (max-width: 249px) 100vw, 249px\" \/><\/figure><\/div>\n\n\n\n<p> <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Update November 2022:<\/h2>\n\n\n\n<p>Things have just gotten better! I created a website <a href=\"https:\/\/99q.eu\/\">99q.eu<\/a> which creates a simple website for you &#8211; within ten seconds, all for free! You have a unique URL which holds your contact data, event data, links to other sites etc. It also automatically generates a QR code for you which points to your site.<\/p>\n\n\n\n<p>Then I use a small label printer (the PRT Qutie) to print the QR codes on a small sticker (<a href=\"https:\/\/amzn.to\/3EsvYiW\" data-type=\"URL\" data-id=\"https:\/\/amzn.to\/3EsvYiW\">buy it on Amazon<\/a>).<\/p>\n\n\n\n<p>See the examples on <a href=\"https:\/\/99q.eu\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/99q.eu\/<\/a> how this could look like.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use a QR code to move an active session to a mobile phone<\/h2>\n\n\n\n<p>There&#8217;s also another usage scenario: Besides advertising your website with QR codes on printed paper\/stickers\/leaflets etc, you can use a QR code to transfer a session (of one of your websites)  from a desktop browser to a mobile browser, by encoding the session data. Look at my site mandankt.de for an example (this site is in German, but the generated pages can be in English): <a href=\"https:\/\/www.mandankt.de\/l.php?l=A3hIpKIPhDviXQhoItNg9C82J0AAwsMu\">https:\/\/www.mandankt.de\/l.php?l=A3hIpKIPhDviXQhoItNg9C82J0AAwsMu<\/a><\/p>\n\n\n\n<p>Look at it on a desktop or tablet browser &#8211; you&#8217;ll see a QR code on the bottom right. Scan this code with your mobile phone, and you&#8217;ll have the same (dynamically created) site on your phone, because the URL contains a static session ID.<\/p>\n\n\n\n<p>Such a QR code needs to be programmatically created, via an API. I used the <a href=\"http:\/\/phpqrcode.sourceforge.net\/\">PHP QR Code library<\/a> for that. <\/p>\n\n\n\n<p>At first, you need to find out if the user is browsing from a mobile. There are good PHP libraries out there, but a simple approach is this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$isMobile = false;\n$useragent=$_SERVER&#91;'HTTP_USER_AGENT'];\nif(preg_match('\/(android|bb\\d+|meego).+mobile|avantgo|bada\\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino\/i',$useragent)||preg_match('\/1207|6310|6590|3gso|4thp|50&#91;1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez(&#91;4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\\/(k|l|u)|50|54|\\-&#91;a-w])|libw|lynx|m1\\-w|m3ga|m50\\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10&#91;0-2]|n20&#91;2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-(&#91;1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-&#91;2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5&#91;0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-\/i',substr($useragent,0,4))) {$isMobile = true;}<\/code><\/pre>\n\n\n\n<p>Then create a QR code which contains the full URL, and position it on your site. For good measure, we also embed the logo of our site into the QR code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (!$isMobile) {\n\n\/\/html PNG location prefix\n$PNG_PAGES_WEB_DIR = 'QRCodes\/transfer\/';\n\/\/of course we need rights to create temp dir\nif (!file_exists($PNG_TEMP_DIR)) mkdir($PNG_TEMP_DIR);\n\n$filename = $PNG_TEMP_DIR.'test.png'; \n$totallink = ### \/\/ this should be the URL of your site, including session ID\n\t\n$errorCorrectionLevel = \"M\"; # L, M, Q, H\n$matrixPointSizelowres = 3;\n\n$width = '150';\n$height = '150';\ndefine('IMAGE_WIDTH',$width);\ndefine('IMAGE_HEIGHT',$height);\n\/\/ now create a QR-code with the link to the created page\n$codeContents  = $totallink . \"\\n\";\n$linkfilename = $PNG_TEMP_DIR.'transfer\/pg'.$uniquelink.'.png';\nQRcode::png($codeContents, $linkfilename, $errorCorrectionLevel, $matrixPointSizelowres,2);    \n\n$logopath = 'images\/YOURLOGO.png';\n\/\/ Start DRAWING LOGO IN QRCODE - based on http:\/\/ourcodeworld.com\/articles\/read\/225\/how-to-generate-qr-code-with-logo-easily-in-php-automatically\n$QR = imagecreatefrompng($linkfilename);\n\n\/\/ START TO DRAW THE IMAGE ON THE QR CODE\n$logo = imagecreatefromstring(file_get_contents($logopath));\n\/\/  Fix for the transparent background\nimagecolortransparent($logo , imagecolorallocatealpha($logo , 0, 0, 0, 127));\nimagealphablending($logo , false);\nimagesavealpha($logo , true);\n\n$QR_width = imagesx($QR);\n$QR_height = imagesy($QR);\n\n$logo_width = imagesx($logo);\n$logo_height = imagesy($logo);\n\n\/\/ Scale logo to fit in the QR Code\n$logo_qr_width = $QR_width\/5;\n$scale = $logo_width\/$logo_qr_width;\n$logo_qr_height = $logo_height\/$scale;\n\nimagecopyresampled($QR, $logo, $QR_width\/5*4, $QR_height\/5*4, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height);\n\n\/\/ Save QR code again, but with logo on it\n\/\/ now you have the QR code with logo in imagepng($QR,$linkfilename) - position it somewhere on your website\n\n}<\/code><\/pre>\n\n\n\n<p>The result could look like this:<\/p>\n\n\n\n<div class=\"wp-block-group has-very-light-gray-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"345\" src=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2020\/01\/grafik-1024x345.png\" alt=\"screenshot from mandankt.de\" class=\"wp-image-98\" '=\"\" srcset=\"https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2020\/01\/grafik-1024x345.png 1024w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2020\/01\/grafik-300x101.png 300w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2020\/01\/grafik-768x259.png 768w, https:\/\/stuff.frankdux.de\/wp-content\/uploads\/2020\/01\/grafik.png 1146w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Almost all smartphones have a built-in QR-code reader meanwhile (inside the camera), or at least a good QR code reader can be installed (e.g. QR Droid for Android). Use a QR code to link to a manual Besides using QR codes in marketing and advertisement, you can use them as information stores, for example for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[6],"class_list":["post-52","post","type-post","status-publish","format-standard","hentry","category-varioustechstuff","tag-php"],"_links":{"self":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":19,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions\/213"}],"wp:attachment":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}