n/qrazybox
1
0
Fork 0
mirror of https://github.com/Merricx/qrazybox.git synced 2025-02-16 06:52:58 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Merricx 2017-05-10 02:33:32 +07:00
parent cc6943bd91
commit 0df65ee7ce
46 changed files with 1362 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md Normal file
View file

@ -0,0 +1,3 @@
# QRazyBox
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.

64
help/editor-painter/format-info-pattern.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Editor &amp; Painter</a> <span>&rsaquo;</span> Format Info Pattern</h6>
</div>
<h2>Format Info Pattern</h2>
<br>
<p>As explained in the <a href="../getting-started/about-qr-code.html">previous section</a>, Format information pattern is module pattern that tell about current specification that being used by QR code, that is <b>Error correction level</b> and <b>Mask Pattern</b>.<br>
You can set Format information pattern by clicking the blue colored modules and you will be prompted with the dialog as shown below.</p>
<center>
<img src="../img/format-info-dialog.png">
</center>
<p>There are two ways to set Format info pattern. First, simply clicking on module one by one like using Painter. Second, you can select options that located under the modules to set values of Error correction level and Mask pattern and Format info pattern will automatically drawn by itself. These two ways will synchronize with each other automatically.<br><br>
Keep in mind, that Format info pattern only accept black and white color. Thus, grey color (damaged parts) cannot be drawn in here. Just leave it with white color if the actual module is missing or unknown.<br>
But, if the whole format info pattern is missing, you can use extension tools called <b><a href="../extension-tools/brute-force-format-info-pattern.html">Brute-force Format Info Pattern</a></b> to automatically find the right pattern.</p>
<br>
<p>Format info pattern is shared in three location of QR code (<b>top left</b>, <b>bottom left</b>, and <b>top right</b>) and always located close to finder pattern. By setting only in one location, will automatically set the other two location.</p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='painter-basic-usage.html';">Prev : Painter Basic Usage</button>
<button class="right" onclick="window.location='undo-redo-using-history.html';">Next : Undo/Redo Using History</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

83
help/editor-painter/painter-basic-usage.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Editor &amp; Painter</a> <span>&rsaquo;</span> Painter Basic Usage</h6>
</div>
<h2>Painter Basic Usage</h2>
<br>
<center>
<img src="../img/painter.png">
<p><i>(The image of Painter tools)</i></p>
</center>
<br>
<h4>Color Palettes</h4>
<p>There are three colors to draw data bits of QR code that available in Painter: <b>Black</b>, <b>White</b>, and <b>Grey</b>.<br>
<b>Black</b> and <b>white</b> color represent binary value of data bits (black = 1 and white = 0).<br>
Then, <b>grey</b> color represents damaged or missing data of QR code.<br></p>
<br>
<p>You can switch the active color by clicking color palette you want to activated.</p>
<br>
<h4>Drawing Methods</h4>
<p>There are two methods that you can use to draw QR code using color palette.<br>First, called <b>Toggling</b>, where you color modules by clicking one by one. In addition, when you color on an already colored module with the same color as your current color palette, it will color alternately between that color and grey color (this only works on black and white palettes).<br><!--For more details, see image below.--></p>
<center>
</center>
<br>
<p>The second is <b>Dragging</b>. This method will let you color modules freely by dragging cursor to the modules you want to color.</p>
<center>
</center>
<br>
<h4>Flood Fill</h4>
<p>Besides using the above methods, you can also color modules quickly by using <b>Flood fill</b>. It use the same concept as <i>bucket fill</i> tool that perhaps you have seen in common Paint-like application. It will color all similarly-colored and connected modules.</p>
<center>
</center>
<p>Flood fill is toggleable, and will color according to the currently active color palette.</p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='index.html';">Prev : Editor &amp; Painter</button>
<button class="right" onclick="window.location='format-info-pattern.html';">Next : Format Info Pattern</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

