Web Label Editor

The ThermalLabel Web Editor Add-on is a first-class barcode label designer component for ASP.NET websites (Legacy MVC & WebForms and ASP.NET CORE) 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 or Linux if using ASP.NET CORE
  • Legacy ASP.NET 4.6.1+ or ASP.NET CORE 2.0+
  • ThermalLabel Web Editor Server Component 8.0 (Neodynamic.Web.ThermalLabelEditor.dll)
  • ThermalLabel Web Editor Javascript Component 8.0 (ThermalLabelWebEditor-8.0.18.xxxx.js)
  • ThermalLabel SDK 8.0 (Neodynamic.SDK.ThermalLabel.dll)
  • ThermalLabel SDK 8.0 Web Printing (Neodynamic.SDK.ThermalLabel.WebPrinting.dll)
  • SkiaSharp 1.60+
  • SkiaSharp.HarfBuzz 1.60+
  • System.Text.Encoding.CodePages 4.4.0+
  • jQuery 1.4.1+
  • Fabric.js 1.5+

-Client-side Requirements

  • OS: Windows, Linux, Mac & Android. NOTE: Printing is only available on Windows Clients and requires .NET Framework 4.6.1+ installed.
  • BROWSER: Internet Explorer 10 or greater, Edge, Mozilla Firefox latest version, Google Chrome latest version, Safari latest version
  • TLClientPrint 8.0 (for printing in Windows OS only)

Sample Application Projects

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

Important

These sample website projects, for WebForms, MVC & ASP.NET CORE, are 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.

Migrating to ThermalLabelWebEditor v8

If you're using an older version of ThermalLabelWebEditor, please follow up these steps to migrate to Version 8.0

  • v8 requires .NET Framework 4.6.1+ (Older .NET versions are no longer supported)
  • v8 requires your project to be built for x86 or x64 Platforms. AnyCPU is NOT supported!
  • v8 requires your project to reference the following external Nuget packages:
    • SkiaSharp 1.60
    • SkiaSharp.HarfBuzz 1.60
    • System.Text.Encoding.CodePages 4.4.0
  • The ThermalLabelWebEditor.axd HTTP Handler used in older versions is now deprecated. For using the web editor in Legacy ASP.NET WebForms, a custom HTTP Handler must be coded while for MVC, a custom Controller must be coded. Sample code of them are found in the demo projects shipped with the installer package of ThermalLabel SDK v8
  • In your Javascript file where you create an instance of Neodynamic.Web.Editor.ThermalLabelEditor, the new thermalLabelWebEditorControllerName property must be set which value must point to URL of the MVC Controller or HTTP Handler stated above. Here's an example for a MVC Controller called ThermalLabelWebEditorHandler with an Action called ProcessRequest: 
Neodynamic.Web.Editor.ThermalLabelEditor.thermalLabelWebEditorControllerName = "ThermalLabelWebEditorHandler/ProcessRequest";
  • Any ASP.NET project using the new Web Editor v8 must add a reference to the brand new Neodynamic.SDK.ThermalLabel.WebPrinting.dll assembly and of course, to the new Neodynamic.SDK.ThermalLabel.dll assembly

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.