{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/blog/creating-barcodes-in-terminal",
    "result": {"data":{"markdownRemark":{"html":"<p>There are various types of barcodes and standards, here, I'll be referring to UPC-A barcodes.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 477px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7a600b7b65520b392416cfaccaa8f037/2dd4c/UPCdiag.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 58.285714285714285%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB00lEQVQoz3WQzW7aQBSF86YsQDwBAotUYmdkC2EDWYNYQNMskFiCWSDXrpBSQYiESFSbOi7YAlL8wzDEPzPTBhritOm3mtG9n87MOSMH8AvR8wmE0Gka5Sx6wRiPRqNms1mtVnO5XKPRqNVqw+GwVCpxHFev17fb7XHtVXYcZ7FYGIZhLpeiKPI8T9N0LBbjOC6fz4uimE6nU6kUy7Kr9XrveRBCAEAQBM8yAGC1Xq/v7x9V9bMoVioVhmESiUS5XGZZVpKkbDabyWQ4np/NZsrNjTadflMUAMCbZxMAvghC+eLiHZmiigzjahqBECP05s/HNjDGkiT9L7lQKNi2fWr0n8IQkmX5KMfj8ahMZTLFYtF2nL8Li7bd7/d5nmdZNplMHmVZlj+cn1MURdP0Kfkd+XG1Go/HnW63Kwifrq4GstzrdHq93sfLy3a73Wq1fuh6iBB+8Z/l8IC/XFq6jgjBYeiZ5g5C33UDAHaOA+Zzz/cJIU+bDT6EvyZPJhNBEIbX14ZhfNe0r4OBOp1udztT13VVdQFYPjxos5miqkEYmoqi3t0ZpvlHhhBalvXkeYSQ+Xw+vr21bDsIAsu2f242EELP9+EBjDHc723HcV33t/wLl95Z9zaFNewAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"UPCdiagram\"\n        title=\"UPCdiagram\"\n        src=\"/static/7a600b7b65520b392416cfaccaa8f037/2dd4c/UPCdiag.png\"\n        srcset=\"/static/7a600b7b65520b392416cfaccaa8f037/1aaec/UPCdiag.png 175w,\n/static/7a600b7b65520b392416cfaccaa8f037/98287/UPCdiag.png 350w,\n/static/7a600b7b65520b392416cfaccaa8f037/2dd4c/UPCdiag.png 477w\"\n        sizes=\"(max-width: 477px) 100vw, 477px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<ul>\n<li>They can store a total of 12 decimal digits, out of which 10 are usable</li>\n<li>The first digit is the system digit, which is used to identify the type of product</li>\n<li>The next 5 digits are the manufacturer code</li>\n<li>The last 5 digits are the product code</li>\n<li>The last digit is the check digit, which is used to verify the validity of the barcode</li>\n</ul>\n<h2>How do barcodes store data?</h2>\n<p>The pattern of each section determines the value of the digit.\nThese patterns are defined in the specifications of the barcode standard.\nThe specifications also split the barcode into two sections, the left and right sections.\nThe left section or the even section is used to store the first 6 digits, and the right section or the odd section is used to store the last 6 digits.\nThe last check digit is calculated using the Luhn algorithm.\nThere are different encodings for both the sides, which are provided below.</p>\n<div class=\"gatsby-code-title\">barcode.js</div>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">//These are the bounding characters for the barcode, in the specifications</span>\n<span class=\"token keyword\">const</span> sideGuard <span class=\"token operator\">=</span> <span class=\"token string\">\"101\"</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> centerGuard <span class=\"token operator\">=</span> <span class=\"token string\">\"01010\"</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">//The barcode spec defines these specific values for both sides of the barcode</span>\n<span class=\"token keyword\">const</span> leftEncoding <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token string\">\"0001101\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//0</span>\n    <span class=\"token string\">\"0011001\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//1</span>\n    <span class=\"token string\">\"0010011\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//2</span>\n    <span class=\"token string\">\"0111101\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//3</span>\n    <span class=\"token string\">\"0100011\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//4</span>\n    <span class=\"token string\">\"0110001\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//5</span>\n    <span class=\"token string\">\"0101111\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//6</span>\n    <span class=\"token string\">\"0111011\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//7</span>\n    <span class=\"token string\">\"0110111\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//8</span>\n    <span class=\"token string\">\"0001011\"</span>  <span class=\"token comment\">//9</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> rightEncoding <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token string\">\"1110010\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//0</span>\n    <span class=\"token string\">\"1100110\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//1</span>\n    <span class=\"token string\">\"1101100\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//2</span>\n    <span class=\"token string\">\"1000010\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//3</span>\n    <span class=\"token string\">\"1011100\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//4</span>\n    <span class=\"token string\">\"1001110\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//5</span>\n    <span class=\"token string\">\"1010000\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//6</span>\n    <span class=\"token string\">\"1000100\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//7</span>\n    <span class=\"token string\">\"1001000\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//8</span>\n    <span class=\"token string\">\"1110100\"</span>  <span class=\"token comment\">//9</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">generate</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">code</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">//Handle too large codes</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>code<span class=\"token punctuation\">.</span>length <span class=\"token operator\">></span> <span class=\"token number\">10</span><span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token comment\">//Make the code to length 10 if it is shorter</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>code<span class=\"token punctuation\">.</span>length <span class=\"token operator\">&lt;</span> <span class=\"token number\">10</span><span class=\"token punctuation\">)</span> code <span class=\"token operator\">=</span> <span class=\"token string\">\"0\"</span><span class=\"token punctuation\">.</span><span class=\"token function\">repeat</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span> <span class=\"token operator\">-</span> code<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> code<span class=\"token punctuation\">;</span>\n\n    <span class=\"token comment\">//An int array that stores all the 12 digits of the barcode</span>\n    barcodeDigits <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token number\">5</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//The number system digit/ type digit</span>\n        <span class=\"token operator\">...</span><span class=\"token punctuation\">[</span><span class=\"token operator\">...</span>code<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">v</span><span class=\"token operator\">=></span><span class=\"token operator\">+</span>v<span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">]</span>\n\n    <span class=\"token comment\">//Add the check digit to the array</span>\n    checksum <span class=\"token operator\">=</span> barcodeDigits<span class=\"token punctuation\">.</span><span class=\"token function\">reduceRight</span><span class=\"token punctuation\">(</span>\n        <span class=\"token comment\">//Multiply by 3 if it is in an odd position, ie., even index</span>\n        <span class=\"token punctuation\">(</span><span class=\"token parameter\">acc<span class=\"token punctuation\">,</span> curr<span class=\"token punctuation\">,</span> i</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> acc <span class=\"token operator\">+</span> curr <span class=\"token operator\">*</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\">%</span> <span class=\"token number\">2</span> <span class=\"token operator\">===</span> <span class=\"token number\">0</span> <span class=\"token operator\">?</span> <span class=\"token number\">3</span> <span class=\"token operator\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token comment\">//Check digit is next multiple of 10 - checksum</span>\n    <span class=\"token comment\">//To get next multiple of 10, ((n + 9) / 10) * 10</span>\n    csd <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span>checksum <span class=\"token operator\">+</span> <span class=\"token number\">9</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">/</span> <span class=\"token number\">10</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> <span class=\"token number\">10</span> <span class=\"token operator\">-</span> checksum<span class=\"token punctuation\">;</span>\n    barcodeDigits<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>csd<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token comment\">//Convert barcode digits to binary string representations</span>\n    c <span class=\"token operator\">=</span> barcodeDigits<span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value<span class=\"token punctuation\">,</span> index</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>index <span class=\"token operator\">&lt;</span> <span class=\"token number\">6</span><span class=\"token operator\">?</span> leftEncoding <span class=\"token operator\">:</span> rightEncoding<span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span>value<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n\n    <span class=\"token comment\">//Convert binary string representations to final barcode line</span>\n    barcodeSegments <span class=\"token operator\">=</span> c<span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">b</span> <span class=\"token operator\">=></span> <span class=\"token function\">getCharRep</span><span class=\"token punctuation\">(</span>b<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    barcode <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token comment\">//Add dividing bits</span>\n    barcode<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">getCharRep</span><span class=\"token punctuation\">(</span>sideGuard<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    barcode<span class=\"token punctuation\">[</span><span class=\"token number\">7</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">getCharRep</span><span class=\"token punctuation\">(</span>centerGuard<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    barcode<span class=\"token punctuation\">[</span><span class=\"token number\">14</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">getCharRep</span><span class=\"token punctuation\">(</span>sideGuard<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">for</span><span class=\"token punctuation\">(</span>i <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&lt;=</span> <span class=\"token number\">6</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        barcode<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> barcodeSegments<span class=\"token punctuation\">[</span>i<span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        barcode<span class=\"token punctuation\">[</span><span class=\"token number\">14</span><span class=\"token operator\">-</span>i<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> barcodeSegments<span class=\"token punctuation\">[</span><span class=\"token number\">12</span><span class=\"token operator\">-</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">return</span> barcode<span class=\"token punctuation\">.</span><span class=\"token function\">join</span><span class=\"token punctuation\">(</span><span class=\"token string\">''</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">getCharRep</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">str</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span>str<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">c</span> <span class=\"token operator\">=></span> <span class=\"token operator\">+</span>c <span class=\"token operator\">?</span> <span class=\"token string\">\"█\"</span> <span class=\"token operator\">:</span> <span class=\"token string\">\" \"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">join</span><span class=\"token punctuation\">(</span><span class=\"token string\">''</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> input <span class=\"token operator\">=</span> <span class=\"token string\">\"69420\"</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">(</span><span class=\"token function\">generate</span><span class=\"token punctuation\">(</span>input<span class=\"token punctuation\">)</span><span class=\"token operator\">+</span><span class=\"token string\">\"\\n\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">repeat</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<div class=\"gatsby-code-title\">output</div>\n<div class=\"gatsby-highlight\" data-language=\"txt\"><pre class=\"language-txt\"><code class=\"language-txt\">█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █\n█ █ ██   █   ██ █   ██ █   ██ █   ██ █   ██ █ █ █ █ █    ███ █  █ ███  ██ ██  ███  █ █ ███  █ █</code></pre></div>\n<h2>Resources</h2>\n<ul>\n<li><a href=\"https://www.gtin.info/barcode-101/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://www.gtin.info/barcode-101/</a></li>\n<li><a href=\"https://en.wikipedia.org/wiki/Universal_Product_Code\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://en.wikipedia.org/wiki/Universal_Product_Code</a></li>\n</ul>","frontmatter":{"title":"Creating CLI Barcodes using JavaScript","description":"Understanding how barcodes store data and how to create your own","date":"2022-03-28T00:00:00.000Z","slug":"/blog/creating-barcodes-in-terminal","tags":["Learning","School","JavaScript"]}}},"pageContext":{}},
    "staticQueryHashes": ["1994492073","2009693873","3081057667","3825832676"]}