67
help/editor-painter/undo-redo-using-history.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Editor &amp; Painter</a> <span>&rsaquo;</span> Undo/Redo using History</h6>
</div>
<h2>Undo/Redo using History</h2>
<br>
<p>You can undo or redo your work by selecting one of history you want to rollback on <b>History toolbox</b>, so that you can jump to any previous states of your work.</p>
<br>
<center>
<img src="../img/history-toolbox.png">
</center>
<br>
<p>History in QRazyBox works with following conditions : </p>
<ul>
<li><p>Any changes of your work (including from Extension tools) will be stored in History.</p></li>
<li><p>History can only store maximum of 10 states. When the maximum is exceeded, the oldest one will be lost.</p></li>
<li><p>When creating or loading new project, history will be cleared and starts from beginning.</p></li>
<li><p>Suppose you have history with states named <b>A</b>, <b>B</b>, <b>C</b>, <b>D</b> sequentially. <b>D</b> is your current state. Then, you jump to state <b>B</b> and make changes and thus create new state called <b>E</b>. The state <b>C</b> and <b>D</b> will be lost and overwritten by state <b>E</b>. Therefore, your history list now is: <b>A</b>, <b>B</b>, <b>E</b>.</p></li>
</ul>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='format-info-pattern.html';">Prev : Format Info Pattern</button>
<button class="right" onclick="window.location='../extension-tools/index.html';">Next : Extension Tools</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

55
help/examples/advanced-example.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Examples</a> <span>&rsaquo;</span> Advanced Example</h6>
</div>
<h2>Advanced Example</h2>
<br>
<p>Coming soon...</p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='basic-example.html';">Prev : Basic Example</button>
<button class="right" onclick="window.location='../misc/index.html';">Next : Miscellaneous</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

113
help/examples/basic-example.html Normal file
View file

@ -0,0 +1,113 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Examples</a> <span>&rsaquo;</span> Basic Example</h6>
</div>
<h2>Basic Example</h2>
<br>
<p>In this example, we are going to recover the following QR code.</p>
<br>
<center>
<img src="../../sample/basic-example.png" style="width:250px;height:auto;">
</center>
<br>
<p>Of course, we cannot scan it normally, because it lost too much modules including Finder and Alignment pattern.<br>
The first step is to reconstruct it with Painter manually (we cannot import it as image since its Finder and Alignment pattern are missing).</p>
<center>
<img src="../img/basic-example-1.png" style="width:300px;height:auto;">
<p><i>(Reconstructed QR code using Painter)</i></p>
</center>
<br>
<p>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.</p>
<center>
<img src="../img/basic-example-2.png" style="width:500px;height:auto;">
<p><i>(The most suitable pattern is <b>ECC level M</b> and <b>Mask pattern 1)</b></i></p>
</center>
<br>
<p>Now we have reconstructed QR code in our Editor and the missing Finder along with Alignment pattern are recovered.</p>
<center>
<img src="../img/basic-example-3.png" style="width:300px;height:auto;">
</center>
<br>
<p>Still, we can't decode it using normal Decoder because it's too much damaged for Error level M to be corrected. So, we should recover more modules of this QR code.<br>
The next step, analyze the QR code using <b>Extract QR Information</b>. Using that tool, give us the following result.</p>
<center>
<img src="../img/basic-example-4.png">
</center>
<br>
<p>We got the decoded message, but it rather unreadable and seems broken. We can ignore that for a moment.<br>
Pay attention to the <b>Number of missing bytes</b>. It said that our QR code have <b>39 bytes</b> of its data missing. Meanwhile, to correcting Erasure with Reed-Solomon, the maximum number of missing bytes in <b>ECC level M version 3</b> should be about <b>26</b>.</p>
<p>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 <b>Padding Bits Recovery</b>.<br>
<center>
<img src="../img/basic-example-5.png">
</center>
<p>Luckily, our padding bits in this QR code was quite big and we successfully recovered almost half of the damaged parts.<br>
This is our recovered QR code so far (<i>still not decodable yet</i>).</p>
<br>
<center>
<img src="../img/basic-example-8.png">
</center>
<br>
<p>Checking again with <b>Extract QR Information</b>, we dropped number of missing bytes to <b>25 bytes (35.71%)</b>. Also, the final part of messsage become more readable than before (<i>EVERYTHING</i> from <i>EVERYTHIMY</i>).
</p>
<br>
<center>
<img src="../img/basic-example-6.png">
</center>
<br>
<p>QR code <b>version 3</b> with <b>ECC level M</b> have <b>26</b> 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 <a href="../extension-tools/reed-solomon-decoder.html">previous section</a> that we can correct Errors half of the ECC symbol and <u>Erasures as many as the ECC symbol</u>).<br>
Using <b>Reed-Solomon Decoder</b>, we successfully recover the message.</p>
<br>
<center>
<img src="../img/basic-example-7.png">
</center>
<p>And finally, we got the final message : <b>"YOU CAN DO ANYTHING BUT NOT EVERYTHING"</b>.</p>
<br>
<p><i>*This example concept inspired from <a href="http://uecmma.github.io/mmactf/">MMA CTF 2015 challenge</a> and the solving concept from <a href="https://github.com/pwning/public-writeup/blob/master/mma2015/misc400-qr/writeup.md">https://github.com/pwning/public-writeup/blob/master/mma2015/misc400-qr/writeup.md</a></i></p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='index.html';">Prev : Examples</button>
<button class="right" onclick="window.location='advanced-example.html';">Next : Advanced Example</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

