Generating Code 128C Barcodes in Blazor: A Step-by-Step Guide
Introduction
This article delves into the implementation of barcode rendering, focusing specifically on Code 128C, using Blazor and C#. The goal is to generate barcodes entirely within a Blazor application by implementing the encoding algorithm in C#. While this article primarily focuses on Code 128C, the same algorithmic approach can be adapted to render other types of barcodes, making it a versatile solution for various use cases.
Although there are JavaScript libraries and pre-built JS implementations for rendering barcodes, having the ability to generate and render barcodes natively in Blazor using C# provides several advantages. It gives developers complete control over the barcode generation process and eliminates potential delays caused by communication with JavaScript interop. This is especially critical when working in Blazor Hybrid scenarios, such as mobile apps developed with .NET MAUI Blazor, where responsiveness and performance are paramount.
Barcodes, in essence, are machine-readable representations of data that encode information in a series of black and white bars. Code 128C is a high-density barcode format that is optimized for numeric data, encoding two digits per symbol, making it particularly compact and efficient for numerical datasets. This makes it ideal for use in industries like logistics, retail, and inventory management.
How Code 128C is Rendered
The visual rendering of a Code 128C barcode is based on a series of black and white bars of varying widths. These bars are grouped into segments, including a start symbol, a sequence of encoded numbers, a checksum, and a stop symbol. Each segment is converted into a specific pattern of bars, which are precisely defined in the Code 128 specification using a mapping table.
A Code 128C barcode is designed to efficiently encode numeric data, making it both compact and machine-readable. The input data must consist of numeric characters, which are split into groups of two digits, called two-digit pairs. Each two-digit pair is treated as a single number between 00 and 99. For example, the input “123456” is divided into the pairs [“12”, “34”, “56”], with each pair encoded separately according to the Code 128 specification.
If the input contains an odd number of digits (e.g., “12345”), a leading zero is added to make the total number of digits even. This ensures that every two-digit pair has exactly two characters. In this case, “12345” becomes “012345”, resulting in the pairs [“01”, “23”, “45”].
Each segment in the barcode, whether it represents the start symbol, a two-digit pair, or the checksum, is rendered using 11 narrow bars and spaces (called unit bars). These 11 unit bars are grouped to form 3 black bars and 3 white spaces, creating a clear alternating pattern. The width of each bar (or space) can vary between 1 and 4 narrow units, but the total width of all 11 unit bars in a segment always adheres to the same rules.
Finally, the barcode ends with a unique stop symbol, which differs slightly in its structure by using 13 unit bars and spaces. This alternating pattern of black and white ensures the barcode remains scannable and accurate, even at high densities.
Understanding the Code 128C Algorithm
The Code 128C barcode sequence is a string of zeros and ones representing black and white bars. Each part of the barcode is derived using a predefined Code 128 specification table. Here’s how you can generate the sequence step by step:
1. Append the Start Symbol
- Start by appending the start symbol to the barcode sequence.
2. For Code 128C, the start symbol is always the “Start Code C”, which is located at position 105 in the table.
3. The corresponding bar pattern is taken from the table (e.g., "11010011100").
2. Map Two-Digit Numbers to Table Positions
- The input number string is divided into two-digit pairs:
- For example, "123456" becomes "12", "34", "56".
- Each two-digit pair is treated as a single number between 00 and 99.
2. This number is used as the index to find the corresponding bar pattern in the table:
- "12" → Position 12 in the table → Bar sequence "11011001100".
- "34" → Position 34 in the table → Bar sequence "11100101100".
If the input string has an odd number of digits, a leading 0 is added to make it even. For example:
"12345" → "012345".
3. Calculate the Checksum
The checksum ensures data integrity. It is calculated as follows:
- Start with the value of the start symbol (105).
- For each two-digit pair, multiply its position (1-based index) by its value:
- For "12" (value 12) at position 1: 12 × 1 = 12.
- For "34" (value 34) at position 2: 34 × 2 = 68.
- For "56" (value 56) at position 3: 56 × 3 = 168.
3. Add these values together and take the result modulo 103:
- (105 + 12 + 68 + 168) % 103 = 50.
4. Append the Checksum Bar Sequence
- Use the calculated checksum value (50) to look up the corresponding bar pattern in the table.
- Position 50 in the table → Bar sequence "11001110100".
2. Append this bar sequence to the barcode.
5. Append the End Symbol
- Append end symbol to the barcode sequence.
This is how barcode sequence generation algorithm is implemented in Blazor application:
Rendering of Barcode 128c in Blazor
Aliasing problem (detected on MAUI application)
When rendering a Code 128C barcode from its binary sequence (a string of zeros and ones where 1 represents black bars and 0 represents white spaces), it is important to consider how the bars are drawn on the screen. If each individual 0 or 1 is rendered as a separate visual element, you might encounter undesirable gaps or inconsistencies between adjacent bars. This is caused by a phenomenon known as aliasing.
What is Antialiasing?
Antialiasing is a visual effect used to smooth the edges of digital graphics. When adjacent elements, such as the narrow bars in a barcode, are rendered separately, antialiasing can create faint lines or gaps between these elements, making the barcode appear inconsistent. This happens especially when the rendering engine attempts to “blend” the edges of two closely aligned shapes with the background.
Solution: Grouping Zeros and Ones
To avoid this issue, the binary sequence is grouped into consecutive runs of identical symbols (e.g., multiple consecutive 1s or 0s). Each group is then rendered as a single continuous bar. This ensures that the bars appear uniform and eliminates the risk of gaps due to antialiasing.
For example:
- A binary sequence like "1110001111" would be grouped into:
- "111" (black bar of width 3)
- "000" (white space of width 3)
- "1111" (black bar of width 4).
By grouping, each run of 1s or 0s is rendered as a single block, preserving visual integrity.
Below you is listing with method that we use for grouping repeating subsequences of ones and zeros.
Testing and Verifying the Barcode
To ensure the correctness and functionality of the barcode generation process, I have implemented a Blazor app that converts numeric strings into Code 128C barcodes. This application allows users to input a numeric string and generates the corresponding barcode sequence as a visual output. Below is a screenshot of the app in action, demonstrating the process of converting a number into a Code 128C barcode.
Try it Yourself
You can navigate to the app and test the barcode generation by following this link. Simply enter a numeric string, submit and the app will generate the corresponding barcode.
Verifying Results
To verify the generated barcode, I took screenshot of the generated barcode image and uploaded it to an online barcode recognition service to check its validity and ensure it matches the input data.
We hope this article proves helpful for those looking to understand and implement Code 128C barcode generation and rendering in a Blazor application. The concepts and techniques described here provide a solid foundation for integrating barcode functionality directly into your applications.
Our example project, including the Blazor app demonstrated in this article, is available here on GitHub 💻. Feel free to explore it, test the app, and propose improvements or alternate solutions. You can also try the live application here.
If you’d like to connect, feel free to reach out to me on LinkedIn 🔗. I’m always excited to discuss Blazor, hybrid apps, and other development topics. Questions, feedback, or networking opportunities are all welcome!
Thank you for reading, and happy coding! 🚀
