diff --git a/css/style.css b/css/style.css index d605de1..0079f5c 100644 --- a/css/style.css +++ b/css/style.css @@ -78,6 +78,13 @@ ul {list-style: none;} z-index: 999; } + +.header div#header-menu { + display: block; + min-width: 600px; + overflow: auto; +} + .header .icon { width: 40px; height: auto; diff --git a/help/getting-started/about-qr-code.html b/help/getting-started/about-qr-code.html index 62825eb..5c35d1a 100644 --- a/help/getting-started/about-qr-code.html +++ b/help/getting-started/about-qr-code.html @@ -43,7 +43,7 @@

About QR Code


QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data. (Wikipedia)

-

The QR code format was created in 1994 by Japanese company Denso-Wave, which is a subsidiary of Toyota that manufactures auto components. The standard is defined in ISO/IEC 18004:2006. The use of QR codes is license-free. (thonky.org)

+

The QR code format was created in 1994 by Japanese company Denso-Wave, which is a subsidiary of Toyota that manufactures auto components. The standard is defined in ISO/IEC 18004:2006. The use of QR codes is license-free. (thonky.com)


QR Code Versions


diff --git a/help/getting-started/index.html b/help/getting-started/index.html index 46aa594..449c10a 100644 --- a/help/getting-started/index.html +++ b/help/getting-started/index.html @@ -43,7 +43,7 @@

Getting Started


-

Before start using QRazyBox, I assumes that you already have basic knowledge about QR Code such as data encoding, the structure, and error correction. If not, I recommend to read a wonderful tutorial from thonky.org that'll covers how to generating QR Code step by step. Though, in the next section, we will discuss a little bit about QR Code as a summary.

+

Before start using QRazyBox, I assumes that you already have basic knowledge about QR Code such as data encoding, the structure, and error correction. If not, I recommend to read a wonderful tutorial from thonky.com that'll covers how to generating QR Code step by step. Though, in the next section, we will discuss a little bit about QR Code as a summary.


Jump to :

-   About QR Code