61
help/examples/index.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> Examples</h6>
</div>
<h2>Examples</h2>
<br>
<p>This section contains some examples that explain how to recover QR code step by step. <br>These examples was created in such a way to make explanation about usage of the used tools is easy to understand.</p>
<br>
<p>List of examples : </p>
<ul>
<li><p><b><a href="basic-example.html">Basic Example</a></b></p></li>
<li><p><b><a href="advanced-example.html">Advanced Example</a></b></p></li>
</ul>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='../extension-tools/padding-bits-recovery.html';">Prev : Padding Bits Recovery</button>
<button class="right" onclick="window.location='basic-example.html';">Next : Basic Example</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

65
help/extension-tools/brute-force-format-info-pattern.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Extension Tools</a> <span>&rsaquo;</span> Brute-force Format Info Pattern</h6>
</div>
<h2>Brute-force Format Info Pattern</h2>
<br>
<p>This tool is very suitable to use when almost all or even the whole modules of format info pattern are unknown or damaged.<br>It will try all possibilities of Format info pattern. Since QR code only has 4 ECC level and 8 Mask pattern, it just needs 32 trials to find the correct one.<br>
Though, this condition is very rarely happen to QR code.</p>
<br>
<p><b>Brute-force Format Info Pattern</b> is <i>toggleable</i> tool. Which means, it will remain active until you de-activate it or the tool has found the correct pattern.<br>As long as this tool is active, you cannot edit or set the format info pattern.<br>
This tool will be executed when you decode the QR code through <b>Decode mode</b>.</p>
<center>
<img src="../img/brute-force-format-info.png">
<p><i>(The image above displays brute-force result with ECC level H and Mask pattern 2 along with the decoded message)</i></p>
</center>
<br>
<p>Keep in mind, that it may generate more than one result. You can check all result(s) by clicking the arrow button.</p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='reed-solomon-decoder.html';">Prev : Reed-Solomon Decoder</button>
<button class="right" onclick="window.location='data-unmasking.html';">Next : Data Unmasking</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

66
help/extension-tools/data-unmasking.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Extension Tools</a> <span>&rsaquo;</span> Data Unmasking</h6>
</div>
<h2>Data Unmasking</h2>
<br>
<p><b>Data Unmasking</b> is a simple tool to unmask modules of your current work according to the mask pattern that being used. It can be used when you want to analyze QR code module by module manually.<br><br>
This tool is <i>toggleable</i> like <a href="brute-force-format-info-pattern.html">Brute-force Format Info Pattern</a>. Activating this tool will add new toolbox under main toolbox in Editor mode where you can manage the tool settings there.</p>
<center>
<img src="../img/data-unmasking-toolbox.png">
</center>
<p><b>1. Mask Pattern : </b> Set the mask pattern that will be used to unmask QR code (change this will affect current Format info pattern).</p>
<p><b>2. Mask Pattern Area : </b> Option whether to show Mask pattern area or not (the affected modules will be marked with green color).</p>
<p><b>3. Unmask Data : </b> Toggle between unmask/mask data of QR code.</p>
<br>
<center>
<img src="../img/data-unmasking-diff.png" style="width:640px;height:auto;">
</center>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='brute-force-format-info-pattern.html';">Prev : Brute-force Format Info Pattern</button>
<button class="right" onclick="window.location='padding-bits-recovery.html';">Next : Padding Bits Recovery</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

