AR Defence

AR Defence

Customer Integration Docs

Build, deploy, and integrate a customer web app into the AR Defence host platform. This page is the customer-facing implementation guide. Use the separate build page when you need to generate or submit a client release package.

Open Build Page View Integration Examples

Platform Overview

The solution is split into a native host app, a customer web app, and an AR Defence web integration layer.

1. Native Host App

Flutter container with RFID, NFC, QR, Bluetooth, diagnostics, and native settings.

  • Android and iPhone runtime
  • Hardware access and permissions
  • Shared multi-client pilot support

2. Customer Web App

Regular website, SPA, or PWA loaded inside the host app WebView.

  • Hosted on the customer domain
  • Own auth, backend, and business flows
  • Calls AR Defence bridge or SDK

3. Integration Layer

Bridge or SDK that connects the browser code to native host capabilities.

  • `ar-web-bridge` for simple websites
  • `ar-host-sdk` for PWA / SPA apps
  • Versioned via `cdn.lotix.co`

Deployment Endpoints

Use the stable production URLs below. Keep customer integrations pinned to explicit bridge versions.

Build Portal

https://custom-app.lotix.co

Demo App

https://ar-demo.lotix.co

Web Bridge CDN

https://cdn.lotix.co/ar-web-bridge/0.1.0/ar-web-bridge.bundle.js

Host SDK CDN

https://cdn.lotix.co/ar-host-sdk/0.1.0/ar-host-sdk.js

Docs and Build Pages

Use the split entry points below depending on what the customer team needs to do.

Documentation

https://custom-app.lotix.co/

Build Portal

https://custom-app.lotix.co/build.html

Customer Flow

Recommended pilot flow from build definition to production integration.

  1. Create a build request

    Provide client name, embedded URI, app identity, environment, and platform targets.

  2. Generate build package

    Download the ZIP or submit the request to the build backend for automated artifacts.

  3. Deploy the web app

    Host the customer web app on a stable HTTPS domain controlled by the customer.

  4. Integrate bridge or SDK

    Use the bridge for simple websites or the SDK for custom event handling and resolution logic.

  5. Install the host app build

    Distribute the Android/iOS pilot build and load the customer URI through the shared host app.

Integration Examples

Use one of the two supported browser-side integrations.

Regular Website: `ar-web-bridge`

Fastest integration path. Best for standard sites that want resolved RFID/NFC events with minimal setup.

<script>
  window.AR_CONFIG = {
    gatewayUrl: "https://customer.example.com/personnel/resolve",
  };
</script>
<script src="https://cdn.lotix.co/ar-web-bridge/0.1.0/ar-web-bridge.bundle.js"></script>
<script>
  window.AR.on("rfid.personnel", (person) => {
    console.log("Resolved RFID person:", person);
  });

  async function startRfid() {
    await window.AR.startRfidScan();
  }
</script>

PWA / SPA: `ar-host-sdk`

Use when you want raw RFID EPC and NFC UID events, custom resolution, or a more structured client app.

<script src="https://cdn.lotix.co/ar-host-sdk/0.1.0/ar-host-sdk.js"></script>
<script>
  window.AR = window.ARHostSDK.createBridge();

  window.AR.on("rfid.epc", (epc) => {
    console.log("RFID EPC:", epc);
  });

  window.AR.on("nfc.uid", (uid) => {
    console.log("NFC UID:", uid);
  });
</script>

Bridge API Reference

The host bridge is exposed as window.AR. Use ar-web-bridge for standard websites or create the object manually with ARHostSDK.createBridge() for PWAs and SPAs.

Initialization

<script src="https://cdn.lotix.co/ar-host-sdk/0.1.0/ar-host-sdk.js"></script>
<script>
  window.AR = window.ARHostSDK.createBridge({
    resolveTag: window.ARHostSDK.createGatewayPersonnelResolver({
      gatewayUrl: "https://customer.example.com/personnel/resolve",
    }),
  });
</script>

startRfidScan()

Starts host-controlled RFID scan. The host emits rfid.epc and, if a resolver is configured, rfid.personnel.

async function startBatchScan() {
  statusLabel.textContent = "Starting RFID scan...";
  await window.AR.stopNfcScan();
  await window.AR.startRfidScan();
}

Related screens: RFID scan active, crew filled with members.

stopRfidScan()

Stops RFID scanning. Use this when switching flows or leaving a screen that should not keep scanning in the background.

async function stopBatchScan() {
  await window.AR.stopRfidScan();
  statusLabel.textContent = "RFID scan stopped.";
}

Related screens: crew reporting idle state.

startNfcScan()

Starts NFC scanning in the host app. The host emits nfc.uid and optionally nfc.personnel if resolution is enabled.

async function startPersonalScan() {
  statusLabel.textContent = "Waiting for NFC tag...";
  await window.AR.stopRfidScan();
  await window.AR.startNfcScan();
}

