Documentation

Introduction

HTLabeler is a progressive web application (PWA) designed to generate and print Holding Time food safety labels directly to Bluetooth thermal printers. It operates entirely in your browser, utilizing standard Web Bluetooth APIs.

The system is designed for high-speed kitchen environments, allowing staff to instantly calculate expiration times based on preset product rules and dispatch them to the printer with zero latency.

📸 Screenshot Placeholder: App Dashboard

Insert an image showing the overall layout of the app on a tablet, highlighting the sidebar navigation and top header.

Connecting the Printer

HTLabeler connects directly to your Bluetooth thermal printer using standard WebBLE.

  1. Navigate to the Config & Setup tab using the sidebar.
  2. Locate the Hardware Link panel.
  3. Click Connect. A browser-native Bluetooth pairing menu will appear.
  4. Select your thermal printer from the list.

📸 Screenshot Placeholder: Hardware Link Settings

Insert an image showing the Connect/Disconnect buttons, the UUID list, and the green "Online" status indicator.

Finding Your Printer's UUID (nRF Connect)

If your printer pairs properly but the app throws an error stating it cannot find a writable characteristic, it likely uses a non-standard custom Bluetooth Service UUID. You can extract this exact UUID using a free diagnostic app called nRF Connect.

  1. Download nRF Connect for Mobile from the iOS App Store or Google Play Store.
  2. Turn on your thermal printer and ensure Bluetooth is enabled on your mobile device.
  3. Open nRF Connect and tap the Scan button to locate your printer, then tap Connect next to it.
  4. Once connected, swipe over to the Client tab. This displays a list of all services broadcast by the printer.
  5. Look for a service labeled as "Unknown Service" or similar (usually not one of the standard Generic Access services). Tap it to expand its list of characteristics.
  6. You are looking for a characteristic row that lists the Write or Write Without Response property.
  7. Copy the 128-bit UUID of the parent Service (the top-level heading, e.g., 000018f0-0000-1000-8000-00805f9b34fb) and paste it directly into the Registered UUIDs configuration in HTLabeler.

Adding Custom UUIDs

Once you add your newly discovered UUID into the "Hardware Link" section via the Add UUID button, the app will automatically test it during the next connection cycle.

📸 Screenshot Placeholder: nRF Connect App

Insert a side-by-side image showing the nRF Connect scanner view and the detailed Client view highlighting a Writable characteristic.

Quick Print

The Quick Print tab is designed for single-item dispatch. Simply select a category from the top drag-scrollable tabs, and tap any item card to instantly queue and print a single label based on the current time.

📸 Screenshot Placeholder: Quick Print Grid

Insert an image showing the category tabs at the top and the grid of product buttons.

Batch Print

For bulk prepping, Batch Print allows you to adjust the quantities of multiple distinct items simultaneously.

  • Use the + and - buttons on item cards to build your queue.
  • Click 1 All (Active) to quickly add 1 quantity to every item in the currently viewed category.
  • Once items are queued, a floating Print Batch button appears at the top right of the view.
  • Upon clicking print, a modal will appear allowing you to override the Base Made Time for the entire batch.

📸 Screenshot Placeholder: Batch Print Queue Building

Insert an image showing items with quantities > 0 and the "Print Batch" button visible.

Macro Batch

Macros are saved templates of Batch Prints. If you print the exact same 15 items every morning, you can create a "Morning Prep" macro to trigger them all with one click.

Creating/Editing a Macro

In the Macro Editor, the screen is split into two columns:

  • Right Column (Available): Browse categories and add items to your macro.
  • Left Column (Selected): View your currently bundled items. You can adjust quantities, delete items, and drag-and-drop the cards to reorder the exact sequence the labels will print from the machine.

📸 Screenshot Placeholder: Macro Editor 2-Column Layout

Insert an image of the Macro Editor showing items actively populated in the left column.

Custom Label

The Custom Label module provides a live canvas preview, allowing you to manually type in product names, temperatures, and explicitly define Made/Ready/Discard times.