77
help/extension-tools/extract-qr-information.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Extension Tools</a> <span>&rsaquo;</span> Extract QR Information</h6>
</div>
<h2>Extract QR Information</h2>
<br>
<p>The best tool as starting point of your work that used to analyzing your QR code.<br>This tool will force decode QR code and then extract information such as: specifications (Version, Error Correction level and Mask Pattern that being used), data sequence, reed-solomon blocks, and decoded message (if possible) from it. Always use this tool first when you trying to recover the unscannable QR code.</p>
<br>
<p>The big difference between this tool and normal decoder is, when you decoding with normal decoder and find any error on the QR code, the decoder will stop the process (and maybe prints the error message).<br>Whereas, this tool will ignore those errors and continue the decoding process although with rough results. This tool also use the different algorithm to make the process more effective for that purpose. In addition, it will also display the decoding process including the process of error correction and message decoding.</p>
<br>
<h4>Interface</h4>
<center>
<img src="../img/extract-qr-info.png" style="width:800px;height:auto;">
</center>
<p><b>1. Error Correction Log : </b> Option whether you want to show error correction process (Reed-Solomon calculation) or not in the output.</p>
<p><b>2. Decoding Error : </b> Option whether you want to show decoding error or not in the output.</p>
<p><b>3. Back to Editor : </b> Close the tool and back to main workspace.</p>
<p><b>4. Output : </b> Main output that display the result of extracted information from QR code.</p>
<br>
<h4>Reading QR code without Error correction</h4>
<p>In rare case, you can recover the message from bad damaged QR code just by using this tool, as shown in the following example.</p>
<br>
<center>
<img src="../img/extract-qr-example.png" style="width:800px;height:auto;">
</center>
<br>
<p>It could be happened, since the damaged modules only affect the Reed-Solomon blocks instead of the message. Therefore, by reading the data sequence normally, this tool can still recover the message.</p>
<br>
<p><i>*Javascript implementation of this tool was ported from Python script of <a href="https://github.com/waidotto/strong-qr-decoder">Strong-QR-Decoder</a>.</i></p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='index.html';">Prev : Extension Tools</button>
<button class="right" onclick="window.location='reed-solomon-decoder.html';">Next : Reed-Solomon Decoder</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

66
help/extension-tools/index.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> Extension Tools</h6>
</div>
<h2>Extension Tools</h2>
<br>
<p><b>Extension Tools</b> are collection of advanced individual tool that helps you analyze and recover your QR code according to the problems that being encountered in your work.<br>
You can access these tools by clicking <b>Tools</b> in main menu.</p>
<br>
<p>QRazyBox provides following extension tools : </p>
<ul>
<li><p><b><a href="extract-qr-information.html">Extract QR Information</a></b></p></li>
<li><p><b><a href="reed-solomon-decoder.html">Reed-Solomon Decoder</a></b></p></li>
<li><p><b><a href="brute-force-format-info-pattern.html">Brute-force Format Info Pattern</a></b></p></li>
<li><p><b><a href="data-unmasking.html">Data Unmasking</a></b></p></li>
<li><p><b><a href="padding-bits-recovery.html">Padding Bits Recovery</a></b></p></li>
</ul>
<br>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='../editor-painter/index.html';">Prev : Undo/Redo using History</button>
<button class="right" onclick="window.location='extract-qr-information.html';">Next : Extract QR Information</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

76
help/extension-tools/padding-bits-recovery.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Extension Tools</a> <span>&rsaquo;</span> Padding Bits Recovery</h6>
</div>
<h2>Padding Bits Recovery</h2>
<br>
<p><b>Padding Bits Recovery</b> is tool that used to recover missing terminator and padding bits of QR code automatically.<br>
I assume that you already know about how data encoding works in QR code before using this tool.<br><br>
As we already know that if the message bit string is shorter than the total number of required bits, QR code should be padded with <b>terminator</b> and <b>padding bits</b> until it reach the required number of bits.<br>
<b>Terminator</b> always consists of <b>0</b> value of their modules and <b>Padding bits</b> always consists of alternate value between <b>11101100</b> and <b>00010001</b>. Therefore, we can exploit that to automatically recover some missing bits in QR code.</p>
<br>
<p>This tool can be used when QR code meets the following conditions :</p>
<ul>
<li><p>It contains at least four values of Terminator (<b>0000</b>) at the end of message bit string</p></li>
<li><p>It contains one or more Encoding mode indicator</p></li>
<li><p>It contains Character count indicator right after encoding mode indicator</p></li>
</ul>
<p>Otherwise, the tool will throw error when the above conditions are not fulfilled.</p>
<center>
<img src="../img/padding-bits-recovery.png">
<p><i>(The dialog of Padding Bits Recovery. The green-colored modules indicating recovered/affected modules)</i></p>
</center>
<br>
<h4>Tool's Warning</h4>
<p>In certain cases, this tool can also throw a warning when the recovered modules are overwritting modules that are not grey-colored.<br>
When that happen, you have an option to ignore the warning or cancel the operation. Be careful though, overwriting already known modules may cause addition of the Error in QR code.<br>You can undo this operation anytime through <a href="../editor-painter/undo-redo-using-history.html"><b>History</b></a></p>
<br>
<p>Further details about the implementation of this tool can be seen in the <a href="../examples/index.html">example section</a>.</p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='data-unmasking.html';">Prev : Data Unmasking</button>
<button class="right" onclick="window.location='../examples/index.html';">Next : Examples</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

