DOCSEARCHbyAlgolia
Submit Docs

NIIMBOT printers webui

repository·main·Indexed 19 days ago

https://github.com/multimote/niimblue

A privacy-first, browser-based label design and printing application for NIIMBOT printers. It supports Bluetooth and USB connections via Web Bluetooth and Web Serial APIs, featuring a rich label editor with import/export capabilities and print preview. The project is available as a web application and as standalone apps for Android (Capacitor) and Windows (Tauri), supporting the NIIMBOT protocol and various label presets for 203dpi and 300dpi printers.

Tokens
7.4K
Snippets
29
Records
37
Agent score
71%

What's inside niimblue

  1. Overview of NIIMBOT printers webui

    main

    NIIMBOT printers webui is a browser-based application for designing and printing labels. It is privacy-focused, working entirely offline in the browser, and stores label data locally.

    Key capabilities include:

    • Support for Bluetooth and USB connections.
    • A rich label editor with import/export and saving capabilities.
    • Print preview with multiple post-processing algorithms.
    • Support for the NIIMBOT protocol.
    • Availability as standalone apps for Android (Capacitor) and Windows (Tauri).

  3. Browser requirements for NIIMBOT webui

    main

    To use the webui, your browser must support the following APIs:

    • Web Bluetooth API: Required for Bluetooth connections.
    • Web Serial API: Required for serial (USB) communication.

    Modern Chrome-based browsers are recommended. On some systems, you may need to enable Web Bluetooth or Experimental Web Platform Features via chrome://flags.

  4. Run and build NiimBlue for Android

    main

    Debug Build

    To run a debug build on an Android device connected via ADB:

    npm run run-android

    Release APK

    To build a release APK, you must provide your keystore credentials via environment variables. Ensure apksigner is in your PATH.

    export KEYSTORE_PATH=/path/to/keystore.jks
export KEYSTORE_ALIAS=your_alias_name
export KEYSTORE_PASSWORD=pa$$word
export KEYSTORE_ALIAS_PASSWORD=pa$$word

npm run build-android

    Debugging

    To inspect the console logs for the Android app, open chrome:inspect/#devices in a desktop Chrome browser and select the NiimBlue instance on your device.

    Prebuilt APKs

    Prebuilt APKs can be found in the build-android-app GitHub Actions workflow artifacts.

  5. Deploy the NIIMBOT webui

    main

    Note: HTTPS is required for all non-localhost deployments.

    Serving static files

    Generate the production build by running:

    npm run build

    The resulting files will be in the dist directory. Alternatively, you can download niimblue-dist.zip from the Releases page.

    Using Docker

    Instructions for running your own instance via Docker are available in the project wiki.

  6. Configure VSCode for development

    main

    The project uses path aliases. To ensure proper imports in VSCode, add the following to your settings.json:

    {
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative"
}

  8. Run and build NiimBlue for iOS (experimental)

    main

    Simulator

    To run a debug build on an iPhone Simulator:

    npm run run-ios

    Physical Device

    To build for a physical device:

    npm run build-ios

    Important iOS Configuration: Capacitor does not support passing DEVELOPMENT_TEAM as an environment variable. To run on an actual device, you must manually set your DEVELOPMENT_TEAM within Xcode under the Signing & Capabilities tab.

    macOS (Catalyst)

    To run on macOS, choose Mac Catalyst. Note that macOS does not require codesigning to run on a local machine.

  9. Set up the development environment

    main

    To develop on NIIMBOT printers webui, follow these steps:

    1. Install git and nodejs.
    2. Clone the repository:
      git clone https://github.com/MultiMote/niimblue.git
    3. Install dependencies:
      npm i
    4. Run the development server:
      • To check the code before running: npm run dev-check
      • To simply run the server: npm run dev
    git clone https://github.com/MultiMote/niimblue.git
npm i
npm run dev

  10. Troubleshoot printing issues

    main

    If you encounter printing problems:

    1. Try different print task versions: In the print preview dialog, try different versions. You can make a version the default by pressing the Lock button.
    2. Check printer compatibility: While the project aims for maximum support, you can check a list of tested models in the NiimBlueLib issues.
    3. Provide a packet dump: If your printer model is not working, you can help by providing a packet dump of a print job performed with the official application.

  11. Configure the NiimBlues Capacitor application

    main

    The capacitor.config.ts file defines the configuration for the NiimBlues standalone app when built using Capacitor. It specifies the application identity, web directory, plugin settings, and platform-specific build options for Android and iOS.

    Core Configuration

    • appId: The unique identifier for the application (ru.mmote.niimblues).
    • appName: The display name of the application (NiimBlues).
    • webDir: The directory containing the web assets (www).

    Plugin Configuration

    • plugins.SplashScreen: Controls the splash screen behavior. Currently, launchShowDuration is set to 0 to disable the launch duration.

    Android Build Options

    Android builds are configured via android.buildOptions:

    • releaseType: The type of build produced (e.g., APK).
    • signingType: The method used for signing (e.g., apksigner).
    • Keystore Settings: These are pulled from environment variables:
      • keystorePath: process.env.KEYSTORE_PATH
      • keystorePassword: process.env.KEYSTORE_PASSWORD
      • keystoreAlias: process.env.KEYSTORE_ALIAS
      • keystoreAliasPassword: process.env.KEYSTORE_ALIAS_PASSWORD

    iOS Configuration

    • ios.scheme: The URL scheme used by the iOS application (NiimBlues).
    import { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  appId: "ru.mmote.niimblues",
  appName: "NiimBlues",
  webDir: "www",
  plugins: {
    SplashScreen: {
      launchShowDuration: 0,
    },
  },
  android: {
    buildOptions: {
      releaseType: "APK",
      keystorePath: process.env.KEYSTORE_PATH,
      keystorePassword: process.env.KEYSTORE_PASSWORD,
      keystoreAlias: process.env.KEYSTORE_ALIAS,
      keystoreAliasPassword: process.env.KEYSTORE_ALIAS_PASSWORD,
      signingType: "apksigner",
    },
  },
  ios: {
    scheme: "NiimBlues",
  },
};

export default config;

  12. Configure Label Properties and Presets

    main

    Labels in NiimBlue are defined by properties that control their physical dimensions, shape, and printing behavior. You can use LabelPropsSchema for individual label instances or LabelPresetSchema to define reusable templates that include measurement units and DPI information (dpmm).

    Key Label Properties

    • Dimensions: size (width/height) or width/height in presets.
    • Shape: Supports rect, rounded_rect, and circle.
    • Splitting: Labels can be split none, vertical, or horizontal into a specific number of splitParts.
    • Tail: A tailPos (right, bottom, left, top) and tailLength can be applied.
    • Mirroring: Supports none, copy, or flip modes.
    • Print Direction: Controls the printing order (left or top).