Features:

  • Load Preset: Quickly populate the custom fields with data from an existing Database Item.
  • Recalc Button: If you manually change the "Made Time", clicking the "Recalc" button will automatically update the Ready and Discard times based on the loaded preset's duration rules.
  • EOD Override: Checking the "EOD" box forces the label to display DD/MM EOD (End of Day) instead of a specific timestamp, bypassing standard expiration mathematics.

📸 Screenshot Placeholder: Custom Label Canvas

Insert an image showing the live canvas preview rendering matching the input fields.

Advanced Processing Features

Variable Made Time

Enabled via the clock icon in the top right header. When you print a large batch of labels, setting identical "Made Times" looks artificial. Variable Made Time introduces randomized minute variations to every label in the queue.

You can configure independent bounds, e.g., Before Now (2 min) and After Now (5 min). The system will randomly pick an offset within that range for each label, dynamically calculating the respective expiration times naturally.

📸 Screenshot Placeholder: Variable Made Modal

Insert an image showing the Variable Made configuration popup with the +/- minute controls.

Burst Print Mode

Enabled via the rocket icon in the top right header. Burst Mode is designed for absolute maximum speed by eliminating UI blocking.

When enabled, clicking "Print" will immediately spool the job to the printer background service. The system will not show the printing progress overlay or the success screen, allowing the user to immediately begin building the next queue while the printer runs asynchronously.

Database & Configuration

The core logic of the app relies on the local IndexedDB. You can manage this via the Config & Setup tab.

Category Manager

Click the Categories button in the Items DB panel to open the manager. From here you can:

  • Rename categories inline.
  • Drag and drop the category headers to re-order the main application tabs.
  • Drag and drop items between categories to move them.

📸 Screenshot Placeholder: Category Drag-and-Drop

Insert an image of the Category Manager modal.

Remote Synchronization

Sync Lifecycle Diagram

sequenceDiagram participant User participant UI as HTLabeler participant API as Remote URL participant DB as IndexedDB User->>UI: Clicks "Sync" or triggers AutoSync UI->>UI: Display Sync Overlay UI->>API: HTTP GET Fetch JSON activate API API-->>UI: Return 200 OK (JSON) deactivate API UI->>DB: Clear existing `presetItems` UI->>DB: Bulk Put new Items UI->>DB: Apply new Category Orders UI->>UI: Refresh UI Renderers UI->>User: Hide Overlay / Success Alert

If an enterprise maintains a master JSON configuration file hosted on a remote server, you can input the URL into the Remote Preset Sync input field.

Enabling Auto-Sync on Setup will automatically trigger a background fetch update to guarantee the device has the latest food safety times every time the user navigates to the setup tab. Note: Syncing fully overwrites local items and categories, but preserves personal Macros and PICs.

Speed Tweaks (Danger Zone)

Found at the bottom of the Setup tab, these toggles alter fundamental hardware communication logic.

Native TSPL Mode

Bypasses HTML Canvas drawing entirely and sends raw TSPL text bytes.
Warning: Your printer must have TSS24.BF2 loaded on firmware for Chinese characters.

Cache Bitmaps

Recycles binary rendering data if the subsequent label in the queue is identical. Drastically reduces CPU load during batch processing.

BLE Chunk Size

Overrides standard WebBLE 256-byte chunks. Crank up to 1024 if hardware supports large MTU for faster bandwidth.

Write w/o Response

Fires BLE commands without awaiting ACKs from the printer. Max speed, but can drop packets on cheap modules.

Monitoring & Diagnostics

Statistics Dashboard

The app silently records a local log of every label printed. The Statistics tab generates real-time HTML bar charts detailing:

  • Lifetime total labels printed.
  • A ranking of the Top 10 most heavily printed products.
  • A trailing 14-day chronological calendar of daily print volume.

📸 Screenshot Placeholder: Statistics Panel

Insert an image showing the data visualizations on the Statistics tab.

System Log

The System Log is a diagnostic tool that records every internal event. This is crucial for hardware debugging. It logs:

  • Specific BLE UUIDs polled during printer pairing sequences.
  • Exact parameters applied to a label execution (e.g., M: 05/11 14:00 | R: 05/11 14:30 | D: EOD)
  • Settings updates and remote sync HTTP errors.

📸 Screenshot Placeholder: System Log Output

Insert an image showing the console-style output of the System Logs tab.