140
help/extension-tools/reed-solomon-decoder.html Normal file
View file

@ -0,0 +1,140 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<style type="text/css">
p span {
font-weight: bold;
margin-left: 20px;
color: #00c853;
}
p span.red {
color: #e53935;
}
</style>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="index.html">Extension Tools</a> <span>&rsaquo;</span> Reed-Solomon Decoder</h6>
</div>
<h2>Reed-Solomon Decoder</h2>
<br>
<p><b>Reed-Solomon error correction</b> is the error correcting codes that used widely in two-dimensional barcode, including QR code. It allows to correct reading when some of the data is damaged or unreadable.<br><br>
This is the most essential tool of QRazyBox, since our recovery method is very dependent on Reed-Solomon.<br>This tool implements all type of correction process (also known as <i>Reed-Solomon decoding</i>).</p>
<br>
<h4>Error and Erasure Correction</h4>
<p>There are three types of correction that used by Reed-Solomon codes: <b>Error correction</b>, <b>Erasure correction</b> and both of <b>Error and Erasure correction</b>.<br>
<b>Error correction</b> is type of correction where the errors location are unknown, whereas <b>Erasure correction</b> is type of correction where the errors location are known. <br><br>
Using <b>Error correction</b>, we can correct errors up to half of the number of ECC symbol (<i>Reed-Solomon blocks</i>) and correct errors as many as the number of ECC symbol with <b>Erasure correction</b>. Therefore, Error correction become twice as strong when the error location is known.
<br>
<br>
Thus, according to that fact, when we know position of the errors, the capability to restore the data of each ECC level can be doubled.<br>See the following table to see the difference.</p>
<center><table>
<tr>
<th rowspan="2">Error Correction Level</th>
<th colspan="2">% of data that can be restored</th>
</tr>
<tr>
<th>Without Erasure Correction</th>
<th>With Erasure Correction</th>
</tr>
<tr>
<td>Level L</td>
<td>&plusmn; 7%</td>
<td>&plusmn; 14%</td>
</tr>
<tr>
<td>Level M</td>
<td>&plusmn; 15%</td>
<td>&plusmn; 30%</td>
</tr>
<tr>
<td>Level Q</td>
<td>&plusmn; 25%</td>
<td>&plusmn; 50%</td>
</tr>
<tr>
<td>Level H</td>
<td>&plusmn; 30%</td>
<td>&plusmn; 60%</td>
</tr>
</table>
</center>
<br>
<p>However, normal QR code scanner doesn't have <b>erasure correction</b> feature, since it difficult to recognize the error locations of QR code automatically and may resulting in slower scan.</p>
<br>
<h4>Example of Reed-Solomon in General</h4>
<p>Before using this tool, it is better to know how <i>Reed-Solomon</i> works generally. Take a look at the following simple example.<br></p>
<p>Suppose we will encode text <b>"HELLO WORLD"</b> to Reed-Solomon block.</p>
<p>Convert the text to decimal value : <br>
<b>72,69,76,76,79,32,87,79,82,76,68</b></p>
<p>Encode with Reed-Solomon using <b>11</b> ECC symbol : <br>
<b>72,69,76,76,79,32,87,79,82,76,68,<i>123,80,185,183,114,194,10,36,93,160,102</i></b></p>
<br>
<p>Now, that we have the encoded Reed-Solomon block, we will try to calculate the correction possiblity in various damaged states.</p>
<p>According to the ECC symbol that being used to encode (in this case the number of ECC symbol is <b>11</b>), we can correct up to <b>2*e+n <= 11</b>, where <b>e</b> is number of error and <b>n</b> is number of erasure.<br>
Suppose <b>x</b> as error and <b>?</b> as erasure</p>
<p><b>72,69,x,x,x,x,87,79,82,76,68,123,80,185,183,114,194,10,36,93,160,102</b> <i>(4 errors)</i>&ensp; <b>= &ensp;8 <= 11</b><span>CORRECTABLE</span></p>
<p><b>72,69,x,x,x,x,87,79,82,76,68,123,80,185,183,114,x,x,x,93,160,102</b> <i>(7 errors)</i>&ensp; <b>= &ensp;14 <= 11</b><span class="red">UNCORRECTABLE</span></p>
<p><b>72,69,?,?,?,?,87,79,82,76,68,123,80,185,183,114,194,10,36,93,160,102</b> <i>(4 erasures)</i>&ensp; <b>= &ensp;4 <= 11</b><span>CORRECTABLE</span></p>
<p><b>72,69,?,?,?,?,87,79,82,76,68,123,80,185,183,114,?,?,?,93,160,102</b> <i>(7 erasures)</i>&ensp; <b>= &ensp;7 <= 11</b><span>CORRECTABLE</span></p>
<p><b>?,?,?,?,?,?,87,?,?,76,68,123,80,185,183,114,?,?,?,?,160,102</b> <i>(12 erasures)</i>&ensp; <b>= &ensp;12 <= 11</b><span class="red">UNCORRECTABLE</span></p>
<p><b>72,69,x,x,x,x,87,79,82,76,68,123,80,185,183,114,?,?,?,93,160,102</b> <i>(4 errors &amp; 3 erasures)</i>&ensp; <b>= &ensp;11 <= 11</b><span>CORRECTABLE</span></p>
<br>
<h4>Basic Usage</h4>
<p>When you use Reed-Solomon Decoder, you will be prompted by dialog. There will be total 2 page of dialog, for input and output. Although, this tool will input the Reed-Solomon blocks automatically, but you can edit and enter manually if you want to.<br>
You also don't have to input number of ECC symbol and even the error position/location, since this tool will automatically detect from the QR code that you already drawn before (zero values of Reed-Solomon blocks will be treated as error position).</p>
<center>
<img src="../img/rs-decoder-1.png">
</center>
<p>Keep in mind, that Reed-Solomon block can also consist more than one on a larger QR code.<br>The second page of the dialog will display output such as decoded Reed-Solomon blocks and the final message from QR code.</p>
<center>
<img src="../img/rs-decoder-2.png">
</center>
<br>
<p>Jump to <a href="../examples/index.html">examples section</a> to see the further details about using Reed-Solomon Decoder.</p>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='extract-qr-information.html';">Prev : Extract QR Information</button>
<button class="right" onclick="window.location='brute-force-format-info-pattern.html';">Next : Brute-force Format Info Pattern</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

