mirror of
https://github.com/Merricx/qrazybox.git
synced 2025-04-19 09:39:04 +02:00
Inital commit
This commit is contained in:
Merricx
parent
36dc912119
commit
cc6943bd91
15 changed files with 2362 additions and 1855 deletions
268
css/style.css
268
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
</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;">
|
||||
|
|
@ -23,10 +24,11 @@
|
|||
<img src="../../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
|
||||
<div style="height:80px;"></div>
|
||||
<div id="help-menu">
|
||||
|
||||
|
|
@ -40,6 +42,12 @@
|
|||
|
||||
<h2>Editor & Painter</h2>
|
||||
<br>
|
||||
<p>This section will explain more details about using Painter and other tools in Editor mode.</p>
|
||||
<br>
|
||||
<h5>Jump to :</h5>
|
||||
<p><a href="painter-basic-usage.html">- Painter Basic Usage</a></p>
|
||||
<p><a href="format-info-pattern.html">- Format Info Pattern</a></p>
|
||||
<p><a href="undo-redo-using-history.html">- Undo/Redo using History</a></p>
|
||||
<div class="space"></div>
|
||||
<div class="nav">
|
||||
<button class="left" onclick="window.location='../getting-started/drawing-and-decoding-qr-code.html';">Prev : Drawing and Decoding QR code</button>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
</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;">
|
||||
|
|
@ -23,10 +24,11 @@
|
|||
<img src="../../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
|
||||
<div style="height:80px;"></div>
|
||||
<div id="help-menu">
|
||||
|
||||
|
|
@ -42,14 +44,13 @@
|
|||
<br>
|
||||
<p><b>QR code</b> (abbreviated from <b>Quick Response Code</b>) 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. <i>(Wikipedia)</i></p>
|
||||
<p>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. <i>(thonky.org)</i></p>
|
||||
<p>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.</p>
|
||||
<br>
|
||||
<h4>QR Code Versions</h4>
|
||||
<br>
|
||||
<center><img src="../img/versionVarietyImage.png"></center>
|
||||
<br>
|
||||
<p>The size of QR Code is called <b>version</b>. Version of QR Code range from <b>version 1 (21x21 pixels)</b> up to <b>version 40 (177x177 pixels)</b>. 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.</p>
|
||||
<p><i>*Pixel in QR Code is often also called <b>Module</b>.</i></p>
|
||||
<p><i>*Pixel in QR Code is also called <b>Module</b>.</i></p>
|
||||
<br>
|
||||
<h4>Error Correction</h4>
|
||||
<p>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 <i>Reed-Solomon Error Correction</i> algorithm that consists of 4 correction levels: <b>Low (L)</b>, <b>Medium (M)</b>, <b>Quartile (Q)</b>, and <b>High (H)</b>, where each of the level has its own capability of how much the data can be restored.</p>
|
||||
|
|
@ -80,16 +81,15 @@
|
|||
</center>
|
||||
<br>
|
||||
<h4>Structure of QR Code</h4>
|
||||
<p>QR Code always consist of three things, <b>Function pattern</b>, <b>Format & Version Information Pattern</b>, and <b>Data Bits</b>.<br>Function Pattern is a non-data element of the QR Code that is required by the QR Code specification.<br>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.<br>
|
||||
Function pattern often also called <i>Fixed Pattern</i> because their form never changed, but only their position that will change depending on the QR Code version.</p>
|
||||
<p>QR Code always consists of three things, <b>Function pattern</b>, <b>Format & Version Information Pattern</b>, and <b>Data Bits</b>.<br>Function Pattern is a non-data element of the QR Code that is required by the QR Code specification.<br>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.</p><br>
|
||||
<center>
|
||||
<img src="../img/QRCode-2-Structure.png" style="width:800px;height:auto;">
|
||||
<img src="../img/QRCode-2-Structure.png">
|
||||
<p><i>(The image above explains about QR Code structure)</i></p>
|
||||
</center>
|
||||
<br>
|
||||
<h4>Format and Version Information</h4>
|
||||
<p>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.<br><br>
|
||||
Format information consist of 15 bits data that store information about error correction and mask pattern that being used by QR code.<br>Thereafter, Version information consist of 18 bits data that store information about QR code version.<br>Because until now, QRazyBox only support up to version 6 QR code, so we will ignore about version information for now.</p>
|
||||
Format information consists of 15 bits data that store information about error correction and mask pattern that being used by QR code.<br>Thereafter, Version information consists of 18 bits data that store information about QR code version.<br>Because until now, QRazyBox only support up to version 6 QR code, so we will ignore about version information for now.</p>
|
||||
<br>
|
||||
<center>
|
||||
<img src="../img/576px-QR_Format_Information.svg.png">
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
<br>
|
||||
<p>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.</p>
|
||||
<center>
|
||||
<img src="../img/QR_Ver3_Codeword_Ordering.png" style="width:70%;height:auto;">
|
||||
<img src="../img/QR_Ver3_Codeword_Ordering.png">
|
||||
</center>
|
||||
<br>
|
||||
<h4>Mask Pattern</h4>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
</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;">
|
||||
|
|
@ -23,10 +24,11 @@
|
|||
<img src="../../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
|
||||
<div style="height:80px;"></div>
|
||||
<div id="help-menu">
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
</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;">
|
||||
|
|
@ -23,10 +24,11 @@
|
|||
<img src="../../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
|
||||
<div style="height:80px;"></div>
|
||||
<div id="help-menu">
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@
|
|||
</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">
|
||||
|
|
@ -23,10 +25,11 @@
|
|||
<img src="../../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
|
||||
<div style="height:80px;"></div>
|
||||
<div id="help-menu">
|
||||
|
||||
|
|
@ -40,15 +43,13 @@
|
|||
|
||||
<h2>Getting Started</h2>
|
||||
<br>
|
||||
<p>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 <a href="http://www.thonky.com/qr-code-tutorial/" target="blank">thonky.org</a> 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.</p>
|
||||
<p>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 <a href="http://www.thonky.com/qr-code-tutorial/" target="blank">thonky.org</a> 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.</p>
|
||||
<br>
|
||||
<h5>Jump to :</h5>
|
||||
<ul>
|
||||
<li><a href="getting-started/about-qr-code.html">About QR Code</a></li>
|
||||
<li><a href="getting-started/interface-overview.html">Interface Overview</a></li>
|
||||
<li><a href="getting-started/create-save-load-project.html">Create, Save, and Load Project</a></li>
|
||||
<li><a href="getting-started/drawing-and-decoding-qr-code.html">Drawing and Decoding QR Code</a></li>
|
||||
</ul>
|
||||
<p><a href="about-qr-code.html">- About QR Code</a></p>
|
||||
<p><a href="interface-overview.html">- Interface Overview</a></p>
|
||||
<p><a href="create-save-load-project.html">- Create, Save, and Load Project</a></p>
|
||||
<p><a href="drawing-and-decoding-qr-code.html">- Drawing and Decoding QR Code</a></p>
|
||||
<div class="space"></div>
|
||||
<div class="nav">
|
||||
<button class="left" onclick="window.location='../introduction/index.html';">Prev : Introduction</button>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
</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;">
|
||||
|
|
@ -23,10 +24,11 @@
|
|||
<img src="../../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
|
||||
<div style="height:80px;"></div>
|
||||
<div id="help-menu">
|
||||
|
||||
|
|
@ -41,12 +43,12 @@
|
|||
<h2>Interface Overview</h2>
|
||||
<br>
|
||||
<center>
|
||||
<img src="../img/editor-interface.png" style="width:75%;height:auto;">
|
||||
<img src="../img/editor-interface.png">
|
||||
</center>
|
||||
<br>
|
||||
<p><b>1. Menu</b> : Main menu where you can create new project, save/load project, use sub-tools, etc..</p>
|
||||
<p><b>2. Mode indicator</b> : The button that lets you switch main workspace mode from Editor mode to Decode mode or otherwise.</p>
|
||||
<p><b>3. Main Toolbox</b> : 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.</p>
|
||||
<p><b>2. Mode indicator</b> : The button that lets you switch main working mode from Editor mode to Decode mode or otherwise.</p>
|
||||
<p><b>3. Main Toolbox</b> : 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.</p>
|
||||
<p><b>4. Sample toolbox</b> : Toolbox that store your image sample as a replication, to ease in reconstructing QR code.</p>
|
||||
<p><b>5. History toolbox</b> : Toolbox that store your drawing history of current QR code, lets you to undo or redo your work.</p>
|
||||
<p><b>6. Workspace</b> : Your main canvas to drawing and reconstructing QR code.</p>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
</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;">
|
||||
|
|
@ -23,13 +24,15 @@
|
|||
<img src="../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<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">
|
||||
|
|
@ -54,13 +57,12 @@
|
|||
</ul>
|
||||
<a href="examples/index.html"><li>Examples</li></a>
|
||||
<ul class="help-menu hide">
|
||||
<a href="examples/basic.html"><li>Basic Example</li></a>
|
||||
<a href="examples/advanced.html"><li>Advanced Example</li></a>
|
||||
<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/download.html"><li>Download for Offline Use</li></a>
|
||||
<a href="misc/license.html"><li>Third-Party & License</li></a>
|
||||
</ul>
|
||||
</ul>
|
||||
|
|
@ -93,12 +95,11 @@
|
|||
<p><a href="extension-tools/padding-bits-recovery.html">Padding Bits Recovery</a></p>
|
||||
<br>
|
||||
<h4><a href="examples/index.html">Examples</a></h4>
|
||||
<p><a href="examples/basic.html">Basic Example</a></p>
|
||||
<p><a href="examples/advanced.html">Advanced Example</a></p>
|
||||
<p><a href="examples/basic-example.html">Basic Example</a></p>
|
||||
<p><a href="examples/advanced-example.html">Advanced Example</a></p>
|
||||
<br>
|
||||
<h4><a href="misc/index.html">Miscellaneous</a></h4>
|
||||
<p><a href="misc/qr-code-samples.html">QR Code samples</a></p>
|
||||
<p><a href="misc/download.html">Download for Offline Use</a></p>
|
||||
<p><a href="misc/license.html">Third-Party & License</a></p>
|
||||
</div>
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
</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;">
|
||||
|
|
@ -23,10 +24,11 @@
|
|||
<img src="../../img/search.png">
|
||||
<input type="text" placeholder="Search here...">
|
||||
</div>
|
||||
<img src="../../img/bars.png" class="menu-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-box" style="overflow-x:auto;">
|
||||
<div id="left-box-help" class="left-box" style="overflow-x:auto;">
|
||||
<div style="height:80px;"></div>
|
||||
<div id="help-menu">
|
||||
|
||||
|
|
@ -40,7 +42,7 @@
|
|||
|
||||
<h2>Introduction</h2>
|
||||
<br>
|
||||
<p>QRazyBox is a web-based application (a toolkit), that used to analyzing and recovering damaged QR Code.<br>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.</p>
|
||||
<p>QRazyBox is a web-based application (a toolkit), that used to analyzing and recovering damaged QR Code.<br>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.</p>
|
||||
<br>
|
||||
<h4>Main Features</h4>
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
var sidebarMenu =
|
||||
'<ul class="help-menu">\
|
||||
<center><div class="search mobile"><img src="../../img/search.png"><input type="text" placeholder="Search here..."></div></center>\
|
||||
<div class="clear"></div>\
|
||||
<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">\
|
||||
|
|
@ -24,30 +26,74 @@ var sidebarMenu =
|
|||
</ul>\
|
||||
<a href="../examples/index.html"><li>Examples</li></a>\
|
||||
<ul class="help-menu hide">\
|
||||
<a href="../examples/basic.html"><li>Basic Example</li></a>\
|
||||
<a href="../examples/advanced.html"><li>Advanced Example</li></a>\
|
||||
<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/download.html"><li>Download for Offline Use</li></a>\
|
||||
<a href="../misc/license.html"><li>Third-Party & License</li></a>\
|
||||
</ul>\
|
||||
</ul>';
|
||||
|
||||
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();
|
||||
}
|
||||
})
|
||||
})
|
||||
BIN
img/logo.png
BIN
img/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
1837
index.html
1837
index.html
File diff suppressed because it is too large
Load diff
1860
js/main.js
1860
js/main.js
File diff suppressed because it is too large
Load diff
|
|
@ -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);
|
||||
|
|
|
|||
108
js/table.js
108
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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue