ember-cli-barcode

ember-cli-barcode

An ember-cli addon to render barcodes in Ember applications using the JsBarcode library. See the demo

Installation

  $ ember install ember-cli-barcode

Usage

The simpliest form to render a barcode is to pass in a value using the defaults options. This will generate a CODE128 barcode:

{{{bar-code value="abc123456"}}

Which renders:

 

By default, barcodes will be rendered using the svg element. You can change the element to img or canvas using the tagName property:

{{bar-code
  value="A45689"
  tagName="img"}}

{{bar-code
  value="A45689"
  tagName="canvas"}}

Use the img tag if you want the ability to copy or save the barcode displayed on the page.

Options

All JsBarcode options are supported by the addon. See Barcode Specifications for details on each format. A few examples are below. See the demo application for more.

Chage the barcode format by passing the format name into the component. To display a UPC barcode:

  {{bar-code
    value="123456789999"
    format="UPC"}}

 

The color of the barcode or it's background can be chaged:

  {{bar-code
    value="abc123456"
    lineColor="red"}}

 

Or the background color can be changed:

  {{bar-code
    value="abc123456"
    lineColor="#ffffff"
    background="#660033"}}

 

Any valid html or hexadecimal color can be used for the lineColor or background options. The component blockform is not supported.

If you have many options, instead of passing a large number of parameters you can pass an object using the options parameter. The options parameter will override any other parameters set on the component.

  // app/controllers/application.js
  myOptions: {
    format: "UPC",
    textPosition: "top",
    lineColor: "#ff3399",
  }

  {{!-- app/templates/application.hbs --}}
  {{bar-code
    value="11223344"
    options=myOptions}}

  {{!-- options override other settings --}}
  {{!-- line color will be ##ff3399 --}}
  {{bar-code
    value="11223344"
    options=myOptions
    lineColor="blue"}}

 

EAN13 and UPC

The flat option is supported for both EAN13 and UPC barcodes defaulting to false if not specided. Additionally the lastChar option is supported for EAN13 barcodes with a default value of ''.

Invalid Barcode Values

If you pass an invalid value based on the format, the barcode will not render. To capture invalid values assign an action to the vaild property.

// app/templates/application.hbs
// invalid code for form EAN8
{{barcode format="EAN8"  value="9638" valid=(action 'checkValid')}}

{{if validCode "Valid" "Invalid"}}

// app/controllers/application.js
import Controller from '@ember/controller';


export default Controller.extend({
  validCode: false,

  actions: {
      checkValid (status) {
        this.set('validCode', status)
      },
  }

});

IF you have have multiple barcodes in a template and want to check the validity of each indvidually, you would need a dedicated action and controller property for each barcode.

More

The dummy application allows you to experiment with many of the barcode options. As you select different barcode formats a predifined valid code is selected for rendering. scandit.com has a nice summary of different barcode formats.

Running

To run the dummy application

• bower install
• npm install
• ember serve
• Visit your app at http://localhost:4200.

Tests

Testing requires jsbarcode.js be installed as a bower component

• bower install
• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

For more information on using ember-cli, visit https://ember-cli.com/.

License

MIT