BIN
help/img/Screenshot - 140417 - 23:31:36.xcf Normal file
View file

Binary file not shown.

BIN
help/img/basic-example-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
help/img/basic-example-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
help/img/basic-example-3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
help/img/basic-example-4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
help/img/basic-example-5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
help/img/basic-example-6.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
help/img/basic-example-7.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
help/img/basic-example-8.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
help/img/brute-force-format-info.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
help/img/data-unmasking-diff.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
help/img/data-unmasking-toolbox.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
help/img/extract-qr-example.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
help/img/extract-qr-info.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
help/img/format-info-dialog.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
help/img/history-toolbox.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
help/img/padding-bits-recovery.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
help/img/painter.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
help/img/rs-decoder-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
help/img/rs-decoder-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

51
help/js/index.js Normal file
View file

File diff suppressed because one or more lines are too long

7
help/js/jquery.mark.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

58
help/misc/index.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> Miscellaneous</h6>
</div>
<h2>Miscellaneous</h2>
<br>
<ul>
<li><p><b><a href="qr-code-samples.html">QR Code Samples</a></b></p></li>
<li><p><b><a href="qr-code-samples.html">Third Party and License</a></b></p></li>
</ul>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='../examples/advanced-example.html';">Prev : Advanced Example</button>
<button class="right" onclick="window.location='qr-code-samples.html';">Next : QR Code Samples</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