Typical use: personal scan or assigning an NFC tag to a member.

stopNfcScan()

Stops the NFC listener. Use it before changing from personal NFC flow to another flow or when a tag has already been captured.

async function finishPersonalScan() {
  await window.AR.stopNfcScan();
  statusLabel.textContent = "NFC scan completed.";
}

Typical use: after first accepted NFC read in a personal scan flow.

startQrScan()

Requests host-native QR scanning. Used for assigning RFID tags from printed QR labels or provisioning a client by QR payload.

async function scanMemberQr(member) {
  selectedMember = member;
  statusLabel.textContent = "Scan QR tag...";
  await window.AR.startQrScan();
}

Related screens: QR focus scan, tag assignment edit.

getHostInfo()

Requests current host info. The host responds through host.info with environment, version, or runtime capability data.

window.AR.on("host.info", (info) => {
  console.log("Host version:", info.version);
  console.log("Platform:", info.platform);
});

await window.AR.getHostInfo();

Use at app startup or after login if the web app needs host metadata.

on(eventName, handler)

Subscribes to host events. Returns an unsubscribe function.

const offRfid = window.AR.on("rfid.personnel", (person) => {
  addMemberToActiveCrew(person);
});

const offErrors = window.AR.on("ar.error", (error) => {
  showError(error.message);
});

// later
offRfid();
offErrors();

Supported events

Event Payload Use
rfid.epc Raw EPC string Low-level RFID processing in PWA/SPA flows
rfid.personnel "ID - Name" Resolved crew reporting flows
nfc.uid Raw NFC UID string Low-level NFC handling and custom resolution
nfc.personnel "ID - Name" Resolved personal scan flows
ar.error { source, code, message, timestamp } Host bridge, network, or resolution errors
host.info Host-defined object Environment, build, or runtime capability snapshot

Gateway resolver helper

ARHostSDK.createGatewayPersonnelResolver({ gatewayUrl }) creates a resolver that POSTs tag reads to the backend and returns a normalized string in the form ID - Name. 

const resolveTag =
  window.ARHostSDK.createGatewayPersonnelResolver({
    gatewayUrl: "https://customer.example.com/personnel/resolve",
  });

window.AR = window.ARHostSDK.createBridge({ resolveTag });

Usage Samples

Crew reporting flow

Start batch scan, append resolved members, stop automatically or manually, then report the crew.

window.AR.on("rfid.personnel", (label) => {
  addMemberToActiveCrew(label);
});

async function handleBatchScan() {
  await window.AR.stopNfcScan();
  await window.AR.startRfidScan();
}
crew-reporting-populated.png

Personal NFC flow

Use a personal scan for a single member and stop the other scan mode before activating NFC.

window.AR.on("nfc.personnel", (label) => {
  setSingleMemberResult(label);
});

async function handlePersonalScan() {
  await window.AR.stopRfidScan();
  await window.AR.startNfcScan();
}
crew-reporting-reported.png

Tag assignment by QR

Request QR scanning from the host app and use the QR result to assign an RFID tag to the selected member.

async function assignRfidFromQr(member) {
  selectedMember = member;
  await window.AR.startQrScan();
}

window.AR.on("qr.value", (value) => {
  assignRfidTagToMember(selectedMember, value);
});
qr-scan-focus.png

Example Screens

The screenshots below document the current pilot flow in the shared host app. Drop the matching image files into assets/screenshots/ to replace the placeholders.

crew-reporting-idle.png

Crew Reporting: idle state

Initial crew page with zero members, scanner controls, and bridge ready state.

rfid-connecting.png

RFID reader connection

Native loading state while the host app connects to the RFID reader.

rfid-waiting.png

RFID scan active

Batch scan highlighted with waiting status while RFID scanning is running.

crew-reporting-populated.png

Crew filled with members

Resolved RFID entries are added to the active crew and counted in the header.

crew-reporting-reported.png

Reported crews

Previously reported crews remain visible while the next active crew continues scanning.

tag-assignment-list.png

Tag assignment list

Member list used for selecting a person before assigning RFID or NFC tags.

tag-assignment-edit.png

Tag assignment edit

Edit panel for member ID, member name, and RFID / NFC assignment actions.

qr-scan-focus.png

QR focus scan

Native QR scanning view with a focus frame selecting a specific QR code in the camera feed.

crew-setup.png

Crew setup

Define crews, see current availability, and identify already reported crews.

user-menu-signout.png

User menu and sign-out

Current signed-in user name with menu access to sign-out flow.

microsoft-signout.png

Microsoft account sign-out

Microsoft account picker shown during the hosted sign-out sequence.

Provisioning Example

The shared pilot host app can also provision clients by QR payload.

{
  "clientId": "lotix-demo",
  "displayName": "Lotix Demo",
  "webUrl": "https://ar-demo.lotix.co",
  "environment": "pilot"
}