Web Label Editor

The ThermalLabel Web Editor Add-on is a first-class barcode label designer component for ASP.NET websites (MVC & WebForms) which empowers your WebApps by providing an end-user visual label editor! The ThermalLabel Editor component leverages and requires the ThermalLabel SDK and was designed based on jQuery and HTML5 Canvas (Fabric.js)! Built on top of latest web platform and standards, this Web Label Editor can be used in Windows, Linux, Mac & Android Clients with latest browsers!

The following is a screenshot of the sample app which is shipped with the ThermalLabel SDK package.

Web Label Editor

The ThermalLabel Editor features visual aids for the creation of items like texts, barcodes, pictures, RFID, and shapes; items Z-ordering, zooming, In-place text edition for TextItem objects and many more features! It is also very customizable so you can skin it to match the app's UI style on which it will be hosted in.

With the ThermalLabel Web Editor component, you can allow your end-users to create, load, edit and save ThermalLabel objects in the form of XML template file definition.

ThermalLabelWebEditor System Requirements

-Server-side Requirements

  • Windows Server
  • ASP.NET 3.5 or greater!
  • jQuery 1.4.1 or greater!
  • Fabric.js 1.5 or greater!

-Client-side Requirements

  • OS: Windows, Linux, Mac & Android. NOTE: Printing is only available on Windows Clients and requires .NET Framework 3.5 installed.
  • BROWSER: Internet Explorer 10 or greater, Edge, Mozilla Firefox latest version, Google Chrome latest version, Safari latest version

Sample Application Projects

With the ThermalLabel SDK installer, we've shipped ASP.NET WebForms and MVC sample projects using the ThermalLabelWebEditor component. Open them using Visual Studio 2010 or greater to learn how the ThermalLabelWebEditor component works and how to interact with it in your own ASP.NET website.

IMPORTANT

These sample website projects, one for WebForms and one for MVC, are both very simple apps and do NOT demo ALL the ThermalLabel SDK and Editor features! They might have errors, bugs, bad software development practices, etc.; meaning you cannot consider it as a sample of how to code apps! These apps were coded for demoing how you can interact with the ThermalLabelWebEditor component ONLY. Again, the sample apps are NOT our product but a sample of how your own app/code needs to interact with the ThermalLabelWebEditor component.

ThermalLabelWebEditor Features

  • Items' Selection Handlers: The items on the design surface can be selected by the user by left-clicking on the item. Each time the user selects one item, some visual handlers appear on the design surface. Handlers aid the users with full resize and move actions as well as rotation. You can also change the background and foreground colors of the handlers to match your UI style.
  • In-Place Text Edition: Users can easily edit the text of a TextItem by double-clicking on it. The In-Place Text Edition is even enabled if the TextItem is being rotated!
  • Picture Missing Aid: When working with ImageItem objects, you can specify a custom image file which will displayed if the image source of the ImageItem cannot be found!
  • Picture Monochrome Conversion Tool: The ImageItemUtils class feature a method which allows you to get the output when converting the image source of an ImageItem to black & white based on the MonochromeSettings options set up on such ImageItem object! It is useful for you to display to your users a preview of the image in black & white format by fine tuning the MonochromeSettings options
  • Grid lines: ThermalLabelEditor allows you to specify grid lines for better label design. The well known "Snap to Grid" feature is also supported.
  • Locking Items: ThermalLabelEditor allows you to lock items on the editor surface so they cannot be moved accidentally.