Creating Bar Codes in .Net

Paschal L  asked for an example of creating BarCodes using .Net and SharpVectors.  What you need to start with is some markup language to describe you BarCodes.  In this example I’ll use a Code39 BarCode and XML developed by Krysalis.  The XML looks like this:

<barcode>
    <code39>
      <height>{length:15mm}</height>
      <module-width>{length:0.19mm}</module-width>
      <wide-factor>{number:2.5}</wide-factor>
      <interchar-gap-width>{length:1mw}</interchar-gap-width>
      <quiet-zone enabled="{boolean:true}">{length:10mw}</quiet-zone>
      <checksum>{checksum-mode:auto=ignore}</add-checksum>
      <human-readable>{human-readable-placement:bottom}</human-readable>
      <value>0123456789</value>
    </code39>
</barcode>

You then either create an XSLT to transform the BarCode XML to SVG, or if you don’t like declarative languages, use a .Net procedural language like VB.Net or C#.  The resulting SVG should look something like this:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" height="15mm" width="36.67mm">
  <svg:g style="fill:black; stroke:none">
    <svg:rect height="12.1781mm" width="0.19mm" x="1.9mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="2.565mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="2.945mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="3.61mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="4.275mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="4.655mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="5.035mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="5.7mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="6.365mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="7.03mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="7.41mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="8.075mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="8.74mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="9.12mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="9.5mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="10.165mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="10.545mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="11.495mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="11.875mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="12.255mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="12.92mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="13.585mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="14.535mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="14.915mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="15.295mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="15.675mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="16.055mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="16.72mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="17.385mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="17.765mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="18.43mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="19.095mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="19.76mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="20.425mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="20.805mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="21.185mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="21.565mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="22.515mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="23.18mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="23.56mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="23.94mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="24.32mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="24.985mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="25.365mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="26.03mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="26.695mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="27.36mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="28.025mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="28.405mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="29.07mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="29.45mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="29.83mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="30.78mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="31.16mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="31.825mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="32.205mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="32.87mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="33.25mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.475mm" x="33.915mm" y="0mm"/>
    <svg:rect height="12.1781mm" width="0.19mm" x="34.58mm" y="0mm"/>
    <svg:text style="font-family:Helvetica; font-size:8.0pt; text-anchor:middle" x="18.335mm" y="14.4356mm">0123456789</svg:text>
  </svg:g>
</svg:svg>

This SVG stream can then be passed off to the SharpVectors to convert the SVG to a GDI+ Bitmap Object.

SVGContent is the XML from the above example, or it could be an XmlDocument that you will cast to a SvgDocument.

SharpVectors.Dom.Svg.SvgDocument doc = new SvgDocument(window);
doc.LoadXml(SVGContent);
SharpVectors.Renderer.Gdi.GdiRenderer renderer = new GdiRenderer(window);
System.Drawing.Bitmap RasteredImage = renderer.Render();
 
Now you have the graphic representation of the BarCode with the System.Drawing.Bitmap object.  From there you can Save it to a stream in a raster format via:

RasteredImage.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Gif);

Or even send it to a printer using the System.Drawing.Printing.PrintDocument object.  If you want to see the example work, just cut the SVG code out of this example and paste it into the SharpVectors Test WebPage.  It will let you enter SVG into a text box, push it down to the server, where it will run the SharpVectors, and stream back to you a rastered version of your SVG.

If you get a chance, I’d recommend reading up on the Longhorn UI (articles like this).  What they are doing in Longhorn sounds awfully similar to what we are doing in SharpVectors, abstracting out the low level APIs by wrapping them in a “simple” XML schema.  In SharpVectors case, we are use SVG, which is a W3C standard XML based Vector Graphics language.  I have no idea what Microsoft is using in Longhorn. 

The cool thing about this technology is that it is extensible.  Meaning, you can put another abstraction layer (aka XML Schema) on top of SVG, to make this even simpler.  In this example, you can consider the Code39 XML as just such an abstraction layer.  This way a developer doesn’t even need to learn SVG, just a very simple markup language.  You can even take the same approach to UIs and create an XML language to represent WinForm controls, which would make it easier to convert WinForms to a more Web based format.  That’s just the goal of the Xenon Project, which is based upon SharpVectors and Kevin Lindsey’s SVGUI.  Unfortunately, the Xenon Project code and examples are still in the early stages, and are not ready for public release yet.

Don XML

[Listening to: Running From Your Dad - Bowling For Soup ]

2 Comments

  • What kind of transform would you run it through? (I think) I understand everything except for the sentence: &quot;You then either create an XSLT to transform the BarCode XML to SVG, ....&quot;





    Thanks,


    Darrell

  • Forgive my ignorance; I'm not up to speed on XSLT.





    From my limited understanding, to get the SVG from the Barcode XML, you need to apply some sort of transformation (the XSLT?). But doesn't that include some sort of conversion document (XSL?) that tells the program to convert the value 0123456789 into a series of SVG rectangles? Would I have to create this on my own? Or is there an open source implementation out there somewhere?





    Thanks, D

Comments have been disabled for this content.