diff --git a/help/js/index.js b/help/js/index.js index 488a6fc..39374f6 100644 --- a/help/js/index.js +++ b/help/js/index.js @@ -5,9 +5,9 @@ var search_index = [ "Introduction" ], - ["Before start using QRazyBox, I assumes that you already have basic knowledge about QR Code such as data encoding, the structure, and error correction. If not, I recommend to read a wonderful tutorial from thonky.org that'll covers how to generating QR Code step by step. Though, in the next section, we will discuss a little bit about QR Code as a summary and you just can skip it if you want. Jump to : -   About QR Code -   Interface Overview -   Create, Save, and Load Project -   Drawing and Decoding QR Code","getting-started/index.html","Getting Started"], + ["Before start using QRazyBox, I assumes that you already have basic knowledge about QR Code such as data encoding, the structure, and error correction. If not, I recommend to read a wonderful tutorial from thonky.com that'll covers how to generating QR Code step by step. Though, in the next section, we will discuss a little bit about QR Code as a summary and you just can skip it if you want. Jump to : -   About QR Code -   Interface Overview -   Create, Save, and Load Project -   Drawing and Decoding QR Code","getting-started/index.html","Getting Started"], - ['QR code (abbreviated from Quick Response Code ) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data. (Wikipedia) The QR code format was created in 1994 by Japanese company Denso-Wave, which is a subsidiary of Toyota that manufactures auto components. The standard is defined in ISO/IEC 18004:2006. The use of QR codes is license-free. (thonky.org) Keep in mind, that in this section, we\'ll only discuss a summary about QR Code standards. If you want to learn QR Code in detail, you can visit a page that I recommend you before in previous section. QR Code Versions The size of QR Code is called version . Version of QR Code range from version 1 (21x21 pixels) up to version 40 (177x177 pixels) . These versions is defined by how much data that stored in the QR Code. So, the larger the data stored, the larger the version will be. *Pixel in QR Code is often also called Module . Error Correction QR Code also has error correction feature, that will automatically restore the data if some of them are damaged or unreadable. This error correction scheme use Reed-Solomon Error Correction algorithm that consists of 4 correction levels: Low (L) , Medium (M) , Quartile (Q) , and High (H) , where each of the level has its own capability of how much the data can be restored. Error-Correction Level % of data that can be restored Level L ± 7% Level M ± 15% Level Q ± 25% Level H ± 30% (The table above show the capabilty of each Error-Correction level) Structure of QR Code QR Code always consist of three things, Function pattern , Format & Version Information Pattern , and Data Bits .Function Pattern is a non-data element of the QR Code that is required by the QR Code specification.Format & Version Information Pattern are pattern that describe current specification that being used by QR Code such as Version, Error correction level, and Mask Pattern. And Data Bits itself is an actual data that encoded in the QR Code.Function pattern often also called Fixed Pattern because their form never changed, but only their position that will change depending on the QR Code version. (The image above explains about QR Code structure) Format and Version Information As explained in previous part, Format and Version Information are patterns in QR Code that tell about current specification that being used by QR code. Format information is always exist in every version of QR code, but Version information only exist in version 7 or above.Format information consist of 15 bits data that store information about error correction and mask pattern that being used by QR code.Thereafter, Version information consist of 18 bits data that store information about QR code version.Because until now, QRazyBox only support up to version 6 QR code, so we will ignore about version information for now. (The image above explain about how Format information store error correction level and mask pattern) The placement of these pattern are shared into 3 places (for Format info) and 2 places (for Version info). Those placement can be see in the image in the previous part that explains QR code structure. We will discuss about Mask Pattern in the last part of this section. Data Bits Layout Data bits is sequence of modules that contained blocks of encoded message and blocks of reed-solomon that will be used as error corrector later. The encoded message itself, is arranged from: Mode Indicator , Character Count Indicator , and main message itself . Mode indicator is encoding mode codeword (4 bits) that being used to encode the message to binary form. As explained before that QR code has 4 modes for encodes text: Numeric , Alphanumeric , Byte , and Kanji .Character count indicator is a number that tell the length of message. It is possible to use multiple modes in a single QR code by including the mode indicator before each section of bytes that uses that mode. Data bits are placed in QR code from right to left in a zigzag pattern and form a snake flow.The order is : Mode Indicator ⇒ Character Count Indicator ⇒ Main message ⇒ Error correction (reed-solomon block) (Example of data bits placement process, encoding text "www.wikipedia.org") But, pay attention that for larger QR code, data blocks must be interleaved and broken into smaller blocks according to the version and error correction level that being used. The Image below explain process of placing interleaved data blocks. Mask Pattern Before QR code is finally generated, the data bits must be XOR -ed with mask pattern. There are 8 mask pattern that available in QR code, namely mask pattern 0 to 7 (or 000 to 111 in binary). This process have a purpose of making QR code more readable by QR scanner. (Eight mask patterns) (The process of data masking) References : https://en.wikipedia.org/wiki/QR_code http://www.thonky.com/qr-code-tutorial http://www.qrcode.com',"getting-started/about-qr-code.html","About QR Code" + ['QR code (abbreviated from Quick Response Code ) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data. (Wikipedia) The QR code format was created in 1994 by Japanese company Denso-Wave, which is a subsidiary of Toyota that manufactures auto components. The standard is defined in ISO/IEC 18004:2006. The use of QR codes is license-free. (thonky.com) Keep in mind, that in this section, we\'ll only discuss a summary about QR Code standards. If you want to learn QR Code in detail, you can visit a page that I recommend you before in previous section. QR Code Versions The size of QR Code is called version . Version of QR Code range from version 1 (21x21 pixels) up to version 40 (177x177 pixels) . These versions is defined by how much data that stored in the QR Code. So, the larger the data stored, the larger the version will be. *Pixel in QR Code is often also called Module . Error Correction QR Code also has error correction feature, that will automatically restore the data if some of them are damaged or unreadable. This error correction scheme use Reed-Solomon Error Correction algorithm that consists of 4 correction levels: Low (L) , Medium (M) , Quartile (Q) , and High (H) , where each of the level has its own capability of how much the data can be restored. Error-Correction Level % of data that can be restored Level L ± 7% Level M ± 15% Level Q ± 25% Level H ± 30% (The table above show the capabilty of each Error-Correction level) Structure of QR Code QR Code always consist of three things, Function pattern , Format & Version Information Pattern , and Data Bits .Function Pattern is a non-data element of the QR Code that is required by the QR Code specification.Format & Version Information Pattern are pattern that describe current specification that being used by QR Code such as Version, Error correction level, and Mask Pattern. And Data Bits itself is an actual data that encoded in the QR Code.Function pattern often also called Fixed Pattern because their form never changed, but only their position that will change depending on the QR Code version. (The image above explains about QR Code structure) Format and Version Information As explained in previous part, Format and Version Information are patterns in QR Code that tell about current specification that being used by QR code. Format information is always exist in every version of QR code, but Version information only exist in version 7 or above.Format information consist of 15 bits data that store information about error correction and mask pattern that being used by QR code.Thereafter, Version information consist of 18 bits data that store information about QR code version.Because until now, QRazyBox only support up to version 6 QR code, so we will ignore about version information for now. (The image above explain about how Format information store error correction level and mask pattern) The placement of these pattern are shared into 3 places (for Format info) and 2 places (for Version info). Those placement can be see in the image in the previous part that explains QR code structure. We will discuss about Mask Pattern in the last part of this section. Data Bits Layout Data bits is sequence of modules that contained blocks of encoded message and blocks of reed-solomon that will be used as error corrector later. The encoded message itself, is arranged from: Mode Indicator , Character Count Indicator , and main message itself . Mode indicator is encoding mode codeword (4 bits) that being used to encode the message to binary form. As explained before that QR code has 4 modes for encodes text: Numeric , Alphanumeric , Byte , and Kanji .Character count indicator is a number that tell the length of message. It is possible to use multiple modes in a single QR code by including the mode indicator before each section of bytes that uses that mode. Data bits are placed in QR code from right to left in a zigzag pattern and form a snake flow.The order is : Mode Indicator ⇒ Character Count Indicator ⇒ Main message ⇒ Error correction (reed-solomon block) (Example of data bits placement process, encoding text "www.wikipedia.org") But, pay attention that for larger QR code, data blocks must be interleaved and broken into smaller blocks according to the version and error correction level that being used. The Image below explain process of placing interleaved data blocks. Mask Pattern Before QR code is finally generated, the data bits must be XOR -ed with mask pattern. There are 8 mask pattern that available in QR code, namely mask pattern 0 to 7 (or 000 to 111 in binary). This process have a purpose of making QR code more readable by QR scanner. (Eight mask patterns) (The process of data masking) References : https://en.wikipedia.org/wiki/QR_code http://www.thonky.com/qr-code-tutorial http://www.qrcode.com',"getting-started/about-qr-code.html","About QR Code" ], ["Create, Save, and Load Project Create, save, and load project can be done through main menu in the header. Create New Project There are two ways to create new project. First, quickly create a blank QR code with template that ready to use. Therefore, you don't need to draw the Function pattern. The second is, you can import it from image file and QRazyBox will try to convert it to bitmatrix array. But, keep in mind that when you importing new project from image file, there are conditions that should be met besides that the image must contains valid QR code. Those conditions are, the loaded image must contain three Finder patterns and Alignment pattern according to the QR version. When you fail in importing an image, unfortunately you should reconstruct manually. Last, when you importing an image, QRazyBox only accept black and white colors, other than those colors will be transformed to black or white depending on its grayscale value, so you should change it manually when you want to mark it as damaged part of QR code.Save and Load Project QRazyBox use HTML5 Local Storage to store all of your project data. Therefore, if you change to the different new browser, you can't use your saved project from the previous browser.Be careful when you save a project with name that already exist, since it will overwrite the older project. You can delete your saved project by clicking cross mark ( x ) in the save or load dialog menu.","getting-started/create-save-load-project.html","Create, Save, and Load Project" @@ -47,5 +47,7 @@ var search_index = [ ["Basic Example In this example, we are going to recover the following QR code. Of course, we cannot scan it normally, because it lost too much modules including Finder and Alignment pattern.The first step is to reconstruct it with Painter manually (we cannot import it as image since its Finder and Alignment pattern are missing). (Reconstructed QR code using Painter) The next step is to set the Format Info Pattern. Because the known modules of format info pattern only located in top right corner, the easiest way to reconstruct it is to try the pattern one by one and check whether it's match or not. (The most suitable pattern is ECC level M and Mask pattern 1) Now we have reconstructed QR code in our Editor and the missing Finder along with Alignment pattern are recovered. Still, we can't decode it using normal Decoder because it's to much damaged for Error level M to be corrected. So, we should recover more modules of this QR code.The next step, analyze the QR code using Extract QR Information . Using that tool, give us the following result. We got the decoded message, but it rather unreadable and seems broken. We can ignore that for a moment.Pay attention to the Number of missing bytes . It said that our QR code have 39 bytes of its data missing. Meanwhile, to correcting Erasure with Reed-Solomon, the maximum number of missing bytes in ECC level M version 3 should be about 26 . Therefore, we should recover some modules until the missing bytes are dropped about 26 bytes or less. The next step, we will try recover padding bits using Padding Bits Recovery .Luckily, our padding bits in this QR code was quite big and we successfully recovered almost half of the damaged parts.Checking again with Extract QR Information , we dropped number of missing bytes to 25 bytes (35.71%) . Also, the final part of messsage become more readable than before ( EVERYTHING from EVERYTHIMY ).QR code version 3 with ECC level M have 26 of the ECC symbol, and since our number of missing bytes is 25, we can apply Erasure correction to the current QR code (remember from previous section that we can correct Errors half of the ECC symbol and Erasures as many as the ECC symbol ).Using Reed-Solomon Decoder , we successfully recover the message. And finally, we got the final message : \"YOU CAN DO ANYTHING BUT NOT EVERYTHING\" . *This example concept inspired from MMA CTF 2015 challenge and the solving concept from https://github.com/pwning/public-writeup/blob/master/mma2015/misc400-qr/writeup.md","examples/basic-example.html","Basic Example"], - ["Here are some sample of QR code that can be used to practice using QRazyBox. Access to /sample directory if you run this on computer locally to quickly browse these samples.","misc/qr-code-samples.html","QR Code Samples"] + ["Here are some sample of QR code that can be used to practice using QRazyBox. Access to /sample directory if you run this on computer locally to quickly browse these samples.","misc/qr-code-samples.html","QR Code Samples"], + + ["This is list of shortcut keys that can be used as alternate way to do various commands. Q   : Black color palette W   : White color palette E   : Grey color palette G   : Toggle flood fill -   : Zoom out (-5px module size) =   : Zoom in (+5px module size) Z   : Undo (move to previous history) X   : Redo (move to next history) TAB   : Switch working mode","misc/shortcut-keys.html","Shortcut Keys"] ]; \ No newline at end of file diff --git a/js/main.js b/js/main.js index 3af5f94..111ecac 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,5 @@ -var VERSION = '0.1.19'; +var VERSION = '0.1.20'; var qr_version = 1; var qr_pixel_size = 15;