diff --git a/css/style.css b/css/style.css index 5815642..5c68b32 100644 --- a/css/style.css +++ b/css/style.css @@ -153,28 +153,28 @@ ul {list-style: none;} color: #fff; } -.side-box .toolbox { +.toolbox { background-color: #fff; border-top-right-radius: 3px; border-bottom-right-radius: 3px; float: left; } -.side-box .toolbox div { +.toolbox div { float: left; cursor: pointer; } -.side-box .toolbox div:hover { +.toolbox div:hover { background-color: #e0e0e0; } -.side-box .toolbox img { +.toolbox img { width: 29px; height: auto; } -.side-box .painter-box { +.painter-box { margin-right: 10px; padding: 0; background-color: #fff; @@ -183,25 +183,25 @@ ul {list-style: none;} float: left; } -.side-box .painter-box div { +.painter-box div { float: left; padding: 5px 10px; cursor: pointer; } -.side-box .painter-box div:hover { +.painter-box div:hover { background-color: #e0e0e0; } -.side-box .painter-box div.active { +.painter-box div.active { background-color: #455a64; } -.side-box .painter-box div.active img { +.painter-box div.active img { filter: invert(1); } -.side-box .painter-box img { +.painter-box img { width: 24px; height: auto; } @@ -253,7 +253,7 @@ ul {list-style: none;} .main { display: table; - margin: 100px auto 40px auto; + margin: 100px auto 60px auto; } .side-box button:hover { @@ -567,11 +567,14 @@ ul {list-style: none;} textarea { margin: 5px; padding: 5px; - width: 100%; + width: 400px; background-color: #fff; border: solid thin #9e9e9e; border-radius: 3px; resize: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .history { @@ -599,6 +602,74 @@ textarea { color: #000; } +.float-nav { + display: none; + position: fixed; + top: 40%; + background-color: rgba(0,0,0,0.5); + cursor: pointer; + opacity: 0.7; + z-index: 99; +} + +.float-nav:hover { + opacity: 1; +} + +.float-nav.left { + left: 0; +} + +.float-nav.right { + right: 0; +} + +.footer { + bottom: 0; + padding: 10px 0; + position: fixed; + overflow: hidden; + background-color: #4fc3f7; + width: 100%; + height: 30px; + z-index: 999; +} + +.footer .mode-indicator { + display: table; + margin: 0 auto; +} + +.footer .mode-indicator button { + float: left; + border: none; + padding: 5px 15px; + background: #FFFFFF; + color: #000000; + font-size: 16px; + cursor: pointer; +} + +.footer .mode-indicator button:hover { + background-color: #e0e0e0; +} + +.footer .mode-indicator button.active { + background-color: #455a64; + color: #ffffff; +} + +.footer .mode-indicator button:nth-child(odd) { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +.footer .mode-indicator button:nth-child(even) { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} + + .search { margin: 5px; padding: 5px 8px; @@ -623,11 +694,22 @@ textarea { width: 90%; } +.search.mobile { + width: 350px; + margin-bottom: 30px; + display: none; +} + .select { margin: 5px; font-size: 16px; } +.left-box#left-box-help { + display: block; + position: fixed; +} + .help-menu { margin-bottom: 25px; color: #03a9f4; @@ -731,4 +813,166 @@ textarea { .help table tr td, .help table tr th { border: solid thin #000; padding: 5px; +} + +.help img { + max-width: 800px; + height: auto; +} + +noscript div { + position: fixed; + top: 0; + left: 0; + z-index: 99999999999; + height: 100%; + width: 100%; + background-color: #FFFFFF; +} + +noscript div h4 { + margin-top: 100px; + color: #000000; +} + +.menu-bar { + display: none; + margin: 5px; + cursor: pointer; + width: 32px; +} + +.menu-bar:hover { + opacity: .85; +} + +.row .col { + float: left; + min-width: 200px; + overflow: auto; +} + +@media screen and (max-width: 900px) { + + #box-mode { + display: none; + } + + .left-box { + display: none; + left: -280px; + } + + .right-box { + display: none; + right: -340px; + } + + .qr-box { + padding: 0 50px; + } + + .overlay .box.large .preview-box { + width: 300px; + height: 300px; + } + + .footer { + display: block; + } + + .left-box#left-box-help { + display: none; + position: static; + width: 100%; + } + + .help-menu { + margin: 0; + } + + .help { + margin: 100px 40px 40px 40px; + } + + .help img { + max-width: 90%; + } + + .help .nav button { + margin: 10px auto; + } + + .header div#header-menu { + display: none; + margin: 0; + width: 150px; + position: fixed; + top: 60px; + right: 0; + overflow: auto; + background-color: #4fc3f7; + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); + -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); + box-shadow: 0 2px 4px rgba(0, 0, 0, .2); + } + + .menu-bar { + display: block; + } + + .float-nav { + display: block; + } + + .div-extract { + margin: 0; + width: 100%; + } + + .search { + display: none; + } + + .search.mobile { + text-align: center; + display: block; + } +} + +@media screen and (max-width: 480px) { + .title { + font-size: 52px; + } + + .overlay .box button.big, label.big { + width: 90%; + } + + .overlay .box input[type=text] { + width: 90%; + } + + textarea { + width: 90%; + webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + .search.mobile { + float: left; + width: 80%; + } +} + +@media screen and (max-width: 360px) { + .overlay .box.large .preview-box { + width: 200px; + height: 200px; + } + + .header h3 { + display: none; + } } \ No newline at end of file diff --git a/help/editor-painter/index.html b/help/editor-painter/index.html index a216509..33be813 100644 --- a/help/editor-painter/index.html +++ b/help/editor-painter/index.html @@ -9,6 +9,7 @@ + @@ -23,10 +24,11 @@ + -
+
@@ -40,6 +42,12 @@

Editor & Painter


+

This section will explain more details about using Painter and other tools in Editor mode.

+
+
Jump to :
+

-   Painter Basic Usage

+

-   Format Info Pattern

+

-   Undo/Redo using History

diff --git a/help/getting-started/about-qr-code.html b/help/getting-started/about-qr-code.html index 48b0b4c..62825eb 100644 --- a/help/getting-started/about-qr-code.html +++ b/help/getting-started/about-qr-code.html @@ -9,6 +9,7 @@ + @@ -23,10 +24,11 @@
+
-
+
@@ -42,14 +44,13 @@

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.

+

*Pixel in QR Code is 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.

@@ -80,16 +81,15 @@

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.

+

QR Code always consists 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.


- +

