.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============= EXT: QR-Codes ============= :Author: Christopher :Created: 2010-12-18T19:57:23 :Changed: 2015-11-14T21:13:03.630000000 :Classification: cbqrcodes :Description: The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ---- :Keywords: qr code, qr-code, qrcode, tt_address, vcard :Author: Christian Brinkert :Email: christianbrinkert@googlemail.com :Language: en .. _img-1-img-2-EXT-QR-Codes: |img-1| |img-2| EXT: QR-Codes ============================= Extension Key: cbqrcodes Language: en Version: 3.1.0 Keywords: qr code, qr-code, qrcode, tt\_address, vcard Copyright 2006-2015, Christian Brinkert, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- **`EXT: QR-Codes 1 <#__RefHeading__5708_1738894311>`_** **`Introduction 3 <#__RefHeading__5710_1738894311>`_** `What does it do? 3 <#__RefHeading__463_413120346>`_ `Screenshots 3 <#__RefHeading__465_413120346>`_ **`Installation 5 <#__RefHeading__31507_818911409>`_** **`Users manual 6 <#__RefHeading__467_413120346>`_** `Insert QR-Code as frontend-plugin 6 <#__RefHeading__2840_21500211>`_ `Insert QR-Code as tt\_address marker 8 <#__RefHeading__2842_21500211>`_ `Insert QR-Code by TypoScript 8 <#__RefHeading__2941_21500211>`_ **`Configuration 10 <#__RefHeading__31511_818911409>`_** `Configuration to frontend-plugin usage 10 <#__RefHeading__3286_21500211>`_ `Configuration to tt\_address usage 10 <#__RefHeading__3163_21500211>`_ `Configuration by typoscript usage/integration 14 <#__RefHeading__3288_21500211>`_ **`Known problems 15 <#__RefHeading__31525_818911409>`_** **`To-Do list 16 <#__RefHeading__477_413120346>`_** **`ChangeLog 17 <#__RefHeading__31623_818911409>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This “CB QR-Code” extension adds the functionality to create individual QR-Codes, based on - a simple string - a phone number - an email address - a website address (url) - the current website - an address in vCard–format - or an appointment to your frontend in a simple and quick way. QR-Codes can be included as a simple **frontend-plugin** , by **typoscript** or as an additional **marker to your tt\_address template** ! .. _Screenshots: Screenshots ^^^^^^^^^^^ Here you see what the extension does: |img-3| a typical QR-Code, which will be published to the frontend view. And here you see in the backend view why the extension does this: |img-4| Here we have selected “URL” as type of QR-Code and insert the desired URL. |img-5| Furthermore we can adjust appearance of the QR-Code. Options to set the pixel and border size, enabling border and the level of error correction are also available. .. _Installation: Installation ------------ The installation of this extensions follows the typical workflow of the most extensions: - First install the extension from the extension repository, by searching for the extension key “cbqrcodes” - Include static templates to your template: - Select the **template** module to the left side in the backend - choose the **root page** in the page-tree, where the root template is located - click “ **Edit the whole template record** ” and - select the tab “Includes” and add the “ **QR-Code (cbqrcodes)** ” to the selected items. (see following screenshot) |img-6| - after saving this template you have finished the installation. - Finished! **NOTE:** If you would like to include QR-Codes to your tt\_address templates, you have to install the tt\_address extension too! See manual of tt\_address for further installation informations. .. _Users-manual: Users manual ------------ This extension provides the possibility to publish QR-Codes to your frontend view. QR-Codes could be specified as simple text, url, phone numbers, email addresses, link to the current page or contact data in vcard format. In the backend QR-Codes can be inserted as - a **frontend-plugin** , - by **typoscript** configuration - or as **marker to a tt\_address template** . .. _Insert-QR-Code-as-frontend-plugin: Insert QR-Code as frontend-plugin ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you would like to include a QR-Code by frontend-plugin, just insert a new content element to the desired page and position, choose: “Insert Plugin” as type of content element. |img-7| Define QR-Code content """""""""""""""""""""" Select “QR-Code” as “Selected Plugin” on the “Plugin” tab. |img-8| Now insert the desired informations you would like to store as QR- Code. The following fields are supported to each QR-Code type: .. _Text: **Text** ~~~~~~~~ free text input .. _URL: **URL** ~~~~~~~ complete website URL, please include the protocol prefix also, f.e. “http://”. Most smartphones app will provide a button to directly open the qr-code-(d) url .. _Phone: **Phone** ~~~~~~~~~ phone number, smartphone will offer a button to make a call .. _eMail: **eMail** ~~~~~~~~~ eMail address, smartphones will offer a button to write a mail .. _current-page: **current page** ~~~~~~~~~~~~~~~~ not further configuration data are necessary .. _vCard: **vCard** ~~~~~~~~~ first name, middle name, last name, title, birthday, company, description, image, street, zip, city, region, country, phone, fax, mobile, email, website. After scanning the smartphone offers a button to make a call, write an email or import vcard data as new contact (depends on the used app). .. _Appointment-vEvent: **Appointment / vEvent** ~~~~~~~~~~~~~~~~~~~~~~~~ title, event start and event ending date and time, location and description .. _Specify-the-QR-Code-layout: Specify the QR-Code layout """""""""""""""""""""""""" After selecting the type and data, set prefered layout settings to your QR-Code on the tab “QR-Code Layout” finaly. |img-9| Size of each data pixel: ~~~~~~~~~~~~~~~~~~~~~~~~ Set the size of each data pixel in pixel, default: 2 .. _Enable-border: Enable border? ~~~~~~~~~~~~~~ Activate this option, if a border should be set around the QR-Code. This could increase recognition while scanning the code. Default: TRUE .. _Border-width-as-factor: Border width as factor ~~~~~~~~~~~~~~~~~~~~~~ The border width will be defined as a factor to the data pixel size, the default of 2 means a resulting border width of 4 pixel (2 x 2). .. _Type-of-error-correction: Type of error correction ~~~~~~~~~~~~~~~~~~~~~~~~ QR-Code includes the function of error correction, which means that some data are redundant stored in the grafic, by default approximatly 7%. If you like you can increase the error correction level up to 30%, which means that 30% of the resulting QR-Code graphic could be destroyed until it can't be recognized. .. _Insert-QR-Code-as-tt-address-marker: Insert QR-Code as tt\_address marker ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The combination of this extension and tt\_address makes it obviously to export contact data to vCard formated QR-Codes. Therefore two new markers will be available to your tt\_address templates. After installation of this extension your can directly use the following two markers in your tt\_address templates, if your typoscript template definitions based on the default template and inherits to your individual definitions! :: ###CBQRCODE#### // will be substituted with an IMAGE TS-object and ###CBQRCODEURI### // will be substituted with an IMG_RESOURCE object .. _Insert-QR-Code-by-TypoScript: Insert QR-Code by TypoScript ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ There are two typoscript objects available for publishing and linking QR-Codes to your frontend. To include the QR-Code image directly import the following typoscript: :: lib.myQrCode < plugin.tx_cbqrcodes_pi1.qrCodeImageByTS “ **lib.myQrCode.userFunc.qrCodeString” is a TEXT content object** and can be filled with various contents, f.e. to publish static text: :: lib.myQrCode.userFunc.qrCodeString.value = Hello World or to publish the current date :: lib.myQrCode.userFunc.qrCodeString.data = date:d.m.Y or to publish title of a specific page :: lib.myQrCode.userFunc.qrCodeString.data = DB:pages:255:title or to publish a link to the current page :: lib.myQrCode.userFunc.qrCodeString.typolink{ parameter.data = TSFE:id returnLast = url forceAbsoluteUrl = 1 forceAbsoluteUrl.scheme = http } The previous examples will include the QR-Code as an IMAGE object. If your like to use an IMG\_RESOURCE just use: :: lib.myQrCode < plugin.tx_cbqrcodes_pi1.qrCodeImageByTS Examples to insert content are the same as above. That all, for configuration see next chapter. .. _Configuration: Configuration ------------- There are different ways to configure the extension but it depends to the type in which the QR-Code should be published. .. _Configuration-to-frontend-plugin-usage: Configuration to frontend-plugin usage ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If the QR-Code extension will be insert as a frontend plugin the whole configuration will be done in the backend on the tab “QR-Code Layout” |img-9| Configuration to tt\_address usage ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Let's have a look to the configuration if QR-Code will be used as tt\_address marker. It can be conducted by constant editor or by typoscript. .. _Configuration-by-constant-editor: Configuration by constant editor """""""""""""""""""""""""""""""" The most options be set comfortable in the constant editor. Only some values are shown in the following screenshot: |img-10| Available options are described in the typoscript configuration chapter .. _Configuration-by-typoscript: **Configuration by typoscript** """"""""""""""""""""""""""""""" This extensions extends the tt\_address typoscript branch with some additional definitions you can use to customize the layout and appearance of the QR-Code. :: plugin.tx_ttaddress_pi1.template.default{ cbqrcodes.vcard{ // … additional typoscript, see typoscript browser or following chapter } } *If no QR-Code will be displayed in your frontend, make sure that this typoscript branch exists in your template definition!* .. _Layout-Configuration: Layout Configuration """""""""""""""""""" This extensions extends the tt\_address typoscript branch with some definitions by which you can customize the layout and appearance of the QR-Code. The following options could be set to the following typoscript branch: :: plugin.tx_ttaddress_pi1.template.default.cbqrcodes.vcard{ errorCorrection = L pixelSize = 2 enableBorder = 1 borderSize = 2 } .. ### BEGIN~OF~TABLE ### .. _errorCorrection: errorCorrection ~~~~~~~~~~~~~~~ .. container:: table-row Property errorCorrection Data type L,M,Q,H Description Set the level of error corrention. L = lowest, H = highest. But keep in mind, the higher the error correction the larger the image Default L .. _pixelSize: pixelSize ~~~~~~~~~ .. container:: table-row Property pixelSize Data type integer Description Size of each data pixel (in pixel) Default 2 .. _enableBorder: enableBorder ~~~~~~~~~~~~ .. container:: table-row Property enableBorder Data type boolean Description If set, the QR-Code will be surrounded by an white border. A border can increases the recognition of the QR-Code Default true .. _borderSize: borderSize ~~~~~~~~~~ .. container:: table-row Property borderSize Data type integer Description Size of the border. Defined as a factor of the peviously defined data pixel Default 2 .. ###### END~OF~TABLE ###### This configuration can even be done comfortable in the constant editor. .. _Limit-QR-Code-fields: Limit QR-Code fields """""""""""""""""""" You can configure which fields should be exported to the QR-Code, so not all and even unnecessary fields will not be published. :: plugin.tx_ttaddress_pi1.template.default.cbqrcodes.vcard.enableFields{ organisation = 1 description = 1 phone = 1 fax = 1 cell = 1 email = 1 image = 1 birthday = 1 url = 1 } .. ### BEGIN~OF~TABLE ### .. _organisation: organisation ~~~~~~~~~~~~ .. container:: table-row Property organisation Data type boolean Description company name Default 1 .. _description: description ~~~~~~~~~~~ .. container:: table-row Property description Data type boolean Description role Default 1 .. _phone: phone ~~~~~ .. container:: table-row Property phone Data type boolean Description phone number Default 1 .. _fax: fax ~~~ .. container:: table-row Property fax Data type boolean Description fax number Default 1 .. _cell: cell ~~~~ .. container:: table-row Property cell Data type boolean Description Cellular phone number Default 1 .. _email: email ~~~~~ .. container:: table-row Property email Data type boolean Description Email address Default 1 .. _image: image ~~~~~ .. container:: table-row Property image Data type boolean Description Image, only a url to the image will be stored in the qr-code. The image will be assume 64 x 64 pixel by default. @see following chapter Default 1 .. _birthday: birthday ~~~~~~~~ .. container:: table-row Property birthday Data type boolean Description Birthday, date Default 1 .. _url: url ~~~ .. container:: table-row Property url Data type boolean Description Website url Default 1 .. ###### END~OF~TABLE ###### This configuration to the fields can even be done more comfortable in the constant editor. .. _Vcard-Image-configuration: Vcard Image configuration """"""""""""""""""""""""" The previously named option to include an contact image resource to the QR-Code vCard based on the typoscript object: IMG\_RESOURCE, so it can be configured with known options. :: plugin.tx_ttaddress_pi1.template.default.cbqrcodes.vcard.photo = IMG_RESOURCE plugin.tx_ttaddress_pi1.template.default.cbqrcodes.vcard.photo{ file = GIFBUILDER file{ 10 = IMAGE 10.file.width = 64 10.offset = 0,64-[10.h]/2 XY = 64,64 format = jpg quality = 90 } } .. _vCard-field-types: vCard field types """"""""""""""""" vCard fields can be specified with additional attributes, for example: phone numbers can even be private, mobile or designated to work – this should be specified as additional information and can be done by typoscript or even comfortable in the constant editor. :: plugin.tx_ttaddress_pi1.template.default.cbqrcodes.vcard.fieldTypes{ adrType = intl,postal,parcel,work telType = work,voice faxType = work,fax cellType = work,cell emailType = internet } .. ### BEGIN~OF~TABLE ### .. _adrType: adrType ~~~~~~~ .. container:: table-row Property adrType Data type string Description Possible values are: dom, intl, postal, pref, work, home, parcel. Default Infl, postal,parcel,work .. _telType: telType ~~~~~~~ .. container:: table-row Property telType Data type string Description Possible values are: home, msg, work, pref, cell, video, voice, pager, fax, pcs or combination of these values Default Work,voice .. _faxType: faxType ~~~~~~~ .. container:: table-row Property faxType Data type string Description Possible values are: home, msg, work, pref, cell, video, voice, pager, fax, pcs or combination of these values Default Work,fax .. _cellType: cellType ~~~~~~~~ .. container:: table-row Property cellType Data type string Description Possible values are: home, msg, work, pref, cell, video, voice, pager, fax, pcs or combination of these values Default Work,cell .. _emailType: emailType ~~~~~~~~~ .. container:: table-row Property emailType Data type string Description Possible values are: internet, pref, x400 or combination of these values Default internet .. ###### END~OF~TABLE ###### For further information see RFC 2426 .. _Configuration-by-typoscript-usage-integration: Configuration by typoscript usage/integration ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you insert QR-Codes by typoscript, you can configure the appearance in the following way and with the following parameters: :: plugin.tx_cbqrcodes_pi1.qrCodeImageByTS.userFunc{ errorCorrection = L pixelSize = 2 enableBorder = true borderSize = 2 qrCodeString = TEXT qrCodeString{ value = Hello World } } .. ### BEGIN~OF~TABLE ### .. _errorCorrection: errorCorrection """"""""""""""" .. container:: table-row Property errorCorrection Data type L,M,Q,H Description Set the level of error corrention. L = lowest, H = highest. But keep in mind, the higher the error correction the larger the image Default L .. _pixelSize: pixelSize """"""""" .. container:: table-row Property pixelSize Data type integer Description Size of each data pixel (in pixel) Default 2 .. _enableBorder: enableBorder """""""""""" .. container:: table-row Property enableBorder Data type boolean Description If set, the QR-Code will be surrounded by an white border. A border can increases the recognition of the QR-Code Default true .. _borderSize: borderSize """""""""" .. container:: table-row Property borderSize Data type integer Description Size of the border. Defined as a factor of the peviously defined data pixel Default 2 .. ###### END~OF~TABLE ###### The “qrCodeString” is a typoscript TEXT content object and all known properties can be used. For samples see chapter “Insert QR-Code by TypoScript” on page 8. .. _Known-problems: Known problems -------------- Currently no problems are known … But please have a look at the TYPO3 forge project: http://forge.typo3.org/projects/extension-cbqrcode .. _To-Do-list: To-Do list ---------- Nothing yet … \- propably: integration of qrcodes to the cal-extension as marker … .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _3-1-0: **3.1.0** ^^^^^^^^^ .. container:: table-row Version **3.1.0** Changes Compatibility update to TYPO3 version 6.2 and 7.5 LTS .. _2-0-2-2-0-5: **2.0.2 – 2.0.5** ^^^^^^^^^^^^^^^^^ .. container:: table-row Version **2.0.2 – 2.0.5** Changes Various bugfixed for usage by typoscript .. _2-0-1: 2.0.1 ^^^^^ .. container:: table-row Version 2.0.1 Changes Updated documentation, cause of missing screenshots and some errors to the text formats .. _2-0-0: 2.0.0 ^^^^^ .. container:: table-row Version 2.0.0 Changes First public release .. _1-0-0: 1.0.0 ^^^^^ .. container:: table-row Version 1.0.0 Changes No public version .. ###### END~OF~TABLE ###### .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 44 .. :id: graphics5 .. :name: graphics5 .. :vspace: 57 .. :width: 161 .. |img-2| image:: img-2.png .. :align: left .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 65 .. :id: Grafik1 .. :name: Grafik1 .. :width: 65 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 202 .. :id: Grafik2 .. :name: Grafik2 .. :width: 562 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 272 .. :id: Grafik3 .. :name: Grafik3 .. :width: 556 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 191 .. :id: Grafik4 .. :name: Grafik4 .. :width: 456 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 76 .. :id: Grafik5 .. :name: Grafik5 .. :width: 262 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 205 .. :id: Grafik6 .. :name: Grafik6 .. :width: 559 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 253 .. :id: Grafik7 .. :name: Grafik7 .. :width: 453 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 488 .. :id: Grafik8 .. :name: Grafik8 .. :width: 631