76
help/misc/license.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="../index.html">Miscellaneous</a> <span>&rsaquo;</span> Third-Party &amp; License</h6>
</div>
<h2>Third-Party &amp; License</h2>
<br>
<p>List of Third-party libraries that used in QRazyBox and their respective license : </p>
<br>
<h4>jsqrcode</h4>
<p>Implemented as <b>QR decoder</b> and image parser.<br>
<a href="https://github.com/LazarSoft/jsqrcode">https://github.com/LazarSoft/jsqrcode</a><br>
License : <b><a href="https://opensource.org/licenses/Apache-2.0">Apache-2.0</a></b></p>
<br>
<h4>Strong QR Decoder</h4>
<p><i>Ported Python script</i>. Implemented in <b>Extract QR Information</b> tool.<br>
<a href="https://github.com/waidotto/strong-qr-decoder">https://github.com/waidotto/strong-qr-decoder</a><br>
License : <b><a href="https://opensource.org/licenses/MIT">MIT</a></b></p>
<br>
<h4>reedsolo.py</h4>
<p><i>Ported Python script</i>. Implemented in <b>Reed-Solomon Decoder</b> tool.<br>
<a href="https://github.com/tomerfiliba/reedsolomon">https://github.com/tomerfiliba/reedsolomon</a> (based on <a href="https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_for_coders">en.wikiversity.org</a>)<br>
License : Public Domain</p>
<br>
<h4>mark.js</h4>
<p>Used as highlighting tool in this help page.<br>
<a href="https://markjs.io/">https://markjs.io/</a><br>
License : <b><a href="https://opensource.org/licenses/MIT">MIT</a></b></p>
<br><br>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='index.html';">Prev : QR Code Samples</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

106
help/misc/qr-code-samples.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">
<link rel="icon" href="../../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.mark.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<style type="text/css">
.sample-box {
float: left;
margin: 25px;
}
.sample-box img {
max-height: 200px;
width: auto;
border: solid 2px #000;
cursor: pointer;
}
.sample-box img:hover {
opacity: .85;
}
</style>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
</div>
</div>
<div class="help">
<div class="breadcrumbs noselect">
<h6><a href="../index.html">Help</a> <span>&rsaquo;</span> <a href="../index.html">Miscellaneous</a> <span>&rsaquo;</span> QR Code Samples</h6>
</div>
<h2>QR Code Samples</h2>
<br>
<p>Here are some sample of QR code that can be used to practice using QRazyBox.<br>
Access to <b><i>/sample</i></b> directory if you run this on computer locally to quickly browse these samples.</p>
<div class="sample-box">
<a href="../../sample/sample-0.png"><img src="../../sample/sample-0.png"></a>
</div>
<div class="sample-box">
<a href="../../sample/sample-1.png"><img src="../../sample/sample-1.png"></a>
</div>
<div class="sample-box">
<a href="../../sample/sample-rs.png"><img src="../../sample/sample-rs.png"></a>
</div>
<div class="sample-box">
<a href="../../sample/basic-example.png"><img src="../../sample/basic-example.png"></a>
</div>
<div class="sample-box">
<a href="../../sample/problem (1).png"><img src="../../sample/problem (1).png"></a>
</div>
<div class="sample-box">
<a href="../../sample/problem.png-b99f108ecfe954e3299d47383007ead1a61b4f5c62591307184d54ea76abfc23.png"><img src="../../sample/problem.png-b99f108ecfe954e3299d47383007ead1a61b4f5c62591307184d54ea76abfc23.png"></a>
</div>
<div class="sample-box">
<a href="../../sample/6758457307_7f180aabec_z.png"><img src="../../sample/6758457307_7f180aabec_z.png"></a>
</div>
<div class="sample-box">
<a href="../../sample/4838077267_e5a85965df_b.jpg"><img src="../../sample/4838077267_e5a85965df_b.jpg"></a>
</div>
<div class="sample-box">
<a href="../../sample/book.jpg"><img src="../../sample/book.jpg"></a>
</div>
<div class="sample-box">
<a href="../../sample/9569794307_10385e2cf7_k.jpg"><img src="../../sample/9569794307_10385e2cf7_k.jpg"></a>
</div>
<div class="clear"></div>
<div class="space"></div>
<div class="nav">
<button class="left" onclick="window.location='index.html';">Prev : Miscellaneous</button>
<button class="right" onclick="window.location='license.html';">Next : Third Party &amp; License</button>
</div>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

128
help/search.html Normal file
View file