(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.

+ Format information consists of 15 bits data that store information about error correction and mask pattern that being used by QR code.
Thereafter, Version information consists 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.


@@ -112,7 +112,7 @@

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

diff --git a/help/getting-started/create-save-load-project.html b/help/getting-started/create-save-load-project.html index bc9d44d..d7e075b 100644 --- a/help/getting-started/create-save-load-project.html +++ b/help/getting-started/create-save-load-project.html @@ -9,6 +9,7 @@ + @@ -23,10 +24,11 @@
+
-
+
diff --git a/help/getting-started/drawing-and-decoding-qr-code.html b/help/getting-started/drawing-and-decoding-qr-code.html index 6515d7b..912feb1 100644 --- a/help/getting-started/drawing-and-decoding-qr-code.html +++ b/help/getting-started/drawing-and-decoding-qr-code.html @@ -9,6 +9,7 @@ + @@ -23,10 +24,11 @@
+
-
+
diff --git a/help/getting-started/index.html b/help/getting-started/index.html index d5a3d0b..46aa594 100644 --- a/help/getting-started/index.html +++ b/help/getting-started/index.html @@ -9,8 +9,10 @@ + +
@@ -23,10 +25,11 @@
+
-
+
@@ -40,15 +43,13 @@

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 and you just can skip it if you want.

+

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.


Jump to :
- +

-   About QR Code

+

-   Interface Overview

+

-   Create, Save, and Load Project

+

-   Drawing and Decoding QR Code

diff --git a/help/getting-started/interface-overview.html b/help/getting-started/interface-overview.html index 6b3b28b..6f782f4 100644 --- a/help/getting-started/interface-overview.html +++ b/help/getting-started/interface-overview.html @@ -9,6 +9,7 @@ + @@ -23,10 +24,11 @@
+
-
+
@@ -41,12 +43,12 @@

Interface Overview


- +

1. Menu : Main menu where you can create new project, save/load project, use sub-tools, etc..

-

2. Mode indicator : The button that lets you switch main workspace mode from Editor mode to Decode mode or otherwise.

-

3. Main Toolbox : Toolbox that does the core commands (such as draw, erase QR code, or decode QR code) and maintain your workspace. This toolbox will change according to the current workspace mode that being used.

+

2. Mode indicator : The button that lets you switch main working mode from Editor mode to Decode mode or otherwise.

+

3. Main Toolbox : Toolbox that does the core commands (such as draw, erase QR code, or decode QR code) and maintain your workspace. This toolbox will change according to the current working mode that being used.

4. Sample toolbox : Toolbox that store your image sample as a replication, to ease in reconstructing QR code.

5. History toolbox : Toolbox that store your drawing history of current QR code, lets you to undo or redo your work.

6. Workspace : Your main canvas to drawing and reconstructing QR code.

diff --git a/help/index.html b/help/index.html index e7afa33..3e094db 100644 --- a/help/index.html +++ b/help/index.html @@ -9,6 +9,7 @@ + @@ -23,13 +24,15 @@
+
-
+

diff --git a/help/introduction/index.html b/help/introduction/index.html index 6d0d2be..2c60262 100644 --- a/help/introduction/index.html +++ b/help/introduction/index.html @@ -9,6 +9,7 @@ + @@ -23,10 +24,11 @@
+
-
+
@@ -40,7 +42,7 @@

Introduction


-

QRazyBox is a web-based application (a toolkit), that used to analyzing and recovering damaged QR Code.
QRazyBox lets you recover QR Code by redrawing and reconstructing it with Paint-like editor. It also provides several sub-tools (known as Extension Tools) to help you analyze and recover faster and more efficient.

+

QRazyBox is a web-based application (a toolkit), that used to analyzing and recovering damaged QR Code.
QRazyBox lets you recover QR Code by redrawing and reconstructing it with Paint-like editor. It also provides several sub-tools to help you analyze and recover faster and more efficient.


Main Features

    diff --git a/help/js/script.js b/help/js/script.js index c801ab4..54ffc28 100644 --- a/help/js/script.js +++ b/help/js/script.js @@ -1,5 +1,7 @@ var sidebarMenu = ''; +function getParameterByName(name, url) { + if (!url) url = window.location.href; + name = name.replace(/[\[\]]/g, "\\$&"); + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), + results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, " ")); +} + $(document).ready(function(){ var url = window.location.pathname; var dirname = /help\/.+$/.exec(url)[0].substring(5); - console.log(dirname); - if(dirname != "index.html"){ + if(dirname != "index.html" && dirname != "search.html"){ var dirname_reg = new RegExp(dirname,"g"); sidebarMenu = sidebarMenu.replace(dirname_reg, dirname+"\" class=\"selected\""); - console.log(sidebarMenu); $("#help-menu").html(sidebarMenu); } $(".help-menu a.selected").next().show(); $(".help-menu .help-menu a.selected").parent().show(); + + var mark = getParameterByName("mark"); + if(mark){ + $("h2, h4, p").mark(mark); + } + + $(document).keydown(function(e){ + if($(".search input[type=text]").is(":focus")){ + var target = e.target; + if(e.keyCode == 13){ + if(dirname != "index.html" && dirname != "search.html") + window.location = "../search.html?q="+$(target).val(); + else + window.location = "search.html?q="+$(target).val(); + } + } + + }) + + $(".menu-bar").click(function(){ + if($(".left-box").css("display") == "none"){ + $(".left-box").slideDown(); + } else { + if(document.documentElement.scrollTop == 0) + $(".left-box").slideUp(); + } + $("html,body").animate({ + scrollTop: 0 + }, 400); + }) + + $(window).resize(function(){ + if(document.body.clientWidth > 900) + { + $(".left-box").show(); + } + }) }) \ No newline at end of file diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index 0d989b6..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/index.html b/index.html index bfb1780..559df02 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ QRazyBox - QR Code Analysis and Recovery Toolkit + +
    @@ -15,7 +17,7 @@

    QRazyBox

    -
    +

    New

    Load

    Save

     @@ -23,9 +25,29 @@

    Help

    About
    + +
    + +
    +

    ›

    +
    +
    +

    ‹

    +
    + + + +
    +
    + + +
    +
    + +
    @@ -102,7 +124,7 @@
    -
    +
@@ -175,14 +197,13 @@

New Project

- + +
- +
@@ -280,6 +301,8 @@

Issues or pull requests :

https://github.com/merricx/qrazybox/

+
+

QR Code is registered trademark of DENSO WAVE Inc.

@@ -360,29 +383,37 @@
- -
-
Error Correction Level:
-
Mask Pattern :
-
-
-
-
L
-
M
-
Q
-
H
+ +
+
+
Error Correction Level:
+
+
+
+
L
+
M
+
Q
+
H
+
+
-
-
0
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
+
+
+
Mask Pattern :
+
+
+
+
0
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
+
@@ -410,9 +441,7 @@
Final data string :
-
- -
+
@@ -446,13 +475,13 @@
Bits before recovery :
- +
Bits after recovery :
- +
Warning :
- +
Note : Recovered modules are marked with green color
@@ -466,7 +495,7 @@ - + @@ -488,1736 +517,16 @@ - - - + + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js index c113c37..3a3a31c 100644 --- a/js/main.js +++ b/js/main.js @@ -1,38 +1,1822 @@ -var information_bits = [ - //ECC L - ["111011111000100", - "111001011110011", - "111110110101010", - "111100010011101", - "110011000101111", - "110001100011000", - "110110001000001", - "110100101110110"], - //ECC M - ["101010000010010", - "101000100100101", - "101111001111100", - "101101101001011", - "100010111111001", - "100000011001110", - "100111110010111", - "100101010100000"], - //ECC Q - ["011010101011111", - "011000001101000", - "011111100110001", - "011101000000110", - "010010010110100", - "010000110000011", - "010111011011010", - "010101111101101"], - //ECC H - ["001011010001001", - "001001110111110", - "001110011100111", - "001100111010000", - "000011101100010", - "000001001010101", - "000110100001100", - "000100000111011"] -] \ No newline at end of file +var qr_version = 1; +var qr_pixel_size = 15; +var qr_size = 17+(qr_version*4); + +var qr_array = []; +var qr_format_array = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; + +var active_painter = "0"; +var fill_painter = false; +var toggle_painter = false; +var dragging_painter = false; + +var changed_state = false; + +var show_grey = true; +var brute_force_mode = false; +var masking_mode = false; +var unmask_status = false; + +var qr_temp_array = []; + +var is_data_module = []; + +var history_array = []; +var active_history = -1; + +function generateTable(version){ + + qr_array = []; + changed_state = false; + + var size = 17+(version*4); + $("#qr-table").html(""); + + + for(var i=0; i < size; i++){ + var element = ""; + qr_array[i] = []; + for(var j=0; j < size;j++){ + element += ""; + qr_array[i].push(-1); + } + element += ""; + $("#qr-table").append(element); + } + + getFinder(size); + getAlignment(size); + getTiming(size); + getInformation(size); + resize(qr_pixel_size); + is_data_module = getDataModule(qr_array); + updateToolbox(); + clearHistory(); + updateHistory("New QR code"); +} + +function getFinder(size){ + + //Finder top-left + var blackFinder = [[0,1,2,3,4,5,6],[0,6],[0,2,3,4,6],[0,2,3,4,6],[0,2,3,4,6],[0,6],[0,1,2,3,4,5,6],[]]; + for(var i=0; i < 8; i++){ + for(var j=0; j < 8;j++){ + $("#qr-"+i+"-"+j).addClass("static"); + if(blackFinder[i].includes(j)){ + $("#qr-"+i+"-"+j).addClass("black"); + qr_array[i][j] = 1; + } else { + qr_array[i][j] = 0; + } + } + } + + //Finder top-right + blackFinder = [ + [size-1,size-2,size-3,size-4,size-5,size-6,size-7], + [size-1,size-7], + [size-1,size-3,size-4,size-5,size-7], + [size-1,size-3,size-4,size-5,size-7], + [size-1,size-3,size-4,size-5,size-7], + [size-1,size-7], + [size-1,size-2,size-3,size-4,size-5,size-6,size-7], + [] + ]; + for(var i=0; i < 8; i++){ + for(var j=size-8; j < size;j++){ + $("#qr-"+i+"-"+j).addClass("static"); + if(blackFinder[i].includes(j)){ + $("#qr-"+i+"-"+j).addClass("black"); + qr_array[i][j] = 1; + } else { + qr_array[i][j] = 0; + } + } + } + + //Finder bottom-left + blackFinder = [[],[0,1,2,3,4,5,6],[0,6],[0,2,3,4,6],[0,2,3,4,6],[0,2,3,4,6],[0,6],[0,1,2,3,4,5,6]]; + var index = 0; + for(var i=size-8; i < size; i++){ + for(var j=0; j < 8;j++){ + $("#qr-"+i+"-"+j).addClass("static"); + if(blackFinder[index].includes(j)){ + $("#qr-"+i+"-"+j).addClass("black"); + qr_array[i][j] = 1; + } else { + qr_array[i][j] = 0; + } + } + index++; + } +} + +function getTiming(size){ + + var status = 0; + for(var i=8; i < size-8; i++){ + if(status == 0){ + $("#qr-6-"+i).addClass("static black"); + status = 1; + qr_array[6][i] = 1; + } else { + $("#qr-6-"+i).addClass("static"); + status = 0; + qr_array[6][i] = 0; + } + } + + status = 0; + for(var i=8; i < size-8; i++){ + if(status == 0){ + $("#qr-"+i+"-6").addClass("static black"); + status = 1; + qr_array[i][6] = 1; + } else { + $("#qr-"+i+"-6").addClass("static"); + status = 0; + qr_array[i][6] = 0; + } + } +} + +function getInformation(size){ + //Information top-left beside Finder + for(var i=0; i < 9; i++){ + if(i == 6) + continue; + $("#qr-"+i+"-8").addClass("info"); + qr_array[i][8] = 0; + } + + //Information top-left below Finder + for(var i=0; i < 9; i++){ + if(i == 6) + continue; + $("#qr-8-"+i).addClass("info"); + qr_array[8][i] = 0; + } + + //Information top-right below Finder + for(var i=size-8; i < size; i++){ + $("#qr-8-"+i).addClass("info"); + qr_array[8][i] = 0; + } + + //Information bottom-left beside Finder and get Dark module + for(var i=size-8; i < size; i++){ + if(i != size-8){ + $("#qr-"+i+"-8").addClass("info"); + qr_array[i][8] = 0; + } + else { + $("#qr-"+i+"-8").addClass("static black"); + qr_array[i][8] = 1; + } + } +} + +function getAlignment(size){ + if(size < 25) + return; + + var row = (6); + var col = (size-7); + + var blackBox = [[0,1,2,3,4],[0,4],[0,2,4],[0,4],[0,1,2,3,4]]; + var row_index = 0; + for(var i=col-2; i <= col+2; i++){ + var col_index = 0; + for(var j=col-2; j <= col+2; j++){ + $("#qr-"+i+"-"+j).addClass("static"); + if(blackBox[row_index].includes(col_index)){ + $("#qr-"+i+"-"+j).addClass("black"); + qr_array[i][j] = 1; + } else { + qr_array[i][j] = 0; + } + col_index++; + } + row_index++; + } +} + +function generateInfoTable(position){ + + position = position || "TOP_LEFT"; + + $("#qr-format-info").html(""); + $("#select-format-info-pos").val(position); + var pattern_array = function_pattern_with_format_info[position]; + + if(position == "TOP_LEFT"){ + var start_index = 0; + var end_index = 15; + } else if(position == "TOP_RIGHT"){ + var start_index = 0; + var end_index = 8; + } else if(position == "BOTTOM_LEFT"){ + var start_index = 8; + var end_index = 15; + } + + for(var i=0; i < pattern_array.length; i++){ + var element = ""; + for(var j=0; j < pattern_array[i].length;j++){ + if(pattern_array[i][j] == 0){ + element += ""; + } else if(pattern_array[i][j] == 1){ + element += ""; + } else { + element += ""; + } + } + element += ""; + $("#qr-format-info").append(element); + } + + for(var i=start_index; i < end_index; i++){ + if(qr_format_array[i] == 1){ + $("td#qr-info-"+i).addClass("black"); + } else { + $("td#qr-info-"+i).addClass("white"); + } + } + +} + + +function saveInfoTable(size){ + for(var i=0; i < 8; i++){ + if(i > 5) + qr_array[i+1][8] = parseInt(qr_format_array[i]); + else + qr_array[i][8] = parseInt(qr_format_array[i]); + qr_array[8][size-(i+1)] = parseInt(qr_format_array[i]); + } + var index = 0; + for(var i=14; i >= 8; i--){ + if(index > 5) + qr_array[8][index+1] = parseInt(qr_format_array[i]); + else + qr_array[8][index] = parseInt(qr_format_array[i]); + qr_array[size-(index+1)][8] = parseInt(qr_format_array[i]); + index++; + } + + refreshTable(); + $("#format-information-box").hide(); + changed_state = true; +} + +function refreshTable(){ + for(var i=0; i < qr_array.length; i++){ + for(var j=0; j < qr_array[i].length; j++){ + if(!$("#qr-"+i+"-"+j).hasClass("static")){ + $("#qr-"+i+"-"+j).removeClass("black"); + $("#qr-"+i+"-"+j).removeClass("white"); + if(qr_array[i][j] == 1){ + $("#qr-"+i+"-"+j).addClass("black"); + } else if(qr_array[i][j] == 0) { + $("#qr-"+i+"-"+j).addClass("white"); + } + } + } + } +} + +function getInfoBits(){ + var result = {ecc:"",mask:-1}; + $("#slider-mask div.active").removeClass("active"); + $("#slider-ecc div.active").removeClass("active"); + + var bits = ""; + bits = qr_format_array.join(""); + bits = bits.split("").reverse().join(""); + var raw_bits = [bits.substring(0,2), bits.substring(2,5)]; + var bch_bits = bits.substring(5); + + if(format_information_bits_raw.ecc.indexOf(raw_bits[0]) > -1){ + if(format_information_bits_raw.ecc.indexOf(raw_bits[0]) == 0) result.ecc = "L"; + else if(format_information_bits_raw.ecc.indexOf(raw_bits[0]) == 1) result.ecc = "M"; + else if(format_information_bits_raw.ecc.indexOf(raw_bits[0]) == 2) result.ecc = "Q"; + else result.ecc = "H"; + } + + if(format_information_bits_raw.mask.indexOf(raw_bits[1]) > -1){ + result.mask = format_information_bits_raw.mask.indexOf(raw_bits[1]); + } + + if(format_information_bits[0].indexOf(bits) > -1){ + result.ecc = "L"; + result.mask = format_information_bits[0].indexOf(bits); + } else if(format_information_bits[1].indexOf(bits) > -1){ + result.ecc = "M"; + result.mask = format_information_bits[1].indexOf(bits); + } else if(format_information_bits[2].indexOf(bits) > -1){ + result.ecc = "Q"; + result.mask = format_information_bits[2].indexOf(bits); + } else if(format_information_bits[3].indexOf(bits) > -1){ + result.ecc = "H"; + result.mask = format_information_bits[3].indexOf(bits); + } + console.log(bits); + + return result; +} + +function generateResult(){ + + var c = document.getElementById("qr-result"); + var size = 17+(qr_version*4); + c.width = qr_pixel_size*size; + c.height = qr_pixel_size*size; + var ctx = c.getContext("2d"); + ctx.fillStyle = "#000"; + + for(var i=0; i < qr_array.length; i++){ + for(var j=0; j < qr_array[i].length; j++){ + var x = qr_pixel_size*j; + var y = qr_pixel_size*i; + if(qr_array[i][j] == 1){ + ctx.fillStyle = "#000"; + ctx.fillRect(x,y,qr_pixel_size,qr_pixel_size); + } else if(qr_array[i][j] == 0) { + ctx.fillStyle = "#fff"; + ctx.fillRect(x,y,qr_pixel_size,qr_pixel_size); + } else { + if(show_grey){ + ctx.fillStyle = "#bdbdbd"; + ctx.fillRect(x,y,qr_pixel_size,qr_pixel_size); + } + else{ + ctx.fillStyle = "#fff"; + ctx.fillRect(x,y,qr_pixel_size,qr_pixel_size); + } + } + } + } + + $("#qr-result").show(); + $("#qr-table").hide(); + $("#qr-mask-table").hide(); + $("body").css("background-color","#FFFFFF"); +} + +function updateToolbox(){ + $("#qr-version").val(qr_size+"x"+qr_size+" (ver. "+qr_version+")"); + $("#qr-size").val(qr_pixel_size+"px"); +} + +function resize(size){ + $("td").each(function(){ + $(this).css({"min-width":size+"px","min-height":size+"px","width":size+"px","height":size+"px"}); + }) +} + +function toggleResult(){ + if(!$("#btn-switch-mode").hasClass("active")){ + $(".mode-indicator button").removeClass("active"); + $("#mobile-decode-mode").addClass("active"); + + if(unmask_status) + maskDataBits(); + generateResult(); + $("#btn-switch-mode").addClass("active"); + $("#div-tool-work, #box-history").hide(); + $("#div-tool-result").show(); + $("#btn-switch-mode").text("Decode Mode"); + $("#box-tools-masking").hide(); + if(brute_force_mode) + $("#h6-brute-force-msg").show(); + else + $("#h6-brute-force-msg").hide(); + } else { + $(".mode-indicator button").removeClass("active"); + $("#mobile-editor-mode").addClass("active"); + + if(unmask_status){ + maskDataBits(); + refreshTable(); + } + $("#qr-result").hide(); + $(".qr-tab").show(); + $("#btn-switch-mode").removeClass("active"); + $("body").css("background-color","#eceff1"); + $("#div-tool-result").hide(); + $("#div-tool-work, #box-history").show(); + $("#btn-switch-mode").text("Editor Mode"); + if(masking_mode) + $("#box-tools-masking").show(); + } +} + +function loadImage(input, target){ + if(input.files && input.files[0]){ + var reader = new FileReader(); + + reader.onload = function(e){ + $(target).attr("src",e.target.result); + } + reader.readAsDataURL(input.files[0]); + } +} + +function saveProject(projectName){ + + if(projectName == ""){ + alert("Please, enter name of your Project!"); + return; + } + + var saveData = [qr_array, qr_version, qr_format_array]; + var dataList = JSON.parse(localStorage.getItem("dataList")); + var timeNow = new Date(); + var timeData = timeNow.toDateString(); + var projectNameList = []; + if(dataList == undefined){ + dataList = []; + } + for(var i=0; i < dataList.length; i++){ + projectNameList[i] = dataList[i][0]; + } + if(!projectNameList.includes(projectName)) { + dataList.push([projectName, timeData]); + } else { + var index = projectNameList.indexOf(projectName); + dataList[index][1] = timeData; + } + localStorage.setItem("saveData_"+projectName,JSON.stringify(saveData)); + localStorage.setItem("dataList",JSON.stringify(dataList)); + $("#div-save").hide(); + changed_state = false; +} + +function loadProject(name){ + if(changed_state){ + if(!confirm("Are you sure want to proceed?\nYour unsaved progress will be lost!")) + return; + } + var loadedData = JSON.parse(localStorage.getItem("saveData_"+name)); + qr_version = loadedData[1]; + qr_size = 17+(qr_version*4); + generateTable(qr_version); + qr_array = loadedData[0]; + qr_format_array = loadedData[2]; + brute_force_mode = false; + masking_mode = false; + unmask_status = false; + $("#tools-brute-force, #tools-unmasking").removeClass("active"); + refreshTable(); + $("#qr-version").val(qr_size+"x"+qr_size+" (ver. "+qr_version+")"); + $("#div-load").hide(); + if($("#btn-switch-mode").hasClass("active")){ + toggleResult(); + } + if($("#div-extract").css("display") != "none"){ + $("#btn-tools-extract").trigger("click"); + } + $("#box-tools-masking").hide(); + $("#qr-mask-table").html(""); + clearHistory(); + updateHistory("Load project"); +} + +function removeProject(name, origin){ + if(confirm("Are you sure want to permanently delete this project?")){ + var dataList = JSON.parse(localStorage.getItem("dataList")); + var projectNameList = []; + + for(var i=0; i < dataList.length; i++){ + projectNameList[i] = dataList[i][0]; + } + + var index = projectNameList.indexOf(name); + if(index >= 0){ + dataList.remove(index); + localStorage.removeItem("saveData_"+name); + localStorage.setItem("dataList",JSON.stringify(dataList)); + refreshLoadList(origin); + } + } +} + +function refreshLoadList(origin){ + var dataList = JSON.parse(localStorage.getItem("dataList")); + if(dataList == undefined){ + $("#list-"+origin).html("
There's no saved project in Local Storage.
"); + } else { + var element = ""; + for(var i=0; i < dataList.length; i++){ + element += "
"+dataList[i][0]+"
"+dataList[i][1]+"
✖
"; + } + $("#list-"+origin).html(element); + } +} + +function decodeFromBase64(img, callback){ + qrcode.callback = callback; + qrcode.decode(img, callback); +} + +function importFromImage(src, cb){ + var img = new Image(); + img.crossOrigin = "Anonymous"; + console.log(src); + img.onload = function(){ + var canvas_qr = document.createElement("canvas"); + var context = canvas_qr.getContext('2d'); + var nheight = img.height; + var nwidth = img.width; + if(img.width*img.height>qrcode.maxImgSize){ + var ir = img.width / img.height; + nheight = Math.sqrt(qrcode.maxImgSize/ir); + nwidth=ir*nheight; + } + + canvas_qr.width = nwidth; + canvas_qr.height = nheight; + context.drawImage(img, 0, 0, canvas_qr.width, canvas_qr.height ); + qrcode.width = canvas_qr.width; + qrcode.height = canvas_qr.height; + + try{ + qrcode.imagedata = context.getImageData(0, 0, canvas_qr.width, canvas_qr.height); + }catch(e){ + cb(e); + return; + } + + var image = qrcode.grayScaleToBitmap(qrcode.grayscale()); + + var detector = new Detector(image); + try { + var qRCodeMatrix = detector.detect(); + } catch(error){ + console.log(error); + cb(error); + return; + } + + var qrArray = qRCodeMatrix.bits.bits; + var size = qRCodeMatrix.bits.width; + if(size > 41){ + alert("QR version is unsupported"); + return; + } + qr_size = size; + qr_version = (size-17)/4; + updateToolbox(); + var result = []; + + for(var x=0; x < size; x++){ + result[x] = []; + for(var y=0; y < size; y++){ + result[x][y] = qRCodeMatrix.bits.get_Renamed(y,x) ? 1 : 0; + } + } + + cb(result); + } + img.src = src; +} + +//Reference : https://jsfiddle.net/eWxNE/2/ +function floodFill(x, y, oldVal, newVal){ + + x = parseInt(x); + y = parseInt(y); + + if(oldVal == null){ + oldVal = parseInt(qr_array[x][y]); + } + + if(qr_array[x][y] !== oldVal){ + return; + } + + if(is_data_module[x][y]) + qr_array[x][y] = parseInt(newVal); + else + return; + + if (x > 0){ + floodFill(x-1, y, oldVal, newVal); + } + if(y > 0){ + floodFill(x, y-1, oldVal, newVal); + } + if(x < qr_size-1){ + floodFill(x+1, y, oldVal, newVal); + } + if(y < qr_size-1){ + floodFill(x, y+1, oldVal, newVal); + } +} + +function updateHistory(msg){ + + if(active_history < 10) active_history++; + + history_array = history_array.slice(0, active_history); + if(history_array.length == 10){ + history_array.shift(); + } + history_array.push([msg, JSON.stringify(qr_array)]); + + var html = ""; + for(var i=history_array.length-1; i >= 0; i--){ + if(i == history_array.length-1){ + html += "
"+history_array[i][0]+"
"; + } else { + html += "
"+history_array[i][0]+"
"; + } + } + $(".history").html(html); +} + +function getHistory(index){ + qr_array = JSON.parse(history_array[index][1]); + if(qr_array.length != qr_size){ + qr_size = qr_array.length; + qr_version = (qr_size-17)/4; + updateToolbox(); + } + refreshTable(); +} + +function clearHistory(){ + history_array = []; + active_history = -1; + $(".history").html(""); +} + +function extractInfo(){ + + var data_array = JSON.stringify(qr_array); + var result = QRDecode(JSON.parse(data_array)); + var size = 17+(qr_version*4); + console.log(result); + + var html = "
QR version : "+qr_version+" ("+size+"x"+size+")
\ +
Error correction level : "+result.ecc+"
\ +
Mask pattern : "+result.mask_pattern+"
\ +
\ +
Number of missing bytes (erasures) : "+result.erasure_count+" bytes ("+(result.erasure_count/result.data_module_count * 100).toFixed(2)+"%)
\ +
\ +
Data blocks :
\ +
"+result.data_blocks+"
\ +
"; + if($("#btn-extract-show-rs").hasClass("active")){ + for(var i=0; i < result.rs_block.length; i++){ + html += "
----------------Block "+(i+1)+"----------------
\ +
Reed-Solomon Block : "+result.rs_block[i]+"
"; + if(result.syndrome[i] != undefined && result.error_count[i] != undefined){ + console.log(result.syndrome[i], result.error_count); + html +="
Syndrome : "+result.syndrome[i]+"
\ +
Number of Errors : "+result.error_count[i]+"
\ +
Coefficient of the error location polynomial : "+result.coeff_error[i]+"
\ +
Error Position : "+result.error_position[i]+"
\ +
Error Magnitude : "+result.error_magnitude[i]+"
\ +
"; + } else { + html += "
"; + } + } + } + html += "
Final data bits :
\ +
"+result.data_bits+"
\ +
"; + + for(var i=0; i < result.data_bits_count; i++){ + html += "
"+result.data_bits_block[i]+"
\ +
Mode Indicator : "+result.mode[i]+"
\ +
Character Count Indicator : "+result.count[i]+"
\ +
Decoded data : "+result.decoded[i]+"
\ +
"; + } + + html += "
Final Decoded string : "+result.message+"
"; + if($("#btn-extract-show-error").hasClass("active") && result.error.length > 0){ + html += "
Error :
"; + for(var i=0; i < result.error.length; i++){ + html += "
- "+result.error[i]+"
"; + } + } + $("#div-extract").html(html); +} + +var brute_result = []; +var brute_result_index = []; +var current_brute_result = 0; + +function callbackBruteForce(){ + console.log(brute_result); + if(brute_result.length != 32) + return; + + for(var i=0; i < brute_result.length; i++){ + if(brute_result[i] != "error decoding QR Code"){ + brute_result_index.push(i); + } + } + + var true_count = brute_result_index.length; + current_brute_result = 0; + + if(true_count > 0){ + var ecc = Math.floor(brute_result_index[0] / 8); + var mask = brute_result_index[0] % 8; + + qr_format_array = format_information_bits[ecc][mask].split("").reverse(); + + if(ecc == 0) + ecc = "L"; + else if(ecc == 1) + ecc = "M"; + else if(ecc == 2) + ecc = "Q"; + else if(ecc == 3) + ecc = "H"; + + $("#brute-force-msg-wait").hide(); + $("#brute-force-msg-fail").hide(); + $("#brute-force-content").show(); + $("#btn-brute-force-apply-pattern").show(); + $("#brute-force-decoded-data").val(brute_result[brute_result_index[current_brute_result]]); + $("#brute-force-ecc span").text(ecc); + $("#brute-force-mask span").text(mask); + $("#brute-force-result-counter").text("1 of "+true_count+" result"); + saveInfoTable(qr_size); + generateResult(); + $("#tools-brute-force").trigger("click"); + } else { + $("#brute-force-msg-wait").hide(); + $("#brute-force-msg-fail").show(); + $("#btn-brute-force-apply-pattern").show(); + qr_format_array = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]; + saveInfoTable(qr_size); + generateResult(); + updateHistory("Update format info pattern"); + } +} + +function bruteForceFormatInfo(){ + brute_result = []; + brute_result_index = []; + + var possible_ecc = ["L","M","Q","H"]; + var possible_mask = [0,1,2,3,4,5,6,7]; + + for(var i=0; i < possible_ecc.length; i++){ + for(var j=0; j < possible_mask.length; j++){ + qr_format_array = format_information_bits[i][j].split("").reverse(); + saveInfoTable(qr_size); + generateResult(); + var image = document.getElementById("qr-result").toDataURL(); + if(i == 3 && j == 7){ + decodeFromBase64(image, function(data){ + brute_result.push(data); + callbackBruteForce(); + }) + } else { + decodeFromBase64(image, function(data){ + brute_result.push(data); + }) + } + } + } +} + +function maskDataBits(){ + var mask_pattern = getFormatInfo(qr_array).mask; + qr_array = maskData(qr_array, mask_pattern); + refreshTable(); + updateHistory("Data masking"); +} + +function showMaskPatternArea(){ + var qr_mask_array = []; + for(var i=0; i < qr_array.length; i++){ + qr_mask_array[i] = []; + for(var j=0; j < qr_array[i].length; j++){ + qr_mask_array[i][j] = 0; + } + } + var mask_pattern = getFormatInfo(qr_array).mask; + qr_mask_array = maskData(qr_mask_array, mask_pattern); + + $("#qr-mask-table").html(""); + for(var i=0; i < qr_array.length; i++){ + var html = ""; + for(var j=0; j < qr_array[i].length; j++){ + if($("#qr-"+i+"-"+j).hasClass("info") || $("#qr-"+i+"-"+j).hasClass("static")){ + html += ""; + } else { + if(qr_mask_array[i][j] == 0) + html += ""; + else + html += ""; + } + } + html += ""; + $("#qr-mask-table").append(html); + } + resize(qr_pixel_size); +} + +function recoverPadding(){ + var data_array = JSON.stringify(qr_array); + var result = recoverPaddingBits(JSON.parse(data_array)); + var warning = false; + + $("#qr-dummy").html(""); + $("#div-pad-rec-warning, #div-pad-rec-error").hide(); + $("#div-pad-rec-data, #btn-pad-rec-apply").show() + + if(typeof result == "string"){ + $("#div-pad-rec-error").show(); + $("#div-pad-rec-error textarea").val(result); + $("#div-pad-rec-warning, #div-pad-rec-data, #btn-pad-rec-apply").hide(); + return; + } + + for(var i=0; i < result.result_array.length; i++){ + var elem = ""; + for(var j=0; j < result.result_array[i].length; j++){ + if(qr_array[i][j] != result.result_array[i][j]){ + if(result.result_array[i][j] == 0) + elem += ""; + else if(result.result_array[i][j] == 1) + elem += ""; + else + elem += ""; + } else { + if(result.result_array[i][j] == 0) + elem += ""; + else if(result.result_array[i][j] == 1) + elem += ""; + else + elem += ""; + } + } + elem += ""; + $("#qr-dummy").append(elem); + } + + for(var i=0; i < result.after.length; i++){ + if(result.before.charAt(i) != "?"){ + if(result.after.charAt(i) != result.before.charAt(i)){ + warning = true; + break; + } + } + } + + if(warning){ + $("#div-pad-rec-warning").show(); + $("#div-pad-rec-warning textarea").val("There's one or more modules conflict with the already known module of original QR code. Correction may fail.") + } + + $("#pad-rec-before").val(result.before); + $("#pad-rec-after").val(result.after); + + qr_temp_array = Array.prototype.slice.call(result.result_array); +} + +function reedSolomonDecode(data, nysm){ + + var result = []; + + for(var i=0; i < data.length; i++){ + var err_pos = []; + for(var j=0; j < data[i].length; j++){ + if(data[i][j] == 0) + err_pos.push(j); + } + var decoded = RS.decode(data[i], nysm, err_pos); + + if(typeof decoded == "string"){ + $("#rs-decoder-error").text("ERROR: "+decoded).removeClass("invisible"); + $("#rs-decoder-output, #rs-decoder-final-msg").val(""); + return; + } + + result = result.concat(decoded); + } + + $("#rs-decoder-output").val(result.join(",")); + + var data_bits = ""; + for(var i=0; i < result.length; i++){ + var pad = "00000000"; + var text = parseInt(result[i]).toString(2); + var remain = (pad+text).length - 8; + text = (pad + text).slice(remain); + data_bits += text; + } + + var readed_data = readDataBits(data_bits); + if(readed_data != '') + $("#rs-decoder-final-msg").val(readed_data); + else { + $("#rs-decoder-error").text("ERROR: Data can't be readed").removeClass("invisible"); + $("#rs-decoder-final-msg").val(""); + } + +} + +$(document).ready(function(){ + + + + $("#home-new").click(function(){ + $("#home-box").hide(); + $("#div-new").show(); + }) + + $("#home-load").click(function(){ + $("#home-box").hide(); + $("#div-load").show(); + var dataList = JSON.parse(localStorage.getItem("dataList")); + if(dataList == undefined){ + $("#list-load").html("
There's no saved project in Local Storage.
"); + } else { + var element = ""; + for(var i=0; i < dataList.length; i++){ + element += "
"+dataList[i][0]+"
"+dataList[i][1]+"
✖
"; + } + $("#list-load").html(element); + } + }) + + $("#new-btn-new").click(function(){ + generateTable(qr_version); + qr_format_array = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; + if($("#btn-switch-mode").hasClass("active")){ + toggleResult(); + } + if($("#div-extract").css("display") != "none"){ + $("#btn-tools-extract").trigger("click"); + } + brute_force_mode = false; + masking_mode = false; + unmask_status = false; + $("#tools-brute-force, #tools-unmasking").removeClass("active"); + $("#qr-mask-table").html(""); + $("#box-tools-masking").hide(); + $("#div-new").hide(); + }) + + $("#new-btn-import-img").click(function(){ + $("#import-img").click(); + return false; + }) + + $("#import-img").change(function(){ + if(this.files && this.files[0]){ + var reader = new FileReader(); + + reader.onload = function(e){ + $("#hidden-img").attr("src",e.target.result); + importFromImage($("#hidden-img").attr("src"), function(data){ + if(Array.isArray(data)){ + $("#div-new").hide(); + generateTable(qr_version); + qr_array = Array.prototype.slice.call(data); + clearHistory(); + updateHistory("Load from image"); + refreshTable(); + changed_state = true; + } else { + alert(data); + } + }) + } + reader.readAsDataURL(this.files[0]); + } + }) + + $("#menu-new").click(function(){ + if(changed_state){ + if(!confirm("Are you sure want to proceed?\nYour unsaved progress will be lost!")) + return; + } + $("#home-box").hide(); + $("#div-new").show(); + }) + + $("#menu-save").click(function(){ + $("#div-save").show(); + var dataList = JSON.parse(localStorage.getItem("dataList")); + if(dataList == undefined){ + $("#div-save-ext").hide(); + } else { + var element = ""; + for(var i=0; i < dataList.length; i++){ + element += "
"+dataList[i][0]+"
"+dataList[i][1]+"
✖
"; + } + $("#list-save").html(element); + $("#div-save-ext").show(); + } + }) + + + + $("#menu-load").click(function(){ + $("#div-load").show(); + var dataList = JSON.parse(localStorage.getItem("dataList")); + if(dataList == undefined){ + $("#list-load").html("
There's no saved project in Local Storage.
"); + } else { + var element = ""; + for(var i=0; i < dataList.length; i++){ + element += "
"+dataList[i][0]+"
"+dataList[i][1]+"
✖
"; + } + $("#list-load").html(element); + } + }) + + $("#menu-tools").click(function(){ + $("#div-tools").show(); + }) + + $(document).on("click", "#list-load div", function(e){ + var projectName = $(this).find("h5").text(); + if(e.target.nodeName != "SPAN"){ + loadProject(projectName); + } else { + removeProject(projectName, "load"); + } + }) + + $(document).on("click", "#list-save div", function(e){ + var projectName = $(this).find("h5").text(); + if(e.target.nodeName != "SPAN"){ + saveProject(projectName); + } else { + removeProject(projectName, "save"); + } + }) + + $("#painter-box div").click(function(){ + $("#painter-box div.active").removeClass("active") + $(this).addClass("active"); + active_painter = $(this).attr("index"); + }) + + $("#painter-fill").click(function(){ + if(fill_painter){ + $(this).removeClass("active"); + fill_painter = false; + } else { + $(this).addClass("active"); + fill_painter = true; + } + }) + + $("#btn-version-plus").click(function(){ + if(changed_state){ + if(confirm("Are you sure want to proceed?\nYour unsaved progress will be lost!")){ + if(qr_version != 6){ + qr_version += 1; + qr_size = 17+(qr_version*4); + $("#qr-version").val(qr_size+"x"+qr_size+" (ver. "+qr_version+")"); + generateTable(qr_version); + } + } + } else { + if(qr_version != 6){ + qr_version += 1; + qr_size = 17+(qr_version*4); + $("#qr-version").val(qr_size+"x"+qr_size+" (ver. "+qr_version+")"); + generateTable(qr_version); + } + } + }) + $("#btn-version-min").click(function(){ + if(changed_state){ + if(confirm("Are you sure want to proceed?\nYour unsaved progress will be lost!")){ + if(qr_version != 1){ + qr_version -= 1; + qr_size = 17+(qr_version*4); + $("#qr-version").val(qr_size+"x"+qr_size+" (ver. "+qr_version+")"); + generateTable(qr_version); + } + } + } else { + if(qr_version != 1){ + qr_version -= 1; + qr_size = 17+(qr_version*4); + $("#qr-version").val(qr_size+"x"+qr_size+" (ver. "+qr_version+")"); + generateTable(qr_version); + } + } + }) + + $("#btn-size-plus").click(function(){ + if(qr_pixel_size != 50){ + qr_pixel_size += 5; + } + $("#qr-size").val(qr_pixel_size+"px"); + resize(qr_pixel_size); + if($("#btn-switch-mode").hasClass("active")){ + generateResult(); + } + }) + $("#btn-size-min").click(function(){ + if(qr_pixel_size != 5){ + qr_pixel_size -= 5; + } + $("#qr-size").val(qr_pixel_size+"px"); + resize(qr_pixel_size); + if($("#btn-switch-mode").hasClass("active")){ + generateResult(); + } + }) + + $("#btn-show-grey-pixel").click(function(){ + if($(this).hasClass("active")){ + $(this).removeClass("active"); + show_grey = false; + } else { + $(this).addClass("active"); + show_grey = true; + } + generateResult(); + }) + + $("#btn-qr-decode").click(function(){ + if(brute_force_mode){ + $("#btn-brute-force-apply-pattern").hide(); + $("#brute-force-msg-wait").show(); + $("#brute-force-msg-fail").hide(); + $("#brute-force-content").hide(); + $("#div-brute-force-loader").show(); + bruteForceFormatInfo(); + } else { + var image = document.getElementById("qr-result").toDataURL(); + $("#decode-message").val(""); + $("#div-decode").show(); + decodeFromBase64(image, function(decodedData){ + if(decodedData != "error decoding QR Code"){ + $("#decode-message").val(decodedData); + } + }); + } + }) + + $("#btn-switch-mode").click(function(){ + toggleResult(); + }) + + $("#tools-extract").click(function(){ + $("#div-tools").hide(); + if($(this).hasClass("active")){ + $("#btn-tools-extract").trigger("click"); + return; + } + $(".side-box").each(function(){ + $(this).hide(); + }); + $(".right-box").hide(); + $("#box-tools-extract").show(); + $("#qr-table").hide(); + $("#qr-mask-table").html(""); + $("#qr-result").hide(); + $("#div-extract").show(); + $(".footer .mode-indicator").hide(); + $("body").css("background-color","#fff"); + $(this).addClass("active"); + if(unmask_status && !$("#btn-switch-mode").hasClass("active")) + maskDataBits(); + extractInfo(); + }) + + $("#btn-extract-show-rs, #btn-extract-show-error").click(function(){ + if($(this).hasClass("active")){ + $(this).removeClass("active"); + } else { + $(this).addClass("active"); + } + extractInfo(); + }) + + $("#btn-tools-extract").click(function(){ + $("#div-tools").hide(); + $("#tools-extract").removeClass("active"); + $(".side-box").show(); + if(!masking_mode){ + $("#box-tools-masking").hide(); + } + if(unmask_status) + maskDataBits(); + $("#box-tools-extract").hide(); + $("#qr-table").show(); + if($("#btn-mask-show-pattern-area").hasClass("active")){ + $("#qr-mask-table").show(); + } + $("#btn-switch-mode").removeClass("active"); + $("#div-tool-result").hide(); + $("#div-tool-work").show(); + $("#btn-switch-mode").text("Editor Mode"); + $("#div-extract").hide(); + $(".footer .mode-indicator").show(); + $("body").css("background-color","#eceff1"); + }) + + $("#tools-brute-force").click(function(){ + if($(this).hasClass("active")){ + $(this).removeClass("active"); + //qr_format_array = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; + brute_force_mode = false; + updateHistory("Update format info pattern"); + } else { + $(this).addClass("active"); + brute_force_mode = true; + qr_format_array = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]; + } + saveInfoTable(qr_size); + }) + + $("#btn-brute-force-counter-prev").click(function(){ + if(current_brute_result > 0) + current_brute_result -= 1; + + var ecc = Math.floor(brute_result_index[current_brute_result] / 8); + var mask = brute_result_index[current_brute_result] % 8; + + qr_format_array = format_information_bits[ecc][mask].split("").reverse(); + + if(ecc == 0) + ecc = "L"; + else if(ecc == 1) + ecc = "M"; + else if(ecc == 2) + ecc = "Q" + else if(ecc == 3) + ecc = "H" + + $("#brute-force-decoded-data").val(brute_result[brute_result_index[current_brute_result]]); + $("#brute-force-ecc span").text(ecc); + $("#brute-force-mask span").text(mask); + $("#brute-force-result-counter").text((current_brute_result+1)+" of "+brute_result_index.length+" result"); + saveInfoTable(qr_size); + generateResult(); + }) + + $("#btn-brute-force-counter-next").click(function(){ + if(current_brute_result < brute_result_index.length-1) + current_brute_result += 1; + + var ecc = Math.floor(brute_result_index[current_brute_result] / 8); + var mask = brute_result_index[current_brute_result] % 8; + + qr_format_array = format_information_bits[ecc][mask].split("").reverse(); + + if(ecc == 0) + ecc = "L"; + else if(ecc == 1) + ecc = "M"; + else if(ecc == 2) + ecc = "Q" + else if(ecc == 3) + ecc = "H" + + $("#brute-force-decoded-data").val(brute_result[brute_result_index[current_brute_result]]); + $("#brute-force-ecc span").text(ecc); + $("#brute-force-mask span").text(mask); + $("#brute-force-result-counter").text((current_brute_result+1)+" of "+brute_result_index.length+" result"); + saveInfoTable(qr_size); + generateResult(); + }) + + $("#tools-unmasking").click(function(){ + if($(this).hasClass("active")){ + $(this).removeClass("active"); + masking_mode = false; + unmask_status = false; + $("#box-tools-masking").hide(); + $("#qr-mask-table").html(""); + } else { + $(this).addClass("active"); + masking_mode = true; + unmask_status = false; + //if($("#qr-result").css == "none" && $("#div-extract").css == "none") + $("#box-tools-masking").show(); + $("#btn-tools-mask").removeClass("active"); + + var mask_pattern = getFormatInfo(qr_array).mask; + $("#mask-pattern").val("Pattern "+mask_pattern); + $("#btn-mask-show-pattern-area").removeClass("active"); + } + }) + + $("#btn-mask-plus").click(function(){ + var current_mask = getFormatInfo(qr_array).mask; + if(current_mask == 7) + return; + + if(unmask_status) + maskDataBits(); + + var ecc = getFormatInfo(qr_array).ecc; + if(ecc == 0) + ecc = 1; + else if(ecc == 1) + ecc = 0; + else if(ecc == 2) + ecc = 3; + else if(ecc == 3) + ecc = 2; + var next_mask = parseInt(current_mask) + 1; + qr_format_array = format_information_bits[ecc][next_mask].split("").reverse(); + saveInfoTable(qr_size); + $("#mask-pattern").val("Pattern "+next_mask); + if($("#btn-mask-show-pattern-area").hasClass("active")){ + showMaskPatternArea(); + } + if(unmask_status) + maskDataBits(); + updateHistory("Data masking"); + }) + + $("#btn-mask-min").click(function(){ + var current_mask = getFormatInfo(qr_array).mask; + if(current_mask == 0) + return; + + if(unmask_status) + maskDataBits(); + + var ecc = getFormatInfo(qr_array).ecc; + if(ecc == 0) + ecc = 1; + else if(ecc == 1) + ecc = 0; + else if(ecc == 2) + ecc = 3; + else if(ecc == 3) + ecc = 2; + var prev_mask = parseInt(current_mask) - 1; + qr_format_array = format_information_bits[ecc][prev_mask].split("").reverse(); + saveInfoTable(qr_size); + $("#mask-pattern").val("Pattern "+prev_mask); + if($("#btn-mask-show-pattern-area").hasClass("active")){ + showMaskPatternArea(); + } + if(unmask_status) + maskDataBits(); + updateHistory("Data masking"); + }) + + $("#btn-mask-show-pattern-area").click(function(){ + if($(this).hasClass("active")){ + $(this).removeClass("active"); + $("#qr-mask-table").html(""); + } else { + $(this).addClass("active"); + showMaskPatternArea(); + $("#qr-mask-table").show(); + } + }) + + $("#btn-tools-mask").click(function(){ + if($(this).hasClass("active")){ + $(this).removeClass("active"); + unmask_status = false; + } else { + $(this).addClass("active"); + unmask_status = true; + } + maskDataBits(); + }) + + $("#tools-pad-recovery").click(function(){ + recoverPadding(); + $("#div-padding-recovery").show(); + $("#div-tools").hide(); + }) + + $("#btn-pad-rec-apply").click(function(){ + qr_array = JSON.parse(JSON.stringify(qr_temp_array)); + refreshTable(); + updateHistory("Padding bits recovery"); + $("#div-padding-recovery").hide(); + changed_state = true; + }) + + $("#btn-pad-rec-cancel").click(function(){ + $("#div-padding-recovery").hide(); + }) + + var current_rs_decoder_page = 1; + + $("#tools-rs-decoder").click(function(){ + current_rs_decoder_page = 1; + $("#div-rs-decoder").show(); + $("#div-tools").hide(); + $("#btn-rs-decoder-prev, #btn-rs-decoder-apply").hide(); + $("#rs-decoder-page-1, #btn-rs-decoder-next").show(); + $("#rs-decoder-page-2").hide(); + + var ecc = getFormatInfo(qr_array).ecc; + var nblocks = RS_block_num_table[qr_version-1][ecc]; + var html = ""; + + var data_array = JSON.stringify(qr_array); + var rs_block = QRDecode(JSON.parse(data_array)).rs_block; + + for(var i=1; i <= nblocks; i++){ + html += "
Encoded Reed-Solomon blocks ["+i+"] :
\ + \ +
"; + } + $("#rs-decoder-page-1 div").html(html); + }) + + $("#btn-rs-decoder-next").click(function(){ + $("#rs-decoder-page-1").hide(); + $("#rs-decoder-page-2").show(); + $("#rs-decoder-error").addClass("invisible"); + $("#btn-rs-decoder-prev, #btn-rs-decoder-apply").show(); + + var rs_blocks = []; + var ecc = getFormatInfo(qr_array).ecc; + var nysm = error_correction_code_table[qr_version-1][ecc]; + $(this).hide(); + $(".rs-decoder-input").each(function(){ + rs_blocks.push($(this).val().replace(/[^0-9,]+/g, "").split(",")); + }) + + reedSolomonDecode(rs_blocks, nysm); + + }) + + $("#btn-rs-decoder-prev").click(function(){ + $("#btn-rs-decoder-prev, #btn-rs-decoder-apply").hide(); + $("#rs-decoder-page-1, #btn-rs-decoder-next").show(); + $("#rs-decoder-page-2").hide(); + }) + + $("#btn-rs-decoder-apply").click(function(){ + + }) + + $("#sample-file").change(function(){ + loadImage(this, "#img-sample"); + $("#img-sample").show(); + }) + + $(document).on("click","td.info", function(){ + $("#format-information-box").show(); + if(brute_force_mode){ + $("#format-info-content").hide(); + $("#btn-save-info").hide(); + $("#format-info-msg").show(); + } else { + for(var i=0; i < 8; i++){ + if(i > 5) + qr_format_array[i] = qr_array[i+1][8]; + else + qr_format_array[i] = qr_array[i][8]; + qr_format_array[i] = qr_array[8][qr_size-(i+1)]; + } + var index = 0; + for(var i=14; i >= 8; i--){ + if(index > 5) + qr_format_array[i] = qr_array[8][index+1]; + else + qr_format_array[i] = qr_array[8][index]; + qr_format_array[i] = qr_array[qr_size-(index+1)][8]; + index++; + } + + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + + if(i <= 8 && j <= 8) position = "TOP_LEFT"; + else if(j == 8 && i > 8) position = "BOTTOM_LEFT"; + else position = "TOP_RIGHT"; + + $("#slider-ecc div.active").removeClass("active"); + $("#slider-mask div.active").removeClass("active"); + generateInfoTable(position); + var desc = getInfoBits(position); + if(desc.ecc != ""){ + $("#slider-ecc #ecc-"+desc.ecc.toLowerCase()).addClass("active"); + } + if(desc.mask != -1){ + $("#slider-mask #mask-"+desc.mask).addClass("active"); + } + $("#format-info-content").show(); + $("#btn-save-info").show(); + $("#format-info-msg").hide(); + } + }) + + $(document).on("mouseover", ".info", function(){ + $(".info:not(.black)").each(function(){ + $(this).css("opacity","0.8"); + }) + }) + + $(document).on("mouseleave", ".info", function(){ + $(".info:not(.black)").each(function(){ + $(this).css("opacity","1"); + }) + }) + + $(document).on("mouseover", "#qr-table td:not(.static):not(.info)", function(){ + + }) + + $(document).on("mouseleave", "#qr-table td:not(.static):not(.info)", function(){ + + }) + + $(document).on("mousedown", "#qr-table td", function(){ + if(!$(this).hasClass("static") && !$(this).hasClass("info")){ + if(active_painter == "0"){ + if($(this).hasClass("black")){ + $(this).removeClass("black"); + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + qr_array[i][j] = -1; + changed_state = true; + updateHistory("Painter"); + } else { + if(!fill_painter){ + $(document).on("mousemove", startDragging); + $(document).on("mouseup", stopDragging); + $(this).removeClass("white"); + $(this).addClass("black"); + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + qr_array[i][j] = 1; + } else { + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + var original_color = qr_array[i][j]; + floodFill(i,j,original_color,1); + refreshTable(); + updateHistory("Flood fill"); + } + + changed_state = true; + } + } else if(active_painter == "1"){ + if($(this).hasClass("white")){ + $(this).removeClass("white"); + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + qr_array[i][j] = -1; + changed_state = true; + updateHistory("Painter"); + } else { + if(!fill_painter){ + $(document).on("mousemove", startDragging); + $(document).on("mouseup", stopDragging); + $(this).removeClass("black"); + $(this).addClass("white"); + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + qr_array[i][j] = 0; + } else { + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + var original_color = qr_array[i][j]; + floodFill(i,j,original_color,0); + refreshTable(); + updateHistory("Flood fill"); + } + changed_state = true; + } + } else if(active_painter == "2"){ + if(!fill_painter){ + $(document).on("mousemove", startDragging); + $(document).on("mouseup", stopDragging); + $(this).removeClass("black"); + $(this).removeClass("white"); + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + qr_array[i][j] = -1; + } else { + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + var original_color = qr_array[i][j]; + floodFill(i,j,original_color,-1); + refreshTable(); + updateHistory("Flood fill"); + } + changed_state = true; + } + } + }) + + var startDragging = function(e){ + var x = e.clientX; + var y = e.clientY; + var elem = document.elementFromPoint(x, y); + var id = elem.id; + if(elem.tagName == "TD" && elem.className.search("static") == -1 && elem.className.search("info") == -1){ + var i = /\d{1,2}/.exec(id)[0]; + var j = /\d{1,2}$/.exec(id)[0]; + if(active_painter == "0"){ + elem.className = "black"; + qr_array[i][j] = 1; + } + else if(active_painter == "1"){ + elem.className = "white"; + qr_array[i][j] = 0; + } + else if(active_painter == "2"){ + elem.className = ""; + qr_array[i][j] = -1; + } + } + } + + var stopDragging = function(){ + $(document).off("mousemove"); + $(document).off("mouseup"); + updateHistory("Painter"); + } + + $(document).on("click","#qr-format-info td", function(){ + if(!$(this).hasClass("static")){ + if($(this).hasClass("black")){ + $(this).removeClass("black"); + $(this).addClass("white"); + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + qr_format_array[i] = 0; + } else { + $(this).removeClass("white"); + $(this).addClass("black"); + var id = $(this)[0].id; + var i = /\d{1,2}/.exec(id)[0]; + qr_format_array[i] = 1; + } + + } + + var desc = getInfoBits(); + if(desc.ecc != ""){ + $("#slider-ecc #ecc-"+desc.ecc.toLowerCase()).addClass("active"); + } else { + $("#slider-ecc div.active").removeClass("active"); + } + + if(desc.mask != -1){ + $("#slider-mask #mask-"+desc.mask).addClass("active"); + } else { + $("#slider-mask div.active").removeClass("active"); + } + }) + + $("#select-format-info-pos").change(function(){ + var position = $(this).val(); + generateInfoTable(position); + }) + + $("#slider-ecc div").click(function(){ + var position = $("#select-format-info-pos").val(); + $("#slider-ecc div.active").removeClass("active"); + $(this).addClass("active"); + var i = /\w$/.exec($(this)[0].id)[0]; + if(i == "l") + i = 0; + else if(i == "m") + i = 1; + else if(i == "q") + i = 2; + else if(i == "h") + i = 3; + + if($("#slider-mask div.active").length){ + var j = /\d$/.exec($("#slider-mask div.active")[0].id)[0]; + qr_format_array = format_information_bits[i][j].split("").reverse(); + } else { + qr_format_array = (format_information_bits_raw.ecc[i]+"0000000000000").split("").reverse(); + } + + generateInfoTable(position); + }) + + $("#slider-mask div").click(function(){ + var position = $("#select-format-info-pos").val(); + $("#slider-mask div.active").removeClass("active"); + $(this).addClass("active"); + var j = /\d$/.exec($(this)[0].id)[0]; + + if($("#slider-ecc div.active").length){ + var i = /\w$/.exec($("#slider-ecc div.active")[0].id)[0]; + if(i == "l") + i = 0; + else if(i == "m") + i = 1; + else if(i == "q") + i = 2; + else if(i == "h") + i = 3; + qr_format_array = format_information_bits[i][j].split("").reverse(); + } else { + + qr_format_array = ("00"+format_information_bits_raw.mask[j]+"0000000000").split("").reverse(); + } + generateInfoTable(position); + }) + + $("#btn-save-info").click(function(){ + var size = 17+(qr_version*4); + if(unmask_status) + maskDataBits(); + saveInfoTable(size); + updateHistory("Update format info pattern"); + if(masking_mode){ + if(unmask_status) + maskDataBits(); + if($("#btn-mask-show-pattern-area").hasClass("active")){ + showMaskPatternArea(); + } + var mask_pattern = getFormatInfo(qr_array).mask; + $("#mask-pattern").val("Pattern "+mask_pattern); + } + }) + + //Undo/Redo in History + $(document).on("click",".history div", function(){ + var index = $(this)[0].id.substring(8); + $(".history div.active").removeClass("active"); + $(this).addClass("active"); + getHistory(index); + active_history = parseInt(index); + }) + + $(".menu-bar").click(function(){ + if(!$(this).hasClass("active")){ + $(".header div.right").show(); + $(this).addClass("active"); + } else { + $(".header div.right").hide(); + $(this).removeClass("active"); + } + }) + + $(document).click(function(e){ + if(!$(e.target).closest(".menu-bar").length && $(".menu-bar").css("display") == "block"){ + $(".header div.right").hide(); + $(".menu-bar").removeClass("active"); + } + }) + + $(".float-nav.left").click(function(){ + if(!$(this).hasClass("active")){ + $(".left-box").show().animate({left:'0'},350); + $(this).addClass("active"); + } else { + $(".left-box").animate({left:'-280px'},350, function(){$(this).hide()}); + $(this).removeClass("active"); + } + }) + + $(".float-nav.right").click(function(){ + if(!$(this).hasClass("active")){ + $(".right-box").show().animate({right:'0'},350); + $(this).addClass("active"); + } else { + $(".right-box").animate({right:'-340px'},350, function(){$(this).hide()}); + $(this).removeClass("active"); + } + }) + + $("#mobile-editor-mode, #mobile-decode-mode").click(function(){ + toggleResult(); + }) + + $(window).resize(function(){ + if(document.body.clientWidth > 900){ + $("#header-menu").css({"display":""}); + $(".left-box").css({"left":"","display":""}); + $(".right-box").css({"right":"","display":""}); + $(".float-nav, .menu-bar").removeClass("active"); + } + }) + + //Prevent page from closing + window.onbeforeunload = function(){ + if(changed_state) + return "Do you really want to close? Your unsaved progress will be lost!"; + }; + +}) \ No newline at end of file diff --git a/js/reedsolomon.js b/js/reedsolomon.js index b19283c..92b9a7d 100644 --- a/js/reedsolomon.js +++ b/js/reedsolomon.js @@ -1,4 +1,4 @@ -/***************************************************************************************** +/*************************************************************************************************** ------------------Javascript Reed-Solomon Universal Encoder/Decoder-------------------- Written by : Merricx @@ -6,7 +6,7 @@ Heavily referenced from https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_for_coders And ported partly from https://github.com/tomerfiliba/reedsolomon -******************************************************************************************/ +***************************************************************************************************/ var gf_exp = new Uint8Array(512); var gf_log = new Uint8Array(256); diff --git a/js/table.js b/js/table.js index 1996dbc..969aadc 100644 --- a/js/table.js +++ b/js/table.js @@ -1,5 +1,14 @@ -var function_pattern_with_format_info = { +/******************************************************************** + Tables and references used for QR code +*********************************************************************/ +//Pattern (bitmatrix) template for Function pattern and Format info +var function_pattern_with_format_info = { + /* + 0 : white + 1 : black + 2-16 : Format info + */ TOP_LEFT: [ [1,1,1,1,1,1,1,0,2], [1,0,0,0,0,0,1,0,3], @@ -36,6 +45,7 @@ var function_pattern_with_format_info = { ] }; + var alignment_pattern_array = [ [], [6, 18], @@ -45,6 +55,102 @@ var alignment_pattern_array = [ [6, 34] ]; +var format_information_bits_raw = { + ecc: [ + "11", //L + "10", //M + "01", //Q + "00" //H + ], + mask: [ + "101", + "001", + "111", + "110", + "001", + "000", + "011", + "010" + ] +} + +var format_information_bits_partial = { + BOTTOM_LEFT: [ + "1110111", + "1110010", + "1111101", + "1111000", + "1100110", + "1100011", + "1101100", + "1101001", + //ECC M + "1010100", + "1010001", + "1011110", + "1011011", + "1000101", + "1000000", + "1001111", + "1001010", + //ECC Q + "0110101", + "0110000", + "0111111", + "0111010", + "0100100", + "0100001", + "0101110", + "0101011", + //ECC H + "0010110", + "0010011", + "0011100", + "0011001", + "0000111", + "0000010", + "0001101", + "0001000" + ], + TOP_RIGHT: [ + "11000100", + "11110011", + "10101010", + "10011101", + "00101111", + "00011000", + "01000001", + "01110110", + //ECC M + "00010010", + "00100101", + "01111100", + "01001011", + "11111001", + "11001110", + "10010111", + "10100000", + //ECC Q + "01011111", + "01101000", + "00110001", + "00000110", + "10110100", + "10000011", + "11011010", + "11101101", + //ECC H + "10001001", + "10111110", + "11100111", + "11010000", + "01100010", + "01010101", + "00001100", + "00111011" + ] +} + var format_information_bits = [ //ECC L ["111011111000100",