@ -0,0 +1,128 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="icon" href="../img/icon.png">
<title>QRazyBox - Help Page</title>
</head>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
var q = getParameterByName("q");
$(document).ready(function(){
$(".search input[type=text]").val(q);
$("#q-head").text("Search result for \""+q+"\" : ");
var html = "";
for(var i=0; i < search_index.length; i++){
if(new RegExp(q,"gi").test(search_index[i][0])){
var description = search_index[i][0];
if(description.length > 250)
description = description.substring(0,250) + "...";
description = description.replace(new RegExp("("+q+")", "gi"), "<b>$1</b>");
html += "<div onclick='window.location=\""+search_index[i][1]+"?mark="+q+"\"' class='search-result'><h4>"+search_index[i][2]+"</h4><p>"+description+"</p></div>";
}
}
if(!html)
html = "<center><h5>No results were found...</h5></center>";
$("#result").html(html);
if($(".search-result").length == 1){
$(".search-result").trigger("click");
}
})
</script>
<style type="text/css">
.search-result {
border: solid 2px #4fc3f7;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
padding: 10px;
}
.search-result:hover {
background-color: #eeeeee;
}
</style>
<body style="background:white;">
<div class="header noselect">
<div class="left">
<img src="../img/icon.png" class="icon">
<h3>QRazyBox Help</h3>
</div>
<div class="right">
<div class="search">
<img src="../img/search.png">
<input type="text" placeholder="Search here...">
</div>
<img src="../img/bars.png" class="menu-bar">
</div>
</div>
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
<div style="height:80px;"></div>
<div id="help-menu">
<ul class="help-menu">
<center><div class="search mobile"><img src="../img/search.png"><input type="text" placeholder="Search here..."></div></center>
<a href="introduction/index.html"><li>Introduction</li></a>
<a href="getting-started/index.html"><li>Getting Started</li></a>
<ul class="help-menu hide">
<a href="getting-started/about-qr-code.html"><li>About QR Code</li></a>
<a href="getting-started/interface-overview.html"><li>Interface Overview</li></a>
<a href="getting-started/create-save-load-project.html"><li>Create, Save, and Load Project</li></a>
<a href="getting-started/drawing-and-decoding-qr-code.html"><li>Drawing and Decoding QR Code</li></a>
</ul>
<a href="editor-painter/index.html"><li>Editor &amp; Painter</li></a>
<ul class="help-menu hide">
<a href="editor-painter/painter-basic-usage.html"><li>Painter Basic Usage</li></a>
<a href="editor-painter/format-info-pattern.html"><li>Format Info Pattern</li></a>
<a href="editor-painter/undo-redo-using-history.html"><li>Undo/Redo using History</li></a>
</ul>
<a href="extension-tools/index.html"><li>Extension Tools</li></a>
<ul class="help-menu hide">
<a href="extension-tools/extract-qr-information.html"><li>Extract QR Information</li></a>
<a href="extension-tools/reed-solomon-decoder.html"><li>Reed-Solomon Decoder</li></a>
<a href="extension-tools/brute-force-format-info-pattern.html"><li>Brute-force Format Info Pattern</li></a>
<a href="extension-tools/data-unmasking.html"><li>Data Unmasking</li></a>
<a href="extension-tools/padding-bits-recovery.html"><li>Padding Bits Recovery</li></a>
</ul>
<a href="examples/index.html"><li>Examples</li></a>
<ul class="help-menu hide">
<a href="examples/basic-example.html"><li>Basic Example</li></a>
<a href="examples/advanced-example.html"><li>Advanced Example</li></a>
</ul>
<a href="misc/index.html"><li>Miscellaneous</li></a>
<ul class="help-menu hide">
<a href="misc/qr-code-samples.html"><li>QR Code samples</li></a>
<a href="misc/license.html"><li>Third-Party &amp; License</li></a>
</ul>
</ul>
</div>
</div>
<div class="help">
<h3 id="q-head">Search result for "" : </h3>
<br><br>
<div id="result">
<div class="search-result">
</div>
</div>
<br>
<div class="clear"></div>
<div class="space"></div>
</div>
</body>
</html>

BIN
img/bars.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 193 B

BIN
sample/10148070824_31b8ab3f30.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
sample/4838077267_e5a85965df_b.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 324 KiB

BIN
sample/6758457307_7f180aabec_z.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
sample/9569794307_10385e2cf7_k.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
sample/basic-example.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
sample/book.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB